Question - Determine which button was clicked then make ajax call.

[M-Abdullahi]

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))
            },

[ghost]

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)
      }
    })
  }
}

[M-Abdullahi]

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))
            },