Ajoute une modale de confirmation avant de supprimer un fichier (#788)

* add confirm modal before deleting example

* open delete modal to delete notes files

* force focusing button when closing notes modal

* Revert "force focusing button when closing notes modal"

This reverts commit 7d3e913.

* Revert "open delete modal to delete notes files"

This reverts commit 87c47a5.

* make confirm button a danger button

* make content in modal computed props

* update changelog

* typo

CHANGELOG.md

@@ -6,7 +6,8 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 ### Nouvelles fonctionnalités 🚀
 
-- Le champs "Erreur et recommandation" est automatiquement focus lorsque le critère est défini comme "Non conforme" ([#766](https://github.com/DISIC/Ara/pull/766))
+- Ajoute une modale de confirmation lors de la suppression d’une pièce jointe sur un critère "Non conforme" ([#788](https://github.com/DISIC/Ara/pull/788))
+- Met automatiquement le focus sur le champs "Erreur et recommandation" lorsque qu’un critère est défini comme "Non conforme" ([#766](https://github.com/DISIC/Ara/pull/766))
 
 ## 24/07/2024
 

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

@@ -25,6 +25,7 @@ import CriteriumCompliantAccordion from "./CriteriumCompliantAccordion.vue";
 import CriteriumNotApplicableAccordion from "./CriteriumNotApplicableAccordion.vue";
 import CriteriumNotCompliantAccordion from "./CriteriumNotCompliantAccordion.vue";
 import CriteriumTestsAccordion from "./CriteriumTestsAccordion.vue";
+import DeleteFileModal from "./DeleteFileModal.vue";
 
 const store = useResultsStore();
 const auditStore = useAuditStore();
@@ -98,14 +99,24 @@ function handleUploadExample(file: File) {
     });
 }
 
-function handleDeleteExample(image: AuditFile) {
+const deleteFileModalRef = ref<InstanceType<typeof DeleteFileModal>>();
+const fileToDelete = ref<AuditFile>();
+
+function openDeleteFileModal(image: AuditFile) {
+  deleteFileModalRef.value?.show();
+  fileToDelete.value = image;
+}
+
+function handleDeleteExample() {
+  if (!fileToDelete.value) return;
+
   store
     .deleteExampleImage(
       props.auditUniqueId,
       props.page.id,
       props.topicNumber,
       props.criterium.number,
-      image.id
+      fileToDelete.value.id
     )
     .then(() => {
       errorMessage.value = null;
@@ -115,6 +126,7 @@ function handleDeleteExample(image: AuditFile) {
     })
     .finally(() => {
       criteriumNotCompliantAccordion.value?.onFileRequestFinished();
+      deleteFileModalRef.value?.hide();
     });
 }
 
@@ -276,10 +288,17 @@ const isOffline = useIsOffline();
       @update:comment="updateResultComment($event, 'notCompliantComment')"
       @update:user-impact="updateResultImpact($event)"
       @upload-file="handleUploadExample"
-      @delete-file="handleDeleteExample"
+      @delete-file="openDeleteFileModal"
       @update:quick-win="updateQuickWin"
     />
 
+    <DeleteFileModal
+      ref="deleteFileModalRef"
+      :mime-type="fileToDelete?.mimetype"
+      @confirm="handleDeleteExample"
+      @cancel="deleteFileModalRef?.hide()"
+    />
+
     <!-- TESTS + METHODO -->
     <CriteriumTestsAccordion
       v-if="!filtersStore.hideTestsAndReferences"

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

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import DsfrModal from "../ui/DsfrModal.vue";
+
+const modal = ref<InstanceType<typeof DsfrModal>>();
+const isOpen = ref(false);
+
+const props = defineProps<{
+  mimeType?: string;
+}>();
+
+defineEmits(["confirm", "cancel"]);
+
+defineExpose({
+  show: () => {
+    isOpen.value = true;
+    modal.value?.show();
+  },
+  hide: () => modal.value?.hide(),
+  isOpen
+});
+
+const isImage = computed(() => {
+  return props.mimeType && props.mimeType.startsWith("image");
+});
+
+const title = computed(() => {
+  return isImage.value
+    ? "Voulez-vous supprimer cette image ?"
+    : "Voulez-vous supprimer ce fichier ?";
+});
+
+const description = computed(() => {
+  return isImage.value
+    ? "Cette image sera définitivement supprimée de votre audit."
+    : "Ce fichier sera définitivement supprimé de votre audit.";
+});
+
+const confirm = computed(() => {
+  return isImage.value ? "Supprimer l’image" : "Supprimer le fichier";
+});
+</script>
+
+<template>
+  <DsfrModal
+    id="delete-file-modal"
+    ref="modal"
+    aria-labelledby="delete-file-modal-title"
+    @closed="isOpen = false"
+  >
+    <div class="fr-container fr-container--fluid fr-container-md">
+      <div class="fr-grid-row fr-grid-row--center">
+        <div class="fr-col-12 fr-col-md-8">
+          <div class="fr-modal__body">
+            <div class="fr-modal__header">
+              <button
+                class="fr-btn--close fr-btn"
+                aria-controls="delete-file-modal"
+              >
+                Fermer
+              </button>
+            </div>
+            <div class="fr-modal__content">
+              <h1 id="delete-file-modal-title" class="fr-modal__title">
+                {{ title }}
+              </h1>
+              <p>{{ description }}</p>
+            </div>
+            <div class="fr-modal__footer">
+              <ul
+                class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"
+              >
+                <li>
+                  <button
+                    class="fr-btn danger-button"
+                    @click="$emit('confirm')"
+                  >
+                    {{ confirm }}
+                  </button>
+                </li>
+                <li>
+                  <button
+                    class="fr-btn fr-btn--secondary"
+                    @click="$emit('cancel')"
+                  >
+                    Annuler
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DsfrModal>
+</template>