From 2b96b5d0a5ff2d9fa54578c160154f4f201166e2 Mon Sep 17 00:00:00 2001
From: Amandine <amandine.sahl@cevennes-parcnational.fr>
Date: Thu, 20 Jun 2024 10:19:21 +0200
Subject: [PATCH] Utilisation de toast pour afficher message d'erreur du
 formulaire d'inscription (#66)

* Use toast pour message erreur du formulaire

* Changelog
---
 docs/changelog.md                             |   1 +
 .../src/components/EventReservationForm.vue   | 456 ++++++++----------
 front-vite/src/main.ts                        |   3 +
 3 files changed, 194 insertions(+), 266 deletions(-)

diff --git a/docs/changelog.md b/docs/changelog.md
index 7058c81f..e31c5d49 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -9,6 +9,7 @@
 - Mise à jour des librairies javascript (#65)
 - Utilisation de MenuBar pour la barre de menu (#65)
 - Style page des statistiques (#65)
+- Utilisation de toast pour afficher les messages d'erreur du formulaire d'inscription aux animations (#66)
 
 **⚠️ Notes de version**
  - Les paramètres de configuration css de la barre de menu ont changé. Se référer au fichier `front-vite/public/css/custom.css.sample` pour évaluer les impacts
diff --git a/front-vite/src/components/EventReservationForm.vue b/front-vite/src/components/EventReservationForm.vue
index efb255f1..0e295f97 100644
--- a/front-vite/src/components/EventReservationForm.vue
+++ b/front-vite/src/components/EventReservationForm.vue
@@ -1,323 +1,233 @@
 <template>
-  <vv-form
-    @submit="values => emits('submit', values)"
-    class="mt-4"
-    :validation-schema="formSchema"
-    :initial-values="formValues"
-    v-slot="{ errors }"
-  >
+  <vv-form @submit="values => emits('submit', values)" class="mt-4" :validation-schema="formSchema"
+    :initial-values="formValues" v-slot="{ errors }">
+  
+    <div class="card flex justify-content-center">
+      <button @click="showTemplate()" label="Save">Save</button>
+    </div>
     <div class="space-y-12">
-
+  
       <div class="border-b border-gray-900/10 pb-12">
         <h2 class="text-base font-medium leading-7 text-gray-900">Informations personnelles</h2>
-        <p class="mt-1 text-sm leading-6 text-gray-600">Utilisez une adresse mail sur laquelle vous pouvez vous connecter.</p>
-
+        <p class="mt-1 text-sm leading-6 text-gray-600">Utilisez une adresse mail sur laquelle vous pouvez vous connecter.
+        </p>
+        
         <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
-
+        
           <div class="col-span-1 sm:col-span-3">
             <label for="prenom" class="block text-sm font-medium leading-6 text-gray-900">Prénom</label>
             <div class="mt-2">
-              <vv-field
-                type="text"
-                name="prenom"
-                id="prenom"
-                autocomplete="given-name"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6"
-              />
-              <vv-error-message
-                name="prenom"
-              />
+              <vv-field type="text" name="prenom" id="prenom" autocomplete="given-name"
+                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6" />
+              <vv-error-message name="prenom" />
             </div>
           </div>
-
+        
           <div class="col-span-1 sm:col-span-3">
             <label for="nom" class="block text-sm font-medium leading-6 text-gray-900">Nom</label>
             <div class="mt-2">
-              <vv-field
-                type="text"
-                name="nom"
-                id="nom"
-                autocomplete="family-name"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6"
-              />
-              <vv-error-message
-                name="nom"
-              />
+              <vv-field type="text" name="nom" id="nom" autocomplete="family-name"
+                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6" />
+              <vv-error-message name="nom" />
             </div>
           </div>
-
+        
           <div class="col-span-1 sm:col-span-2">
             <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email</label>
             <div class="mt-2">
-              <vv-field
-                id="email"
-                name="email"
-                type="email"
-                autocomplete="email"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6"
-              />
-              <vv-error-message
-                name="email"
-              />
+              <vv-field id="email" name="email" type="email" autocomplete="email"
+                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6" />
+              <vv-error-message name="email" />
             </div>
           </div>
-
+        
           <div class="col-span-1 sm:col-span-2">
             <label for="tel" class="block text-sm font-medium leading-6 text-gray-900">Téléphone</label>
             <div class="mt-2">
-              <vv-field
-                type="text"
-                name="tel"
-                id="tel"
-                autocomplete="tel"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6"
-              />
-              <vv-error-message
-                name="tel"
-              />
+              <vv-field type="text" name="tel" id="tel" autocomplete="tel"
+                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6" />
+              <vv-error-message name="tel" />
             </div>
           </div>
-
+        
           <div class="col-span-1 sm:col-span-2">
             <label for="num_departement" class="block text-sm font-medium leading-6 text-gray-900">Lieu d'origine</label>
             <div class="mt-2">
-              <vv-field
-                id="num_departement"
-                name="num_departement"
-                autocomplete="num_departement"
-                as="select"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 text-sm leading-6 h-10"
-              >
-                <option
-                  v-for="o in origins"
-                  :key="o.value"
-                  :value="o.value"
-                >
+              <vv-field id="num_departement" name="num_departement" autocomplete="num_departement" as="select"
+                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 text-sm leading-6 h-10">
+                <option v-for="o in origins" :key="o.value" :value="o.value">
                   {{ o.label }}
                 </option>
               </vv-field>
-              <vv-error-message
-                name="num_departement"
-              />
+              <vv-error-message name="num_departement" />
             </div>
           </div>
-
+        
         </div>
-      </div>
-
-      <div class="border-b border-gray-900/10 pb-12">
-        <h2 class="text-base font-medium leading-7 text-gray-900">Informations sur les participants</h2>
-        <p class="mt-1 text-sm leading-6 text-gray-600">
-          Merci de préciser le nombre de participants par tranche d'âge.
-        </p>
-
-        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-10">
-          <div class="sm:col-span-2">
-            <label for="nb_adultes" class="block text-sm font-medium leading-6 text-gray-900">Adulte(s)</label>
-            <div class="mt-2">
-              <vv-field
-                type="number"
-                name="nb_adultes"
-                id="nb_adultes"
-                min="0"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6"
-              />
-
-              <vv-error-message
-                name="nb_adultes"
-              />
+        </div>
+        
+        <div class="border-b border-gray-900/10 pb-12">
+          <h2 class="text-base font-medium leading-7 text-gray-900">Informations sur les participants</h2>
+          <p class="mt-1 text-sm leading-6 text-gray-600">
+            Merci de préciser le nombre de participants par tranche d'âge.
+          </p>
+        
+          <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-10">
+            <div class="sm:col-span-2">
+              <label for="nb_adultes" class="block text-sm font-medium leading-6 text-gray-900">Adulte(s)</label>
+              <div class="mt-2">
+                <vv-field type="number" name="nb_adultes" id="nb_adultes" min="0"
+                  class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6" />
+        
+                <vv-error-message name="nb_adultes" />
+              </div>
             </div>
-          </div>
-          <div class="sm:col-span-2">
-            <label for="nb_moins_6_ans" class="block text-sm font-medium leading-6 text-gray-900">Moins de 6 ans</label>
-            <div class="mt-2">
-              <vv-field
-                type="number"
-                name="nb_moins_6_ans"
-                id="nb_moins_6_ans"
-                min="0"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6"
-              />
-
-              <vv-error-message
-                name="nb_moins_6_ans"
-              />
+            <div class="sm:col-span-2">
+              <label for="nb_moins_6_ans" class="block text-sm font-medium leading-6 text-gray-900">Moins de 6 ans</label>
+              <div class="mt-2">
+                <vv-field type="number" name="nb_moins_6_ans" id="nb_moins_6_ans" min="0"
+                  class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6" />
+        
+                <vv-error-message name="nb_moins_6_ans" />
+              </div>
             </div>
-          </div>
-          <div class="sm:col-span-2">
-            <label for="nb_6_8_ans" class="block text-sm font-medium leading-6 text-gray-900">6 - 8 ans</label>
-            <div class="mt-2">
-              <vv-field
-                type="number"
-                name="nb_6_8_ans"
-                id="nb_6_8_ans"
-                min="0"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6"
-              />
-
-              <vv-error-message
-                name="nb_6_8_ans"
-              />
+            <div class="sm:col-span-2">
+              <label for="nb_6_8_ans" class="block text-sm font-medium leading-6 text-gray-900">6 - 8 ans</label>
+              <div class="mt-2">
+                <vv-field type="number" name="nb_6_8_ans" id="nb_6_8_ans" min="0"
+                  class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6" />
+        
+                <vv-error-message name="nb_6_8_ans" />
+              </div>
             </div>
-          </div>
-          <div class="sm:col-span-2">
-            <label for="nb_9_12_ans" class="block text-sm font-medium leading-6 text-gray-900">9 - 12 ans</label>
-            <div class="mt-2">
-              <vv-field
-                type="number"
-                name="nb_9_12_ans"
-                id="nb_9_12_ans"
-                min="0"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6"
-              />
-
-              <vv-error-message
-                name="nb_9_12_ans"
-              />
+            <div class="sm:col-span-2">
+              <label for="nb_9_12_ans" class="block text-sm font-medium leading-6 text-gray-900">9 - 12 ans</label>
+              <div class="mt-2">
+                <vv-field type="number" name="nb_9_12_ans" id="nb_9_12_ans" min="0"
+                  class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6" />
+        
+                <vv-error-message name="nb_9_12_ans" />
+              </div>
             </div>
-          </div>
-          <div class="sm:col-span-2">
-            <label for="nb_plus_12_ans" class="block text-sm font-medium leading-6 text-gray-900">Plus de 12 ans</label>
-            <div class="mt-2">
-              <vv-field
-                type="number"
-                name="nb_plus_12_ans"
-                id="nb_plus_12_ans"
-                min="0"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6"
-              />
-
-              <vv-error-message
-                name="nb_plus_12_ans"
-              />
+            <div class="sm:col-span-2">
+              <label for="nb_plus_12_ans" class="block text-sm font-medium leading-6 text-gray-900">Plus de 12 ans</label>
+              <div class="mt-2">
+                <vv-field type="number" name="nb_plus_12_ans" id="nb_plus_12_ans" min="0"
+                  class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6" />
+        
+                <vv-error-message name="nb_plus_12_ans" />
+              </div>
+            </div>
+        
+            <div class="sm:col-span-12">
+              <vv-error-message name="nb_total" />
             </div>
-          </div>
-
-          <div class="sm:col-span-12">
-            <vv-error-message
-                  name="nb_total"
-                />
           </div>
         </div>
-      </div>
-
-      <div class="border-b border-gray-900/10 pb-12" v-if="displayAdminFields">
-        <h2 class="text-base font-medium leading-7 text-gray-900">Informations administrateurs</h2>
-        <p class="mt-1 text-sm leading-6 text-gray-600">
-          Informations saisissables uniquement par les administrateurs.
-        </p>
-
-        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-10">
-          <div class="sm:col-span-2">
-            <label for="liste_attente" class="block text-sm font-medium leading-6 text-gray-900">En liste d'attente</label>
-            <div class="mt-2">
-              <vv-field
-                name="liste_attente"
-                id="liste_attente"
-                as="select"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 text-sm leading-6 h-10"
-              >
-                <option :value="true">Sur liste d'attente</option>
-                <option :value="false">Comptabilisée</option>
-              </vv-field>
-
-              <vv-error-message
-                name="liste_attente"
-              />
+        
+        <div class="border-b border-gray-900/10 pb-12" v-if="displayAdminFields">
+          <h2 class="text-base font-medium leading-7 text-gray-900">Informations administrateurs</h2>
+          <p class="mt-1 text-sm leading-6 text-gray-600">
+            Informations saisissables uniquement par les administrateurs.
+          </p>
+        
+          <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-10">
+            <div class="sm:col-span-2">
+              <label for="liste_attente" class="block text-sm font-medium leading-6 text-gray-900">En liste
+                d'attente</label>
+              <div class="mt-2">
+                <vv-field name="liste_attente" id="liste_attente" as="select"
+                  class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 text-sm leading-6 h-10">
+                  <option :value="true">Sur liste d'attente</option>
+                  <option :value="false">Comptabilisée</option>
+                </vv-field>
+        
+                <vv-error-message name="liste_attente" />
+              </div>
+            </div>
+            <div class="sm:col-span-2">
+              <label for="confirmed" class="block text-sm font-medium leading-6 text-gray-900">Confirmée par le
+                créateur</label>
+              <div class="mt-2">
+                <vv-field name="confirmed" id="confirmed" as="select"
+                  class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 text-sm leading-6 h-10">
+                  <option :value="true">Confirmée</option>
+                  <option :value="false">En attente de confirmation</option>
+                </vv-field>
+        
+                <vv-error-message name="confirmed" />
+              </div>
             </div>
           </div>
-          <div class="sm:col-span-2">
-            <label for="confirmed" class="block text-sm font-medium leading-6 text-gray-900">Confirmée par le créateur</label>
+        </div>
+        
+        <div class="border-b border-gray-900/10 pb-12">
+          <h2 class="text-base font-medium leading-7 text-gray-900">Commentaire</h2>
+          <p class="mt-1 text-sm leading-6 text-gray-600">
+            Vous souhaitez préciser certains points sur votre réservation, vous pouvez les inscrire ici.
+          </p>
+        
+        
+          <div class="col-span-full">
             <div class="mt-2">
-              <vv-field
-                name="confirmed"
-                id="confirmed"
-                as="select"
-                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 text-sm leading-6 h-10"
-              >
-                <option :value="true">Confirmée</option>
-                <option :value="false">En attente de confirmation</option>
-              </vv-field>
-
-              <vv-error-message
-                name="confirmed"
-              />
+              <vv-field id="commentaire" name="commentaire" rows="3" as="textarea"
+                class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6" />
+              <vv-error-message name="commentaire" />
             </div>
           </div>
         </div>
-      </div>
-
-      <div class="border-b border-gray-900/10 pb-12">
-        <h2 class="text-base font-medium leading-7 text-gray-900">Commentaire</h2>
-        <p class="mt-1 text-sm leading-6 text-gray-600">
-          Vous souhaitez préciser certains points sur votre réservation, vous pouvez les inscrire ici.
-        </p>
-
-
-        <div class="col-span-full">
-          <div class="mt-2">
-            <vv-field
-              id="commentaire"
-              name="commentaire"
-              rows="3"
-              as="textarea"
-              class="block w-full rounded-sm border-0 p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6"
-            />
-            <vv-error-message
-              name="commentaire"
-            />
+        </div>
+        
+        <div class="my-6 flex flex-col items-end gap-x-6">
+          <div class="flex">
+            <button class="rounded-sm mr-4 px-3 py-2 text-sm font-medium text-white shadow-sm bg-sky-600 hover:bg-sky-500"
+              @click="emits('cancel')">
+              Annuler
+            </button>
+        
+            <button type="submit" class="rounded-sm px-3 py-2 text-sm font-medium text-white shadow-sm"
+              :class="{
+                'bg-sky-600': !saving,
+                'hover:bg-sky-500': !saving,
+                'bg-sky-100': saving,
+                'hover:bg-sky-100': saving,
+                'text-black': saving,
+                                                                                                                                                                                                                                                                                                                                                                                                                                                      }"
+              :disabled="saving">
+              {{ saving ? 'Enregistrement en cours...' : 'Enregistrer réservation' }}
+            </button>
           </div>
+          <span v-if="Object.keys(errors).length === 1" class="text-red-500">
+            Une erreur est présente dans le formulaire (champ {{ Object.keys(errors)[0] }}).
+            Merci de la corriger avant de soumettre à nouveau le formulaire
+          </span>
+          <span v-if="Object.keys(errors).length > 1" class="text-red-500">
+            Plusieurs erreurs sont présentes dans le formulaire.
+            Merci de les corriger avant de soumettre à nouveau le formulaire
+          </span>
         </div>
-      </div>
-    </div>
-
-    <div class="my-6 flex flex-col items-end gap-x-6">
-      <div class="flex">
-        <button
-          class="rounded-sm mr-4 px-3 py-2 text-sm font-medium text-white shadow-sm bg-sky-600 hover:bg-sky-500"
-          @click="emits('cancel')"
-        >
-          Annuler
-        </button>
-
-        <button
-          type="submit"
-          class="rounded-sm px-3 py-2 text-sm font-medium text-white shadow-sm"
-          :class="{
-            'bg-sky-600': !saving,
-            'hover:bg-sky-500': !saving,
-            'bg-sky-100': saving,
-            'hover:bg-sky-100': saving,
-            'text-black': saving,
-          }"
-          :disabled="saving"
-        >
-          {{ saving ? 'Enregistrement en cours...' : 'Enregistrer réservation' }}
-        </button>
-      </div>
-      <span v-if="Object.keys(errors).length === 1" class="text-red-500">
-        Une erreur est présente dans le formulaire (champ {{ Object.keys(errors)[0] }}).
-        Merci de la corriger avant de soumettre à nouveau le formulaire
-      </span>
-      <span v-if="Object.keys(errors).length > 1" class="text-red-500">
-        Plusieurs erreurs sont présentes dans le formulaire.
-        Merci de les corriger avant de soumettre à nouveau le formulaire
-      </span>
-      <span v-if="saveError" class="text-red-500">
-       Une erreur est survenue : {{ saveError }}
-      </span>
-      <span v-if="saveError" class="text-red-500">
-        N'hésitez pas à prendre contact avec le parc si l'erreur persiste.
-        Veuillez nous excuser pour la gêne occasionnée.
-      </span>
-    </div>
-  </vv-form>
-
+        </vv-form>
+        <Toast :position="toastPosition">
+          <template #message="slotProps">
+            <span :class="iconClass"></span>
+            <div class="p-toast-message-text">
+              <span class="p-toast-summary">{{ slotProps.message.summary }}</span>
+              <div class="p-toast-detail" v-html="slotProps.message.detail" />
+              <div> <small>N'hésitez pas à prendre contact avec le parc si l'erreur persiste. Veuillez nous excuser pour la gêne
+                  occasionnée.</small></div>
+            </div>
+          </template>
+        </Toast>
 </template>
 
 <script setup lang="ts">
 import { Form as VvForm, Field as VvField, ErrorMessage as VvErrorMessage } from 'vee-validate'
 import * as yup from 'yup'
+import { watch } from 'vue';
+import { useToast } from "primevue/usetoast";
+import Toast from "primevue/toast";
+const toast = useToast();
+
 
 const emits = defineEmits(['submit', 'cancel'])
 const props = defineProps({
@@ -348,6 +258,20 @@ const props = defineProps({
 })
 const origins = CONFIGURATION.ORIGINS
 
+
+
+
+watch(
+  () => props.saveError, (prev, next) => {
+    console.log(props.saveError)
+    if (props.saveError.name == "Error") {
+      toast.add({ severity: 'error', summary: 'Sauvegarde impossible', detail: props.saveError.message, life: 10000 });
+    }
+
+  },
+  { deep: true });
+
+
 const formSchema = yup.object().shape({
   email: yup.string().email().required().label('Email'),
   tel: yup.string().required().label('Téléphone'),
diff --git a/front-vite/src/main.ts b/front-vite/src/main.ts
index d53548a7..f0d2ceaa 100644
--- a/front-vite/src/main.ts
+++ b/front-vite/src/main.ts
@@ -9,6 +9,7 @@ import router from './router'
  */
 import PrimeVue from 'primevue/config'
 import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice';
 import 'primevue/resources/themes/lara-light-teal/theme.css'
 import 'primevue/resources/primevue.min.css'
 import 'primeicons/primeicons.css'
@@ -20,6 +21,7 @@ import { useAuthStore } from './stores/auth'
 
 
 import App from './App.vue'
+ 
 
 /**
  * Check the auth
@@ -39,6 +41,7 @@ async function boot() {
 
   app.use(PrimeVue)
   app.use(ConfirmationService)
+  app.use(ToastService)
 
   app.use(pinia)
   app.use(router)