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!

[lleiva]

Based on your mixin, i’ve done a service that I can import in my vue.

_AppDialogService :

import { Dialog } from "quasar";

class _AppDialogService {
  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" };
      Dialog.create({
        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
    });
  }
}

export default new _AppDialogService();

Usage in a vue file:

<script>
import _AppDialogService from "../services/_appDialogService";

dummyFunction: async function() {
      try {
        ....
        if (await _AppDialogService.confirm("Title", "Ok/Nok", "Press ok")) {
          // Code when OK
        } else {
          // Code when NOK
        }
      } catch (error) {
        // Code when something Wrong
      }
    },

...
...
</script>

Cheers