Merge branch 'redmine-issue/14347' into 'develop'

REMINE_ISSUE-14347 | 4.0.0 | Pouvoir rendre obligatoire la saisie des signalements

See merge request !448

src/components/Feature/Edit/FeatureExtraForm.vue

@@ -3,6 +3,7 @@
     <label
       v-if="displayLabels"
       :for="field.name"
+      :class="{ required: field.is_mandatory }"
     >
       {{ field.label }}
     </label>
@@ -11,14 +12,25 @@
       :value="field.value"
       type="text"
       :name="field.name"
+      :required="field.is_mandatory"
       @blur="updateStore_extra_form"
     >
+    <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 === 'list'">
     <label
       v-if="displayLabels"
       :for="field.name"
+      :class="{ required: field.is_mandatory }"
     >
       {{ field.label }}
     </label>
@@ -26,12 +38,23 @@
       :options="field.options"
       :selected="selected_extra_form_list"
       :selection.sync="selected_extra_form_list"
+      :required="field.is_mandatory"
     />
+    <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"
       :for="field.name"
+      :class="{ required: field.is_mandatory }"
     >
       {{ field.label }}
     </label>
@@ -42,9 +65,19 @@
         :value="field.value"
         type="number"
         :name="field.name"
+        :required="field.is_mandatory"
         @change="updateStore_extra_form"
       >
     </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 === 'boolean'">
     <div class="ui checkbox">
@@ -64,6 +97,7 @@
     <label
       v-if="displayLabels"
       :for="field.name"
+      :class="{ required: field.is_mandatory }"
     >
       {{ field.label }}
     </label>
@@ -72,13 +106,24 @@
       :value="field.value"
       type="date"
       :name="field.name"
+      :required="field.is_mandatory"
       @blur="updateStore_extra_form"
     >
+    <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 === 'decimal'">
     <label
       v-if="displayLabels"
       :for="field.name"
+      :class="{ required: field.is_mandatory }"
     >
       {{ field.label }}
     </label>
@@ -89,23 +134,44 @@
         type="number"
         step=".01"
         :name="field.name"
+        :required="field.is_mandatory"
         @change="updateStore_extra_form"
       >
     </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 === 'text'">
     <label
       v-if="displayLabels"
       :for="field.name"
+      :class="{ required: field.is_mandatory }"
     >
       {{ field.label }}
     </label>
     <textarea
       :value="field.value"
       :name="field.name"
+      :required="field.is_mandatory"
       rows="3"
       @blur="updateStore_extra_form"
     />
+    <ul
+      v-if="field.is_mandatory && error"
+      :id="`errorlist-extra-form-${field.name}`"
+      class="errorlist"
+    >
+      <li>
+        {{ error }}
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -126,6 +192,12 @@ export default {
     }
   },
 
+  data() {
+    return {
+      error: null
+    };
+  },
+
   computed: {
     selected_extra_form_list: {
       get() {
@@ -144,6 +216,14 @@ export default {
     }
   },
 
+  watch: {
+    'field.value': function(newValue) {
+      if (newValue) {
+        this.error = null;
+      }
+    }
+  },
+
   methods: {
     updateStore_extra_form(evt) {
       const newExtraForm = this.field;
@@ -154,6 +234,26 @@ export default {
       }
       this.$store.commit('feature/UPDATE_EXTRA_FORM', newExtraForm);
     },
+
+    checkForm() {
+      let isValid = true;
+      if (this.field.is_mandatory && !this.field.value) {
+        isValid = false;
+        this.error = 'Ce champ est obligatoire';
+      } else {
+        this.error = null;
+      }
+      return isValid;
+    }
   },
 };
 </script>
+
+<style lang="less" scoped>
+
+label.required:after {
+	content: ' *';
+	color: rgb(209, 0, 0);
+}
+
+</style>

src/components/FeatureType/FeatureTypeCustomForm.vue

@@ -3,19 +3,34 @@
     :id="`custom_form-${form.position.value}`"
     class="ui teal segment pers-field"
   >
-    <h4>
-      Champ personnalisé
-      <button
-        class="ui small compact right floated icon button remove-field"
-        type="button"
-        @click="removeCustomForm()"
-      >
-        <i
-          class="ui times icon"
-          aria-hidden="true"
-        />
-      </button>
-    </h4>
+    <div class="custom-field-header">
+      <h4>
+        Champ personnalisé
+      </h4>
+      <div class="top-right">
+        <div
+          v-if="(form.label.value || form.name.value) && selectedFieldType !== 'Booléen'"
+          class="ui checkbox"
+        >
+          <input
+            type="checkbox"
+            name="mandatory-custom-field"
+            @change="setIsFieldMandatory($event)"
+          >
+          <label>Champ obligatoire</label>
+        </div>
+        <button
+          class="ui small compact right floated icon button remove-field"
+          type="button"
+          @click="removeCustomForm()"
+        >
+          <i
+            class="ui times icon"
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+    </div>
     <div class="visible-fields">
       <div class="two fields">
         <div class="required field">
@@ -193,6 +208,7 @@ export default {
       ],
       form: {
         dataKey: 0,
+        isFieldMandatory: false,
         label: {
           errors: [],
           id_for_label: 'label',
@@ -292,12 +308,28 @@ export default {
     },
   },
 
+  watch: {
+    'form.isFieldMandatory': {
+      deep: true,
+      handler(newValue) {
+        console.log(newValue);
+      }
+    }
+  },
+
   mounted() {
     //* add datas from store to state to avoid mutating directly store with v-model (not good practice), could have used computed with getter and setter as well
     this.fillCustomFormData(this.customForm);
   },
 
   methods: {
+
+    setIsFieldMandatory(e) {
+      this.form.isFieldMandatory = e.target.checked;
+      this.updateStore();
+      console.log(this.form.isFieldMandatory);
+    },
+
     hasDuplicateOptions() {
       this.form.options.errors = [];
       const isDup =
@@ -332,6 +364,7 @@ export default {
     updateStore() {
       const data = {
         dataKey: this.customForm.dataKey,
+        isMandatory: this.form.isFieldMandatory,
         label: this.form.label.value,
         name: this.form.name.value,
         position: this.form.position.value,
@@ -409,3 +442,22 @@ export default {
   },
 };
 </script>
+
+<style lang="less" scoped>
+
+.custom-field-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .top-right {
+    display: flex;
+    align-items: center;
+
+    .checkbox {
+      margin-right: 5rem;
+    }
+  }
+}
+
+</style>

src/store/modules/feature-type.store.js

@@ -111,6 +111,7 @@ const feature_type = {
         customfield_set: state.customForms.map(el => {
           return {
             position: el.position,
+            is_mandatory: el.isMandatory,
             label: el.label,
             name: el.name,
             field_type: el.field_type,

src/views/Feature/FeatureEdit.vue

@@ -279,6 +279,7 @@
       >
         <FeatureExtraForm
           :id="field.label"
+          ref="extraForm"
           :field="field"
           class="field"
         />
@@ -772,6 +773,13 @@ export default {
 
     checkAddedForm() {
       let isValid = true; //* fallback if all customForms returned true
+      if (this.$refs.extraForm) {
+        for (const extraForm of this.$refs.extraForm) {
+          if (extraForm.checkForm() === false) {
+            isValid = false;
+          }
+        }
+      }
       if (this.$refs.attachementForm) {
         for (const attachementForm of this.$refs.attachementForm) {
           if (attachementForm.checkForm() === false) {