Item 138 revoir affichage commentaire

src/components/Dialog/DialogCommentaire.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-dialog v-model="demande.expanded" @after-leave="commentaire=demande.commentaire" width="500">
+    <v-card>
+      <v-card-title>
+        Note de la demande {{demande.id}}
+      </v-card-title>
+      <v-card-text>
+        <v-textarea label="Commentaire" v-model="commentaire">
+        </v-textarea>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn @click="save()">Enregistrer</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import demandesService from "@/service/DemandesService";
+
+const emits = defineEmits(['save'])
+const props = defineProps({
+  demande: {
+    required: true,
+    type: Object
+  }
+})
+const commentaire = ref(props.demande.commentaire);
+
+function save(){
+  if(!commentaire.value)
+    commentaire.value = '';
+  demandesService.modifierCommentaireDemande(props.demande.id, commentaire.value, props.demande.type)
+    .then(() => {
+      props.demande.expanded = false;
+      emits('save');
+    })
+}
+</script>

src/router/index.js

@@ -6,7 +6,7 @@ import RecouvTable from '@/views/Recouvrement/RecouvTable.vue'
 import ModifSteps from '@/views/Modification/ModifSteps.vue';
 import Accueil from '@/views/Accueil.vue';
 import ModificationEmail from '@/views/Utilisateur/ModificationEmail.vue';
-import DemandesService from '@/service/DemandesService'
+import demandesService from '@/service/DemandesService'
 import RecouvSteps from '@/views/Recouvrement/RecouvSteps.vue';
 import ExempSteps from '@/views/Exemplarisation/ExempSteps.vue';
 import {useAuthStore} from '@/store/authStore'
