No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    await dialogs mixin

    Show & Tell
    4
    4
    673
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dgk last edited by

      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
      
      J dobbel 2 Replies Last reply Reply Quote 2
      • J
        jitendra16 @dgk last edited by

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

        1 Reply Last reply Reply Quote 0
        • dobbel
          dobbel @dgk last edited by

          @dgk thanx!

          1 Reply Last reply Reply Quote 0
          • L
            lleiva last edited by 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

            1 Reply Last reply Reply Quote 2
            • First post
              Last post