Question - Determine which button was clicked then make ajax call.
M-Abdullahi opened this issue · comments
Hi. Thank you for making this great notification package.
I am comfortable in using the package to display notifications but having a hard time figuring out how to use it a dialogue option.
I have made a wrapper around the library as shown below
const toast = {
success: (message, title = 'Success') => {
return iziToast.success({
title: title,
message: message,
transitionIn: 'fadeIn',
displayMode: 1,
icon: 'icon-star-empty3',
displayMode: 'replace',
layout: 1,
});
},
question: (message, title = 'Question') => {
return iziToast.question({
title: title,
message: message,
timeout: 20000,
progressBar: false,
close: false,
overlay: true,
displayMode: 'once',
id: 'question',
position: 'center',
transitionIn: 'fadeIn',
transitionOut: 'fadeOut',
layout: 1,
buttons: [
['<button><b>YES</b></button>', function (instance, toast, button, e, inputs) {
console.info(button);
console.info(e);
instance.hide({transitionOut: 'fadeOut'}, toast, 'button');
}, false],
['<button>NO</button>', function (instance, toast, button, e) {
console.info(button.innerText);
instance.hide({transitionOut: 'fadeOut'}, toast, 'button');
}]
],
})
},
};
export default window.toast = toast;
Then calling it from my vue component as shown below
deleteCategory(rowData, rowIndex) {
toast.question('Are you sure you want to delete the category?')
// HOW DO I ACCESS THE SELECTED OPTION & PROCEED ONLY IF THE YES BUTTON
// WAS CLICKED
httpClient.delete('/accounting/customer-categories/' + rowData.id)
.then(response => {
toast.info(response.data.id + ' category was deleted')
this.$refs.scheme_table.$refs.vuetable.reload();
})
.catch(error => toast.error(error.response.data.message))
},
You can wrap it in a promise and wait for the answer with onClosing
hook:
question: (message, title = 'Question') => {
return new Promise((resolve) => {
iziToast.question({
onClosing(_instance, _toast, closedBy) {
resolve(closedBy)
}
})
}
}
thank you @andreiscripcaru22. Your solution brought me back to the promise option that I was thinking about but didn't know how to implement. I decided to resolve the promise when the OK button was pressed shown below.
question: (message, title = 'Question') => {
return new Promise((resolve => {
iziToast.question({
title: title,
message: message,
timeout: 20000,
progressBar: false,
close: false,
overlay: true,
buttons: [
['<button><b>Confirm</b></button>', function (instance, toast, button, e, inputs) {
instance.hide({transitionOut: 'fadeOut'}, toast, 'button');
resolve();
}, false],
['<button>NO</button>', function (instance, toast, button, e) {
instance.hide({transitionOut: 'fadeOut'}, toast, 'button');
}]
],
onClosing(_instance, _toast, closedBy) {
// console.info('closedBy: ' + closedBy);
}
})
}));
}
Then calling it from my component as shown below
changeInvoiceDate() {
this.dateChangeForm.post('/accounting/invoices/' + this.invoiceid + '/change_date')
.then(() => {
this.showDateChangeForm = false;
toast.success('Invoice date was updated');
this.getInvoice();
})
.catch(error => toast.error(error.response.data.message))
},