Merge branch 'redmine-issues/12064' into 'develop'

REDMINE_ISSUE-12064

See merge request !118

src/components/feature_type/FeatureTypeCustomForm.vue

@@ -232,12 +232,25 @@ export default {
       // * create an array, because backend expects an array
       set(newValue) {
         this.form.options.value = this.trimWhiteSpace(newValue).split(",");
-        this.updateStore();
+        if (!this.hasDuplicateOptions()) {
+          this.updateStore();
+        }
       },
     },
   },
 
   methods: {
+    hasDuplicateOptions() {
+      this.form.options.errors = [];
+      const isDup =
+        new Set(this.form.options.value).size !==
+        this.form.options.value.length;
+      if (isDup) {
+        this.form.options.errors = ["Veuillez saisir des valeurs différentes"];
+        return true;
+      }
+      return false;
+    },
     fillCustomFormData(customFormData) {
       for (let el in customFormData) {
         if (el && this.form[el] && customFormData[el]) {
@@ -290,15 +303,24 @@ export default {
       return occurences.length === 1;
     },
 
+    checkFilledOptions() {
+      if (this.form.field_type.value === "list") {
+        if (this.form.options.value.length < 1) {
+          return false;
+        } else if (
+          this.form.options.value.length === 1 &&
+          this.form.options.value[0] === ""
+        ) {
+          return false;
+        }
+      }
+      return true;
+    },
+
     checkCustomForm() {
       this.form.label.errors = [];
       this.form.name.errors = [];
       this.form.options.errors = [];
-      console.log(
-        this.form.field_type.value,
-        this.form.field_type.value === "list",
-        this.form.options.value.length < 2
-      );
       if (!this.form.label.value) {
         //* vérifier que le label est renseigné
         this.form.label.errors = ["Veuillez compléter ce champ."];
@@ -319,13 +341,13 @@ export default {
           "Les champs personnalisés ne peuvent pas avoir des noms similaires.",
         ];
         return false;
-      } else if (
-        this.form.field_type.value === "list" &&
-        this.form.options.value.length < 2
-      ) {
+      } else if (!this.checkFilledOptions()) {
         //* s'il s'agit d'un type liste, vérifier que le champ option est bien renseigné
         this.form.options.errors = ["Veuillez compléter ce champ."];
         return false;
+      } else if (this.hasDuplicateOptions()) {
+        //* pour le cas d'options dupliqués
+        return false;
       }
       return true;
     },

src/views/feature_type/Feature_type_edit.vue

@@ -98,8 +98,8 @@
           </div>
           <div class="colors_selection" id="id_colors_selection" hidden>
             <div
-              v-for="(value, key) in form.colors_style.value.colors"
-              :key="'colors_style-' + key"
+              v-for="(value, key, index) in form.colors_style.value.colors"
+              :key="'colors_style-' + index"
               class="color-input"
             >
               <label>{{ key }}</label
@@ -268,14 +268,19 @@ export default {
     },
     selected_colors_style: {
       get() {
-        return this.form.colors_style.value.custom_field_name;
+        const value = this.form.colors_style.value.custom_field_name;
+        const customField = this.customForms.find((el) => el.name === value);
+        return customField && customField.length !== 0
+          ? customField.label
+          : value;
       },
       set(newValue) {
+        console.log(newValue);
         const newColorsStyle = {
-          colors: {
-            [newValue.options[0]]: "#000000",
-            [newValue.options[1]]: "#000000",
-          },
+          colors: newValue.options.reduce((obj, key) => {
+            obj[key] = "#000000";
+            return obj;
+          }, {}),
           custom_field_name: newValue.value,
         };
         this.form.colors_style.value = newColorsStyle;