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

REDMINE_ISSUE-14895|->v4.1.x|Ajouter un champ "Liste à choix multiples" dans les champs personnalisés

See merge request geocontrib/geocontrib-frontend!502

src/components/Feature/Detail/FeatureTable.vue

@@ -43,6 +43,9 @@
                 ]"
                 aria-hidden="true"
               />
+              <span v-else-if="field.field_type === 'multi_choices_list'">
+                {{ field.value.join(', ') }}
+              </span>
               <span v-else>
                 {{ field.value }}
               </span>
@@ -232,4 +235,5 @@ td {
     color: #ee2e24;
   }
 }
+
 </style>

src/components/Feature/Edit/FeatureExtraForm.vue

@@ -113,6 +113,43 @@
     </ul>
   </div>
 
+  <div v-else-if="field && field.field_type === 'multi_choices_list'">
+    <label
+      v-if="displayLabels"
+      :for="field.name"
+      :class="{ required: field.is_mandatory }"
+    >
+      {{ field.label }}
+    </label>
+    <div class="checkbox_list">
+      <div
+        v-for="option in field.options"
+        :key="option"
+        class="ui checkbox"
+      >
+        <input
+          :id="option"
+          type="checkbox"
+          :checked="field.value && field.value.includes(option)"
+          :name="option"
+          @change="selectMultipleCheckbox"
+        >
+        <label :for="option">
+          {{ option }}
+        </label>
+      </div>
+    </div>
+    <ul
+      v-if="field.is_mandatory && error"
+      :id="`errorlist-extra-form-${field.name}`"
+      class="errorlist"
+    >
+      <li>
+        {{ error }}
+      </li>
+    </ul>
+  </div>
+
   <div v-else-if="field && field.field_type === 'integer'">
     <label
       v-if="displayLabels"
@@ -142,6 +179,7 @@
       </li>
     </ul>
   </div>
+
   <div v-else-if="field && field.field_type === 'boolean'">
     <div class="ui checkbox">
       <input
@@ -156,6 +194,7 @@
       </label>
     </div>
   </div>
+
   <div v-else-if="field && field.field_type === 'date'">
     <label
       v-if="displayLabels"
@@ -182,6 +221,7 @@
       </li>
     </ul>
   </div>
+
   <div v-else-if="field && field.field_type === 'decimal'">
     <label
       v-if="displayLabels"
@@ -211,6 +251,7 @@
       </li>
     </ul>
   </div>
+
   <div v-else-if="field && field.field_type === 'text'">
     <label
       v-if="displayLabels"
@@ -264,7 +305,8 @@ export default {
       error: null,
       prerecordedListSearchQuery: null,
       loadingPrerecordedListValues: false,
-      selectedPrerecordedValue: null
+      selectedPrerecordedValue: null,
+      selectedMultipleCheckbox: [],
     };
   },
 
@@ -312,10 +354,11 @@ export default {
   },
 
   created() {
-    if (this.field.field_type === 'pre_recorded_list') {
+    const { field_type, options, value } = this.field;
+    if (field_type === 'pre_recorded_list') {
       this.loadingPrerecordedListValues = true;
       this.GET_SELECTED_PRERECORDED_LIST_VALUES({
-        name: this.field.options[0],
+        name: options[0],
         pattern: ''
       })
         .then(() => {
@@ -324,9 +367,11 @@ export default {
         .catch(() => {
           this.loadingPrerecordedListValues = false;
         });
-    }
-    if (this.field.value) {
-      this.selectedPrerecordedValue = { label: this.field.value };
+      if (value) {
+        this.selectedPrerecordedValue = { label: value };
+      }
+    } else if (field_type === 'multi_choices_list' && value) {
+      this.selectedMultipleCheckbox = value;
     }
   },
 
@@ -342,6 +387,8 @@ export default {
       const newExtraForm = this.field;
       if (this.field.field_type === 'boolean') {
         newExtraForm['value'] = evt.target.checked; //* if checkbox use "checked"
+      } else if (this.field.field_type === 'multi_choices_list') {
+        newExtraForm['value'] = this.selectedMultipleCheckbox;
       } else {
         newExtraForm['value'] = evt.target.value;
       }
@@ -372,7 +419,17 @@ export default {
     clear() {
       this.selectedPrerecordedValue = null;
       this.prerecordedListSearchQuery = null;
-    }
+    },
+
+    selectMultipleCheckbox(e) {
+      const { checked, name } = e.target;
+      if (checked) {
+        this.selectedMultipleCheckbox.push(name);
+      } else {
+        this.selectedMultipleCheckbox = this.selectedMultipleCheckbox.filter((el) => el !== name);
+      }
+      this.updateStore_extra_form();
+    },
   },
 };
 </script>
@@ -383,5 +440,13 @@ label.required:after {
 	content: ' *';
 	color: rgb(209, 0, 0);
 }
+.checkbox_list {
+  display: flex;
+  flex-direction: column;
+  .ui.checkbox {
+    margin: .5rem;
+    font-weight: normal;
+  }
+}
 
 </style>

src/components/FeatureType/FeatureTypeCustomForm.vue

@@ -140,7 +140,7 @@
         </div>
 
         <div
-          v-if="selectedFieldType === 'Liste de valeurs'"
+          v-if="selectedFieldType === 'Liste de valeurs' || selectedFieldType === 'Liste à choix multiples'"
           class="field field-list-options required field"
         >
           <label :for="form.options.id_for_label">{{
@@ -228,6 +228,7 @@ export default {
         { name: 'Date', value: 'date' },
         { name: 'Liste de valeurs', value: 'list' },
         { name: 'Liste de valeurs pré-enregistrées', value: 'pre_recorded_list' },
+        { name: 'Liste à choix multiples', value: 'multi_choices_list' },
         { name: 'Nombre entier', value: 'integer' },
         { name: 'Nombre décimal', value: 'decimal' },
         { name: 'Texte multiligne', value: 'text' },

src/views/FeatureType/FeatureTypeDetail.vue

@@ -604,6 +604,17 @@ export default {
                     pour le champ personnalisé "${name}".`;
                   return false;
                 }
+              } else if (field_type === 'multi_choices_list') {
+                //*then check if the values in the value array are available options
+                //const unvalidValues = fieldInFeature.some((el) => !options.includes(el));
+                const unvalidValues = fieldInFeature.filter((el) => !options.includes(el));
+                console.log(customType, field_type, options, fieldInFeature, unvalidValues);
+                if (unvalidValues.length > 0) {
+                  const plural = unvalidValues.length > 1;
+                  this.importError = `Le fichier est invalide: ${plural ? 'les valeurs' : 'la valeur'} [ ${unvalidValues.join(', ')} ] ${plural ? 'ne sont pas des options valides' : 'n\'est pas une option valide'}
+                    pour le champ personnalisé "${name}".`;
+                  return false;
+                }
               } else if (customType !== field_type) {
                 //* check if custom field value match
                 this.importError = `Le fichier est invalide: Un champ de type ${field_type} ne peut pas avoir la valeur [ ${fieldInFeature} ]`;