From 176134634afc97e18a8a3d0604af7f1d3721662c Mon Sep 17 00:00:00 2001
From: SamuelQuetin <samquetinuel@gmail.com>
Date: Wed, 3 Jul 2024 09:38:47 +0200
Subject: [PATCH] Ajout Popup suppression dans tout les composants Ajout route
 dans popup lancertraitement

---
 src/components/DialogLancerTraitement.vue |  6 ++-
 src/components/DialogSuppression.vue      | 63 +++++++++++++++++++++++
 src/views/Exemplarisation/ExempSteps.vue  | 16 +++---
 src/views/Exemplarisation/ExempTable.vue  | 45 ++++++++--------
 src/views/Modification/ModifSteps.vue     | 23 ++++++---
 src/views/Modification/ModifTable.vue     | 41 +++++++--------
 src/views/Recouvrement/RecouvSteps.vue    | 11 ++--
 src/views/Recouvrement/RecouvTable.vue    | 39 +++++++-------
 8 files changed, 156 insertions(+), 88 deletions(-)
 create mode 100644 src/components/DialogSuppression.vue

diff --git a/src/components/DialogLancerTraitement.vue b/src/components/DialogLancerTraitement.vue
index 15d69f5..53ac46b 100644
--- a/src/components/DialogLancerTraitement.vue
+++ b/src/components/DialogLancerTraitement.vue
@@ -16,7 +16,7 @@
           <v-btn v-if="!isFinished" color="primary" @click="dialog = false" aria-label="Annuler">Annuler</v-btn>
           <v-spacer v-else></v-spacer>
           <v-btn v-if="!isFinished" color="primary" @click="confirm()" aria-label="Valider">Valider</v-btn>
-          <v-btn v-else color="primary" @click="router.push('exemplarisation-tableau')" aria-label="OK">OK</v-btn>
+          <v-btn v-else color="primary" @click="router.push(route)" aria-label="OK">OK</v-btn>
         </v-card-actions>
       </v-card>
     </v-skeleton-loader>
@@ -36,6 +36,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  route: {
+    required: true,
+    type: String,
+  }
 })
 const title = ref('Lancement du traitement en production');
 const body = ref('Êtes-vous sûr de vouloir lancer le traitement en production ?<br/> Aucune annulation n\'est possible.');
diff --git a/src/components/DialogSuppression.vue b/src/components/DialogSuppression.vue
new file mode 100644
index 0000000..7dbcd48
--- /dev/null
+++ b/src/components/DialogSuppression.vue
@@ -0,0 +1,63 @@
+<template>
+  <v-dialog v-model="dialog" width="500">
+    <v-skeleton-loader
+      :loading="isLoading"
+      class="mx-auto"
+      elevation="12"
+      width="500"
+      type="table-heading, list-item-two-line, table-tfoot"
+    >
+      <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-actions>
+
+          <v-container class="d-flex justify-space-between">
+            <v-btn @click="cancel()">Annuler</v-btn>
+            <v-btn @click="confirm()">Confirmer</v-btn>
+          </v-container>
+        </v-card-actions>
+      </v-card>
+    </v-skeleton-loader>
+  </v-dialog>
+</template>
+<script setup>
+import demandesService from '@/service/DemandesService';
+import router from '@/router';
+import { ref } from 'vue';
+
+const dialog = defineModel();
+const emits = defineEmits(['supp'])
+const props = defineProps({
+  returnToAccueil: {
+    required: false,
+    type: Boolean,
+  },
+  demande: {
+    required: true,
+    type: Object
+  }
+})
+const isLoading = ref(false);
+
+function confirm() {
+  isLoading.value = true;
+  demandesService.deleteDemande(props.demande.id, props.demande.type)
+    .then(()=>{
+      if(props.returnToAccueil){
+        router.push('/accueil');
+      }
+      emits('supp');
+    }).finally(() => {
+    isLoading.value = false;
+    dialog.value = false;
+  })
+}
+
+function cancel() {
+  dialog.value = false;
+}
+
+</script>
+
diff --git a/src/views/Exemplarisation/ExempSteps.vue b/src/views/Exemplarisation/ExempSteps.vue
index 0c7ca7a..d52eebc 100644
--- a/src/views/Exemplarisation/ExempSteps.vue
+++ b/src/views/Exemplarisation/ExempSteps.vue
@@ -75,7 +75,7 @@
                 </v-btn>
                 <v-btn
                   :disabled="!fileSelected"
