68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import ConfirmDialog from "@/components/ui/ConfirmDialog.vue";
|
|
import { createApp } from "vue";
|
|
|
|
interface ConfirmDialogOptions {
|
|
title: string;
|
|
content: string;
|
|
}
|
|
type ResolveReject = (v?: unknown) => void;
|
|
|
|
// inspired by https://stackoverflow.com/a/69773076/6071058
|
|
/*
|
|
* We need a separate service for the ConfirmDialog, because we don't want the
|
|
* boilerplate of including the component and the handling of the promises inside
|
|
* of every component where we need a confirm dialog.
|
|
*
|
|
* With this service, one can simply import the dialog and use it, e.g.
|
|
*
|
|
import dialog from "@/utils/confirm-dialog";
|
|
const someMethodToConfirm = async () => {
|
|
const options = {
|
|
title: 'Dialog Title',
|
|
content: 'Do you really wanna?'
|
|
};
|
|
try {
|
|
await dialog.confirm(options);
|
|
doSomethingWhenConfirmed();
|
|
} catch (e) {
|
|
log.debug("rejected");
|
|
doSomethingWhenRejected()
|
|
}
|
|
};
|
|
|
|
*/
|
|
export default {
|
|
confirm(options: ConfirmDialogOptions) {
|
|
const mountEl = document.createElement("div");
|
|
document.body.appendChild(mountEl);
|
|
|
|
let _resolve: ResolveReject, _reject: ResolveReject;
|
|
|
|
const promise = new Promise((resolve, reject) => {
|
|
_resolve = resolve;
|
|
_reject = reject;
|
|
});
|
|
|
|
const cleanUp = () => {
|
|
mountEl?.parentNode?.removeChild(mountEl);
|
|
dialog.unmount();
|
|
};
|
|
|
|
const dialog = createApp(ConfirmDialog, {
|
|
isOpen: true,
|
|
title: options.title,
|
|
content: options.content,
|
|
onClose() {
|
|
cleanUp();
|
|
_reject();
|
|
},
|
|
onConfirm() {
|
|
cleanUp();
|
|
_resolve();
|
|
},
|
|
});
|
|
dialog.mount(mountEl);
|
|
return promise;
|
|
},
|
|
};
|