First of all, a shout out to Yoav the developer of React Uploady. It's a very helpful library with all kinds of great fancy features (chunked uploads, upload progress hooks, etc).
I have a question about using the asUploadButton hook. Here's my use case: within my app, a user can choose from several places to upload a batch to. This is done by selecting a global dropdown that specifies the upload destination. Since user error is a real thing, I need to show them a confirmation screen. This is easy to do the first time they hit the "upload" screen: a state variable keeps track of whether they have confirmed they're in the right place, conditionally rendering either the confirmation component (if they haven't confirmed), or the Uploady component (custom UploadButton) if they have confirmed.
But the requirement is that we show the confirmation every time. Once a user has uploaded a batch, they should still be shown the confirmation if they click on that custom UploadButton again. I tried passing an onClick into the asUploadButton component, but that callback is actually called after showFileUpload - and I want to show an interstitial modal once the button is clicked but before showFileUpload is called. Is there any hook to call a method before showFileUpload? Or am I approaching this completely wrong? Advice of any kind is very appreciated.
as answered here on the react-uploady discussions page:
In your case, I think a custom button will make more sense. In the end, asUploadButton is a very simple component that mainly does one thing and that is, call showFileUpload available from the UploadyContext.
You could create your button component that implements the logic (show confirmation) and when user approves calls the showFileUpload.
You get access to the method using:
import { useUploady} from "#rpldy/uploady"
//...in your component:
const { showFileUpload } = useUploady();
const onClick = () => {
//custom logic
showFileUpload();
};
Related
I have two components, component A and component B
In Component A , i have two buttons
Like in picture, I have Start and Stop buttons. If I click on Start button Stop button will be enabled and Start will be disabled.
Now my problem is if I click on Start button and If I navigate to some other page, and if I comeback to page, Start button is getting enabled and Stop button is getting disabled.
Expectation is if I click on Start button, it should still be in disabled mode and Stop button should be on enabled mode when navigated to another component and come back to this component
<button #click="start" class="start-button" icon-left="play" :disabled="!allowStart">Start</button>
<button #click="stop" class="stop-button" icon-left="stop" :disabled="allowStart">Stop</button>
data() {
return {
allowStart: true,
};
}
start() {
this.allowStart = false;
}
stop() {
this.allowStart = true;
}
Can anyone help me on this. appreciated the help and response in advance.
It sounds like the component is being destroyed and re-created when you navigate away and back. In this case, there is no way for the component to remember what the value of allowStart was.
Either you have to re-design the component architecture so that this particular component persists when you are navigating, or you need to use some kind of global state management system. The best option would probably be by using vuex. If you use vuex to store the state of allowStart, then when the component is re-created, you can read the value of the state.
If for some reason you don't want to use vuex, you could also use the browser's localStorage
I'm developing a testing tool using Cypress for a webpage that is currently live. The problem is that sometimes I get a modal showing the new features, events, etc.; and this breaks the remaining tests.
I already tried to close the modal as soon as I login (which is one of the previous tests), but this leads the login test to fail. I was wondering if there is a way to make the test ignore the last 2 instructions from the code below, wether or not they are visible.
it('Visits habitica and logins correctly', function () {
cy.visit('https://habitica.com/login')
cy.get('form').find('input[id="usernameInput"]').click().type("username")
cy.get('form').find('input[id="passwordInput"]').click().type("password")
cy.get('.btn-info').click()
cy.get('.modal-dialog').find('button[class="btn btn-warning"]').click()
cy.get('.start-day').find('button').click({force:true})
})
Is it a browser modal or a modal developed by your team? In the first case Cypress should automatically accept the modal. In the second case you can work around it by only accepting it when it is visible. You can do that by adding this to your script:
cy.get('body').then($body => {
if ($body.find('IDENTIFIER_FOR_THE_MODAL').length === 1) {
cy.get('IDENTIFIER_TO_CLOSE_THE_MODAL')
.click()
}
})
It searches within the body for the modal (ofcourse you have to change IDENTIFIER_FOR_THE_MODAL to the correct identifier). If it does find the modal the script searches for the IDENTIFIER_TO_CLOSE_THE_MODAL to close the modal and clicks it.
Possible the action to close the modal has to be slightly different in your case, but the syntax will work.
I am new to angular 4. I have multiple tabs in one page, when I switch from one tab to another or to other nav bar, my requirement is to provide a popup dialog which asked "are you sure to move ?" and when I pressed ok , it should go to desired tab/nav (last clicked url) otherwise it should remain at the same page.
I have used CanDeactivateGuard , to popup the dialog before i leave the tab/switch to other nav bar { path: 'exception/:id', component: LpExceptionComponent , canDeactivate: [CanDeactivateGuard]}
Now I am not sure how to redirect to desired tab on pressing ok button?
how I will get the last clicked url here?
You probably don't even need to know the url. You can just return a promise from the canDeactivate function, and once the user clicks ok, you resolve the promise to true and the transition continues automatically. Observables are also supported if you prefer that over promises.
But if you do need to know the state that the user is trying to go to, then it's provided as the fourth parameter to the canDeactivate function (the first three parameters being component, currentRoute, and currentState)
See documentation here: https://angular.io/api/router/CanDeactivate
Title is probably a little messy. Basically what I'm trying to do is to create a custom function that will modify an object properties, then return that object, and then call a function.
A little background on what I'm doing : Trying my best with the Zendesk API to use a web widget on my webpage. Basically this web widget is configured to be a HelpCenter on startup, which then shows a button for either live chat or email, depending on the state. The main property in question here is called 'suppress' which disables one of the widget pages (chat, email & helpCenter). And my goal is to make that custom function 'suppress' 2 of the 3 widget pages so it only shows one. Then a API func called zE.activate() would open up the widget.
I know this is a lot of text, let me show you the code I've got so far :
<script>
function setChatPopOutProps(window) {
window.zESettings = {
webWidget: {
contactForm: {
suppress: true
},
helpCenter: {
suppress: true
}
}
};
return window.zESettings;
};
function chatPopOut() {
setChatPopOutProps(window);
zE.activate();
};
</script>
Now when I click on the button that has chatPopOut() assigned, the zE.activate() works since it opens up the widget, but basically the setChatPopOutProps(window) didn't seem to work.
I also tried the following :
Not returning window or window.zESettings
Putting everything under a single function by putting zE.activate() at the end of zESettings or just after the return window or window.zESettings
If you need to see the widget in action to have an idea, you can see it right here. Click on the green button on the bottom right, type anything, and you'll see the contact form button pop up. This button changes for a chat button when a live chat agent is available.
Now I know this is something that I should normally work out with Zendesk directly, which I tried, but they told me that there's nothing that can do what I'm trying to accomplish, but I really feel like this has something to do with the way I'm doing things in javascript and not the way the API is built..
Does anyone have an idea ? I would really appreciate it.
P.S. This is my 2nd post, so I apologize in advance for mistakes I probably made in this question.
Sadly, it turns out that what you are trying to accomplish just isn't possible. As the zE.settings get applied when the widget is first initialized, so there is no way to dynamically alter the widget settings without doing an action such as refreshing the page and re-initializing the widget. As far I can see from your code, I dont think you want to refresh the page everytime, and reinitialize the widget just to apply those settings that you listed above.
I have the 2 sets of code:
Saves the data
myapp.activeDataWorkspace.ProjectHandlerData.saveChanges();
2.Refreshes the page
window.location.reload();
is there a way to make both of these work together on one button, as currently when i click save, the browser recognizes the changes and the (are you sure you want to leave the page) message or something along those lines pops up..
cheers
This is for the HTML client, right?
Assuming that is the case:
saveChanges() is an asynchronous operation, so you'd want to do:
myapp.activeDataWorkspace.ProjectHandlerData.saveChanges().then(function () {
window.location.reload();
});
That way it will wait until it is finished saving the changes before it reloads the screen.
However, there is a smoother way to do it, at least from the user perspective it's smoother.
On the edit screen, leave the Save method out, let LightSwitch handle that. When the user clicks save, it will close the edit screen, and go back to where they were before. Using the options parameter of the showScreen method, we can change that behavior.
Change the method that calls the edit screen like this:
myapp.showEditProject(screen.Project, {
afterClosed: function (editScreen) {
myapp.showViewProject(editScreen.Project);
}
});
This way, after the edit screen is closed, and it has handled the save changes operation for you, the application will automatically navigate to the details view screen of the recently edited item.
If you are instead wanting to refresh the browse screen after adding a new entity:
myapp.showAddEditProject(null, {
beforeShown: function (addEditScreen) {
addEditScreen.Project = new myapp.Project();
},
afterClosed: function () {
screen.Projects.load();
}
});
Those two options, beforeShown and afterClosed, give you a lot of really cool abilities to influence the navigation in your application.
I have learnt that you can save from a add/edit window, and reload the main page you are going back to by doing the following:
For Example: (adding an order to an order screen)
click on your button to add the order
enter the details required.
hit your custom save button with your validation included.
before your commitChanges(); write in the following line: screen.OrderLine.OrderTable.details.refresh(); "This needs applying to your scenario"
when you return to your screen your details should have been updated (for example the total value now displays the correct value in my case)
hope this helps...