Move confirm dialog to its own service

client/src/components/ui/ConfirmDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog :open="isOpen" class="relative z-50" @close="close">
+  <Dialog :open="true" class="relative z-50" @close="close">
     <div class="fixed inset-0 bg-black/30" aria-hidden="true"></div>
     <div class="fixed inset-0 flex items-center justify-center p-4">
       <DialogPanel class="w-full max-w-2xl bg-white pt-8">

client/src/pages/learningPath/circlePage/DocumentSection.vue

@@ -48,29 +48,6 @@
       />
     </template>
   </ItModal>
-  <ItModal v-model="showDeleteModal">
-    <template #title>{{ $t("circlePage.documents.deleteModalTitle") }}</template>
-    <template #body>
-      <p
-        class="mb-4"
-        v-html="$t('circlePage.documents.deleteModalWarning', { title: 'bla' })"
-      />
-    </template>
-
-    <template #footer>
-      <div class="flex flex-row-reverse gap-x-4 border-t border-t-gray-500 p-4">
-        <button class="btn-primary">Löschen</button>
-        <button class="btn-secondary">Abbrechen</button>
-      </div>
-    </template>
-  </ItModal>
-  <ConfirmDialog
-    :is-open="showConfirm"
-    :title="$t('circlePage.documents.deleteModalTitle')"
-    :content="$t('circlePage.documents.deleteModalWarning', { title: documentName })"
-    @close="close"
-    @confirm="confirm"
-  />
   <div
     v-if="courseSessionsStore.canUploadCircleDocuments"
     class="mt-8 flex flex-col gap-y-4 border p-6"
@@ -94,10 +71,13 @@ import { uploadCircleDocument } from "@/services/files";
 import { useCircleStore } from "@/stores/circle";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { CircleDocument, DocumentUploadData } from "@/types";
+import dialog from "@/utils/confirm-dialog";
 import log from "loglevel";
 import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import DocumentListItem from "./DocumentListItem.vue";
 import DocumentUploadForm from "./DocumentUploadForm.vue";
+
 const courseSessionsStore = useCourseSessionsStore();
 const circleStore = useCircleStore();
 const showUploadModal = ref(false);
@@ -110,33 +90,20 @@ const dropdownLearningSequences = computed(() =>
     name: sequence.title,
   }))
 );
+
 // confirm dialog
-// todo: refactor to own service
+const { t } = useI18n();
-type ResolveReject = (v: unknown) => void;
+const deleteDocument = async (doc: CircleDocument) => {
-const showConfirm = ref(false);
+  const options = {
-const confirm = ref<ResolveReject | undefined>();
+    title: t("circlePage.documents.deleteModalTitle"),
-const close = ref<ResolveReject | undefined>();
+    content: t("circlePage.documents.deleteModalWarning", { title: doc.name }),
-const documentName = ref("");
+  };
-const deleteDocument = (doc: CircleDocument) => {
+  try {
-  showConfirm.value = true;
+    await dialog.confirm(options);
-  documentName.value = doc.name;
+    courseSessionsStore.removeDocument(doc.id);
-  const modalDialog = new Promise((resolve, reject) => {
+  } catch (e) {
-    confirm.value = resolve;
+    log.debug("rejected");
-    close.value = reject;
+  }
-  });
-  modalDialog
-    .then(
-      () => {
-        courseSessionsStore.removeDocument(doc.id);
-        showConfirm.value = false;
-      },
-      () => {
-        showConfirm.value = false;
-      }
-    )
-    .finally(() => {
-      documentName.value = "";
-    });
 };
 watch(showUploadModal, () => (showUploadErrorMessage.value = false));
 async function uploadDocument(data: DocumentUploadData) {

client/src/utils/confirm-dialog.ts

@@ -0,0 +1,45 @@
+import ConfirmDialog from "@/components/ui/ConfirmDialog.vue";
+import { createApp } from "vue";
+
+interface ConfirmDialogOptions {
+  title: string;
+  content: string;
+}
+type ResolveReject = (v?: unknown) => void;
+
+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() {
+        console.log("close");
+        cleanUp();
+        _reject();
+      },
+      onConfirm() {
+        console.log("confirm");
+        cleanUp();
+        _resolve();
+      },
+    });
+    dialog.mount(mountEl);
+    return promise;
+  },
+};