FeatureExtraForm.vue

<template>
  <div v-if="field && field.field_type === 'char'">
    <label
      v-if="displayLabels"
      :for="field.name"
      :class="{ required: field.is_mandatory }"
    >
      {{ field.label }}
    </label>
    <input
      :id="field.name"
      :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>
    <Dropdown
      :options="field.options"
      :selected="selected_extra_form_list"
      :selection.sync="selected_extra_form_list"
      :required="field.is_mandatory"
      :search="true"
      :clearable="true"
    />
    <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 === 'pre_recorded_list'">
    <label
      v-if="displayLabels"
      :for="field.name"
      :class="{ required: field.is_mandatory }"
    >
      {{ field.label }}
    </label>
    <Multiselect
      v-model="selectedPrerecordedValue"
      :options="
        selectedPrerecordedListValues[field.options[0]] ? selectedPrerecordedListValues[field.options[0]] : []
      "
      :options-limit="10"
      :allow-empty="!field.is_mandatory"
      track-by="label"
      label="label"
      :reset-after="false"
      select-label=""
      selected-label=""
      deselect-label=""
      :searchable="true"
      :placeholder="'Recherchez une valeur de la liste pré-définie ...'"
      :show-no-results="true"
      :loading="loadingPrerecordedListValues"
      :clear-on-select="false"
      :preserve-search="false"
      @search-change="search"
      @select="selectPrerecordedValue"
    >
      <template slot="clear">
        <div
          v-if="selectedPrerecordedValue"
          class="multiselect__clear"
          @click.prevent.stop="clearPrerecordedValue"
        >
          <i
            class="close icon"
            aria-hidden="true"
          />
        </div>
      </template>
      <span slot="noResult">
        Aucun résultat.
      </span>
      <span slot="noOptions">
        Saisissez les premiers caractères ...
      </span>
    </Multiselect>
    <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 === '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"
      :for="field.name"
      :class="{ required: field.is_mandatory }"
    >
      {{ field.label }}
    </label>
    <div class="ui input">
      <!-- //* si click sur fléche dans champ input, pas de focus, donc pas de blur, donc utilisation de @change -->
      <input
        :id="field.name"
        :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">
      <input
        :id="field.name"
        type="checkbox"
        :checked="field.value"
        :name="field.name"
        @change="updateStore_extra_form"
      >
      <label :for="field.name">
        {{ displayLabels ? field.label : '' }}
      </label>
    </div>
  </div>

  <div v-else-if="field && field.field_type === 'date'">
    <label
      v-if="displayLabels"
      :for="field.name"
      :class="{ required: field.is_mandatory }"
    >
      {{ field.label }}
    </label>
    <input
      :id="field.name"
      :value="field.value"
      type="date"
      :name="field.name"
      :required="field.is_mandatory"
      @change="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>
    <div class="ui input">
      <input
        :id="field.name"
        :value="field.value"
        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>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import Multiselect from 'vue-multiselect';

import Dropdown from '@/components/Dropdown.vue';
import { isXtraFormActive } from'@/utils';

