vue_visgraph: basically display persons, household, courses and edges between them

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

@@ -1,5 +1,8 @@
 <template>
    <div id="visgraph"></div>
+   <!--
+   <button class="btn btn-outline-primary" @click="refreshNetwork">refresh</button>
+   -->
 </template>
 
 <script>
@@ -14,7 +17,7 @@ export default {
       }
    },
    computed: {
-      //not used ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']),
+      //not used ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds', 'courseLoadedIds']),
       ...mapGetters(['nodes', 'edges']),
 
       visgraph_data() {

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

@@ -78,14 +78,14 @@ const getHouseholdByPerson = (person) => {
 }
 
 /**
- * @function getCourseByPerson
+ * @function getCoursesByPerson
  * @param person
  * @returns {Promise<Response>}
  */
-const getCourseByPerson = (person) => {
+const getCoursesByPerson = (person) => {
-    //console.log('getCourseByPerson', person.id)
+    //console.log('getCoursesByPerson', person._id)
     return getFetch(
-        `/api/1.0/person/accompanying-course/by-person/${person.id}.json`)
+        `/api/1.0/person/accompanying-course/by-person/${person._id}.json`)
 }
 
 /**
@@ -119,7 +119,7 @@ const postRelationship = (person) => {
 
 export {
     getHouseholdByPerson,
-    getCourseByPerson,
+    getCoursesByPerson,
     getRelationship,
     postRelationship
 }

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

@@ -3,7 +3,8 @@
 const visMessages = {
     fr: {
         visgraph: {
-
+            'Course': 'Parcours',
+            'Household': 'Ménage',
         }
     }
 }

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

@@ -1,5 +1,6 @@
 import { createStore } from 'vuex'
-import { getHouseholdByPerson, getCourseByPerson, getRelationship } from './api'
+import { getHouseholdByPerson, getCoursesByPerson, getRelationship } from './api'
+import { adapt2vis } from './vis-network'
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -11,6 +12,7 @@ const store = createStore({
         courses: [],
         relationships: [],
         householdLoadingIds: [],
+        courseLoadedIds: []
     },
     getters: {
         nodes(state) {
@@ -21,6 +23,9 @@ const store = createStore({
             state.households.forEach(h => {
                 nodes.push(h)
             })
+            state.courses.forEach(c => {
+                nodes.push(c)
+            })
             return nodes
         },
         edges(state) {
@@ -33,23 +38,22 @@ const store = createStore({
         isHouseholdLoading: (state) => (household_id) => {
             return state.householdLoadingIds.includes(household_id)
         },
+        isCourseLoaded: (state) => (course_id) => {
+            return state.courseLoadedIds.includes(course_id)
+        },
     },
     mutations: {
         addPerson(state, person) {
             console.log('+ addPerson', person.id)
-            person.label = person.text          // vis need label
+            state.persons.push(adapt2vis(person))
-            person.id = `person_${person.id}`   // vis need unique id
-            state.persons.push(person)
         },
         addHousehold(state, household) {
             console.log('+ addHousehold', household.id)
-            household.label = `Ménage n° ${household.id}`   // vis need label
+            state.households.push(adapt2vis(household))
-            household.id = `household_${household.id}`      // vis need unique id
-            state.households.push(household)
         },
         addCourse(state, course) {
            console.log('+ addCourse', course.id)
-           state.courses.push(course)
+           state.courses.push(adapt2vis(course))
         },
         addRelationship(state, relationship) {
            console.log('+ addRelationship', relationship)
@@ -62,6 +66,12 @@ const store = createStore({
         unmarkHouseholdLoading(state, id) {
             state.householdLoadingIds = state.householdLoadingIds.filter(i => i !== id)
         },
+        markCourseLoaded(state, id) {
+            state.courseLoadedIds.push(id)
+        },
+        unmarkCourseLoaded(state, id) {
+            state.courseLoadedIds = state.courseLoadedIds.filter(i => i !== id)
+        },
     },
     actions: {
         addPerson({ commit, dispatch }, person) {
@@ -70,7 +80,7 @@ const store = createStore({
         },
         fetchInfoForPerson({ dispatch }, person) {
             dispatch('fetchHouseholdForPerson', person)
-            //dispatch('fetchCourseByPerson', person)
+            dispatch('fetchCoursesByPerson', person)
             //dispatch('fetchRelationship', person)
         },
 
@@ -94,7 +104,6 @@ const store = createStore({
                 })
             }
         },
-
         addLinkFromPersonsToHousehold({ commit }, household) {
             const members = household.members.filter(v => household.current_members_id.includes(v.id))
             members.forEach(m => {
@@ -111,16 +120,41 @@ const store = createStore({
         /**
          *  Fetch person current AccompanyingCourses
          */
-        fetchCourseByPerson({ commit, getters }, person) {
+        fetchCoursesByPerson({ dispatch }, person) {
-            console.log('fetchCourseByPerson', person)
+            //console.log('fetchCoursesByPerson', person)
-            getCourseByPerson(person)
+            getCoursesByPerson(person)
-                .then(course => new Promise(resolve => {
+                .then(courses => new Promise(resolve => {
-                    console.log('getCourseByPerson', course)
+                    console.log('fetch courses', courses.length)
-                    commit('addCourse', course)
+                    dispatch('addCourse', courses)
                     resolve()
                 }))
 
         },
+        addCourse({ commit, getters, dispatch }, courses) {
+            //console.log('addCourse', courses)
+            let currentCourses = courses.filter(c => c.closingDate === null)
+            currentCourses.forEach(course => {
+                console.log('  isCourseLoaded ?', getters.isCourseLoaded(course.id))
+                if (! getters.isCourseLoaded(course.id)) {
+                    //console.log('course', course.id)
+                    commit('markCourseLoaded', course.id)
+                    commit('addCourse', course)
+                    dispatch('addLinkFromPersonsToCourse', course)
+                }
+            })
+        },
+        addLinkFromPersonsToCourse({ commit }, course) {
+            let currentParticipations = course.participations.filter(p => p.endDate === null)
+            console.log('  participations', currentParticipations.length)
+            currentParticipations.forEach(p => {
+                commit('addRelationship', {
+                    from: `${p.person.type}_${p.person.id}`,
+                    to: `${course.id}`,
+                    id: `p${p.person.id}-c`+ course.id.split('_')[2]
+                })
+            })
+        },
+
 
         /**
          *  Fetch Relationship

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

@@ -1,3 +1,5 @@
+import { visMessages } from './i18n'
+
 /*
  * Vis-network initial data/configuration script
  * Notes:
@@ -37,3 +39,32 @@ window.options = {
 
 window.network = {};
 
+/*
+*   Adapt entity to graph (id, label)
+*   we rename id in _id
+*   and add properties needed by vis
+*/
+const adapt2vis = (entity) => {
+    switch (entity.type) {
+        case 'person':
+            entity._id = entity.id
+            entity.label = entity.text
+            entity.id = `person_${entity.id}`
+            break
+        case 'household':
+            entity._id = entity.id
+            entity.label = `${visMessages.fr.visgraph.Household} n° ${entity.id}`
+            entity.id = `household_${entity.id}`
+            break
+        case 'accompanying_period':
+            entity._id = entity.id
+            entity.label = `${visMessages.fr.visgraph.Course} n° ${entity.id}`
+            entity.id = `accompanying_period_${entity.id}`
+            break
+    }
+    return entity
+}
+
+export {
+    adapt2vis
+}