-                  @click="launchTraitement"
+                  @click="uploadFile"
                 >
                   Lancer le traitement en simulation
                 </v-btn>
@@ -97,7 +97,8 @@
       </v-col>
     </v-row>
   </v-container>
-  <dialog-lancer-traitement v-model="dialog" :is-loading="isLoading" @launch="launchDemande()"></dialog-lancer-traitement>
+  <dialog-lancer-traitement v-model="dialog" :is-loading="isLoading" route="/exemplarisation-tableau" @launch="launchDemande()"></dialog-lancer-traitement>
+  <dialog-suppression  v-model="suppDialog" :demande="demande" return-to-accueil></dialog-suppression>
 </template>
 
 <script setup>
@@ -110,6 +111,7 @@ import Rcr from '@/components/Rcr.vue';
 import TypeExemp from '@/components/Exemp/TypeExemp.vue';
 import Simulation from "@/components/Simulation.vue";
 import DialogLancerTraitement from '@/components/DialogLancerTraitement.vue';
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 const emits = defineEmits(['backendError', 'backendSuccess', 'login-success'])
 const props = defineProps({id : {type: String}});
@@ -123,6 +125,7 @@ const alertMessage = ref();
 const alertType = ref();
 const isLoading = ref(false);
 const dialog = ref(false);
+const suppDialog = ref(false);
 
 onMounted(()=>{
   if(props.id){
@@ -205,7 +208,7 @@ function modifiTypeExemp() {
   }
 }
 
-function launchTraitement() {
+function uploadFile() {
   alertMessage.value = '';
   alertType.value = 'success';
   isLoading.value = true;
@@ -234,12 +237,7 @@ function launchDemande(){
 }
 
 function deleteDemande(){
-  DemandesService.deleteDemande(demande.value.id, 'EXEMP')
-    .then(()=>{
-      router.push('/accueil');
-    }).catch(err => {
-      emits('backendError', err);
-  })
+  suppDialog.value = true;
 }
 
 function next() {
diff --git a/src/views/Exemplarisation/ExempTable.vue b/src/views/Exemplarisation/ExempTable.vue
index 6649b84..650f8d5 100644
--- a/src/views/Exemplarisation/ExempTable.vue
+++ b/src/views/Exemplarisation/ExempTable.vue
@@ -33,7 +33,8 @@
   </v-container>
   <v-data-table :headers="headingsDemandes" :items="contentsDemandesFrontFiltered" :items-length="totalItemsFound"
                 :loading="!isDataLoaded" show-expand :sort-by="[{ key: 'dateModification', order: 'desc' }]"
-                item-key="id">
+                item-key="id"
+  >
     <template v-slot:body.prepend>
       <tr>
         <td></td>
@@ -71,22 +72,22 @@
     </template>
 
     <template v-slot:item="{ item, expand }">
-      <tr @click="onRowClick(item)" @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
+      <tr @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
           :class="{ 'highlighted-row': item.highlighted }" style="cursor: pointer;">
         <td>
           <v-btn icon="mdi-chevron-up" @click="item.expanded = !item.expanded" variant="text">
             <v-icon>{{ item.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
           </v-btn>
         </td>
-        <td class="text-right">{{ item.id }}</td>
-        <td class="text-right">{{ item.dateCreation }}</td>
-        <td class="text-right">{{ item.dateModification }}</td>
-        <td class="text-right">{{ item.iln }}</td>
-        <td class="text-right">{{ item.rcr }}</td>
-        <td class="text-right">{{ item.typeExemp }}</td>
-        <td class="text-right">{{ item.indexRecherche }}</td>
-        <td class="text-right">{{ item.etatDemande }}</td>
-        <td class="text-right">
+        <td @click="onRowClick(item)" class="text-right">{{ item.id }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateCreation }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateModification }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.iln }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.rcr }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.typeExemp }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.indexRecherche }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.etatDemande }}</td>
+        <td @click="onRowClick(item)" class="text-right">
           <v-progress-linear v-model="item.pourcentageProgressionTraitement" :height="18" :striped="false"
                              color="grey-lighten-1" style="border: 1px solid grey; font-weight: bolder">
             {{ item.pourcentageProgressionTraitement }} %
