Add 2 types of confirm modal

Still need to be refactored into one

client/src/components/ui/ConfirmDialog.vue

@@ -0,0 +1,34 @@
+<template>
+  <Dialog :open="isOpen" 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">
+        <div class="px-8 pb-4">
+          <DialogTitle class="relative mb-8 flex flex-row">{{ title }}</DialogTitle>
+          Hallo Velo
+        </div>
+        <div class="flex flex-row-reverse gap-x-4 border-t border-t-gray-500 p-4">
+          <button class="btn-primary" @click="confirm">Löschen</button>
+          <button class="btn-secondary" @click="close">Abbrechen</button>
+        </div>
+      </DialogPanel>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
+
+defineProps<{
+  isOpen: boolean;
+  title: string;
+}>();
+
+const emit = defineEmits(["confirm", "close"]);
+const close = () => {
+  emit("close");
+};
+const confirm = () => {
+  emit("confirm");
+};
+</script>

client/src/components/ui/ItModal.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Dialog, DialogDescription, DialogPanel, DialogTitle } from "@headlessui/vue";
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
 
-interface Props {
+export interface Props {
   modelValue: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   modelValue: false,
 });
 
@@ -20,20 +20,22 @@ function setIsOpen(value: boolean) {
   <Dialog :open="modelValue" class="relative z-50" @close="setIsOpen">
     <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 px-8 pb-4 pt-8">
+      <DialogPanel class="w-full max-w-2xl bg-white pt-8">
-        <DialogTitle class="relative mb-8 flex flex-row">
+        <div class="px-8 pb-4">
-          <slot name="title"></slot>
+          <DialogTitle class="relative mb-8 flex flex-row">
-          <button
+            <slot name="title"></slot>
-            type="button"
+            <button
-            class="absolute right-4 h-4 w-4 cursor-pointer"
+              type="button"
-            @click="setIsOpen(false)"
+              class="absolute right-4 h-4 w-4 cursor-pointer"
-          >
+              @click="setIsOpen(false)"
-            <it-icon-close></it-icon-close>
+            >
-          </button>
+              <it-icon-close></it-icon-close>
-        </DialogTitle>
+            </button>
-        <DialogDescription></DialogDescription>
+          </DialogTitle>
 
-        <slot name="body"></slot>
+          <slot name="body"></slot>
+        </div>
+        <slot name="footer" />
       </DialogPanel>
     </div>
   </Dialog>

client/src/locales/de.json

@@ -8,6 +8,8 @@
       "chooseLearningSequence": "Bitte wähle eine Lernsequenz aus",
       "chooseName": "Bitte wähle einen Namen",
       "chooseSequence": "Wähle eine Lernsequenz aus",
+      "deleteModalTitle": "Unterlage löschen",
+      "deleteModalWarning": "Willst du die Unterlage <strong>\"{title}\"</strong> löschen?<br> Diese Aktion ist nicht umkehrbar.",
       "expertDescription": "Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.",
       "fileLabel": "Datei",
       "maxFileSize": "Maximale Dateigrösse: 20 MB",

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

@@ -48,6 +48,28 @@
       />
     </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="Heyho"
+    @close="close"
+    @confirm="confirm"
+  />
   <div
     v-if="courseSessionsStore.canUploadCircleDocuments"
     class="mt-8 flex flex-col gap-y-4 border p-6"
@@ -65,6 +87,7 @@
 </template>
 
 <script setup lang="ts">
+import ConfirmDialog from "@/components/ui/ConfirmDialog.vue";
 import ItModal from "@/components/ui/ItModal.vue";
 import { uploadCircleDocument } from "@/services/files";
 import { useCircleStore } from "@/stores/circle";
@@ -77,6 +100,7 @@ import DocumentUploadForm from "./DocumentUploadForm.vue";
 const courseSessionsStore = useCourseSessionsStore();
 const circleStore = useCircleStore();
 const showUploadModal = ref(false);
+const showDeleteModal = ref(false);
 const showUploadErrorMessage = ref(false);
 const isUploading = ref(false);
 const dropdownLearningSequences = computed(() =>
@@ -85,6 +109,32 @@ const dropdownLearningSequences = computed(() =>
     name: sequence.title,
   }))
 );
+type ResolveReject = (v: any) => void;
+const showConfirm = ref(false);
+const confirm = ref<ResolveReject | undefined>();
+const close = ref<ResolveReject | undefined>();
+const deleteDocument = (doc: CircleDocument) => {
+  // courseSessionsStore.removeDocument(doc.id);
+  showConfirm.value = true;
+  const modalDialog = new Promise((resolve, reject) => {
+    confirm.value = resolve;
+    close.value = reject;
+  });
+  modalDialog
+    .then(
+      () => {
+        console.log("confirmed");
+        courseSessionsStore.removeDocument(doc.id);
+      },
+      () => {
+        console.log("just closing");
+      }
+    )
+    .finally(() => {
+      console.log("closing");
+      showConfirm.value = false;
+    });
+};
 watch(showUploadModal, () => (showUploadErrorMessage.value = false));
 async function uploadDocument(data: DocumentUploadData) {
   isUploading.value = true;