visgraph: an event trigger unfoldPersonsByCourse (store)

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

@@ -219,6 +219,7 @@ export default {
       this.initGraph()
       this.listenOnGraph()
       this.getRelationsList()
+      this.forceUpdateComponent()
    },
    methods: {
       initGraph() {
@@ -237,6 +238,16 @@ export default {
                case 'person':
                   let person = this.nodes.filter(n => n.id === data.nodes[0])[0]
                   console.log('@@@@@@@@ event on selected Person Node @@@@@@@@', person.id, person)
+                  if (person.label === null) {
+                     this.$store.commit('unfoldPerson', person)
+                     this.forceUpdateComponent()
+                  }
+                  break
+               case 'accompanying_period':
+                  let course = this.nodes.filter(n => n.id === data.nodes[0])[0]
+                  console.log('&&&&&&&& event on selected AccompanyingCourse Node &&&&&&&&', course.id, course)
+                  this.$store.dispatch('unfoldPersonsByCourse', course)
+                  this.forceUpdateComponent()
                   break
                default:
                   throw 'this node type is undefined'

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

@@ -111,6 +111,17 @@ const store = createStore({
         },
         removeExcludedNode(state, id) {
             state.excludedNodesIds = state.excludedNodesIds.filter(e => e !== id)
+        },
+
+        //// unfold
+        unfoldPerson(state, person) {
+            console.log('unfoldPerson', person)
+            if (person.label !== null) {
+                throw 'person is not expandable'
+            }
+            person.label = person._label
+            delete person._label
+            delete person.title
         }
     },
     actions: {
@@ -307,16 +318,30 @@ const store = createStore({
         },
 
         /**
-         *  Fetch missing person
+         *  Add missing person. node is displayed without label (folded).
+         *  We stop here and listen on events to unfold person and expand its fetch infos
          *  @param object
          *  @param person
          */
         addMissingPerson({ commit, getters, dispatch }, person) {
             commit('markPersonLoaded', person.id)
             commit('addPerson', adapt2vis(person, { folded: true }))
+        },
 
-            console.log('   fetch infos for missing', person.id)
+        /**
-            //dispatch('fetchInfoForPerson', person)
+         * Triggered by a vis-network event when clicking on a Course Node.
+         * Each folded node is unfold, then expanded with fetch infos
+         * @param object
+         * @param course
+         */
+        unfoldPersonsByCourse({ commit, dispatch }, course) {
+            let currentParticipations = course.participations.filter(p => p.endDate === null)
+            currentParticipations.forEach(p => {
+                if (p.person.label === null) {
+                    commit('unfoldPerson', p.person)
+                    dispatch('fetchInfoForPerson', p.person)
+                }
+            })
         },
     }
 })