From c937aa0aa825af3e42f784e4ef42dc4f1a2ed562 Mon Sep 17 00:00:00 2001
From: Eryne Kachetel-Langue <eryne.kachetellangue@hotmail.com>
Date: Tue, 26 Nov 2024 14:48:13 +0100
Subject: [PATCH] =?UTF-8?q?FEAT=20ITEM-402-front-empecher-la-creation-de-n?=
 =?UTF-8?q?ouvelles-v-alert-si-une-autre-du-meme-type-est-deja-ouverte=20:?=
 =?UTF-8?q?=20=20=20=20=20=20-=20remplacement=20du=20v-alert=20par=20un=20?=
 =?UTF-8?q?v-snackbar=20dans=20App.vue=20=20=20=20=20=20-=20ajout=20d'un?=
 =?UTF-8?q?=20contr=C3=B4le=20pour=20limiter=20le=20nombre=20de=20messages?=
 =?UTF-8?q?=20d'erreur=20stock=C3=A9s=20dans=20App.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/App.vue b/src/App.vue
index 7f4da05..8f87bd2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,22 +5,19 @@
         <Navbar :drawer="drawer" @close="drawer = false" />
       </nav>
       <v-main class="d-flex flex-column overflow-auto">
-        <div class="error-stack">
-          <v-alert
-            v-for="(error, index) in errorStack"
-            :key="index"
-            color="error"
-            icon="$error"
-            :title="error.message"
-            variant="flat"
-            border="start"
-            class="mb-2 custom-alert"
-            closable
-            @click:close="closeAlert(index)"
+          <v-snackbar
+          v-for="(error, index) in errorStack"
+          :key="index"
+          v-model="snackbarIsActive"
+          vertical
+          timeout="9000"
+          color="#B71C1C"
+          elevation="24"
+          location="top"
           >
+            <div class="mb-2" style="font-weight: 800">{{ error.message }}</div>
             {{ error.description }}
-          </v-alert>
-        </div>
+          </v-snackbar>
         <div style="flex-grow: 10;">
           <router-view v-slot="{ Component }">
             <component
@@ -51,6 +48,8 @@ import {useRoute} from "vue-router";
 const errorStack = ref([])
 const drawer = ref(false)
 
+const snackbarIsActive = ref()
+
 const authStore = useAuthStore()
 
 const authenticated = computed(() => {
@@ -73,13 +72,15 @@ watch(
   { immediate: true } // Option pour exécuter le watcher dès le montage du composant
 );
 
-
 function addError(error) {
   let newError = {
     message: 'Erreur',
     description: ''
   }
   if(!error.response){
+    if (errorStack.value.indexOf('{"message":"Erreur réseau : ERR_NETWORK","description":"Service indisponible : merci de réessayer ultérieurement."}') != null) {
+      errorStack.value.splice(errorStack.value.indexOf('{"message":"Erreur réseau : ERR_NETWORK","description":"Service indisponible : merci de réessayer ultérieurement."}'), 1)
+    }
     newError.message = 'Erreur réseau : ' + error.code
     newError.description = 'Service indisponible : merci de réessayer ultérieurement.'
   }else{
@@ -114,6 +115,7 @@ function addError(error) {
     newError.description = 'Problème de disponibilité du fichier demandé'
   }
   errorStack.value.push(newError)
+  snackbarIsActive.value = true
 }
 
 function clearErrors() {
@@ -136,21 +138,11 @@ function toggleDrawer() {
 <style>
 /*Declaré en global*/
 
-
 .custom-card-title {
   background-color: v-bind('$vuetify.theme.current.colors.primary');
   color: v-bind('$vuetify.theme.current.colors.textColor');
 }
 
-.error-stack {
-  position: fixed;
-  top: 64px; /* Ajustez cette valeur en fonction de la hauteur de votre barre de navigation */
-  left: 0;
-  right: 0;
-  z-index: 100;
-  padding: 10px;
-}
-
 .custom-alert {
   background-color: #FFEBEE !important; /* Fond rouge clair */
   color: #B71C1C !important; /* Texte rouge foncé */