visgraph: post, patch and delete relationship link works!

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue

@@ -108,10 +108,10 @@
                         >
                      <label class="form-check-label" for="reverse">{{ $t('visgraph.reverse_relation') }}</label>
                   </div>
-<pre class="debug">
+<!--pre class="debug">
 modal.data
 {{ modal.data }}
-</pre>
+</pre-->
                </form>
             </div>
          </template>
@@ -147,8 +147,8 @@ export default {
          container: '',
          checkedLayers: [],
          relations: [],
-         relation: null,
-         reverse: false,
+         //relation: null,
+         //reverse: false,
          displayHelpMessage: false,
          listenPersonFlag: 'normal',
          newEdgeData: {},
@@ -157,7 +157,13 @@ export default {
             modalDialogClass: "modal-md",
             title: null,
             action: null,
-            data: {},
+            data: {
+               type: 'relationship',
+               from: null,
+               to: null,
+               relation: null,
+               reverse: false
+            },
             button: {
                class: null,
                text: null
@@ -216,26 +222,24 @@ export default {
 
       },
 
-      /*
       relation: {
          get() {
-            return this.relation
+            return this.modal.data.relation
          },
          set(value) {
-            //console.log('setter relation', value) // <=== InternalError: too much recursion
-            this.relation = value
+            this.modal.data.relation = value
          }
       },
 
       reverse: {
          get() {
-            return this.reverse
+            return this.modal.data.reverse
          },
-         set(newValue) {
-            //console.log('setter reverse', newValue) // <=== InternalError: too much recursion
-            this.reverse = newValue
+         set(value) {
+            this.modal.data.reverse = value
          }
       },
+      /*
       */
 
    },
@@ -377,8 +381,9 @@ export default {
 
       /// control Modal
       addRelationshipModal(edgeData) {
-         this.modal.data = edgeData
-         console.log('==- addRelationshipModal', edgeData) // { from: "person_1617", to: "person_1614" }
+         console.log('==- addRelationshipModal', edgeData)
+         this.modal.data.from = edgeData.from
+         this.modal.data.to = edgeData.to
          this.modal.action = 'create'
          this.modal.title = 'visgraph.add_relationship_link'
          this.modal.button.class = 'btn-create'
@@ -410,7 +415,13 @@ export default {
 
       resetForm() {
          console.log('==- reset Form')
-         this.modal.data = {}
+         this.modal.data = {
+            type: 'relationship',
+            from: null,
+            to: null,
+            relation: null,
+            reverse: false
+         }
          this.modal.action = null
          this.modal.title = null
          this.modal.button.class = null
@@ -428,6 +439,7 @@ export default {
          //console.log('customLabel', value)
          return (value.title && value.reverseTitle) ? `${value.title.fr} ↔ ${value.reverseTitle.fr}` : ''
       },
+
       getPerson(idtext) {
          let person = this.persons.filter(p => p.id === idtext)
          return person[0]
@@ -439,8 +451,9 @@ export default {
          console.log('   @@> switch listener to create link mode:', this.listenPersonFlag)
       },
       dropRelationship() {
-         console.log('delete')
-         deleteRelationship(relationship) /// param ?
+         console.log('delete', this.modal.data)
+         deleteRelationship(this.modal.data)
+         this.$store.commit('removeLink', this.modal.data.id)
          this.modal.showModal = false
          this.resetForm()
       },
@@ -449,9 +462,7 @@ export default {
          switch (this.modal.action) {
 
             case 'create':
-               return postRelationship(
-                  this.getPerson(this.modal.data.from), this.getPerson(this.modal.data.to), this.relation, this.reverse
-               )
+               return postRelationship(this.modal.data)
                .then(relationship => new Promise(resolve => {
                   console.log('post response', relationship)
                   this.$store.dispatch('addLinkFromRelationship', relationship)
@@ -462,10 +473,10 @@ export default {
                .catch()
 
             case 'edit':
-               return patchRelationship(relationship)
+               return patchRelationship(this.modal.data)
                .then(relationship => new Promise(resolve => {
                   console.log('patch relationship', relationship)
-                  this.$store.dispatch('updateLinkFromRelationship', relationship)
+                  this.$store.commit('updateLink', relationship)
                   this.modal.showModal = false
                   this.resetForm()
                   resolve()