From a1e31bbf8144584245e8120f967a9b60ae997aaa Mon Sep 17 00:00:00 2001
From: Eryne Kachetel-Langue <eryne.kachetellangue@hotmail.com>
Date: Wed, 4 Dec 2024 09:48:26 +0100
Subject: [PATCH 1/3] FEAT
 ITEM-413-front-afficher-plusieurs-messages-en-meme-temps-sans-quils-ne-soient-supperposes
 :      - refactor des messages d'alerte en v-alert avec timeout

---
 src/App.vue | 108 +++++++++++++++++++++++++---------------------------
 1 file changed, 51 insertions(+), 57 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 78e87b8..54e2af4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,19 +6,19 @@
         <Navbar :drawer="drawer" @close="drawer = false" />
       </nav>
       <v-main class="d-flex flex-column overflow-auto">
-          <v-snackbar
-          v-for="(error, index) in errorStack"
-          :key="index"
-          v-model="snackbarIsActive"
-          vertical
-          :timeout=timeout
-          color="#B71C1C"
-          elevation="24"
-          location="top"
-          >
-            <div class="mb-2" style="font-weight: 800">{{ error.message }}</div>
-            {{ error.description }}
-          </v-snackbar>
+        <div class="notificationContainer">
+          <v-slide-y-transition group>
+            <v-alert
+              v-for="notification in errorsList"
+              :color=alertType
+              :key="notification[0]"
+            >
+              <p class="mb-4">{{ notification[1].message }}</p>
+              <p class="mb-4">{{ notification[1].description }}</p>
+              <div style="text-align: right"><v-btn @click="removeNotification(notification[0])">CLOSE</v-btn></div>
+            </v-alert>
+          </v-slide-y-transition>
+        </div>
         <div style="flex-grow: 10;">
           <router-view v-slot="{ Component }">
             <component
@@ -46,11 +46,15 @@ import { useAuthStore } from '@/store/authStore';
 import { useRoute } from 'vue-router';
 import Maintenance from '@/components/Structure/Maintenance.vue';
 
-
-const errorStack = ref([]);
 const drawer = ref(false);
 
-const snackbarIsActive = ref();
+const alertType = ref(null)
+
+const errorsList = ref(new Map())
+
+let idActualMessageErrNetwork = null;
+
+let errorType = null
 
 const authStore = useAuthStore();
 
@@ -58,17 +62,6 @@ const authenticated = computed(() => {
   return authStore.isAuthenticated;
 });
 
