#48 add message when series is created. Change color of message's type

components/ManageSerie.async.vue

@@ -9,6 +9,9 @@ const { t } = useI18n();
 const dialog = ref<boolean>(false);
 const validateForm = ref(false);
 const rUpload = ref(false);
+const stateMessage = useState<{actif:boolean,
+                               message:string,
+                               type:string}>("stateMessage")
 
 const nameRules = ref([
   (value: string) => 
@@ -86,14 +89,7 @@ async function sendFile() {
 
 async function submit (event:SubmitEvent) { 
 
-  // check if we have daughter solution
-  // if (rDaughterTable.value.length === 0) {
-  //   // TODO: show error message
-  //   return;
-  // }
-  // Group value by file (daughter solution)
-  console.log("plouf");
-
+  // Group value by file (daughter solution) 
   const daughterGroup = rDaughterTable.value.reduce(
     (acc: {[key:string]:{}[]}, cur:{
         idFile: string;
@@ -110,9 +106,7 @@ async function submit (event:SubmitEvent) {
       expectedArea:cur.expectedArea
     });
     return acc;
-  }, {});
-  console.log("0");
-
+  }, {});  
   // send serie name and all associated daughter solution 
   $fetch('/api/AddSerie', {
     method: 'POST',
@@ -123,11 +117,15 @@ async function submit (event:SubmitEvent) {
   })
   .then(() => {
     rUpload.value = !rUpload.value;
-    console.log(1);
+    stateMessage.value.type="success"
+    stateMessage.value.message=t("message.success.createSerie")
+    stateMessage.value.actif=true
 
   })
   .catch(() => {
-    console.log("error");
+    stateMessage.value.type="error"
+    stateMessage.value.message=t("message.error.createSerie")
+    stateMessage.value.actif=true
     // TODO: show error message
   });
 }

components/StateMessage.vue

@@ -0,0 +1,24 @@
+
+
+<script setup lang="ts">
+const stateMessage = useState("stateMessage", () => {return {
+  actif:false,
+  type : undefined,
+  message: ""}
+})
+const timeout = -1
+</script>
+
+<template>
+  <v-snackbar
+    v-model="stateMessage.actif"
+    :timeout="timeout"
+  >
+    <v-alert
+      v-model="stateMessage.actif"
+      :type="stateMessage.type"
+      closable
+      :text="stateMessage.message"
+    />
+  </v-snackbar>
+</template>

lang/en-US.ts

@@ -99,11 +99,17 @@ export default {
         confQuestion: "Are you sure to continue?",
         created: "created",
         createdFail: "Project's creation failed",
+        error:{
+            createSerie: "Failed to create serie"
+        },
         fitting: "The fitting ",
         koDelProject: "We didn't delete, the named project",
         loading: "Loading",
         noEmpty: "Can't be empty",
         okDelProject: "We deleted, the named project",
+        success:{
+            createSerie: "La gamme a été créée"
+        },
         updateFail: "Update fail",
         updateInProgress: "Update of project in progress",
         updateProject:"updated",

lang/fr-FR.ts

@@ -97,12 +97,18 @@ export default {
         confQuestion: "Êtes-vous sûr de vouloir continuer ?",
         created: "a été créé",
         createdFail: "La création du projet a échoué",
+        error:{
+            createSerie: "Echech de la création de la gamme"
+        },
         fitting: "L'ajustement ",
         koDelProject: "Nous n'avons pas supprimé le projet",
         loading: "chargement",
         noEmpty:"ne peut pas être vide",
         okDelProject: "Nous avons supprimé le projet",
         required: "Champ obligatoire",
+        success:{
+            createSerie: "La gamme a été créée"
+        },
         updateFail: "Échec de la mise à jour",
         updateInProgress: "Le project est en cours de mise à jour",
         updateProject:"est mise à jour",

pages/serie.vue

@@ -68,5 +68,6 @@ const ListComp : {[key:string]: string | ConcreteComponent} = {
         </v-window>
       </v-col>
     </v-row>
+    <state-message />
   </NuxtLayout>
 </template>

plugins/vuetify.ts

@@ -14,12 +14,12 @@ const myCustomLightTheme: ThemeDefinition = {
   dark: false,
   colors: {
     primary: '#8bc34a',
-    secondary: '#cddc39',
-    accent: '#f44336',
-    error: '#ff9800',
-    warning: '#607d8b',
+    secondary: '#607d8b',
+    accent: '#cddc39',
+    error: '#f44336',
+    warning: '#ff9800',
     info: '#00bcd4',
-    success: '#2196f3'
+    success: '#8bc34a'
     }
 };
 export default defineNuxtPlugin((app) => {