@@ -110,8 +111,9 @@
         </td>
         <td class="text-right">
           <!-- Colonne Action -->
-          <v-icon v-if="canArchive(item)" @click="archiverDemande(item)">mdi-archive</v-icon>
-          <v-icon v-else-if="canCancel(item)" @click="supprimerDemande(item)">mdi-delete</v-icon>
+          <v-btn v-if="canArchive(item)" variant="plain" icon="mdi-archive" @click="archiverDemande(item)"></v-btn>
+          <v-btn v-else-if="canCancel(item)" variant="plain" icon="mdi-delete" @click="supprimerDemande(item)"></v-btn>
+
         </td>
       </tr>
       <tr v-if="item.expanded">
@@ -122,12 +124,14 @@
       </tr>
     </template>
   </v-data-table>
+  <dialog-suppression v-model="suppDialog" :demande="suppDemande" @supp="loadItems('EXEMP', archiveFalseActiveTrue)"></dialog-suppression>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue';
 import DemandesService from '@/service/DemandesService';
 import router from '@/router';
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 const service = DemandesService;
 
@@ -204,6 +208,8 @@ const headingsDemandes = ref([
 const contentsDemandesFromServer = ref([]);
 const contentsDemandesFrontFiltered = ref([]);
 const totalItemsFound = ref(0);
+const suppDialog = ref(false);
+const suppDemande = ref({});
 
 //Progress bar displayed while fetching data
 const isDataLoaded = ref(false);
@@ -298,16 +304,9 @@ function canCancel(item) {
 }
 
 //Suppression d'une demande
-async function supprimerDemande(item) {
-  try {
-    await service.supprimerDemande('EXEMP', item.id);
-    // Mettre à jour les données après la suppression réussie
-    await loadItems('EXEMP');
-    emit('backendSuccess');
-  } catch (error) {
-    console.error(error);
-    emit('backendError', error);
-  }
+function supprimerDemande(item) {
+  suppDialog.value = true;
+  suppDemande.value = item;
 }
 
 //Archivage d'une demande
diff --git a/src/views/Modification/ModifSteps.vue b/src/views/Modification/ModifSteps.vue
index 14c96f9..e4982fc 100644
--- a/src/views/Modification/ModifSteps.vue
+++ b/src/views/Modification/ModifSteps.vue
@@ -146,6 +146,8 @@
       </v-col>
     </v-row>
   </v-container>
+  <dialog-lancer-traitement v-model="dialog" :is-loading="isLoading" route="/modification-tableau" @launch="launchDemande()"></dialog-lancer-traitement>
+  <dialog-suppression v-model="suppDialog" :demande="demande" return-to-accueil></dialog-suppression>
 </template>
 
 <script setup>
@@ -157,6 +159,8 @@ import SelectFile from '@/components/SelectFile.vue';
 import DownloadFile from '@/components/Modif/DownloadFile.vue';
 import TypeTraitement from '@/components/Modif/TypeTraitement.vue';
 import Simulation from "@/components/Simulation.vue";
+import DialogLancerTraitement from '@/components/DialogLancerTraitement.vue';
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 
 const currentStep = ref(0);
@@ -169,6 +173,8 @@ const alertType = ref();
 const isLoaded = ref(false);
 const isLoading = ref(false);
 const isDownloaded = ref(false);
+const dialog = ref(false);
+const suppDialog = ref(false);
 const fileLink = ref('');
 const fileName = ref('');
 const typeTraitementSelected = ref();
@@ -303,17 +309,22 @@ function modifierTypeTraitementModifDemande() {
   });
 }
 
+function launchDemande(){
+  isLoading.value = true;
+  demandesService.lancerDemande(demande.value.id,'MODIF')
+    .then(response => {
+      demande.value = response.data;
+    }).finally(() => {
+    isLoading.value = false;
+  })
+}
+
 function downloaded() {
   isDownloaded.value = true;
 }
 
 function deleteDemande() {
-  demandesService.deleteDemande(demande.value.id, 'MODIF')
-    .then(() => {
-      router.push('/accueil');
-    }).catch(err => {
-    emits('backendError', err);
-  })
+  suppDialog.value = true;
 }
 
 function next() {
diff --git a/src/views/Modification/ModifTable.vue b/src/views/Modification/ModifTable.vue
index 5cfa6b1..0a46444 100644
--- a/src/views/Modification/ModifTable.vue
+++ b/src/views/Modification/ModifTable.vue
@@ -70,22 +70,22 @@
     </template>
 
     <template v-slot:item="{ item, expand }">
-      <tr @click="onRowClick(item)" @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
+      <tr @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
           :class="{ 'highlighted-row': item.highlighted }" style="cursor: pointer;">
         <td>
           <v-btn icon="mdi-chevron-up" @click="item.expanded = !item.expanded" variant="text">
             <v-icon>{{ item.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
           </v-btn>
         </td>
-        <td class="text-right">{{ item.id }}</td>
-        <td class="text-right">{{ item.dateCreation }}</td>
-        <td class="text-right">{{ item.dateModification }}</td>
-        <td class="text-right">{{ item.iln }}</td>
-        <td class="text-right">{{ item.rcr }}</td>
-        <td class="text-right">{{ item.zone }}</td>
-        <td class="text-right">{{ item.traitement }}</td>
-        <td class="text-right">{{ item.etatDemande }}</td>
-        <td class="text-right">
+        <td @click="onRowClick(item)" class="text-right">{{ item.id }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateCreation }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateModification }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.iln }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.rcr }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.zone }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.traitement }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.etatDemande }}</td>
+        <td @click="onRowClick(item)" class="text-right">
           <v-progress-linear v-model="item.pourcentageProgressionTraitement" :height="18" :striped="false"
                              color="grey-lighten-1" style="border: 1px solid grey; font-weight: bolder">
             {{ item.pourcentageProgressionTraitement }} %
