vue_visgraph: vuex get household and update nodes array

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

@@ -4,40 +4,52 @@
 
 <script>
 import vis from 'vis-network/dist/vis-network.min'
-import { mapState } from "vuex"
+import { mapState, mapGetters } from "vuex"
 
 export default {
    name: "App",
    data() {
       return {
+         network: {},
          options: {}
       }
    },
    computed: {
-      ...mapState(['persons', 'households', 'courses', 'relationships']),
-      nodes() {
-         /*[{id: 1, label: "Node 1"}]*/
-         return new vis.DataSet(this.persons)
-      },
-      edges() {
-         /*[{ from: 1, to: 3 }]*/
-         return new vis.DataSet(this.relationships)
-      }
-   },
-   methods: {
-   },
-   mounted() {
-      const container = document.getElementById('visgraph')
-
-      console.log('mounted: get stored persons', this.persons)
-
-      let network = new vis.Network(
-         container, {
+      ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']),
+      ...mapGetters(['nodes', 'edges']),
+      getNetwork() {
+         console.log('refresh network', this.network, 'with', this.nodes.length, 'nodes')
+         this.network.setData({
             nodes: this.nodes,
             edges: this.edges
-         }, this.options
-      );
-      console.log('network', network)
+         })
+      }, /*
+      getNodes() {
+         console.log('refresh nodes', this.nodes.length)
+         /// BOUM
+         this.network.setData({nodes: this.nodes})
+         return this.nodes
+      },
+      getEdges() {
+         /// BOUM
+         //this.network.setData({edges: this.edges})
+         return this.edges
+      }  */
+   },
+   methods: {
+      initGraph() {
+         const container = document.getElementById('visgraph')
+         this.network = new vis.Network(
+            container, {
+               nodes: new vis.DataSet(this.nodes),
+               edges: new vis.DataSet(this.relationships)
+            }, this.options
+         )
+      }
+   },
+   mounted() {
+      console.log('mounted')
+      this.initGraph()
    }
 }
 </script>

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

