fix dropdown width & feature_type_edit update after fetching data delay

src/components/Dropdown.vue

@@ -2,7 +2,7 @@
   <div
     id="custom-dropdown"
     :class="[
-      'ui fluid search selection dropdown',
+      'ui search selection dropdown',
       { 'active visible': isOpen },
       { disabled },
     ]"

src/components/feature_type/FeatureTypeCustomForm.vue

@@ -67,12 +67,14 @@
           <Dropdown
             :disabled="!form.label.value || !form.name.value"
             :options="fieldTypeChoices"
-            :selected="selected"
-            :selection.sync="selected"
+            :selected="selectedFieldType"
+            :selection.sync="selectedFieldType"
           />
         </div>
-
-        <div v-if="selected" class="field field-list-options required field">
+        <div
+          v-if="selectedFieldType === 'Liste de valeurs'"
+          class="field field-list-options required field"
+        >
           <label :for="form.options.id_for_label">{{
             form.options.label
           }}</label>
@@ -89,9 +91,6 @@
         </div>
       </div>
     </div>
-    <!--  <input class="delete-hidden-field" type="checkbox"
-            name="{{ form.DELETE.html_name }}"
-            id="{{ form.DELETE.id_for_label }}"> -->
   </div>
 </template>
 
@@ -182,7 +181,7 @@ export default {
   },
 
   computed: {
-    selected: {
+    selectedFieldType: {
       // getter
       get() {
         const currentFieldType = this.fieldTypeChoices.find(
@@ -201,18 +200,33 @@ export default {
         this.updateStore();
       },
     },
-    arrayOption: { // * because backend expects an array
+    arrayOption: {
+      // * because backend expects an array
       get() {
-        return [this.form.options.value]
+        return [this.form.options.value];
       },
       set(newValue) {
         this.form.options.value = [newValue];
-        this.updateOptions()
-      }
-    }
+        this.updateOptions();
+      },
+    },
   },
 
+  /* watch: { // ? not called usefull to stay ?
+    customForm(newValue) {
+      if (newValue) this.fillCustomFormData(newValue);
+    },
+  }, */
+
   methods: {
+    fillCustomFormData(customFormData) {
+      for (let el in customFormData) {
+        if (el && this.form[el] && customFormData[el]) {
+          this.form[el].value = customFormData[el];
+        }
+      }
+      this.updateStore();
+    },
     removeCustomForm() {
       this.$store.commit(
         "feature_type/REMOVE_CUSTOM_FORM",
@@ -230,21 +244,25 @@ export default {
       });
     },
     updateOptions() {
-      this.form.options.value[0] = this.form.options.value[0].replace(/\s*,\s*/ig, ',');
+      this.form.options.value[0] = this.form.options.value[0].replace(
+        /\s*,\s*/gi,
+        ","
+      );
       this.updateStore();
       this.$store.commit("feature_type/UPDATE_COLOR_STYLE");
     },
   },
-   beforeDestroy(){
-     this.$store.commit("feature_type/EMPTY_CUSTOM_FORMS");
+  beforeDestroy() {
+    this.$store.commit("feature_type/EMPTY_CUSTOM_FORMS");
   },
   mounted() {
-    for (let el in this.customForm) {
-      if (el && this.form[el] && this.customForm[el]) {
-        this.form[el].value = this.customForm[el].value;
-      }
-    }
-    this.updateStore();
+    this.fillCustomFormData(this.customForm);
+     /* for (let el in this.customForm) {
+       if (el && this.form[el] && this.customForm[el]) {
+         this.form[el].value = this.customForm[el].value;
+       }
+     } */
+     //this.updateStore();
   },
 };
 </script>

src/store/modules/feature_type.js

@@ -25,6 +25,9 @@ const feature_type = {
     EMPTY_FORM(state) {
       state.form = null;
     },
+    SET_CUSTOM_FORMS(state, customForms) {
+      state.customForms = customForms;
+    },
     ADD_CUSTOM_FORM(state, customForm) {
       state.customForms = [...state.customForms, customForm];
     },

src/views/feature_type/Feature_type_edit.vue

@@ -54,6 +54,7 @@
             />
             <!-- {{ form.geom_type.errors }} -->
           </div>
+
           <div class="required field">
             <label :for="form.color.id_for_label">{{ form.color.label }}</label>
             <input
@@ -68,7 +69,8 @@
             <!-- {{ form.color.errors }} -->
           </div>
         </div>
-        <!--  //* s'affiche après sélection d'option dans type de champ -->
+
+        <!--  //* s'affiche après sélection d'option de type liste dans type de champ -->
         <div
           v-if="colorsStyleOptions.length > 0"
           class="custom_style"
@@ -262,6 +264,12 @@ export default {
       },
       deep: true,
     },
+    feature_type(newValue) {
+      if (newValue) {
+        this.fillFormData(newValue);
+        this.$store.commit("feature_type/SET_CUSTOM_FORMS", newValue.customfield_set)
+      }
+    },
   },
 
   methods: {
@@ -307,6 +315,16 @@ export default {
       }
     },
 
+    fillFormData(formData) {
+      for (const el in formData) {
+        // * find feature_type and fill form values
+        if (this.form[el]) this.form[el].value = formData[el];
+      }
+      console.log(formData)
+      formData.customfield_set.forEach(el => this.addCustomForm(el))
+      this.updateStore();
+    },
+
     updateStore() {
       this.$store.commit("feature_type/UPDATE_FORM", {
         color: this.form.color,
@@ -336,7 +354,7 @@ export default {
         name: "project_detail",
         params: {
           slug: this.project.slug,
-          message: "Le nouveau type de signalement a bien été importé",
+          message: "Le nouveau type de signalement a bien été créé",
         },
       });
     },
@@ -470,10 +488,10 @@ export default {
 
   mounted() {
     if (this.action === "edit" || this.action === "duplicate") {
-      for (const el in this.feature_type) {
-        // * find feature_type and fill form values
-        if (this.form[el]) this.form[el].value = this.feature_type[el];
-      }
+      /* console.log(this.feature_type); // ? à priori le watch devrait suffire
+      if (this.feature_type) {
+        this.fillFormData(this.feature_type);
+      } */
 
       if (this.action === "duplicate") {
         //* replace original name with new default title
@@ -486,7 +504,7 @@ export default {
     } else if (this.geojson) {
       this.importGeoJson();
       if (this.$store.state.feature_type.filenameToImport.name) {
-        this.form.title.value = // * give the filename as title by default 
+        this.form.title.value = // * give the filename as title by default
           this.$store.state.feature_type.filenameToImport.name.split(".")[0];
       }
     }