From 92c1bf15cc6194fad153faa1470bba5711f85973 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Wed, 27 Oct 2021 19:55:24 +0200 Subject: [PATCH] vue_visgraph: add relationship links with relations --- .../Resources/public/vuejs/VisGraph/App.vue | 1 + .../Resources/public/vuejs/VisGraph/api.js | 8 +- .../Resources/public/vuejs/VisGraph/i18n.js | 1 + .../Resources/public/vuejs/VisGraph/store.js | 100 ++++++++++++++---- .../public/vuejs/VisGraph/vis-network.js | 17 ++- 5 files changed, 104 insertions(+), 23 deletions(-) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue index 916fb05ef..1804460f7 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue @@ -42,6 +42,7 @@ export default { //'relationships', //'householdLoadingIds', //'courseLoadedIds', + //'relationshipLoadedIds', ]), visgraph_data() { diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js index ee288dcc0..f595daa34 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js @@ -89,12 +89,12 @@ const getCoursesByPerson = (person) => { } /** - * @function getRelationshipByPerson + * @function getRelationshipsByPerson * @param person * @returns {Promise} */ -const getRelationshipByPerson = (person) => { - //console.log('getRelationshipByPerson', person.id) +const getRelationshipsByPerson = (person) => { + //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 } diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js index c4ad74907..9ca273f72 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js +++ b/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', diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js index 0d0ff4442..da13d9bd3 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js @@ -1,6 +1,7 @@ import { createStore } from 'vuex' -import { getHouseholdByPerson, getCoursesByPerson, getRelationshipByPerson } from './api' -import { adapt2vis, getHouseholdLabel, getHouseholdWidth } from './vis-network' +import { getHouseholdByPerson, getCoursesByPerson, getRelationshipsByPerson } from './api' +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 => { - edges.push(r) - }) + //state.relationships.forEach(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) { - console.log('fetchRelationship', person) - getRelationshipByPerson(person) - .then(relationship => new Promise(resolve => { - console.log('getRelationshipByPerson', relationship) - commit('addRelationship', relationship) + fetchRelationshipByPerson({ dispatch }, person) { + //console.log('fetchRelationshipByPerson', person) + getRelationshipsByPerson(person) + .then(relationships => new Promise(resolve => { + console.log('fetch relationships', relationships.length) + 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), + }) + */ }, } 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 8774501a0..3ed6a7e7a 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js +++ b/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 }