#48 fill field add rules validate name of serie

components/ManageSerie.async.vue

@@ -4,15 +4,16 @@ SPDX-FileCopyrightText: 2024 Marcellino Palerme <[email protected]>
 SPDX-License-Identifier: MIT
 -->
 <script setup lang="ts">
-
+import * as v from 'valibot';
 const { t } = useI18n();
 const dialog = ref<boolean>(false);
+const validateForm = ref(false);
 
 
-const nameRules = [
-  (v: string) => !!v || t("message.required"),
-  (v: string) => (v && v.length <= 3) || t("message.max10"),
-];
+const nameRules = ref([
+  (value: string) => 
+    useValibot(v.pipe(v.string(), v.nonEmpty(t('message.noEmpty'))),value),
+]);
 const nameSerie = ref<string>("");
 
 /**
@@ -34,51 +35,56 @@ function add() {
     max-width="600"
   >
     <v-form
+      v-model="validateForm"
       validate-on="lazy blur"
-    />
-    <v-card>
-      <v-card-title>
-        <span class="headline">Add a new serie</span>
-      </v-card-title>
-      <v-card-text>
-        <v-text-field
-          v-model="nameSerie"
-          :counter="10"
-          :rules="nameRules"
-          label="t('label.nameSerie')"
-          hide-details
-          required
-        />
-      </v-card-text>
+      @submit.prevent
+    >
+      <v-card>
+        <v-card-title>
+          <span class="headline">{{ t('title.addSerie') }}</span>
+        </v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="nameSerie"
+            :counter="10"
+            :rules="nameRules"
+            :label="t('label.nameSerie')"
+            required
+          />
+        </v-card-text>
 
-      <v-expansion-panels>
-        <v-expansion-panel
-          :title="t('title.machine')"
-        >
-          <v-expansion-panel-text>
-            helle 
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-        <v-expansion-panel
-          :title="t('title.mother')"
-        >
-          <v-expansion-panel-text>
-            helle 
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-        <v-expansion-panel
-          :title="t('title.daughter')"
-        >
-          <v-expansion-panel-text>
-            helle 
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-      </v-expansion-panels>
-      <v-btn
-        color="primary"
-        text="Save"
-        @click="dialog = false"
-      />
-    </v-card>
+        <v-expansion-panels>
+          <v-expansion-panel
+            :title="t('title.machine')"
+            disabled
+          >
+            <v-expansion-panel-text>
+              helle 
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+          <v-expansion-panel
+            :title="t('title.mother')"
+            disabled
+          >
+            <v-expansion-panel-text>
+              helle 
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+          <v-expansion-panel
+            :title="t('title.daughter')"
+          >
+            <v-expansion-panel-text>
+              helle 
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+        <v-btn
+          color="primary"
+          text="Save"
+          :disabled="!(validateForm === true)"
+          @click="dialog = false"
+        />
+      </v-card>
+    </v-form>
   </v-dialog>
 </template>

composables/useValibot.ts

@@ -0,0 +1,15 @@
+import * as v from 'valibot';
+
+export const useValibot = (schema, value) => {
+
+    try {
+        v.parse(schema, value);
+      } catch (e) {
+        if (e instanceof v.ValiError) {
+          // Handle the validation error
+          return(e.message);
+        }
+      }
+    return true
+  }
+

lang/en-US.ts

@@ -75,6 +75,7 @@ export default {
         files: "Files",
         logout: "Logout",
         m_type: "type",
+        nameSerie: "Serie's name",
         nbFile: "File's number",
         noFile: "No file",
         noProject: "No projet",
@@ -101,6 +102,7 @@ export default {
         fitting: "The fitting ",
         koDelProject: "We didn't delete, the named project",
         loading: "Loading",
+        noEmpty: "Can't be empty",
         okDelProject: "We deleted, the named project",
         updateFail: "Update fail",
         updateInProgress: "Update of project in progress",
@@ -123,6 +125,9 @@ export default {
     },
     title:{
         compoundName:"Reference name",
+        daughter:"Daughter solution",
+        machine:"Machine",
+        mother:"Mother solution",
         projectName: "Projet name"
     }
 };

lang/fr-FR.ts

@@ -73,6 +73,7 @@ export default {
         files: "Fichiers",
         logout: "Déconnexion",
         m_type: "type",
+        nameSerie: "Nom de la gamme",
         nbFile: "Nb de fichiers",
         noFile: "Pas de fichier",
         noProject: "Aucun projet",
@@ -99,7 +100,9 @@ export default {
         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",
         updateFail: "Échec de la mise à jour",
         updateInProgress: "Le project est en cours de mise à jour",
         updateProject:"est mise à jour",
@@ -120,8 +123,12 @@ export default {
         serie: "Gammes"
     },
     title: {
+        addSerie: "Ajout d'une gamme",
         compoundName:"Nom du témoin",
-        projectName: "Nom du projet"
+        daughter:"Solution fille",
+        machine:"Machine",
+        mother:"Solution mère",
+        projectName: "Nom du projet",
     }
 
 };