diff --git a/src/components/Feature/Edit/FeatureExtraForm.vue b/src/components/Feature/Edit/FeatureExtraForm.vue index b43d6096cebe18bb8c51424afacda62c81129755..7190b6901e6dd83fdc8b7c2daaaa5a0f8f94a453 100644 --- a/src/components/Feature/Edit/FeatureExtraForm.vue +++ b/src/components/Feature/Edit/FeatureExtraForm.vue @@ -1,5 +1,8 @@ <template> - <div v-if="field && field.field_type === 'char'"> + <div + v-if="field && field.field_type === 'char'" + :class="{ disabled }" + > <label v-if="displayLabels" :for="field.name" @@ -26,7 +29,10 @@ </ul> </div> - <div v-else-if="field && field.field_type === 'list'"> + <div + v-else-if="field && field.field_type === 'list'" + :class="{ disabled }" + > <label v-if="displayLabels" :for="field.name" @@ -53,7 +59,10 @@ </ul> </div> - <div v-else-if="field && field.field_type === 'pre_recorded_list'"> + <div + v-else-if="field && field.field_type === 'pre_recorded_list'" + :class="{ disabled }" + > <label v-if="displayLabels" :for="field.name" @@ -113,7 +122,10 @@ </ul> </div> - <div v-else-if="field && field.field_type === 'multi_choices_list'"> + <div + v-else-if="field && field.field_type === 'multi_choices_list'" + :class="{ disabled }" + > <label v-if="displayLabels" :for="field.name" @@ -150,7 +162,10 @@ </ul> </div> - <div v-else-if="field && field.field_type === 'integer'"> + <div + v-else-if="field && field.field_type === 'integer'" + :class="{ disabled }" + > <label v-if="displayLabels" :for="field.name" @@ -180,8 +195,11 @@ </ul> </div> - <div v-else-if="field && field.field_type === 'boolean'"> - <div class="ui checkbox"> + <div + v-else-if="field && field.field_type === 'boolean'" + :class="{ disabled }" + > + <div :class="['ui checkbox', { disabled }]"> <input :id="field.name" type="checkbox" @@ -195,7 +213,10 @@ </div> </div> - <div v-else-if="field && field.field_type === 'date'"> + <div + v-else-if="field && field.field_type === 'date'" + :class="{ disabled }" + > <label v-if="displayLabels" :for="field.name" @@ -222,7 +243,10 @@ </ul> </div> - <div v-else-if="field && field.field_type === 'decimal'"> + <div + v-else-if="field && field.field_type === 'decimal'" + :class="{ disabled }" + > <label v-if="displayLabels" :for="field.name" @@ -252,7 +276,10 @@ </ul> </div> - <div v-else-if="field && field.field_type === 'text'"> + <div + v-else-if="field && field.field_type === 'text'" + :class="{ disabled }" + > <label v-if="displayLabels" :for="field.name" @@ -307,6 +334,7 @@ export default { data() { return { + disabled: false, error: null, prerecordedListSearchQuery: null, loadingPrerecordedListValues: false, @@ -393,9 +421,10 @@ export default { mounted() { this.checkDeactivatedValues(); // check when custom form appears on page // autoset field to false if is a boolean, since user doesn't need to select it, when false value is expected - if (this.field.field_type === 'boolean' && this.field.value === undefined) { - this.updateStore_extra_form({ target: { checked : false } }); + if (this.field.field_type === 'boolean' && (this.field.value === undefined || this.field.value === null)) { + this.updateStore_extra_form(false); } + this.checkForcedValue(); }, destroyed() { @@ -414,13 +443,18 @@ export default { updateStore_extra_form(evt) { if (this.field) { let newValue; - if (this.field.field_type === 'boolean') { - newValue = evt.target.checked; //* if checkbox use "checked" - } else if (this.field.field_type === 'multi_choices_list') { + if (evt && evt.target) { // if called from the template + if (this.field.field_type === 'boolean') { + newValue = evt.target.checked; //* if checkbox, use "checked" + } else { + newValue = evt.target.value; + } + } else if (this.field.field_type === 'multi_choices_list') { // special case where the value is stored in the state newValue = this.selectedMultipleCheckbox; - } else { - newValue = evt.target.value; + } else { // if the newValue was sent directly + newValue = evt; } + //* set the value selected if (this.isConditionalField) { this.$emit('update:condition-value', newValue); @@ -431,7 +465,24 @@ export default { } }, + checkForcedValue() { + if (!this.field.forced_value_config || this.$route.name.includes('type-signalement')) return; + // loop over each forced value config for this extraForm + this.disabled = false; + for (const config of this.field.forced_value_config) { + // find the extraForm field conditioning the forced value + const conditioningField = this.extra_forms.find((xtraForm) => xtraForm.name === config.conditionField); + // if found check that its value match the condtionValue + if (conditioningField && conditioningField.value === config.conditionValue) { + // set this value with the forced value and disable the form field + this.updateStore_extra_form(config.forcedValue); + this.disabled = true; + } + } + }, + checkDeactivatedValues() { + if (this.$route.name.includes('type-signalement')) return; // if changes occured, update extra_forms array with freshly checked active customForms let newExtraForms = this.extra_forms.map((xForm) => { // we use 'deactivate' instead of 'activate' because at initialization this property cannot be evaluated ... const isDeactivated = !isXtraFormActive(this.extra_forms, xForm.conditional_field_config); // ... if the component is not created to set this property, thus no extra form would appear at all