@@ -154,17 +154,17 @@ router.beforeEach(async (to, from, next) => {
   if (requiresAuth) {
     if (authStore.isAuthenticated) {
       try {
-        const valid = await DemandesService.checkToken();
+        const valid = await demandesService.checkToken();
         if (valid.data) {
           next();
         } else {
           console.error('Token invalide auprès du serveur');
-          DemandesService.logout();
+          demandesService.logout();
           next('/identification');
         }
       } catch (error) {
         console.error(error);
-        DemandesService.logout();
+        demandesService.logout();
         next('/identification');
       }
     } else {

src/service/DemandesService.js

@@ -96,6 +96,10 @@ export class DemandesService {
     return this.client.patch(`demandes/MODIF/${id}?traitement=${typeTraitement}`);
   }
 
+  modifierCommentaireDemande(id, commentaire, typeDemande){
+    return this.client.patch(`demandes/${typeDemande}/${id}?commentaire=${commentaire}`);
+  }
+
   uploadDemande(id, file, typeDemande){
     const config = { headers: {
       'Content-Type': 'multipart/form-data',

src/views/Exemplarisation/ExempSteps.vue

@@ -110,8 +110,8 @@ import SelectFile from '@/components/SelectFile.vue';
 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';
+import DialogLancerTraitement from '@/components/Dialog/DialogLancerTraitement.vue';
+import DialogSuppression from '@/components/Dialog/DialogSuppression.vue';
 
 const emits = defineEmits(['backendError', 'backendSuccess', 'login-success'])
 const props = defineProps({id : {type: String}});

src/views/Exemplarisation/ExempTable.vue

@@ -1,4 +1,5 @@
 <template>
+
   <v-container fluid>
     <v-chip v-if="!archiveFalseActiveTrue" style="margin-right: 10px"
             @click="switchArchiveActiveDisplay(!archiveFalseActiveTrue)">Créations d'exemplaires
@@ -81,8 +82,9 @@
     <template v-slot:item="{ item, expand }">
       <tr :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 flat @click="item.expanded = !item.expanded" variant="text">
+            <v-icon size="x-large" :color="item.commentaire ? 'red' : ''">mdi-comment-text-outline</v-icon>
+            <dialog-commentaire :demande="item" @save="saveComment()"></dialog-commentaire>
           </v-btn>
         </td>
         <td @click="onRowClick(item)" class="text-center">{{ item.id }}</td>
@@ -122,22 +124,17 @@
 
         </td>
       </tr>
-      <tr v-if="item.expanded">
-        <td :colspan="headingsDemandes.length">
-          <v-textarea label="Commentaire" v-model="item.commentaire" hide-details variant="underlined" auto-grow
-                      rows="1"></v-textarea>
-        </td>
-      </tr>
     </template>
   </v-data-table>
   <dialog-suppression v-model="suppDialog" :demande="suppDemande"
                       @supp="loadItems('EXEMP', archiveFalseActiveTrue)"></dialog-suppression>
 </template>
 
 <script setup>
-import {onBeforeUnmount, onMounted, ref} from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import router from '@/router';
-import DialogSuppression from '@/components/DialogSuppression.vue';
+import DialogSuppression from '@/components/Dialog/DialogSuppression.vue';
+import DialogCommentaire from "@/components/Dialog/DialogCommentaire.vue";
 import demandesService from '@/service/DemandesService';
 import MenuDownloadFile from "@/components/MenuDownloadFile.vue";
 import moment from "moment";
@@ -253,6 +250,9 @@ const typeExempSearchField = ref();
 const indexRechercheSearchField = ref('');
 const statutSearchField = ref();
 let polling;
+const isDialogOpen = computed(() => {
+  return !!contentsDemandesFrontFiltered.value.find(item => item.expanded === true)
+});
 //Actives or archives demands displayed
 const archiveFalseActiveTrue = ref(false);
 
@@ -269,9 +269,12 @@ onMounted(() => {
       listTypeExemp.value.push('Non défini');
     });
   polling = setInterval(() => {
-    loadItems('EXEMP', archiveFalseActiveTrue.value).then(()=>{
-      filterItems();
-    });
+    if(!isDialogOpen.value) {
+      loadItems('EXEMP', archiveFalseActiveTrue.value)
+        .then(() => {
+          filterItems();
+        });
+    }
   }, 10000);
 });
 
@@ -357,6 +360,11 @@ function onRowClick(item) {
   }
 }
 
+function saveComment(){
+  loadItems('EXEMP',archiveFalseActiveTrue.value).then(()=>{
+    filterItems();
+  })
+}
 </script>
 
 <style scoped>

src/views/Modification/ModifSteps.vue

@@ -159,8 +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';
+import DialogLancerTraitement from '@/components/Dialog/DialogLancerTraitement.vue';
+import DialogSuppression from '@/components/Dialog/DialogSuppression.vue';
 
 
 const currentStep = ref(0);

src/views/Modification/ModifTable.vue

@@ -81,8 +81,9 @@
     <template v-slot:item="{ item, expand }">
       <tr :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 flat @click="item.expanded = !item.expanded" variant="text">
+            <v-icon size="x-large" :color="item.commentaire ? 'red' : ''">mdi-comment-text-outline</v-icon>
+            <dialog-commentaire :demande="item" @save="saveComment()"></dialog-commentaire>
           </v-btn>
         </td>
         <td @click="onRowClick(item)" class="text-center">{{ item.id }}</td>
@@ -120,32 +121,27 @@
           <v-btn v-else-if="canCancel(item)" variant="plain" icon="mdi-delete" @click="supprimerDemande(item)"></v-btn>
         </td>
       </tr>
-      <tr v-if="item.expanded">
-        <td :colspan="headingsDemandes.length">
-          <v-textarea label="Commentaire" v-model="item.commentaire" hide-details variant="underlined" auto-grow
-                      rows="1"></v-textarea>
-        </td>
-      </tr>
     </template>
   </v-data-table>
   <dialog-suppression v-model="suppDialog" :demande="suppDemande"
                       @supp="loadItems('MODIF', archiveFalseActiveTrue)"></dialog-suppression>
 </template>
 
 <script setup>
-import {onBeforeUnmount, onMounted, ref} from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import router from '@/router';
-import DialogSuppression from '@/components/DialogSuppression.vue';
 import demandesService from '@/service/DemandesService';
-import MenuDownloadFile from "@/components/MenuDownloadFile.vue";
-import moment from "moment/moment";
+import DialogSuppression from '@/components/Dialog/DialogSuppression.vue';
+import DialogCommentaire from '@/components/Dialog/DialogCommentaire.vue';
+import MenuDownloadFile from '@/components/MenuDownloadFile.vue';
+import moment from 'moment/moment';
 
 //Emit
 const emit = defineEmits(['backendError', 'backendSuccess']);
 
 //Data
 const extendedAllILN = ref(false);
-const headingsDemandes = [
+const headingsDemandes = ref([
   {
     title: '',
     key: 'data-table-expand',
@@ -160,9 +156,11 @@ const headingsDemandes = [
     title: 'Crée le',
     key: 'dateCreation',
     align: 'center',
-    sort:(d1,d2) => {
-      const date1 = moment(d1, "DD/MM/yyyy HH:mm").valueOf();
-      const date2 = moment(d2, "DD/MM/yyyy HH:mm").valueOf();
+    sort: (d1, d2) => {
+      const date1 = moment(d1, 'DD/MM/yyyy HH:mm')
+        .valueOf();
+      const date2 = moment(d2, 'DD/MM/yyyy HH:mm')
+        .valueOf();
       if (date1 > date2) return -1;
       if (date1 < date2) return 1;
       return 0;
@@ -172,9 +170,11 @@ const headingsDemandes = [
     title: 'Mise à jour',
     key: 'dateModification',
     align: 'center',
-    sort:(d1,d2) => {
-      const date1 = moment(d1, "DD/MM/yyyy HH:mm").valueOf();
-      const date2 = moment(d2, "DD/MM/yyyy HH:mm").valueOf();
+    sort: (d1, d2) => {
+      const date1 = moment(d1, 'DD/MM/yyyy HH:mm')
+        .valueOf();
+      const date2 = moment(d2, 'DD/MM/yyyy HH:mm')
+        .valueOf();
       if (date1 > date2) return -1;
       if (date1 < date2) return 1;
       return 0;
@@ -223,7 +223,7 @@ const headingsDemandes = [
     value: 'archiveOrCancel',
     align: 'center'
   }
-];
+]);
 const listStatut = [
   'En saisie',
   'En attente',
@@ -237,7 +237,10 @@ const contentsDemandesFrontFiltered = ref([]);
 const totalItemsFound = ref(0);
 const suppDialog = ref(false);
 const suppDemande = ref({});
-const sortBy = ref([{ key: 'dateModification', order: 'desc' }]);
+const sortBy = ref([{
+  key: 'dateModification',
+  order: 'desc'
+}]);
 
 //Progress bar displayed while fetching data
 const isDataLoaded = ref(false);
@@ -252,6 +255,10 @@ const zoneSearchField = ref('');
 const traitementSearchField = ref();
 const statutSearchField = ref();
 let polling;
+const isDialogOpen = computed(() => {
+  return !!contentsDemandesFrontFiltered.value.find(item => item.expanded === true);
+});
+
 //Actives or archives demands displayed
 const archiveFalseActiveTrue = ref(false);
 
@@ -268,15 +275,18 @@ onMounted(() => {
       listTypeTraitement.value.push('Non défini');
     });
   polling = setInterval(() => {
-    loadItems('MODIF', archiveFalseActiveTrue.value).then(()=>{
-      filterItems();
-    });
+    if (!isDialogOpen.value) {
+      loadItems('MODIF', archiveFalseActiveTrue.value)
+        .then(() => {
+          filterItems();
+        });
+    }
   }, 10000);
 });
 
 onBeforeUnmount(() => {
   clearInterval(polling);
-})
+});
 
 function switchArchiveActiveDisplay(value) {
   archiveFalseActiveTrue.value = value;
@@ -321,8 +331,6 @@ function filterItems() {
   });
 }
 
-
-
 function isAvailableFile(demandeNumber, filename) {
   return demandesService.headFile(filename, demandeNumber, 'csv', 'MODIF')
     .then((response) => response.status !== 500)
@@ -359,13 +367,20 @@ async function archiverDemande(item) {
     emit('backendError', error);
   }
 }
+
 function onRowClick(item) {
   console.log('Ligne cliquée avec la demande :', item);
   // Faites quelque chose lorsque la ligne est cliquée, par exemple naviguer vers une page de détails de la demande
   if (item.etatDemande === 'En préparation' || item.etatDemande === 'Préparée' || item.etatDemande === 'A compléter' || item.etatDemande === 'En simulation') {
     router.push('/modification/' + item.id);
   }
+}
 
+function saveComment() {
+  loadItems('MODIF', archiveFalseActiveTrue.value)
+    .then(() => {
+      filterItems();
+    });
 }
 
 </script>

src/views/Recouvrement/RecouvSteps.vue

@@ -91,7 +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';
+import DialogSuppression from '@/components/Dialog/DialogSuppression.vue';
 
 const props = defineProps({id : {type: String}});
 const emits = defineEmits(['backendError']);