@@ -1,14 +1,17 @@
 /**
- * @var makeFetch
+ * @function makeFetch
+ * @param method
+ * @param url
+ * @param body
+ * @returns {Promise<Response>}
  */
 const makeFetch = (method, url, body) => {
-
     return fetch(url, {
         method: method,
         headers: {
             'Content-Type': 'application/json;charset=utf-8'
         },
-        body: JSON.stringify(body)
+        body: (body !== null) ? JSON.stringify(body) : null
     })
     .then(response => {
 
@@ -31,49 +34,92 @@ const makeFetch = (method, url, body) => {
 }
 
 /**
- * @var getHousehold
-*/
-const getHousehold = (person) => {
-    console.log('getHousehold', person.id)
-    makeFetch(
-        'GET',
-        `/api/1.0/person/household/by-person/${person.id}.json`,
-        {
-            type: 'person',
-            id: person.id
-        })
+ * @function getFetch
+ * @param url
+ * @returns {Promise<Response>}
+ */
+const getFetch = (url) => {
+    return makeFetch('GET', url, null);
 }
 
 /**
- * @var getCourse
-*/
-const getCourse = (person) => {
-    console.log('getCourse', person.id)
-    makeFetch(
-        'GET',
-        `/api/1.0/person/accompanying-course/by-person/${person.id}.json`,
-        {
-            type: 'person',
-            id: person.id
-        })
+ * @function postFetch
+ * @param url
+ * @param body
+ * @returns {Promise<Response>}
+ */
+const postFetch = (url, body) => {
+    return makeFetch('POST', url, body);
 }
 
 /**
- * @var getRelationship
-*/
+ * @function patchFetch
+ * @param url
+ * @param body
+ * @returns {Promise<Response>}
+ */
+const patchFetch = (url, body) => {
+    return makeFetch('PATCH', url, body);
+}
+
+
+/**
+ * @function getHouseholdByPerson
+ * @param person
+ * @returns {Promise<Response>}
+ */
+const getHouseholdByPerson = (person) => {
+    //console.log('getHouseholdByPerson', person.id)
+    if (person.current_household_id === null) {
+        throw 'Currently the person has not household!'
+    }
+    return getFetch(
+        `/api/1.0/person/household/${person.current_household_id}.json`)
+}
+
+/**
+ * @function getCourseByPerson
+ * @param person
+ * @returns {Promise<Response>}
+ */
+const getCourseByPerson = (person) => {
+    //console.log('getCourseByPerson', person.id)
+    return getFetch(
+        `/api/1.0/person/accompanying-course/by-person/${person.id}.json`)
+}
+
+/**
+ * @function getRelationship
+ * @param person
+ * @returns {Promise<Response>}
+ */
 const getRelationship = (person) => {
-    console.log('getRelationship', person.id)
-    makeFetch(
-        'GET',
-        `/api/1.0/relations/relationship/by-person/${person.id}.json`,
+    //console.log('getRelationship', person.id)
+    return getFetch(
+        `/api/1.0/relations/relationship/by-person/${person.id}.json`)
+}
+
+/**
+ * @function postRelationship
+ * @param person
+ * @returns {Promise<Response>}
+ */
+const postRelationship = (person) => {
+    //console.log('postRelationship', person.id)
+    return postFetch(
+        `/api/1.0/relations/relationship.json`,
         {
-            type: 'person',
-            id: person.id
-        })
+            from: { type: 'person', id: 0 },
+            to: { type: 'person', id: 0 },
+            relation: { type: 'relation', id: 0 },
+            reverse: bool
+        }
+    )
 }
 
 export {
-    getHousehold,
-    getCourse,
-    getRelationship
+    getHouseholdByPerson,
+    getCourseByPerson,
+    getRelationship,
+    postRelationship
 }

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

@@ -12,7 +12,7 @@ const persons = JSON.parse(container.dataset.persons)
 
 persons.forEach(person => {
     store.dispatch('addPerson', person)
-    store.dispatch('fetchInfoForPerson', person)
+    //store.dispatch('fetchInfoForPerson', person)
 })
 
 const app = createApp({
@@ -22,6 +22,3 @@ const app = createApp({
 .use(i18n)
 .component('app', App)
 .mount('#relationship-graph')
-
-
-//console.log('container dataset', container.dataset.persons)

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

@@ -1,5 +1,5 @@
 import { createStore } from 'vuex'
-import { getHousehold, getCourse, getRelationship } from './api'
+import { getHouseholdByPerson, getCourseByPerson, getRelationship } from './api'
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -10,36 +10,75 @@ const store = createStore({
         households: [],
         courses: [],
         relationships: [],
+        householdLoadingIds: [],
     },
     getters: {
-        getNodes() {
+        nodes(state) {
             let nodes = [];
+            state.persons.forEach(p => {
+                nodes.push(p)
+            })
             state.households.forEach(h => {
                 nodes.push(h)
-            });
+            })
+            // push all others kinds of nodes..
             return nodes
         },
-        getEdges() {
-        }
+        edges(state) {
+            return []
+        },
+        isHouseholdLoading: (state) => (household_id) => {
+            return state.householdLoadingIds.includes(household_id);
+        },
     },
     mutations: {
         addPerson(state, person) {
             person.label = person.text // vis need label
             state.persons.push(person)
+        },
+        addHousehold(state, household) {
+            household.label = `Ménage n° ${household.id}` // vis need label
+            state.households.push(household)
+        },
+        markHouseholdLoading(state, id) {
+            console.log('mutation: markHouseholdLoading', id)
+            state.householdLoadingIds.push(id)
+        },
+        unmarkHouseholdLoading(state, id) {
+            state.householdLoadingIds = state.householdLoadingIds.filter(i => i !== id)
         }
     },
     actions: {
-        addPerson({ commit }, person) {
-            //console.log('addPerson', person)
+        addPerson({ commit, dispatch }, person) {
+            console.log('addPerson', person.id)
             commit('addPerson', person)
+            dispatch('fetchInfoForPerson', person)
+        },
+        fetchInfoForPerson({ dispatch }, person) {
+            //console.log('fetchInfoForPerson', person.id)
+            dispatch('fetchHouseholdForPerson', person)
+            //getCourseByPerson(person)
+            //getRelationship(person)
         },
-        fetchInfoForPerson({ commit }, person) {
-            console.log('fetchInfoForPerson', person)
-
-            getHousehold(person)
-            getCourse(person)
-            getRelationship(person)
 
+        /**
+         *  Fetch person current household if it is not already loading
+         *  check first isHouseholdLoading to fetch household once
+         */
+        fetchHouseholdForPerson({ commit, getters }, person) {
+            console.log('isHouseholdLoading', getters.isHouseholdLoading(person.current_household_id))
+            if (! getters.isHouseholdLoading(person.current_household_id)) {
+                commit('markHouseholdLoading', person.current_household_id)
+                getHouseholdByPerson(person)
+                    .then(household => new Promise(resolve => {
+                        console.log('getHouseholdByPerson', household)
+                        commit('addHousehold', household)
+                        resolve()
+                        })
+                    ).catch( () => {
+                        commit('unmarkHouseholdLoading', person.current_household_id)
+                });
+            }
         },
     }
 });