FeatureLinkedForm.vue

<template>
  <div class="ui teal segment">
    <h4>
      Liaison
      <button
        @click="remove_linked_formset"
        class="ui small compact right floated icon button remove-formset"
        type="button"
      >
        <i class="ui times icon"></i>
      </button>
    </h4>
    <ul id="errorlist-links" class="errorlist">
      <li v-for="error in form.errors" :key="error" v-html="error"></li>
    </ul>
    <div class="visible-fields">
      <div class="two fields">
        <div class="required field">
          <label for="form.relation_type.id_for_label">{{
            form.relation_type.label
          }}</label>
          <Dropdown
            :options="relationTypeChoices"
            :selected="selected_relation_type"
            :selection.sync="selected_relation_type"
          />
          {{ form.relation_type.errors }}
        </div>
        <div class="required field">
          <label for="form.feature_to.id_for_label">{{
            form.feature_to.label
          }}</label>
          <Dropdown
            :options="featureOptions"
            :selected="selected_feature_to"
            :selection.sync="selected_feature_to"
          />
          {{ form.feature_to.errors }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Dropdown from "@/components/Dropdown.vue";

export default {
  name: "FeatureLinkedForm",

  props: ["linkedForm", "features"],

  components: {
    Dropdown,
  },

  data() {
    return {
      form: {
        errors: null,
        relation_type: {
          errors: null,
          id_for_label: "relation_type",
          html_name: "relation_type",
          label: "Type de liaison",
          value: {
            name: "Doublon",
            value: "doublon",
          },
        },
        feature_to: {
          errors: null,
          id_for_label: "feature_to",
          field: {
            max_length: 30,
          },
          html_name: "feature_to",
          label: "Signalement lié",
          value: {
            name: "",
            value: "",
          },
        },
      },
      relationTypeChoices: [
        { name: "Doublon", value: "doublon" },
        { name: "Remplace", value: "remplace" },
        { name: "Est remplacé par", value: "est_remplace_par" },
        { name: "Dépend de", value: "depend_de" },
      ],
    };
  },

  computed: {
    featureOptions: function () {
      return this.features
        .filter(
          (el) =>
            el.feature_type.slug === this.$route.params.slug_type_signal && //* filter only for the same feature
            el.feature_id !== this.$route.params.slug_signal //* filter out current feature
        )
        .map((el) => {
          return {
            name: `${el.title} (${el.display_creator} - ${this.formatDate(
              el.created_on
            )})`,
            value: el.feature_id,
          };
        });
    },

    selected_relation_type: {
      // getter
      get() {
        return this.form.relation_type.value.name;
      },
      // setter
      set(newValue) {
        this.form.relation_type.value = newValue;
        this.updateStore();
      },
    },

    selected_feature_to: {
      // getter
      get() {
        return this.form.feature_to.value.name;
      },
      // setter
      set(newValue) {
        this.form.feature_to.value = newValue;
        this.updateStore();
      },
    },
  },

  watch: {
    featureOptions(newValue) {
      if (newValue) {
        this.getExistingFeature_to(newValue);
      }
    },
  },

  methods: {
    formatDate(value) {
      let date = new Date(value);
      date = date.toLocaleString().replace(",", "");
      return date.substr(0, date.length - 3); //* quick & dirty way to remove seconds from date
    },

    remove_linked_formset() {
      this.$store.commit("feature/REMOVE_LINKED_FORM", this.linkedForm.dataKey);
    },

    updateStore() {
      this.$store.commit("feature/UPDATE_LINKED_FORM", {
        dataKey: this.linkedForm.dataKey,
        relation_type: this.form.relation_type.value.value,
        feature_to: {
          feature_id: this.form.feature_to.value.value,
        },
      });
    },

    checkForm() {
      if (this.form.feature_to.value === "") {
        this.form.errors = [
          "<strong>Choisir un signalement lié</strong><br/> Pourriez-vous choisir un signalement pour la nouvelle liaison ?",
        ];
        document
          .getElementById("errorlist-links")
          .scrollIntoView({ block: "start", inline: "nearest" });
        return false;
      }
      this.form.errors = [];
      return true;
    },

    getExistingFeature_to(featureOptions) {
      const feature_to = featureOptions.find(
        (el) => el.value === this.linkedForm.feature_to.feature_id
      );
      if (feature_to) {
        this.form.feature_to.value = feature_to;
      }
    },

    getExistingRelation_type() {
      const relation_type = this.relationTypeChoices.find(
        (el) => el.value === this.linkedForm.relation_type
      );
      if (relation_type) {
        this.form.relation_type.value = relation_type;
      }
    },
  },

  mounted() {
    if (this.linkedForm.relation_type) {
      this.getExistingRelation_type();
    }
  },
};
</script>