From b7f3700928c8a1bc3e815f783940f0864e3a51e2 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Fri, 22 Oct 2021 16:09:34 +0200 Subject: [PATCH] loop on household members to add edges to graph --- .../Resources/public/vuejs/VisGraph/App.vue | 9 ++-- .../Resources/public/vuejs/VisGraph/store.js | 52 ++++++++++++------- .../public/vuejs/VisGraph/vis-network.js | 3 ++ 3 files changed, 42 insertions(+), 22 deletions(-) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue index c10ef5122..40eb1f7f6 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue @@ -14,8 +14,9 @@ export default { } }, computed: { - ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']), + //not used ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']), ...mapGetters(['nodes', 'edges']), + visgraph_data() { console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges') return { @@ -24,12 +25,12 @@ export default { } }, refreshNetwork() { // B - console.log('refresh network') - window.network.setData(this.visgraph_data) + console.log('--- refresh network') + window.network.setData(this.visgraph_data) // <-- Error: [vuex] do not mutate vuex store state outside mutation handlers. } }, mounted() { - console.log('mounted: init graph') + console.log('=== mounted: init graph') this.initGraph() }, methods: { diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js index 43046cdbb..81085ff32 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js @@ -14,7 +14,7 @@ const store = createStore({ }, getters: { nodes(state) { - let nodes = []; + let nodes = [] state.persons.forEach(p => { nodes.push(p) }) @@ -24,40 +24,55 @@ const store = createStore({ return nodes }, edges(state) { - return [] + let edges = [] + state.relationships.forEach(r => { + edges.push(r) + }) + return edges }, isHouseholdLoading: (state) => (household_id) => { - return state.householdLoadingIds.includes(household_id); + return state.householdLoadingIds.includes(household_id) }, }, mutations: { addPerson(state, person) { - console.log('addPerson', person.id) - person.label = person.text // vis need label - person.id = `person_${person.id}` // vis need unique id + console.log('+ addPerson', person.id) + person.label = person.text // vis need label + 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 - household.id = `household_${household.id}` // vis need unique id + console.log('+ addHousehold', household.id) + household.label = `Ménage n° ${household.id}` // vis need label + household.id = `household_${household.id}` // vis need unique id state.households.push(household) }, addCourse(state, course) { - console.log('addCourse', course.id) + console.log('+ addCourse', course.id) state.courses.push(course) }, addRelationship(state, relationship) { - console.log('addRelationship', relationship.id) + console.log('+ addRelationship', relationship.id) state.relationships.push(relationship) }, markHouseholdLoading(state, id) { - console.log('..loading', id) + console.log('..loading household', id) state.householdLoadingIds.push(id) }, unmarkHouseholdLoading(state, id) { state.householdLoadingIds = state.householdLoadingIds.filter(i => i !== id) - } + }, + addLinkFromPersonsToHousehold(state, household) { + const members = household.members.filter(v => household.current_members_id.includes(v.id)) + members.forEach(m => { + console.log('-> addLink from person', m.person.id, 'to household', m.person.current_household_id) + state.relationships.push({ + from: `${m.person.type}_${m.person.id}`, + to: `household_${m.person.current_household_id}` + }) + }) + + }, }, actions: { addPerson({ commit, dispatch }, person) { @@ -75,18 +90,19 @@ const store = createStore({ * check first isHouseholdLoading to fetch household once */ fetchHouseholdForPerson({ commit, getters }, person) { - console.log('isHouseholdLoading', getters.isHouseholdLoading(person.current_household_id)) + 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) + commit('addLinkFromPersonsToHousehold', household) resolve() }) ).catch( () => { commit('unmarkHouseholdLoading', person.current_household_id) - }); + }) } }, @@ -101,7 +117,7 @@ const store = createStore({ commit('addCourse', course) resolve() })) - ; + }, /** @@ -115,10 +131,10 @@ const store = createStore({ commit('addRelationship', relationship) resolve() })) - ; + }, } -}); +}) export { store } diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js index f8e2a6724..c0d05a418 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js @@ -29,6 +29,9 @@ window.options = { }, nodes: { physics: true + }, + edges: { + physics: true } };