validate custmForm and increment position

src/components/feature_type/FeatureTypeCustomForm.vue

@@ -24,7 +24,11 @@
             @blur="updateStore"
           />
           <small>{{ form.label.help_text }}</small>
-          {{ form.label.errors }}
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in form.label.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
 
         <div class="required field">
@@ -39,9 +43,14 @@
             @blur="updateStore"
           />
           <small>{{ form.name.help_text }}</small>
-          {{ form.name.errors }}
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in form.name.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
       </div>
+
       <div class="three fields">
         <div class="required field">
           <label :for="form.position.id_for_label">{{
@@ -58,8 +67,13 @@
             />
           </div>
           <small>{{ form.position.help_text }}</small>
-          {{ form.position.errors }}
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in form.position.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
+
         <div class="required field">
           <label :for="form.field_type.id_for_label">{{
             form.field_type.label
@@ -70,7 +84,13 @@
             :selected="selectedFieldType"
             :selection.sync="selectedFieldType"
           />
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in form.field_type.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
+
         <div
           v-if="selectedFieldType === 'Liste de valeurs'"
           class="field field-list-options required field"
@@ -87,7 +107,11 @@
             class="options-field"
           />
           <small>{{ form.help_text }}</small>
-          {{ form.options.errors }}
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in form.options.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -120,7 +144,7 @@ export default {
       form: {
         dataKey: 0,
         label: {
-          errors: null,
+          errors: [],
           id_for_label: "label",
           label: "Label",
           help_text: "Nom en language naturel du champ",
@@ -131,7 +155,7 @@ export default {
           value: null,
         },
         name: {
-          errors: null,
+          errors: [],
           id_for_label: "name",
           label: "Nom",
           html_name: "name",
@@ -143,7 +167,7 @@ export default {
           value: null,
         },
         position: {
-          errors: null,
+          errors: [],
           id_for_label: "position",
           label: "Position",
           min_value: 0, // ! check if good values (not found)
@@ -153,10 +177,10 @@ export default {
           field: {
             max_length: 128, // ! check if good values (not found)
           },
-          value: 0,
+          value: this.customForm.dataKey - 1,
         },
         field_type: {
-          errors: null,
+          errors: [],
           id_for_label: "field_type",
           label: "Type de champ",
           html_name: "field_type",
@@ -164,10 +188,10 @@ export default {
           field: {
             max_length: 50,
           },
-          value: null, //* field to send to the backend
+          value: "boolean",
         },
         options: {
-          errors: null,
+          errors: [],
           id_for_label: "options",
           label: "Options",
           html_name: "options",
@@ -246,6 +270,21 @@ export default {
       // TODO : supprimer les espaces pour chaque option au début et à la fin QUE à la validation
       return string.replace(/\s*,\s*/gi, ",");
     },
+    checkCustomForm() {
+      console.log("checkCustomForm");
+      console.log(this.form);
+      if (this.form.label.value === null) {
+        this.form.label.errors = ["Veuillez compléter ce champ."];
+        return false;
+      } else if (this.form.name.value === null) {
+        this.form.name.errors = ["Veuillez compléter ce champ."];
+        this.form.label.errors = [];
+        return false;
+      }
+      this.form.label.errors = [];
+      this.form.name.errors = [];
+      return true;
+    },
   },
 
   beforeDestroy() {

src/views/feature_type/Feature_type_edit.vue

@@ -25,6 +25,7 @@
         <p v-if="action === 'create'">
           Ces champs par défaut existent pour tous les types de signalement:
         </p>
+
         <div class="two fields">
           <div class="required field">
             <label :for="form.title.id_for_label">{{ form.title.label }}</label>
@@ -43,6 +44,7 @@
               </li>
             </ul>
           </div>
+
           <div class="required field">
             <label :for="form.geom_type.id_for_label">{{
               form.geom_type.label
@@ -109,6 +111,7 @@
             :key="form.dataKey"
             :dataKey="form.dataKey"
             :customForm="form"
+            ref="customForms"
           />
         </div>
 
@@ -211,7 +214,7 @@ export default {
             max_length: 128, // ! Vérifier la valeur dans django
           },
           html_name: "geom_type",
-          value: "Point",
+          value: "point",
         },
       },
       reservedKeywords: [
@@ -324,10 +327,19 @@ export default {
       });
     },
 
-    checkForm() {
+    checkCustomForms() {
+      for (const customForm of this.$refs.customForms) {
+        if (customForm.checkCustomForm() === false) {
+          return false;
+        }
+      }
+      return true; //* fallback if all customForms returned true
+    },
+
+    checkForms() {
       if (this.form.title.value) {
         this.form.title.errors = [];
-        return true;
+        return this.checkCustomForms(); //* if customForms are ok, validate, if get out function
       } else if (
         !this.form.title.errors.includes("Veuillez compléter ce champ.") // TODO : Gérer les autres champs
       ) {
@@ -352,7 +364,7 @@ export default {
     sendFeatureType() {
       // * si édition d'une feature_type déja existante, faire un put
       const requestType = this.action === "edit" ? "put" : "post";
-      if (this.checkForm()) {
+      if (this.checkForms()) {
         this.$store
           .dispatch("feature_type/SEND_FEATURE_TYPE", requestType)
           .then(({ status }) => {
@@ -389,7 +401,7 @@ export default {
 
     async postFeatureTypeThenFeatures() {
       const requestType = this.action === "edit" ? "put" : "post";
-      if (this.checkForm()) {
+      if (this.checkForms()) {
         await this.$store
           .dispatch("feature_type/SEND_FEATURE_TYPE", requestType)
           .then(({ feature_type_slug }) => {