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
