Dialog Plugin with Promise

[snowdrop]

Good day, I’m currently playing with dialog plugin and seems good to me for just simple prompt. I’m wondering if the plugin can also return a Promise, as checking the documentation does not suggest so to take advantage of async-await function of javascript. It would be cool if it can be integrated as using callbacks sometimes reduces the readability of the code if you have a lot of branching in your code. Thanks!

[s.molinari]

You only put in callbacks (single functions) for the the chained methods or “options” given to you by the dialog’s returned object (onOk, onCancel, onDismiss) and only for those you need to use. Thus, the code won’t (or shouldn’t) get so complicated it becomes hard to read. Maybe I’m misunderstanding your needs, but it sounds like your possibly overcomplicating the plugin.

If you need to do more with dialogs, you’re probably better off using the QDialog component.

Scott

[snowdrop]

@s-molinari Yes, I’ve resorted to QDialog component as Dialog plugin is not sufficient for my implementation. Thank you for your response.

[jraez]

One thing that can help is to create global Vue mixin in boot file.
https://quasar.dev/quasar-cli/cli-documentation/boot-files

export default async ({ Vue }) => {
  // Inject quasar extension into the vue
  Vue.mixin({
    methods: {
      dialog (options) {
        return new Promise((resolve, reject) => {
          this.$q.dialog(options).onOk(() => {
            resolve()
          }).onCancel(() => {
            reject()
          })
        })
      }
    }
  })
}

This way, in any component you have dialog method available that is a promise. you can async-await for. I think you have to tune it to suit your need but it can be a good start.