diff --git a/src/components/Feature/Edit/FeatureExtraForm.vue b/src/components/Feature/Edit/FeatureExtraForm.vue
index 6e671d42c2baa854b1651e76c63b6e01587cca0c..3ae38ec519c52e664918ec5c33b58702c39cb126 100644
--- a/src/components/Feature/Edit/FeatureExtraForm.vue
+++ b/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>
diff --git a/src/components/FeatureType/FeatureTypeCustomForm.vue b/src/components/FeatureType/FeatureTypeCustomForm.vue
index 51f068a1460a50452a0bd20da3def1f4302fb3ea..17dfbc157fb94e7b51a79c298153911a453241be 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,
@@ -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>
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 824c440563985231552addb3ec5c9f1f585280f8..cf127b78cb27621d87db4914cb742293841fcc8b 100644
--- a/src/views/Feature/FeatureEdit.vue
+++ b/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) {