open delete modal to delete notes files

confiture-web-app/src/components/audit/AuditGenerationHeader.vue

@@ -6,23 +6,27 @@ import NotesModal from "../../components/audit/NotesModal.vue";
 import { useDevMode } from "../../composables/useDevMode";
 import { useIsOffline } from "../../composables/useIsOffline";
 import { useNotifications } from "../../composables/useNotifications";
+import { FileErrorMessage } from "../../enums";
 import {
   useAccountStore,
   useAuditStore,
   useResultsStore,
   useSystemStore
 } from "../../store";
+import { AuditFile } from "../../types";
 import {
   captureWithPayloads,
   formatBytes,
   formatDate,
+  handleFileDeleteError,
   slugify
 } from "../../utils";
 import CopyIcon from "../icons/CopyIcon.vue";
 import { StatDonutTheme } from "../StatDonut.vue";
 import SummaryCard from "../SummaryCard.vue";
 import Dropdown from "../ui/Dropdown.vue";
 import AuditProgressBar from "./AuditProgressBar.vue";
+import DeleteFileModal from "./DeleteFileModal.vue";
 import DeleteModal from "./DeleteModal.vue";
 import DuplicateModal from "./DuplicateModal.vue";
 import SaveIndicator from "./SaveIndicator.vue";
@@ -214,6 +218,38 @@ onMounted(() => {
 
   observer.observe(scrollSentinelRef.value!);
 });
+
+const deleteFileModalRef = ref<InstanceType<typeof DeleteFileModal>>();
+const fileToDelete = ref<AuditFile>();
+const deleteFileErrorMessage = ref<FileErrorMessage | null>();
+
+function openDeleteFileModal(image: AuditFile) {
+  deleteFileModalRef.value?.show();
+  fileToDelete.value = image;
+}
+
+function handleDeleteFile() {
+  if (!fileToDelete.value) return;
+
+  auditStore
+    .deleteAuditFile(uniqueId.value, fileToDelete.value.id)
+    .then(() => {
+      deleteFileErrorMessage.value = null;
+    })
+    .catch(async (error) => {
+      deleteFileErrorMessage.value = await handleFileDeleteError(error);
+    })
+    .finally(() => {
+      deleteFileModalRef.value?.hide();
+      notesModal.value?.show();
+      notesModal.value?.fileUpload()?.onFileRequestFinished();
+    });
+}
+
+function handleCancelDeleteFile() {
+  deleteFileModalRef.value?.hide();
+  notesModal.value?.show();
+}
 </script>
 
 <template>
@@ -473,7 +509,16 @@ onMounted(() => {
   <NotesModal
     ref="notesModal"
     :is-loading="isNotesLoading"
+    :default-error-message="deleteFileErrorMessage"
     @confirm="updateAuditNotes"
+    @delete="openDeleteFileModal"
+  />
+
+  <DeleteFileModal
+    ref="deleteFileModalRef"
+    :mime-type="fileToDelete?.mimetype"
+    @confirm="handleDeleteFile"
+    @cancel="handleCancelDeleteFile"
   />
 </template>
 

confiture-web-app/src/components/audit/NotesModal.vue

@@ -7,27 +7,32 @@ import { useIsOffline } from "../../composables/useIsOffline";
 import { FileErrorMessage } from "../../enums";
 import { useAuditStore } from "../../store/audit";
 import { AuditFile, StoreName } from "../../types";
-import { handleFileDeleteError, handleFileUploadError } from "../../utils";
+import { handleFileUploadError } from "../../utils";
 import DsfrModal from "../ui/DsfrModal.vue";
 import FileUpload from "../ui/FileUpload.vue";
 import MarkdownHelpButton from "./MarkdownHelpButton.vue";
 import SaveIndicator from "./SaveIndicator.vue";
 
-defineProps<{
+const props = defineProps<{
   isLoading: boolean;
+  defaultErrorMessage?: FileErrorMessage | null;
 }>();
 
 const emit = defineEmits<{
   (e: "closed"): void;
   (e: "confirm", payload: string): void;
+  (e: "delete", payload: AuditFile): void;
 }>();
 
 defineExpose({
   show: () => modal.value?.show(),
-  hide: () => modal.value?.hide()
+  hide: () => modal.value?.hide(),
+  fileUpload: () => fileUpload.value
 });
 
-const errorMessage: Ref<FileErrorMessage | null> = ref(null);
+const errorMessage: Ref<FileErrorMessage | null> = ref(
+  props.defaultErrorMessage ?? null
+);
 const fileUpload = ref<InstanceType<typeof FileUpload>>();
 
 const auditStore = useAuditStore();
@@ -58,17 +63,7 @@ function handleUploadFile(file: File) {
 }
 
 function handleDeleteFile(file: AuditFile) {
-  auditStore
-    .deleteAuditFile(uniqueId.value, file.id)
-    .then(() => {
-      errorMessage.value = null;
-    })
-    .catch(async (error) => {
-      errorMessage.value = await handleFileDeleteError(error);
-    })
-    .finally(() => {
-      fileUpload.value?.onFileRequestFinished();
-    });
+  emit("delete", file);
 }
 </script>