remove unused datas and add style to create feature type

src/components/feature_type/FeatureTypeCustomForm.vue

@@ -158,10 +158,10 @@ export default {
         },
         position: {
           errors: null,
-          id_for_label: "name",
-          label: "Nom",
+          id_for_label: "position",
+          label: "Position",
           min_value: 0, // ! check if good values (not found)
-          html_name: "name",
+          html_name: "position",
           help_text:
             "Numéro d'ordre du champ dans le formulaire de saisie du signalement",
           field: {
@@ -171,9 +171,9 @@ export default {
         },
         field_type: {
           errors: null,
-          id_for_label: "name",
-          label: "Nom",
-          html_name: "name",
+          id_for_label: "field_type",
+          label: "Type de champ",
+          html_name: "field_type",
           help_text: "",
           field: {
             max_length: 50,
@@ -182,9 +182,9 @@ export default {
         },
         options: {
           errors: null,
-          id_for_label: "name",
-          label: "Nom",
-          html_name: "name",
+          id_for_label: "options",
+          label: "Options",
+          html_name: "options",
           help_text: "",
           field: {
             max_length: 256,
@@ -198,15 +198,35 @@ export default {
     removeCustomForm() {
       this.$store.commit("REMOVE_CUSTOM_FORM", this.form.dataKey);
     },
-    blur(e) {
-      console.log("e", e);
-      console.log("this.form", this.form);
+    blur() {
       this.$store.commit("UPDATE_CUSTOM_FORM", this.form);
     },
   },
   created() {
-    console.log(this.form);
-    this.form["dataKey"] = this.customForm.dataKey;
+    this.form["dataKey"] = this.customForm.dataKey; // * add counter to the new form
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style>
+  #add-field {
+    margin-top: 1em;
+  }
+
+  #id_style_container {
+    display: flex;
+    height: 100%;
+  }
+
+  #id_colors_selection {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+  }
+  .color-input {
+    margin-left: 1em;
+  }
+  .color-input > label {
+    margin-right: 0.5em;
+  }
+</style>
\ No newline at end of file

src/store/index.js

@@ -196,6 +196,31 @@ export default new Vuex.Store({
       }
       commit("SET_COOKIE", cookieValue);
     },
+    POST_FEATURE_TYPE({ state }, payload) {
+      const reducer = (acc, curr) => [...acc, {
+        label: curr.label.value,
+        name: curr.name.value,
+        position: curr.position.value,
+        field_type: curr.field_type.value,
+        options: curr.options.value,
+      }]
+      const customFormsData = state.customForms.reduce(reducer)
+      console.log("customFormsData", customFormsData)
+      const data = { form: payload, formset: customFormsData }
+      console.log("data", data)
+
+      /* axios
+        .post(`${DJANGO_API_BASE}feature_type/`, data)
+        .then((response) => {
+          const routerHistory = router.options.routerHistory // * use store previous route to go back after login
+          commit("SET_USER", response.data.user);
+          router.push(routerHistory[routerHistory.length - 1] || "/")
+          dispatch("GET_USER_LEVEL_PROJECTS");
+        })
+        .catch(() => {
+          commit("SET_USER", false)
+        }); */
+    }
   }
 
 });

src/views/feature_type/Feature_type_create.vue

@@ -119,7 +119,7 @@
           <!--  {% for hidden in form.hidden_fields %}
             {{ hidden }}
           {% endfor %} -->
-            <!-- v-for="form in customFormsWithCounter" -->
+          <!-- v-for="form in customFormsWithCounter" -->
           <FeatureTypeCustomForm
             v-for="form in customForms"
             :key="form.dataKey"
@@ -245,23 +245,19 @@
         </div>
 
         <button
+          type="button"
           @click="addCustomForm"
           id="add-field"
-          type="button"
           class="ui compact basic button button-hover-green"
         >
           <i class="ui plus icon"></i>Ajouter un champ personnalisé
         </button>
 
         <div class="ui divider"></div>
-
-        <button
-          type="submit"
-          class="ui teal icon button"
-          onclick="return checkform()"
-        >
+        <button class="ui teal icon button" type="button" @click="postForm">
           <i class="white save icon"></i> Créer le type de signalement
         </button>
+        // TODO: Add check script for form & other scripts
       </form>
     </div>
   </div>
@@ -288,9 +284,6 @@ export default {
   computed: {
     ...mapGetters(["project"]),
     ...mapState(["customForms"]),
-    /* customFormsWithCounter: function () {
-      return this.customForms.map((form) => this.addId(form));
-    }, */
   },
 
   created() {
@@ -307,30 +300,12 @@ export default {
           value: null,
         },
         color: {
-          id_for_label: "label",
-          label: "label",
-          field: {
-            max_length: 128, // ! Vérifier la valeur dans django
-          },
-          html_name: "Label",
-          value: null,
-        },
-        label: {
-          id_for_label: "label",
-          label: "label",
+          id_for_label: "couleur",
+          label: "Couleur",
           field: {
             max_length: 128, // ! Vérifier la valeur dans django
           },
-          html_name: "Label",
-          value: null,
-        },
-        name: {
-          id_for_label: "label",
-          label: "label",
-          field: {
-            max_length: 128, // ! Vérifier la valeur dans django
-          },
-          html_name: "Label",
+          html_name: "couleur",
           value: null,
         },
         title: {
@@ -343,13 +318,13 @@ export default {
           value: null,
         },
         geom_type: {
-          id_for_label: "label",
-          label: "label",
+          id_for_label: "geom_type",
+          label: "Type de géométrie",
           field: {
             choices: ["Ligne", "Point", "Polygone"],
             max_length: 128, // ! Vérifier la valeur dans django
           },
-          html_name: "Label",
+          html_name: "geom_type",
           value: null,
         },
       },
@@ -357,22 +332,35 @@ export default {
     };
   },
   methods: {
-     /* addId(form) {
-       console.log("form.dataKey", form.dataKey);
-       console.log("form.dataKey ? form.dataKey : this.dataKey", form.dataKey ? form.dataKey : this.dataKey);
-
-        this.dataKey += 1;
-        return { ...form, dataKey: form.dataKey ? form.dataKey : this.dataKey };
-      }, */
     addCustomForm() {
-      //this.formset = [...this.formset, customForm$];
-      this.dataKey += 1;
-      this.$store.commit("ADD_CUSTOM_FORM", this.dataKey);
+      this.dataKey += 1; // * increment counter for key in v-for
+      this.$store.commit("ADD_CUSTOM_FORM", this.dataKey); // * create an object with the counter in store
     },
     removeCustomForm(index) {
-      console.log(index, this.formset, this.formset[index]);
       this.formset.splice(index, 1);
     },
+    postForm() {
+      const data = {
+        color: this.form.color.value,
+        title: this.form.title.value,
+        geom_type: this.form.geom_type.value,
+      };
+      console.log("POST !", data);
+    },
+        /* checkform() {
+    let form_idx = $('#id_form-TOTAL_FORMS').val();
+    for (var i=0; i <= form_idx;i++ ){
+      let id_form_options = 'id_form-' + i + '-options';
+      let id_form_options_elem = document.getElementById(id_form_options);
+      if (typeof id_form_options_elem !== null && id_form_options_elem !== 'undefined'){
+          let id_form_options_val = document.getElementById(id_form_options);
+          if (id_form_options_val != undefined && id_form_options_val != null){
+            let new_id_form_options_val = document.getElementById(id_form_options).value.replace(/^,|,$/g, '');
+            document.getElementById(id_form_options).value = new_id_form_options_val;
+          }
+      }
+    }
+  } */
   },
 };
 </script>
\ No newline at end of file