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,
+         //relation: null,
-         reverse: false,
+         //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.modal.data.relation = value
-            this.relation = value
          }
       },
 
       reverse: {
          get() {
-            return this.reverse
+            return this.modal.data.reverse
          },
-         set(newValue) {
+         set(value) {
-            //console.log('setter reverse', newValue) // <=== InternalError: too much recursion
+            this.modal.data.reverse = value
-            this.reverse = newValue
          }
       },
+      /*
       */
 
    },
@@ -377,8 +381,9 @@ export default {
 
       /// control Modal
       addRelationshipModal(edgeData) {
-         this.modal.data = edgeData
+         console.log('==- addRelationshipModal', edgeData)
-         console.log('==- addRelationshipModal', edgeData) // { from: "person_1617", to: "person_1614" }
+         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')
+         console.log('delete', this.modal.data)
-         deleteRelationship(relationship) /// param ?
+         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(
+               return postRelationship(this.modal.data)
-                  this.getPerson(this.modal.data.from), this.getPerson(this.modal.data.to), this.relation, this.reverse
-               )
                .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()

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js

@@ -1,3 +1,5 @@
+import { splitId } from './vis-network'
+
 /**
  * @function makeFetch
  * @param method
@@ -130,21 +132,19 @@ const getRelationsList = () => {
 
 /**
  * @function postRelationship
- * @param fromPerson
+ * @param relationship
- * @param toPerson
- * @param relation
- * @param reverse
  * @returns {Promise<Response>}
  */
-const postRelationship = (fromPerson, toPerson, relation, reverse) => {
+const postRelationship = (relationship) => {
+    console.log(relationship)
     return postFetch(
         `/api/1.0/relations/relationship.json`,
         {
             type: 'relationship',
-            fromPerson: { type: 'person', id: fromPerson._id },
+            fromPerson: { type: 'person', id: splitId(relationship.from, 'id') },
-            toPerson: { type: 'person', id: toPerson._id },
+            toPerson: { type: 'person', id: splitId(relationship.to, 'id') },
-            relation: { type: 'relation', id: relation.id },
+            relation: { type: 'relation', id: relationship.relation.id },
-            reverse: reverse
+            reverse: relationship.reverse
         }
     )
 }
@@ -156,12 +156,14 @@ const postRelationship = (fromPerson, toPerson, relation, reverse) => {
  */
 const patchRelationship = (relationship) => {
     console.log(relationship)
+    let linkType = splitId(relationship.id, 'link')
+    let id = splitId(linkType, 'id')
     return patchFetch(
-        `/api/1.0/relations/relationship/${relationship.id}.json`,
+        `/api/1.0/relations/relationship/${id}.json`,
         {
             type: 'relationship',
-            fromPerson: { type: 'person', id: relationship.fromPerson.id },
+            fromPerson: { type: 'person', id: splitId(relationship.from, 'id') },
-            toPerson: { type: 'person', id: relationship.toPerson.id },
+            toPerson: { type: 'person', id: splitId(relationship.to, 'id') },
             relation: { type: 'relation', id: relationship.relation.id },
             reverse: relationship.reverse
         }
@@ -174,8 +176,11 @@ const patchRelationship = (relationship) => {
  * @returns {Promise<Response>}
  */
 const deleteRelationship = (relationship) => {
+    console.log(relationship)
+    let linkType = splitId(relationship.id, 'link')
+    let id = splitId(linkType, 'id')
     return deleteFetch(
-        `/api/1.0/relations/relationship/${relationship.id}.json`
+        `/api/1.0/relations/relationship/${id}.json`
     )
 }
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js

@@ -160,6 +160,30 @@ const store = createStore({
         addLink(state, link) {
             state.links.push(link)
         },
+        updateLink(state, link) {
+            console.log('updateLink', link)
+            let link_ = {
+                from: `person_${link.fromPerson.id}`,
+                to: `person_${link.toPerson.id}`,
+                id: 'relationship_' + splitId(link.id,'id')
+                    + '-person_' + link.fromPerson.id + '-person_' + link.toPerson.id,
+                arrows: getRelationshipDirection(link),
+                color: 'lightblue',
+                font: { color: '#33839d' },
+                dashes: true,
+                label: getRelationshipLabel(link),
+                title: getRelationshipTitle(link),
+                relation: link.relation,
+                reverse: link.reverse
+            }
+            // find row position and replace by updatedLink
+            state.links.splice(
+                state.links.findIndex(item => item.id === link_.id), 1, link_
+            )
+        },
+        removeLink(state, link_id) {
+            state.links = state.links.filter(l => l.id !== link_id)
+        },
 
         //// id markers
         markInWhitelist(state, person) {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js

@@ -266,13 +266,12 @@ const getRelationshipTitle = (relationship) => {
  * @param position
  * @returns string|integer
  */
-const splitId = (id, position) => {
+const splitId = (id, position) => { console.log(id, position)
     switch (position) {
         case 'type':                    // return 'accompanying_period'
             return /(.+)_/.exec(id)[1]
         case 'id':                      // return 124
-            return parseInt(id
+            return parseInt(id.toString()
-                .toString()
                 .split("_")
                 .pop())
         case 'link':