await dialogs mixin

dgk

Just sharing my mixin that makes using ‘versions’ of dialog plugin a bit easier by return a promise reply that can be awaited just add mixin and go… See the comments for use and a dialogtest method

// to use this mixin
// import and include it in mixins prop array of your component
// copy this html button somewhere in your component template
// <q-btn label="dialog test" color="secondary-1" text-color="secondary-1" @click="dialogtest()" />
// the button will call the dialogtest below
export default {
  data: function () {
    return {
    }
  },
  computed: {
  },
  watch: {
  },
  methods: {
    async dialogtest () {
      // (un)comment one or move of the tests below
      this.alert('Test Alert', 'All is good, no wait')
      console.log('confirmation', await this.confirm('Test Confirm', 'everything ok?', 'really?'))
      await this.alert('Test Alert', 'All is good,  wait for dismiss')
      console.log('prompt', await this.prompt('Test Prompt', 'What is your favorite color'))
    },
    async dialog (opts = {}) {
      return new Promise(resolve => {
        if (opts.prompt === true) opts.prompt = { model: '', type: 'text' }
        this.$q.dialog({
          title: opts.title || '',
          message: opts.msg || '',
          cancel: opts.cancel == null ? false : opts.cancel,
          persistent: opts.persist == null ? false : opts.persist,
          prompt: opts.prompt,
          ok: {
            label: opts.ok || 'ok'
          }
        })
          .onOk((res) => resolve(opts.confirm ? true : (res || '')))
          .onCancel(() => resolve(false))
      })
    },
    async confirm (title, msg, label) {
      return this.dialog({ title: title, msg: msg, confirm: true, cancel: true, persist: true, ok: label })
    },
    async alert (title, msg) {
      return this.dialog({ title: title, msg: msg })
    },
    async prompt (title, msg, prompt) {
      return this.dialog({ title: title, msg: msg, persist: true, prompt: prompt || true })
    }
  },
  created: function () {
  },
  beforeMount: function () {
  },
  mounted: function () {
  },
  beforeDestory: function () {
  }
} // export default

jitendra16

@dgk Great, I was looking for this solution for long.

dobbel

@dgk thanx!