@@ -123,8 +123,8 @@
         </td>
         <td class="text-right">
           <!-- Colonne Action -->
-          <v-icon v-if="canArchive(item)" @click="archiverDemande(item)">mdi-archive</v-icon>
-          <v-icon v-else-if="canCancel(item)" @click="supprimerDemande(item)">mdi-delete</v-icon>
+          <v-btn v-if="canArchive(item)" variant="plain" icon="mdi-archive" @click="archiverDemande(item)"></v-btn>
+          <v-btn v-else-if="canCancel(item)" variant="plain" icon="mdi-delete" @click="supprimerDemande(item)"></v-btn>
         </td>
       </tr>
       <tr v-if="item.expanded">
@@ -135,12 +135,14 @@
       </tr>
     </template>
   </v-data-table>
+  <dialog-suppression v-model="suppDialog" :demande="suppDemande" @supp="loadItems('MODIF', archiveFalseActiveTrue)"></dialog-suppression>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue';
 import DemandesService from '@/service/DemandesService';
 import router from "@/router";
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 const service = DemandesService;
 
@@ -217,6 +219,8 @@ const headingsDemandes = ref([
 const contentsDemandesFromServer = ref([]);
 const contentsDemandesFrontFiltered = ref([]);
 const totalItemsFound = ref(0);
+const suppDialog = ref(false);
+const suppDemande = ref({});
 
 //Progress bar displayed while fetching data
 const isDataLoaded = ref(false);
@@ -313,16 +317,9 @@ function canCancel(item) {
 }
 
 //Suppression d'une demande
-async function supprimerDemande(item) {
-  try {
-    await service.supprimerDemande('MODIF', item.id);
-    // Mettre à jour les données après la suppression réussie
-    await loadItems('MODIF');
-    emit('backendSuccess');
-  } catch (error) {
-    console.error(error);
-    emit('backendError', error);
-  }
+function supprimerDemande(item) {
+  suppDialog.value = true;
+  suppDemande.value = item;
 }
 
 //Archivage d'une demande
diff --git a/src/views/Recouvrement/RecouvSteps.vue b/src/views/Recouvrement/RecouvSteps.vue
index 375fbc2..d1ec8ff 100644
--- a/src/views/Recouvrement/RecouvSteps.vue
+++ b/src/views/Recouvrement/RecouvSteps.vue
@@ -82,6 +82,7 @@
       </v-col>
     </v-row>
   </v-container>
+  <dialog-suppression v-model="suppDialog" :demande="demande" return-to-accueil></dialog-suppression>
 </template>
 
 <script setup>
@@ -90,6 +91,7 @@ import SelectFile from '@/components/SelectFile.vue';
 import { onMounted, ref } from 'vue';
 import DemandesService from '@/service/DemandesService';
 import router from '@/router';
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 const props = defineProps({id : {type: String}});
 const emits = defineEmits(['backendError']);
@@ -101,6 +103,8 @@ const alertMessage = ref();
 const alertType = ref();
 const isLoading = ref(false);
 const dialog = ref(false);
+const suppDialog = ref(false);
+
 
 
 onMounted(() => {
@@ -159,12 +163,7 @@ function launchTraitement() {
 }
 
 function deleteDemande(){
-  DemandesService.deleteDemande(demande.value.id, 'RECOUV')
-    .then(()=>{
-      router.push('/accueil');
-    }).catch(err => {
-    emits('backendError', err);
-  })
+  suppDialog.value = true;
 }
 
 function next() {
diff --git a/src/views/Recouvrement/RecouvTable.vue b/src/views/Recouvrement/RecouvTable.vue
index 8394e71..89390d4 100644
--- a/src/views/Recouvrement/RecouvTable.vue
+++ b/src/views/Recouvrement/RecouvTable.vue
@@ -75,21 +75,21 @@
     </template>
 
     <template v-slot:item="{ item, expand }">
-      <tr @click="onRowClick(item)" @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
+      <tr @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
           :class="{ 'highlighted-row': item.highlighted }" style="cursor: pointer;">
         <td>
           <v-btn icon="mdi-chevron-up" @click="item.expanded = !item.expanded" variant="text">
             <v-icon>{{ item.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
           </v-btn>
         </td>
-        <td class="text-right">{{ item.id }}</td>
-        <td class="text-right">{{ item.dateCreation }}</td>
-        <td class="text-right">{{ item.dateModification }}</td>
-        <td class="text-right">{{ item.iln }}</td>
-        <td class="text-right">{{ item.rcr }}</td>
-        <td class="text-right">{{ item.indexRecherche }}</td>
-        <td class="text-right">{{ item.etatDemande }}</td>
-        <td class="text-right">
+        <td @click="onRowClick(item)" class="text-right">{{ item.id }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateCreation }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateModification }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.iln }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.rcr }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.indexRecherche }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.etatDemande }}</td>
+        <td @click="onRowClick(item)" class="text-right">
           <v-progress-linear v-model="item.pourcentageProgressionTraitement" :height="18" :striped="false"
                              color="grey-lighten-1" style="border: 1px solid grey; font-weight: bolder">
             {{ item.pourcentageProgressionTraitement }} %
@@ -113,8 +113,8 @@
         </td>
         <td class="text-right">
           <!-- Colonne Action -->
-          <v-icon v-if="canArchive(item)" @click="archiverDemande(item)">mdi-archive</v-icon>
-          <v-icon v-else-if="canCancel(item)" @click="supprimerDemande(item)">mdi-delete</v-icon>
+          <v-btn v-if="canArchive(item)" variant="plain" icon="mdi-archive" @click="archiverDemande(item)"></v-btn>
+          <v-btn v-else-if="canCancel(item)" variant="plain" icon="mdi-delete" @click="supprimerDemande(item)"></v-btn>
         </td>
       </tr>
       <tr v-if="item.expanded">
@@ -134,12 +134,14 @@
       </tr>
     </template>
   </v-data-table>
+  <dialog-suppression v-model="suppDialog" :demande="suppDemande" @supp="loadItems('RECOUV', archiveFalseActiveTrue)"></dialog-suppression>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue';
 import DemandesService from '@/service/DemandesService';
 import router from '@/router';
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 const service = DemandesService;
 
@@ -211,6 +213,8 @@ const headingsDemandes = ref([
 const contentsDemandesFromServer = ref([]);
 const contentsDemandesFrontFiltered = ref([]);
 const totalItemsFound = ref(0);
+const suppDialog = ref(false);
+const suppDemande = ref({});
 
 //Progress bar displayed while fetching data
 const isDataLoaded = ref(false);
@@ -306,16 +310,9 @@ function canCancel(item) {
 }
 
 //Suppression d'une demande
-async function supprimerDemande(item) {
-  try {
-    await service.supprimerDemande('EXEMP', item.id);
-    // Mettre à jour les données après la suppression réussie
-    await loadItems('EXEMP');
-    emit('backendSuccess');
-  } catch (error) {
-    console.error(error);
-    emit('backendError', error);
-  }
+function supprimerDemande(item) {
+  suppDialog.value = true;
+  suppDemande.value = item;
 }
 
 //Archivage d'une demande