Refactor Sur les differents boutons d'actions

src/components/ButtonsActions/BtnArchive.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-tooltip v-if="canArchive(demande)" text="Archiver">
+    <template v-slot:activator="{ props }">
+      <v-btn v-bind="props" variant="plain" icon="mdi-archive"
+             @click="archiverDemande(demande)"
+             aria-label="Archiver"></v-btn>
+    </template>
+  </v-tooltip>
+</template>
+<script setup>
+import itemService from '@/service/ItemService';
+
+const emits = defineEmits(['clicked', 'onError']);
+const props = defineProps({
+  demande: {
+    required: true
+  }
+});
+
+//Action d'archivage ou suppression selon état de la demande dans le TDB
+function canArchive(item) {
+  return item.etatDemande === 'Terminé';
+}
+
+//Archivage d'une demande
+function archiverDemande(item) {
+  itemService.archiverDemande(item.type, item.id)
+      .then(() => {
+        emits('clicked');
+      })
+      .catch(error => {
+        emits('onError', error);
+      });
+}
+
+</script>

src/components/ButtonsActions/BtnRestore.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-tooltip v-if="demande.etatDemande === 'Archivé'" text="Restaurer">
+    <template v-slot:activator="{ props }">
+      <v-btn v-bind="props" variant="plain" icon="mdi-package-up"
+             @click="restaurerDemande(demande)"></v-btn>
+    </template>
+  </v-tooltip>
+</template>
+<script setup>
+import itemService from '@/service/ItemService';
+
+const emits = defineEmits(['clicked', 'onError']);
+const props = defineProps({
+  demande: {
+    required: true
+  }
+});
+
+function restaurerDemande(item) {
+  itemService.restaurerDemande(item.id, item.type)
+    .then(() => {
+      emits('clicked');
+    })
+    .catch(error => {
+      emits('onError', error);
+    });
+}
+
+</script>

src/components/ButtonsActions/BtnStop.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-tooltip v-if="canStop(demande)" text="Annuler">
+    <template v-slot:activator="{ props }">
+      <v-btn v-bind="props" icon="mdi-stop" variant="plain" @click="dialog.value = true;">
+      </v-btn>
+    </template>
+  </v-tooltip>
+  <dialog-confirmation-stop v-model="dialog" :id="demande.id" @clicked="emits('clicked')" @on-error="throwError">
+  </dialog-confirmation-stop>
+</template>
+<script setup>
+import DialogConfirmationStop from '@/components/Dialog/DialogConfirmationStop.vue';
+import { ref } from 'vue';
+
+const emits = defineEmits(['clicked', 'onError']);
+const props = defineProps({
+  demande: {
+    required: true
+  }
+});
+const dialog = ref(false);
+
+function canStop(item) {
+  return item.etatDemande === 'En cours de traitement' || item.etatDemande === 'En attente';
+}
+
+function throwError(error) {
+  emits('onError', error);
+}
+</script>

src/components/ButtonsActions/BtnSuppression.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-tooltip v-if="canCancel(demande)" text="Supprimer">
+    <template v-slot:activator="{ props }">
+      <v-btn v-bind="props" icon="mdi-delete" variant="plain" @click="dialog = true;">
+      </v-btn>
+    </template>
+  </v-tooltip>
+  <dialog-suppression v-model="dialog" :demande="demande" @supp="emits('clicked')" @on-error="throwError">
+  </dialog-suppression>
+</template>
+<script setup>
+import { ref } from 'vue';
+import DialogSuppression from '@/components/Dialog/DialogSuppression.vue';
+
+const emits = defineEmits(['clicked', 'onError']);
+const props = defineProps({
+  demande: {
+    required: true,
+  }
+});
+const dialog = ref(false);
+
+function canCancel(item) {
+  return item.etatDemande !== 'Terminé' && item.etatDemande !== 'En cours de traitement' && item.etatDemande !== 'En attente';
+}
+
+function throwError(error) {
+  emits('onError', error);
+}
+</script>

src/components/Supp/DialogConfirmationStop.vue → src/components/Dialog/DialogConfirmationStop.vue

@@ -15,7 +15,7 @@
 <script setup>
 import itemService from '@/service/ItemService';
 
