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"
    />
    <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"
      @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>
    <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 Dropdown from '@/components/Dropdown.vue';

export default {
  name: 'FeatureExtraForm',

  components: {
    Dropdown,
  },

  props: {
    field: {
      type: Object,
      default: null,
    }
  },

  data() {
    return {
      error: null
    };
  },

  computed: {
    selected_extra_form_list: {
      get() {
        return this.field.value || '';
      },
      set(newValue) {
        //* set the value selected in the dropdown
        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;
      }
    }
  },

  methods: {
    updateStore_extra_form(evt) {
      const newExtraForm = this.field;
      if (this.field.field_type === 'boolean') {
        newExtraForm['value'] = evt.target.checked; //* if checkbox use "checked"
      } else {
        newExtraForm['value'] = evt.target.value;
      }
      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>