diff --git a/src/components/Feature/Edit/FeatureExtraForm.vue b/src/components/Feature/Edit/FeatureExtraForm.vue
index 778c46539df03dbc82510be65fb9577478e5a3d4..8953315d23d7c56e62a1944abf8dd3f616d1fea9 100644
--- a/src/components/Feature/Edit/FeatureExtraForm.vue
+++ b/src/components/Feature/Edit/FeatureExtraForm.vue
@@ -5,6 +5,7 @@
<label
v-if="$route.name !== 'details-signalement'"
:for="field.name"
+ :class="{ required: field.is_mandatory }"
>
{{ field.label }}
</label>
@@ -13,8 +14,18 @@
: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
@@ -23,6 +34,7 @@
<label
v-if="$route.name !== 'details-signalement'"
:for="field.name"
+ :class="{ required: field.is_mandatory }"
>
{{ field.label }}
</label>
@@ -30,7 +42,17 @@
: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'"
@@ -38,6 +60,7 @@
<label
v-if="$route.name !== 'details-signalement'"
:for="field.name"
+ :class="{ required: field.is_mandatory }"
>
{{ field.label }}
</label>
@@ -48,9 +71,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'"
@@ -74,6 +107,7 @@
<label
v-if="$route.name !== 'details-signalement'"
:for="field.name"
+ :class="{ required: field.is_mandatory }"
>
{{ field.label }}
</label>
@@ -82,8 +116,18 @@
: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'"
@@ -91,6 +135,7 @@
<label
v-if="$route.name !== 'details-signalement'"
:for="field.name"
+ :class="{ required: field.is_mandatory }"
>
{{ field.label }}
</label>
@@ -101,9 +146,19 @@
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'"
@@ -111,15 +166,26 @@
<label
v-if="$route.name !== 'details-signalement'"
: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>
@@ -140,6 +206,12 @@ export default {
}
},
+ data() {
+ return {
+ error: null
+ };
+ },
+
computed: {
selected_extra_form_list: {
get() {
@@ -154,6 +226,14 @@ export default {
},
},
+ watch: {
+ 'field.value': function(newValue) {
+ if (newValue) {
+ this.error = null;
+ }
+ }
+ },
+
methods: {
updateStore_extra_form(evt) {
const newExtraForm = this.field;
@@ -164,6 +244,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>
diff --git a/src/components/FeatureType/FeatureTypeCustomForm.vue b/src/components/FeatureType/FeatureTypeCustomForm.vue
index d064ee6ca7a27c946f98d3543e65621a946da83b..24b535fdbf2723a0d314dcaea1fe9ef1f073dabb 100644
--- a/src/components/FeatureType/FeatureTypeCustomForm.vue
+++ b/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,
@@ -416,3 +449,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>
diff --git a/src/store/modules/feature-type.store.js b/src/store/modules/feature-type.store.js
index 49921f0132dfd260b45b198d359bd45fc4f4fd30..0fe6b25c8de60295e8d2ba2a166fdd592ceead4e 100644
--- a/src/store/modules/feature-type.store.js
+++ b/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,
diff --git a/src/views/Feature/FeatureEdit.vue b/src/views/Feature/FeatureEdit.vue
index 6059ea53eff334338c572a54415fadaac7b9905b..7b4d03283161257b7cf5dae95a2d92b7f1ce2453 100644
--- a/src/views/Feature/FeatureEdit.vue
+++ b/src/views/Feature/FeatureEdit.vue
@@ -268,6 +268,7 @@
>
<FeatureExtraForm
:id="field.label"
+ ref="extraForm"
:field="field"
/>
{{ field.errors }}
@@ -753,6 +754,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) {