-const emits = defineEmits(['stop', 'onError']);
+const emits = defineEmits(['clicked', 'onError']);
 const dialog = defineModel();
 const props = defineProps({
   id: {
@@ -31,7 +31,7 @@ function stopDemande() {
     })
     .finally(() => {
       dialog.value = false;
-      emits('stop');
+      emits('clicked');
     });
 }
 </script>

src/components/Dialog/DialogSuppression.vue

@@ -10,7 +10,7 @@
       <v-card>
         <v-card-title>Suppression</v-card-title>
         <v-divider></v-divider>
-        <v-card-text>Êtes-vous certain de vouloir supprimer définitivement cette demande ?</v-card-text>
+        <v-card-text>Êtes-vous certain de vouloir supprimer définitivement la demande N°{{ demande.id }} ?</v-card-text>
         <v-card-actions>
 
           <v-container class="d-flex justify-space-between">
@@ -28,7 +28,7 @@ import router from '@/router';
 import { ref } from 'vue';
 
 const dialog = defineModel();
-const emits = defineEmits(['supp'])
+const emits = defineEmits(['supp']);
 const props = defineProps({
   returnToAccueil: {
     required: false,
@@ -38,21 +38,22 @@ const props = defineProps({
     required: true,
     type: Object
   }
-})
+});
 const isLoading = ref(false);
 
 function confirm() {
   isLoading.value = true;
   itemService.deleteDemande(props.demande.id, props.demande.type)
-    .then(()=>{
-      if(props.returnToAccueil){
+    .then(() => {
+      if (props.returnToAccueil) {
         router.push('/accueil');
       }
       emits('supp');
-    }).finally(() => {
-    isLoading.value = false;
-    dialog.value = false;
-  })
+    })
+    .finally(() => {
+      isLoading.value = false;
+      dialog.value = false;
+    });
 }
 
 function cancel() {

src/views/Exemplarisation/ExempTable.vue

@@ -120,38 +120,29 @@
         </td>
         <td class="text-center">
           <!-- Colonne Action -->
-          <v-tooltip v-if="canArchive(item)" text="Archiver">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" variant="plain" icon="mdi-archive"
-                     @click="archiverDemande(item)"
-                     aria-label="Archiver"></v-btn>
-            </template>
-          </v-tooltip>
-          <v-tooltip v-else-if="canCancel(item)" text="Supprimer">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" variant="plain" icon="mdi-delete"
-                     @click="supprimerDemande(item)"
-                     aria-label="Supprimer"></v-btn>
-            </template>
-          </v-tooltip>
-          <v-btn v-if="item.etatDemande === 'Archivé'" variant="plain"  icon="mdi-package-up" @click="restaurerDemande(item)"></v-btn>
+          <btn-archive :demande="item" @clicked="loadItems(item.type)"
+                       @on-error="throwError" aria-label="Archiver"></btn-archive>
+          <btn-suppression :demande="item" @clicked="loadItems(item.type)"
+                           @on-error="throwError" aria-label="Supprimer"></btn-suppression>
+          <btn-restore :demande="item" @clicked="loadItems(item.type)"
+                       @on-error="throwError" aria-label="Restaurer"></btn-restore>
         </td>
       </tr>
     </template>
   </v-data-table>
-  <dialog-suppression v-model="suppDialog" :demande="suppDemande"
-                      @supp="loadItems('EXEMP')"></dialog-suppression>
 </template>
 
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import router from '@/router';
-import DialogSuppression from '@/components/Dialog/DialogSuppression.vue';
 import DialogCommentaire from '@/components/Dialog/DialogCommentaire.vue';
 import itemService from '@/service/ItemService';
 import MenuDownloadFile from '@/components/MenuDownloadFile.vue';
 import moment from 'moment';
 import { useAuthStore } from '@/store/authStore';
+import BtnSuppression from '@/components/ButtonsActions/BtnSuppression.vue';
+import BtnArchive from '@/components/ButtonsActions/BtnArchive.vue';
+import BtnRestore from '@/components/ButtonsActions/BtnRestore.vue';
 //Emit
 const emit = defineEmits(['backendError', 'backendSuccess']);
 
@@ -373,43 +364,6 @@ function filterItems() {
   });
 }
 
-//Action d'archivage ou suppression selon état de la demande dans le TDB
-function canArchive(item) {
-  return item.etatDemande === 'Terminé';
-}
-
-function canCancel(item) {
-  return item.etatDemande !== 'Terminé' && item.etatDemande !== 'En cours de traitement' && item.etatDemande !== 'En attente';
-}
-
-//Suppression d'une demande
-function supprimerDemande(item) {
-  suppDialog.value = true;
-  suppDemande.value = item;
-}
-
-function restaurerDemande(item) {
-  itemService.restaurerDemande(item.id, "EXEMP").then(() => {
-    loadItems('EXEMP');
-  }).catch(error => {
-    console.error(error);
-    emit('backendError', error);
-  });
-}
-
-//Archivage d'une demande
-async function archiverDemande(item) {
-  try {
-    await itemService.archiverDemande('EXEMP', item.id);
-    // Mettre à jour les données après l'archivage réussi
-    await loadItems('EXEMP');
-    emit('backendSuccess');
-  } catch (error) {
-    console.error(error);
-    emit('backendError', error);
-  }
-}
-
 function onRowClick(item) {
   if (item.etatDemande === 'En préparation' || item.etatDemande === 'A compléter' || item.etatDemande === 'En simulation') {
     router.push('/exemplarisation/' + item.id);