-const errorType = ref(null)
-
-const timeout = computed(() => {
-  if (errorType.value === "ERR_NETWORK") {
-      errorType.value = null
-      return "9000"
-  } else {
-    return -1 // désactive le timeOut de la snackbar
-  }
-})
-
 const route = useRoute();
 
 watch(
@@ -79,20 +72,24 @@ watch(
         message: 'Erreur réseau',
         description: 'Service indisponible : merci de réessayer ultérieurement.'
       };
-      errorStack.value.push(newError);
+      const notificationId = self.crypto.randomUUID()
+      errorsList.value.set(notificationId, newError)
     }
   },
   { immediate: true } // Option pour exécuter le watcher dès le montage du composant
 );
 
 function addError(error) {
+  const notificationId = self.crypto.randomUUID()
+  alertType.value = "error"
   let newError = {
     message: 'Erreur',
     description: ''
   }
   if(!error.response){
-    deleteOldErrorNetworkMessage()
-    errorType.value = "ERR_NETWORK"
+    removeNotification(idActualMessageErrNetwork)
+    idActualMessageErrNetwork = notificationId;
+    errorType = "ERR_NETWORK"
     newError.message = 'Erreur réseau : ' + error.code
     newError.description = 'Service indisponible : merci de réessayer ultérieurement.'
   }else{
@@ -112,8 +109,7 @@ function addError(error) {
       newError.message = 'Accès rejeté';
       newError.description = 'Mauvaise requête : contrôlez les paramètres de votre requête et observez les logs du serveur pour plus d\'informations ' + '(' + error.config.url + ')';
     }
-    if (error.response.status.toString()
-      .startsWith('5')) {
+    if (error.response.status.toString().startsWith('5')) {
       newError.message = 'Problème de disponibilité du serveur';
       newError.description = 'Retentez plus tard. Vérifiez la disponibilité de la base de donnée (Etat des serveurs) en cliquant en bas à gauche sur l\'icone de paramètres. Si le problème perdure, contactez l\'assistance';
     }
@@ -127,16 +123,7 @@ function addError(error) {
   if (error.request.url) {
     newError.description = 'Problème de disponibilité du fichier demandé';
   }
-  errorStack.value.push(newError);
-  snackbarIsActive.value = true;
-}
-
-function clearErrors() {
-  errorStack.value = [];
-}
-
-function closeAlert(index) {
-  errorStack.value.splice(index, 1);
+  addNotification(notificationId, newError)
 }
 
 function onLogout() {
@@ -147,13 +134,21 @@ function toggleDrawer() {
   drawer.value = !drawer.value;
 }
 
-// Permet de vérifier la présence d'un message de type ERR_NETWORK dans errorStack et de la supprimer afin d'éviter une surcharge du tableau
-function deleteOldErrorNetworkMessage() {
-  errorStack.value.forEach((error, index) => {
-    if (error.message === "Erreur réseau : ERR_NETWORK") {
-      errorStack.value.splice(index, 1)
-    }
-  })
+function addNotification(notificationId, message) {
+  errorsList.value.set(notificationId, message)
+  if (errorType === "ERR_NETWORK") {
+    setTimeout(() => removeNotification(notificationId), 9000) // impose un timeout au v-alert pour que les alertes de type ERR_NETWORK ne surchargent pas la Map errorsList
+  }
+}
+
+function removeNotification(notificationId) {
+  if (notificationId != null) {
+    errorsList.value.delete(notificationId)
+  }
+}
+
+function clearErrors() {
+  errorsList.value = new Map()
 }
 
 </script>
@@ -166,13 +161,12 @@ function deleteOldErrorNetworkMessage() {
   color: v-bind('$vuetify.theme.current.colors.textColor');
 }
 
-.custom-alert {
-  background-color: #FFEBEE !important; /* Fond rouge clair */
-  color: #B71C1C !important; /* Texte rouge foncé */
-  opacity: 1 !important; /* Assurez-vous que l'alerte est complètement opaque */
-}
-
-.custom-alert :deep(.v-alert__close) {
-  color: #B71C1C !important; /* Assure que le bouton de fermeture est de la même couleur que le texte */
+.notificationContainer {
+  position: fixed;
+  top: 80px;
+  right: 10px;
+  display: grid;
+  grid-gap: 0.5em;
+  z-index: 99;
 }
 </style>

From 5f068c85d7c53f54ad4d096921fa74d02d40f35e Mon Sep 17 00:00:00 2001
From: Eryne Kachetel-Langue <eryne.kachetellangue@hotmail.com>
Date: Wed, 4 Dec 2024 11:25:48 +0100
Subject: [PATCH 2/3] FEAT
 ITEM-413-front-afficher-plusieurs-messages-en-meme-temps-sans-quils-ne-soient-supperposes
 :      - simplification du code      - adaptation au RGAA du bouton de
 fermeture des messages d'alerte      - correction du style du message
 d'alerte sur la page de connexion

---
 src/App.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 54e2af4..f520d95 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,13 +9,13 @@
         <div class="notificationContainer">
           <v-slide-y-transition group>
             <v-alert
+              class="alertMessage"
               v-for="notification in errorsList"
-              :color=alertType
               :key="notification[0]"
             >
               <p class="mb-4">{{ notification[1].message }}</p>
               <p class="mb-4">{{ notification[1].description }}</p>
-              <div style="text-align: right"><v-btn @click="removeNotification(notification[0])">CLOSE</v-btn></div>
+              <div style="text-align: right"><v-btn @click="removeNotification(notification[0])" value="Fermer le message d'erreur">FERMER</v-btn></div>
             </v-alert>
           </v-slide-y-transition>
         </div>
@@ -52,8 +52,6 @@ const alertType = ref(null)
 
 const errorsList = ref(new Map())
 
-let idActualMessageErrNetwork = null;
-
 let errorType = null
 
 const authStore = useAuthStore();
@@ -87,8 +85,6 @@ function addError(error) {
     description: ''
   }
   if(!error.response){
-    removeNotification(idActualMessageErrNetwork)
-    idActualMessageErrNetwork = notificationId;
     errorType = "ERR_NETWORK"
     newError.message = 'Erreur réseau : ' + error.code
     newError.description = 'Service indisponible : merci de réessayer ultérieurement.'
@@ -156,11 +152,13 @@ function clearErrors() {
 <style>
 /*Declaré en global*/
 
+/* Style des card contenant les choix proposés aux utilisateurs et utilisatrices */
 .custom-card-title {
   background-color: v-bind('$vuetify.theme.current.colors.primary');
   color: v-bind('$vuetify.theme.current.colors.textColor');
 }
 
+/* Style du container comprenant les messages d'erreur */
 .notificationContainer {
   position: fixed;
   top: 80px;
@@ -169,4 +167,11 @@ function clearErrors() {
   grid-gap: 0.5em;
   z-index: 99;
 }
+
+/* Permet d'avoir le bon formatage du message d'erreur sur la page de connexion */
+.alertMessage {
+  background-color: #A32525;
+  color: white;
+}
+
 </style>

From ca18206a13577e0a1e0cc5b70888135c7b2792cf Mon Sep 17 00:00:00 2001
From: Eryne Kachetel-Langue <eryne.kachetellangue@hotmail.com>
Date: Thu, 5 Dec 2024 10:48:28 +0100
Subject: [PATCH 3/3] FIX
 ITEM-413-front-afficher-plusieurs-messages-en-meme-temps-sans-quils-ne-soient-supperposes
 :      - adaptation de la couleur du message d'alerte avec le theme

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index f520d95..f24c532 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -170,7 +170,7 @@ function clearErrors() {
 
 /* Permet d'avoir le bon formatage du message d'erreur sur la page de connexion */
 .alertMessage {
-  background-color: #A32525;
+  background-color: rgb(var(--v-theme-error));
   color: white;
 }