export default {
  name: 'FeatureExtraForm',

  components: {
    Dropdown,
    Multiselect
  },

  props: {
    field: {
      type: Object,
      default: null,
    },
    isConditionalField: {
      type: Boolean,
      default: false,
    }
  },

  data() {
    return {
      error: null,
      prerecordedListSearchQuery: null,
      loadingPrerecordedListValues: false,
      selectedPrerecordedValue: null,
      selectedMultipleCheckbox: [],
    };
  },

  computed: {
    ...mapState('feature-type', [
      'selectedPrerecordedListValues'
    ]),
    ...mapState('feature', [
      'extra_forms',
    ]),

    selected_extra_form_list: {
      get() {
        return this.field.value || '';
      },
      set(newValue) {
        //* set the value selected in the dropdown
        if (this.isConditionalField) {
          this.$emit('update:condition-value', newValue);
        } else {
          const newExtraForm = this.field;
          newExtraForm['value'] = newValue;
          this.$store.commit('feature/UPDATE_EXTRA_FORM', newExtraForm);
        }
      },
    },

    displayLabels() {
      return this.$route.name === 'editer-signalement' || this.$route.name === 'ajouter-signalement' || this.$route.name === 'editer-attribut-signalement';
    }
  },

  watch: {
    'field.value': function(newValue) {
      if (newValue) {
        this.error = null;
      }
      this.checkDeactivatedValues(); // check when a custom form value changes
    },
    prerecordedListSearchQuery(newValue) {
      this.loadingPrerecordedListValues = true;
      this.GET_SELECTED_PRERECORDED_LIST_VALUES({
        name: this.field.options[0],
        pattern: newValue
      })
        .then(() => {
          this.loadingPrerecordedListValues = false;
        })
        .catch(() => {
          this.loadingPrerecordedListValues = false;
        });
    }
  },

  created() {
    if (this.field) {
      const { field_type, options, value } = this.field;
      if (field_type === 'pre_recorded_list') {
        this.loadingPrerecordedListValues = true;
        this.GET_SELECTED_PRERECORDED_LIST_VALUES({
          name: options[0],
          pattern: ''
        })
          .then(() => {
            this.loadingPrerecordedListValues = false;
          })
          .catch(() => {
            this.loadingPrerecordedListValues = false;
          });
        if (value) {
          this.selectedPrerecordedValue = { label: value.label ? value.label : value };
        }
      } else if (field_type === 'multi_choices_list' && value) {
        this.selectedMultipleCheckbox = value;
      }
    }
  },
  
  mounted() {
    this.checkDeactivatedValues(); // check when custom form appears on page
  },
  
  destroyed() {
    this.checkDeactivatedValues(); // necessary to ensure all imbricated condition would be verified when an extra form is deactivated
  },

  methods: {
    ...mapActions('feature-type', [
      'GET_SELECTED_PRERECORDED_LIST_VALUES'
    ]),
    ...mapMutations('feature', [
      'UPDATE_EXTRA_FORM',
      'SET_EXTRA_FORMS',
    ]),

    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') {
          newValue = this.selectedMultipleCheckbox;
        } else {
          newValue = evt.target.value;
        }
        //* set the value selected
        if (this.isConditionalField) {
          this.$emit('update:condition-value', newValue);
        } else {
          this.UPDATE_EXTRA_FORM({ ...this.field, ['value']: newValue });
          this.checkDeactivatedValues(); // check when value changed
        }
      }
    },

    checkDeactivatedValues() {
      // 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
        // toggle value to null to deactivate other fields conditioned by it
        if (isDeactivated) {
          xForm['value'] = null;
        }
        return { ...xForm, ['isDeactivated']: isDeactivated };
      });
      this.SET_EXTRA_FORMS(newExtraForms);
    },

    checkForm() {
      let isValid = true;
      if (this.field && this.field.is_mandatory && !this.field.value) {
        isValid = false;
        this.error = 'Ce champ est obligatoire';
      } else {
        this.error = null;
      }
      return isValid;
    },

    search(text) {
      this.prerecordedListSearchQuery = text;
    },

    selectPrerecordedValue(e) {
      this.selectedPrerecordedValue = e;
      this.prerecordedListSearchQuery = null;
      this.updateStore_extra_form({ target: { value:  this.selectedPrerecordedValue } });
    },
    
    clearPrerecordedValue() {
      this.selectedPrerecordedValue = null;
      this.prerecordedListSearchQuery = null;
      this.updateStore_extra_form({ target: { value:  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>

<style lang="less" scoped>

label.required:after {
	content: ' *';
	color: rgb(209, 0, 0);
}
.checkbox_list {
  display: flex;
  flex-direction: column;
  .ui.checkbox {
    margin: .5rem;
    font-weight: normal;
  }
}
</style>

<style>
/* keep placeholder width when opening dropdown */
.multiselect {
  width: 305px;
}
/* keep font-weight from overide of semantic classes */
.multiselect__placeholder, .multiselect__content, .multiselect__tags  {
  font-weight: initial !important;
}
/* keep placeholder eigth */
.multiselect .multiselect__placeholder {
  margin-bottom: 9px !important;
  padding-top: 1px;
}
/* keep placeholder height when opening dropdown without selection */
input.multiselect__input {
  padding: 3px 0 0 0 !important;
}
/* keep placeholder height when opening dropdown with already a value selected */
.multiselect__tags .multiselect__single {
  padding: 1px 0 0 0 !important;
  margin-bottom: 9px;
}
</style>