fill feature_edit linkedForm with existing linked_features (adapt data for dropdown with object

src/components/feature/FeatureLinkedForm.vue

@@ -54,12 +54,55 @@ export default {
     Dropdown,
   },
 
+  data() {
+    return {
+      form: {
+        errors: null,
+        relation_type: {
+          errors: null,
+          id_for_label: "relation_type",
+          field: {
+            choices: ["Doublon", "Remplace", "Est remplacé par", "Dépend de"],
+          },
+          html_name: "relation_type",
+          label: "Type de liaison",
+          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: "",
+          },
+        },
+      },
+    };
+  },
+
   computed: {
     featureOptions: function () {
-      return this.features.map(
-        (el) => `${el.title} (${el.display_creator} - ${el.created_on})`
-      );
+      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() {
@@ -71,10 +114,11 @@ export default {
         this.updateStore();
       },
     },
+
     selected_feature_to: {
       // getter
       get() {
-        return this.form.feature_to.value;
+        return this.form.feature_to.value.name;
       },
       // setter
       set(newValue) {
@@ -84,44 +128,33 @@ export default {
     },
   },
 
-  data() {
-    return {
-      form: {
-        errors: null,
-        relation_type: {
-          errors: null,
-          id_for_label: "relation_type",
-          field: {
-            choices: ["Doublon", "Remplace", "Est remplacé par", "Dépend de"],
-          },
-          html_name: "relation_type",
-          label: "Type de liaison",
-          value: "Doublon",
-        },
-        feature_to: {
-          errors: null,
-          id_for_label: "feature_to",
-          field: {
-            max_length: 30,
-          },
-          html_name: "feature_to",
-          label: "Signalement lié",
-          value: "",
-        },
-      },
-    };
+  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,
-        feature_to: this.form.feature_to.value,
+        feature_to: this.form.feature_to.value.value,
       });
     },
+
     checkForm() {
       if (this.form.feature_to.value === "") {
         this.form.errors = [
@@ -135,6 +168,20 @@ export default {
       this.form.errors = [];
       return true;
     },
+
+    getExistingFeature_to(featureOptions) {
+      const feature_to = featureOptions.find(
+        (el) => el.value === this.linkedForm.feature_to.feature_id
+      );
+      console.log(
+        featureOptions,
+        this.linkedForm.feature_to.feature_id,
+        feature_to
+      );
+      if (feature_to) {
+        this.form.feature_to.value = feature_to;
+      }
+    },
   },
 };
 </script>
\ No newline at end of file

src/store/modules/feature.js

@@ -47,8 +47,8 @@ const feature = {
     CLEAR_ATTACHMENT_FORM(state) {
       state.attachmentFormset = [];
     },
-    ADD_LINKED_FORM(state, dataKey) {
-      state.linkedFormset = [...state.linkedFormset, { dataKey }];
+    ADD_LINKED_FORM(state, linkedFormset) {
+      state.linkedFormset = [...state.linkedFormset, linkedFormset];
     },
     UPDATE_LINKED_FORM(state, payload) {
       const index = state.linkedFormset.findIndex((el) => el.dataKey === payload.dataKey);
@@ -60,6 +60,9 @@ const feature = {
     SET_LINKED_FEATURES(state, payload) {
       state.linked_features = payload;
     },
+    CLEAR_LINKED_FORM(state) {
+      state.linkedFormset = [];
+    },
   },
   getters: {
   },
@@ -159,11 +162,11 @@ const feature = {
       }
     },
 
-/*     GET_FEATURE_LINK({ commit }, featureId) {
-      featureAPI
-        .getlinked_features(featureId)
-        .then((data) => commit("SET_FEATURE_LINKS", data));
-    } */
+    /*     GET_FEATURE_LINK({ commit }, featureId) {
+          featureAPI
+            .getlinked_features(featureId)
+            .then((data) => commit("SET_FEATURE_LINKS", data));
+        } */
     //DELETE_FEATURE({ state }, feature_slug) {
     //console.log("Deleting feature:", feature_slug, state)
 

src/views/feature/Feature_edit.vue

@@ -323,6 +323,7 @@ export default {
       "linkedFormset",
       "features",
       "extra_form",
+      "linked_features",
     ]),
     ...mapGetters("feature_type", ["feature_type"]),
 
@@ -460,7 +461,6 @@ export default {
       }); // * create an object with the counter in store
       this.attachmentDataKey += 1; // * increment counter for key in v-for
     },
-
     addExistingAttachementFormset(attachementFormset) {
       for (const attachment of attachementFormset) {
         console.log("attachment", attachment);
@@ -476,9 +476,22 @@ export default {
     },
 
     add_linked_formset() {
-      this.$store.commit("feature/ADD_LINKED_FORM", this.linkedDataKey); // * create an object with the counter in store
+      this.$store.commit("feature/ADD_LINKED_FORM", {
+        dataKey: this.linkedDataKey,
+      }); // * create an object with the counter in store
       this.linkedDataKey += 1; // * increment counter for key in v-for
     },
+    addExistingLinkedFormset(linkedFormset) {
+      for (const linked of linkedFormset) {
+        console.log("linked", linked);
+        this.$store.commit("feature/ADD_LINKED_FORM", {
+          dataKey: this.linkedDataKey,
+          relation_type: linked.relation_type,
+          feature_to: linked.feature_to,
+        });
+        this.linkedDataKey += 1;
+      }
+    },
 
     updateStore() {
       this.$store.commit("feature/UPDATE_FORM", {
@@ -837,11 +850,16 @@ export default {
     },
 
     getFeatureAttachments() {
-      // todo : mutualize in store with feature_detail.vue
       featureAPI
         .getFeatureAttachments(this.$route.params.slug_signal)
         .then((data) => this.addExistingAttachementFormset(data));
     },
+
+    getLinkedFeatures() {
+      featureAPI
+        .getFeatureLinks(this.$route.params.slug_signal)
+        .then((data) => this.addExistingLinkedFormset(data));
+    },
   },
 
   created() {
@@ -855,9 +873,11 @@ export default {
 
     if (this.$route.params.slug_signal) {
       this.getFeatureAttachments();
+      this.getLinkedFeatures();
     } else {
-      //* be sure that previous attachemntFormset has been cleared for creation
+      //* be sure that previous Formset have been cleared for creation
       this.$store.commit("feature/CLEAR_ATTACHMENT_FORM");
+      this.$store.commit("feature/CLEAR_LINKED_FORM");
     }
   },