vue_visgraph: add relationship links with relations

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

@@ -42,6 +42,7 @@ export default {
          //'relationships',
          //'householdLoadingIds',
          //'courseLoadedIds',
+         //'relationshipLoadedIds',
       ]),
 
       visgraph_data() {

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

@@ -89,12 +89,12 @@ const getCoursesByPerson = (person) => {
 }
 
 /**
- * @function getRelationshipByPerson
+ * @function getRelationshipsByPerson
  * @param person
  * @returns {Promise<Response>}
  */
-const getRelationshipByPerson = (person) => {
+const getRelationshipsByPerson = (person) => {
-    //console.log('getRelationshipByPerson', person.id)
+    //console.log('getRelationshipsByPerson', person.id)
     return getFetch(
         `/api/1.0/relations/relationship/by-person/${person._id}.json`)
 }
@@ -120,6 +120,6 @@ const postRelationship = (person) => {
 export {
     getHouseholdByPerson,
     getCoursesByPerson,
-    getRelationshipByPerson,
+    getRelationshipsByPerson,
     postRelationship
 }

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

@@ -5,6 +5,7 @@ const visMessages = {
             Household: 'Ménage',
             Holder: 'Titulaire',
             Legend: 'Calques',
+            concerned: 'concerné',
         },
         edit: 'Éditer',
         del: 'Supprimer',

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

@@ -1,6 +1,7 @@
 import { createStore } from 'vuex'
-import { getHouseholdByPerson, getCoursesByPerson, getRelationshipByPerson } from './api'
+import { getHouseholdByPerson, getCoursesByPerson, getRelationshipsByPerson } from './api'
-import { adapt2vis, getHouseholdLabel, getHouseholdWidth } from './vis-network'
+import { adapt2vis, getHouseholdLabel, getHouseholdWidth, getRelationshipLabel } from './vis-network'
+import { visMessages } from './i18n'
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -14,6 +15,7 @@ const store = createStore({
         links: [],
         householdLoadingIds: [],
         courseLoadedIds: [],
+        relationshipLoadedIds: [],
         excludedNodesIds: []
     },
     getters: {
@@ -39,9 +41,9 @@ const store = createStore({
             state.links.forEach(l => {
                 edges.push(l)
             })
-            state.relationships.forEach(r => {
+            //state.relationships.forEach(r => {
-                edges.push(r)
+            //    edges.push(r)
-            })
+            //})
             return edges
         },
         isHouseholdLoading: (state) => (household_id) => {
@@ -50,6 +52,9 @@ const store = createStore({
         isCourseLoaded: (state) => (course_id) => {
             return state.courseLoadedIds.includes(course_id)
         },
+        isRelationshipLoaded: (state) => (relationship_id) => {
+            return state.relationshipLoadedIds.includes(relationship_id)
+        }
     },
     mutations: {
         addPerson(state, person) {
@@ -64,14 +69,14 @@ const store = createStore({
            console.log('+ addCourse', course.id)
            state.courses.push(adapt2vis(course))
         },
+        addRelationship(state, relationship) {
+           console.log('+ addRelationship', relationship.id)
+           state.relationships.push(adapt2vis(relationship))
+        },
         addLink(state, link) {
            console.log('+ addLink from', link.from, 'to', link.to)
            state.links.push(link)
         },
-        addRelationship(state, relationship) {
-           console.log('+ addRelationship from', relationship.from, 'to', relationship.to)
-           state.relationships.push(relationship)
-        },
         markHouseholdLoading(state, id) {
             console.log('..loading household', id)
             state.householdLoadingIds.push(id)
@@ -85,6 +90,12 @@ const store = createStore({
         unmarkCourseLoaded(state, id) {
             state.courseLoadedIds = state.courseLoadedIds.filter(i => i !== id)
         },
+        markRelationshipLoaded(state, id) {
+            state.relationshipLoadedIds.push(id)
+        },
+        unmarkRelationshipLoaded(state, id) {
+            state.relationshipLoadedIds = state.relationshipLoadedIds.filter(i => i !== id)
+        },
         addExcludedNode(state, id) {
             state.excludedNodesIds.push(id)
         },
@@ -109,7 +120,7 @@ const store = createStore({
         fetchInfoForPerson({ dispatch }, person) {
             dispatch('fetchHouseholdForPerson', person)
             dispatch('fetchCoursesByPerson', person)
-            //dispatch('fetchRelationship', person)
+            dispatch('fetchRelationshipByPerson', person)
         },
 
         /**
@@ -204,23 +215,76 @@ const store = createStore({
                     arrows: 'to',
                     color: 'orange',
                     font: { color: 'darkorange' },
-                    label: 'concerné',
+                    label: visMessages.fr.visgraph.concerned,
                 })
             })
         },
 
         /**
-         *  Fetch Relationship
+         *  8) Fetch Relationship
+         *  @param Person person
          */
-        fetchRelationship({ commit, getters }, person) {
+        fetchRelationshipByPerson({ dispatch }, person) {
-            console.log('fetchRelationship', person)
+            //console.log('fetchRelationshipByPerson', person)
-            getRelationshipByPerson(person)
+            getRelationshipsByPerson(person)
-                .then(relationship => new Promise(resolve => {
+                .then(relationships => new Promise(resolve => {
-                    console.log('getRelationshipByPerson', relationship)
+                    console.log('fetch relationships', relationships.length)
-                    commit('addRelationship', relationship)
+                    dispatch('addRelationship', relationships)
                     resolve()
                 }))
+        },
 
+
+        /**
+         *  9) Add each distinct relationship
+         *  @param array relationships
+         */
+        addRelationship({ commit, getters, dispatch }, relationships) {
+            relationships.forEach(relationship => {
+                console.log('  isRelationshipLoaded ?', getters.isRelationshipLoaded(relationship.id))
+                if (! getters.isRelationshipLoaded(relationship.id)) {
+                    //console.log('relationship', relationship.id)
+                    commit('markRelationshipLoaded', relationship.id)
+                    commit('addRelationship', relationship)
+                    dispatch('addLinkFromRelationship', relationship)
+                }
+            })
+        },
+
+        /**
+         *  10) Add an edge for each relationship (person -> person)
+         *  @param Relationship relationship
+         */
+        addLinkFromRelationship({ commit }, r) {
+
+            console.log(
+                '-> addLink from person', r.fromPerson.id, 'to person', r.toPerson.id,
+                //'reverse', r.reverse,
+                //'relation', r.relation.title.fr, r.relation.reverseTitle.fr
+            )
+
+            commit('addLink', {
+                from: `person_${r.fromPerson.id}`,
+                to: `person_${r.toPerson.id}`,
+                id: 'r' + r.id + '_p' + r.fromPerson.id + '_p' + r.toPerson.id,
+                arrows: 'from',
+                color: 'lightblue', dashes: true,
+                font: { color: 'lightblue' },
+                label: getRelationshipLabel(r, false),
+            })
+
+            /*
+            // add reverse relation
+            commit('addLink', {
+                from: `person_${r.toPerson.id}`,
+                to: `person_${r.fromPerson.id}`,
+                id: 'rr' + r.id + '_p' + r.fromPerson.id + '_p' + r.toPerson.id,
+                arrows: 'from',
+                color: 'lightblue', dashes: true,
+                font: { color: 'lightblue' },
+                label: getRelationshipLabel(r, true),
+            })
+            */
         },
 
     }

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

@@ -143,6 +143,12 @@ const adapt2vis = (entity) => {
             entity.label = `${visMessages.fr.visgraph.Course} n° ${entity.id}`
             entity.id = `accompanying_period_${entity.id}`
             break
+        case 'relationship':
+            entity._id = entity.id
+            entity.id = `relationship_${entity.id}`
+
+            // sera utilisé pour les links :
+            //entity.id = 'r' + entity._id + '_p' + entity.fromPerson.id + '_p' + entity.toPerson.id
     }
     return entity
 }
@@ -176,9 +182,18 @@ const getHouseholdWidth = (member) => {
     }
 }
 
+/**
+ * Return label edge
+ * @param relationship
+ * @returns string
+ */
+const getRelationshipLabel = (relationship, reverse) => {
+   return (!reverse) ? relationship.relation.title.fr : relationship.relation.reverseTitle.fr
+}
 
 export {
     adapt2vis,
     getHouseholdLabel,
-    getHouseholdWidth
+    getHouseholdWidth,
+    getRelationshipLabel
 }