Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

visgraph: trying to pass value to edit relationship form fields (wip)

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-11-08 16:59:27 +01:00
parent 46e552d034
commit d6da6a5d9d
6 changed files with 246 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
View File

@ -1,4 +1,6 @@
<template> <template>
<test></test>
<banner></banner> <banner></banner>
<sticky-nav></sticky-nav> <sticky-nav></sticky-nav>
@ -23,8 +25,8 @@
</p> </p>
</div> </div>
</template> </template>
<script> <script>
import test from 'ChillPersonAssets/vuejs/VisGraph/components/test'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Banner from './components/Banner.vue'; import Banner from './components/Banner.vue';
import StickyNav from './components/StickyNav.vue'; import StickyNav from './components/StickyNav.vue';
@ -42,6 +44,7 @@ import Confirm from './components/Confirm.vue';
export default { export default {
name: 'App', name: 'App',
components: { components: {
test,
Banner, Banner,
StickyNav, StickyNav,
OriginDemand, OriginDemand,

214
src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
View File

@ -3,35 +3,44 @@
<div id="visgraph"></div> <div id="visgraph"></div>
<teleport to="#visgraph-legend"> <teleport to="#visgraph-legend">
<div class="list-group mt-4"> <div class="post-menu">
<button type="button" class="list-group-item list-group-item-action btn btn-create" @click="addRelationshipLink"> <div class="list-group mt-4">
{{ $t('visgraph.add_link') }} <button type="button" class="list-group-item list-group-item-action btn btn-create" @click="newRelationshipLinkButton">
</button> {{ $t('visgraph.add_link') }}
<button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork"> </button>
<i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }} <button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork">
</button> <i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
<button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork"> </button>
<i class="fa fa-refresh fa-fw"></i> {{ $t('visgraph.refresh') }} <button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork">
</button> <i class="fa fa-refresh fa-fw"></i> {{ $t('visgraph.refresh') }}
</div> </button>
<!--
<button
type="button" class="list-group-item list-group-item-action btn btn-light" @click="toggleIdPerson">
<i class="fa fa-hashtag fa-fw"></i>
Voir l'id° des personnes
</button>
-->
</div>
<div v-if="displayHelpMessage" class="alert alert-info mt-3"> <div v-if="displayHelpMessage" class="alert alert-info mt-3">
{{ $t('visgraph.create_link_help') }} {{ $t('visgraph.create_link_help') }}
</div> </div>
<div class="my-4 post-menu legend"> <div class="my-4 legend">
<h3>{{ $t('visgraph.Legend') }}</h3> <h3>{{ $t('visgraph.Legend') }}</h3>
<div class="list-group"> <div class="list-group">
<label class="list-group-item" v-for="layer in legendLayers"> <label class="list-group-item" v-for="layer in legendLayers">
<input <input
class="form-check-input me-1" class="form-check-input me-1"
type="checkbox" type="checkbox"
:value="layer.id" :value="layer.id"
v-model="checkedLayers" v-model="checkedLayers"
@change="toggleLayer" @change="toggleLayer"
/> />
{{ layer.label }} {{ layer.label }}
</label> </label>
</div>
</div> </div>
</div> </div>
</teleport> </teleport>
@ -51,9 +60,7 @@
<div class="row"> <div class="row">
<div class="col-12 text-center">{{ $t('visgraph.between') }}<br>{{ $t('visgraph.and') }}</div> <div class="col-12 text-center">{{ $t('visgraph.between') }}<br>{{ $t('visgraph.and') }}</div>
<div class="col"> <div class="col">
<h4> <h4>{{ getPerson(modal.data.from).text }}</h4>
{{ getPerson(modal.data.from).text }}
</h4>
<p class="text-start" v-if="relation && relation.title"> <p class="text-start" v-if="relation && relation.title">
<span v-if="reverse"> <span v-if="reverse">
{{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.reverseTitle.fr.toLowerCase() ])}} {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.reverseTitle.fr.toLowerCase() ])}}
@ -64,9 +71,7 @@
</p> </p>
</div> </div>
<div class="col text-end"> <div class="col text-end">
<h4> <h4>{{ getPerson(modal.data.to).text }}</h4>
{{ getPerson(modal.data.to).text }}
</h4>
<p class="text-end" v-if="relation && relation.title"> <p class="text-end" v-if="relation && relation.title">
<span v-if="reverse"> <span v-if="reverse">
{{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.title.fr.toLowerCase() ])}} {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.title.fr.toLowerCase() ])}}
@ -78,14 +83,14 @@
</div> </div>
</div> </div>
<div class="my-3"><!-- <div class="my-3"><!--
:value="relation"
--> -->
<VueMultiselect <VueMultiselect
:value="relation"
id="relation" id="relation"
label="title" label="title"
track-by="id" track-by="id"
:custom-label="customLabel" :custom-label="customLabel"
:placeholder="$t('Choisissez le lien de parenté')" :placeholder="$t('visgraph.choose_relation')"
:close-on-select="true" :close-on-select="true"
:multiple="false" :multiple="false"
:searchable="true" :searchable="true"
@ -103,12 +108,18 @@
> >
<label class="form-check-label" for="reverse">{{ $t('visgraph.reverse_relation') }}</label> <label class="form-check-label" for="reverse">{{ $t('visgraph.reverse_relation') }}</label>
</div> </div>
<pre class="debug">
modal.data
{{ modal.data }}
</pre>
</form> </form>
</div> </div>
</template> </template>
<template v-slot:footer> <template v-slot:footer>
<button class="btn" :class="modal.button.class" @click="submitRelationship"> <button class="btn" :class="modal.button.class" @click="submitRelationship">
{{ $t(modal.button.text)}}</button> {{ $t(modal.button.text)}}
</button>
<button class="btn btn-delete" v-if="modal.action === 'edit'" @click="dropRelationship"></button>
</template> </template>
</modal> </modal>
</teleport> </teleport>
@ -116,16 +127,18 @@
</template> </template>
<script> <script>
import test from './components/test'
import vis from 'vis-network/dist/vis-network' import vis from 'vis-network/dist/vis-network'
import { mapState, mapGetters } from "vuex" import { mapState, mapGetters } from "vuex"
import Modal from 'ChillMainAssets/vuejs/_components/Modal' import Modal from 'ChillMainAssets/vuejs/_components/Modal'
import VueMultiselect from 'vue-multiselect' import VueMultiselect from 'vue-multiselect'
import { getRelationsList, postRelationship } from "./api"; import { getRelationsList, postRelationship, patchRelationship, deleteRelationship } from "./api";
import { splitId } from "./vis-network"; import { splitId } from "./vis-network";
export default { export default {
name: "App", name: "App",
components: { components: {
test,
Modal, Modal,
VueMultiselect VueMultiselect
}, },
@ -137,6 +150,8 @@ export default {
relation: null, relation: null,
reverse: false, reverse: false,
displayHelpMessage: false, displayHelpMessage: false,
listenPersonFlag: 'normal',
newEdgeData: {},
modal: { modal: {
showModal: false, showModal: false,
modalDialogClass: "modal-md", modalDialogClass: "modal-md",
@ -153,7 +168,7 @@ export default {
computed: { computed: {
...mapGetters(['nodes', 'edges', ...mapGetters(['nodes', 'edges',
// not used // not used
'isInWhitelist', 'isHouseholdLoading', 'isCourseLoaded', 'isRelationshipLoaded', 'isPersonLoaded', 'isExcludedNode', 'countLinksByNode', 'getParticipationsByCourse', 'getMembersByHousehold', 'getWithFoldedPersons', 'isInWhitelist', 'isHouseholdLoading', 'isCourseLoaded', 'isRelationshipLoaded', 'isPersonLoaded', 'isExcludedNode', 'countLinksByNode', 'getParticipationsByCourse', 'getMembersByHousehold', 'getPersonsGroup',
]), ]),
...mapState(['households', 'courses', 'excludedNodesIds', 'persons', ...mapState(['households', 'courses', 'excludedNodesIds', 'persons',
// not used // not used
@ -197,6 +212,11 @@ export default {
return this.checkedLayers return this.checkedLayers
}, },
toggleIdPerson() {
},
/*
relation: { relation: {
get() { get() {
return this.relation return this.relation
@ -211,12 +231,12 @@ export default {
get() { get() {
return this.reverse return this.reverse
}, },
set(value) { set(newValue) {
//console.log('setter reverse', value) // <=== InternalError: too much recursion //console.log('setter reverse', newValue) // <=== InternalError: too much recursion
this.reverse = value this.reverse = newValue
} }
}, },
*/
}, },
mounted() { mounted() {
@ -244,9 +264,15 @@ export default {
case 'person': case 'person':
let person = this.nodes.filter(n => n.id === node)[0] let person = this.nodes.filter(n => n.id === node)[0]
console.log('@@@@@@ event on selected Node', person.id) console.log('@@@@@@ event on selected Node', person.id)
if (person.folded === true) { if (this.listenPersonFlag === 'normal') {
this.$store.commit('unfoldPerson', person) if (person.folded === true) {
this.forceUpdateComponent() console.log(' @@> expand mode event')
this.$store.commit('unfoldPerson', person)
this.forceUpdateComponent()
}
} else {
console.log(' @@> create link mode event')
this.listenStepsToAddRelationship(person)
} }
break break
@ -269,25 +295,58 @@ export default {
} }
}) })
window.network.on('selectEdge', (data) => { window.network.on('selectEdge', (data) => {
if (data.nodes.length !== 0 && data.edges.length !== 1) { if (data.nodes.length !== 0 || data.edges.length !== 1) {
return false return false //we don't want to trigger nodeEdge or multiselect !
} }
let linkType = splitId(data.edges[0], 'link') //<------ Uncaught TypeError: id is undefined let link = data.edges[0]
let linkType = splitId(link, 'link')
console.log('@@@@@ event on selected Edge', data.edges.length, linkType, data)
if (linkType.startsWith('relationship')) { if (linkType.startsWith('relationship')) {
console.log('@@@@@ event on selected Edge', data)
console.log('linkType relationship') console.log('linkType relationship')
this.editRelationshipModal(data) //<------ you are here, and data is wrong !
let relationships = this.edges.filter(l => l.id === link)
if (relationships.length > 1) {
throw 'error: only one link is allowed between two person!'
}
let relationship = relationships[0]
console.log(relationship)
this.editRelationshipModal({
from: relationship.from,
to: relationship.to,
id: relationship.id,
relation: relationship.relation,
reverse: relationship.reverse
})
} }
/* Disabled /* Disabled
if (linkType.startsWith('household')) { if (linkType.startsWith('household')) {
console.log('linkType household') console.log('linkType household')
} else } else
if (linkType.startsWith('accompanying_period')) { if (linkType.startsWith('accompanying_period')) {
console.log('linkType accompanying_period') console.log('linkType accompanying_period')
} else } else
*/ */
}) })
}, },
listenStepsToAddRelationship(person) {
console.log(' @@> listenStep', this.listenPersonFlag)
if (this.listenPersonFlag === 'step2') {
console.log(' @@> person 2', person)
this.newEdgeData.to = person.id
this.addRelationshipModal(this.newEdgeData)
this.displayHelpMessage = false
this.listenPersonFlag = 'normal'
this.newEdgeData = {}
}
if (this.listenPersonFlag === 'step1') {
console.log(' @@> person 1', person)
this.newEdgeData.from = person.id
this.listenPersonFlag = 'step2'
}
},
forceUpdateComponent() { forceUpdateComponent() {
//console.log('!! forceUpdateComponent !!') //console.log('!! forceUpdateComponent !!')
this.$forceUpdate() this.$forceUpdate()
@ -297,7 +356,7 @@ export default {
/// Control Layers /// Control Layers
toggleLayer(value) { toggleLayer(value) {
let id = value.target.value let id = value.target.value
console.log('@@@@@ toggle Layer', id) console.log('@@@@@@ toggle Layer', id)
this.forceUpdateComponent() this.forceUpdateComponent()
if (this.checkedLayers.includes(id)) { if (this.checkedLayers.includes(id)) {
this.removeLayer(id) this.removeLayer(id)
@ -328,13 +387,16 @@ export default {
}, },
editRelationshipModal(edgeData) { editRelationshipModal(edgeData) {
this.modal.data = edgeData this.modal.data = edgeData
console.log('==- editRelationshipModal', edgeData) this.relation = this.modal.data.relation
this.reverse = this.modal.data.reverse
console.log('==- editRelationshipModal', this.modal.data, this.relation, this.reverse)
this.modal.action = 'edit' this.modal.action = 'edit'
this.modal.title = 'visgraph.edit_relationship_link' this.modal.title = 'visgraph.edit_relationship_link'
this.modal.button.class = 'btn-edit' this.modal.button.class = 'btn-edit'
this.modal.button.text = 'action.edit' this.modal.button.text = 'action.edit'
this.modal.showModal = true this.modal.showModal = true
}, },
/*
deleteRelationshipModal(edgeData) { deleteRelationshipModal(edgeData) {
this.modal.data = edgeData this.modal.data = edgeData
console.log('==- deleteRelationshipModal', edgeData) console.log('==- deleteRelationshipModal', edgeData)
@ -344,6 +406,7 @@ export default {
this.modal.button.text = 'action.delete' this.modal.button.text = 'action.delete'
this.modal.showModal = true this.modal.showModal = true
}, },
*/
resetForm() { resetForm() {
console.log('==- reset Form') console.log('==- reset Form')
@ -370,19 +433,16 @@ export default {
return person[0] return person[0]
}, },
newRelationshipLinkButton() {
addRelationshipLink() {
this.displayHelpMessage = true this.displayHelpMessage = true
let edgeData = { from: "person_1617", to: "person_1614" } this.listenPersonFlag = 'step1'
let callback = (d) => { console.log(' @@> switch listener to create link mode:', this.listenPersonFlag)
console.log('d', d) },
} dropRelationship() {
//open console.log('delete')
window.network.addEdgeMode() deleteRelationship(relationship) /// param ?
window.network.addEdge this.modal.showModal = false
this.resetForm()
//close
window.network.disableEditMode()
}, },
submitRelationship() { submitRelationship() {
console.log('submitRelationship with action', this.modal.action) console.log('submitRelationship with action', this.modal.action)
@ -402,26 +462,18 @@ export default {
.catch() .catch()
case 'edit': case 'edit':
/// TODO
// récupérer la relationship,
// la modifier,
// patcher en reconstruisant le body,
// récupérer la réponse,
// mettre le link (edge) à jour
return patchRelationship(relationship) return patchRelationship(relationship)
.then(response => new Promise(resolve => { .then(relationship => new Promise(resolve => {
console.log('patch response', response) console.log('patch relationship', relationship)
this.$store.dispatch('updateLinkFromRelationship', response) this.$store.dispatch('updateLinkFromRelationship', relationship)
this.modal.showModal = false this.modal.showModal = false
this.resetForm() this.resetForm()
resolve() resolve()
})) }))
.catch() .catch()
case 'delete':
break
default: default:
throw "undefined action" throw "uncaught action"
} }
} }
}, },
@ -455,4 +507,10 @@ div#visgraph-legend {
.modal-mask { .modal-mask {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.debug {
margin: 1em; padding: 1em;
color: dimgray;
font-style: italic;
font-size: 80%;
}
</style> </style>

41
src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
View File

@ -73,6 +73,16 @@ const patchFetch = (url, body) => {
return makeFetch('PATCH', url, body) return makeFetch('PATCH', url, body)
} }
/**
* @function deleteFetch
* @param url
* @param body
* @returns {Promise<Response>}
*/
const deleteFetch = (url, body) => {
return makeFetch('DELETE', url, null)
}
/** /**
* @function getHouseholdByPerson * @function getHouseholdByPerson
@ -145,29 +155,36 @@ const postRelationship = (fromPerson, toPerson, relation, reverse) => {
* @returns {Promise<Response>} * @returns {Promise<Response>}
*/ */
const patchRelationship = (relationship) => { const patchRelationship = (relationship) => {
console.log(relationship)
return patchFetch( return patchFetch(
`/api/1.0/relations/relationship/${relationship._id}.json`, `/api/1.0/relations/relationship/${relationship.id}.json`,
{ {
type: 'relationship', type: 'relationship',
fromPerson: { type: 'person', fromPerson: { type: 'person', id: relationship.fromPerson.id },
id: fromPerson._id toPerson: { type: 'person', id: relationship.toPerson.id },
}, relation: { type: 'relation', id: relationship.relation.id },
toPerson: { type: 'person', reverse: relationship.reverse
id: toPerson._id
},
relation: { type: 'relation',
id: relation.id
},
reverse: reverse
} }
) )
} }
/**
* @function deleteRelationship
* @param relationship
* @returns {Promise<Response>}
*/
const deleteRelationship = (relationship) => {
return deleteFetch(
`/api/1.0/relations/relationship/${relationship.id}.json`
)
}
export { export {
getHouseholdByPerson, getHouseholdByPerson,
getCoursesByPerson, getCoursesByPerson,
getRelationshipsByPerson, getRelationshipsByPerson,
getRelationsList, getRelationsList,
postRelationship, postRelationship,
patchRelationship patchRelationship,
deleteRelationship
} }

49
src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/components/test.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<VueMultiselect
name="selectLama"
id="selectLama"
:options="lamas"
v-model="lama">
</VueMultiselect>
<input
type="checkbox"
id="checked"
v-model="checked"
/> test
<h3>{{ checked }} {{ lama }}</h3>
</template>
<script>
import VueMultiselect from 'vue-multiselect'
export default {
name: "test",
components: {
VueMultiselect
},
data() {
return {
checked: false,
lamas: ['pomme', 'poire', 'banane'],
lama: null
}
},
computed: {
checked: {
set(value) {
this.checked = value
},
get() {
return this.checked
}
},
lama: {
get() {
return this.lama
},
set(value) {
this.lama = value
}
}
}
}
</script>

3
src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
View File

@ -20,9 +20,10 @@ const visMessages = {
between: "entre", between: "entre",
and: "et", and: "et",
add_link: "Créer un lien de filiation", add_link: "Créer un lien de filiation",
create_link_help: "Pour créer un lien de filiation: cliquez d'abord sur un usager, puis sur un second, précisez ensuite la nature du lien dans le formulaire d'édition.", create_link_help: "Pour créer un lien de filiation, cliquez d'abord sur un usager, puis sur un second ; précisez ensuite la nature du lien dans le formulaire d'édition.",
refresh: "Rafraîchir", refresh: "Rafraîchir",
screenshot: "Prendre une photo", screenshot: "Prendre une photo",
choose_relation: "Choisissez le lien de parenté",
}, },
edit: 'Éditer', edit: 'Éditer',
del: 'Supprimer', del: 'Supprimer',

42
src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
View File

@ -78,16 +78,16 @@ const store = createStore({
getParticipationsByCourse: (state) => (course_id) => { getParticipationsByCourse: (state) => (course_id) => {
const course = state.courses.filter(c => c.id === course_id)[0] const course = state.courses.filter(c => c.id === course_id)[0]
const currentParticipations = course.participations.filter(p => p.endDate === null) const currentParticipations = course.participations.filter(p => p.endDate === null)
console.log('get persons in', course_id, currentParticipations.map(p => p.person.id), //console.log('get persons in', course_id, currentParticipations.map(p => p.person.id),
'with folded', currentParticipations.filter(p => p.person.folded === true).map(p => p.person.id)) // 'with folded', currentParticipations.filter(p => p.person.folded === true).map(p => p.person.id))
return currentParticipations return currentParticipations
}, },
getMembersByHousehold: (state) => (household_id) => { getMembersByHousehold: (state) => (household_id) => {
const household = state.households.filter(h => h.id === household_id)[0] const household = state.households.filter(h => h.id === household_id)[0]
const currentMembers = household.members.filter(m => household.current_members_id.includes(m.id)) const currentMembers = household.members.filter(m => household.current_members_id.includes(m.id))
console.log('get persons in', household_id, currentMembers.map(m => m.person.id), //console.log('get persons in', household_id, currentMembers.map(m => m.person.id),
'with folded', currentMembers.filter(m => m.person.folded === true).map(m => m.person.id)) // 'with folded', currentMembers.filter(m => m.person.folded === true).map(m => m.person.id))
return currentMembers return currentMembers
}, },
@ -96,28 +96,37 @@ const store = createStore({
* The 2 previous getters return complete array, but folded (missing) persons are not taken into consideration and are not displayed (!?!) * The 2 previous getters return complete array, but folded (missing) persons are not taken into consideration and are not displayed (!?!)
* This getter compare input array (participations|members) to personLoadedIds array * This getter compare input array (participations|members) to personLoadedIds array
* and return complete array with folded persons taken into consideration * and return complete array with folded persons taken into consideration
*
* @param state
* @param array - An array of persons from course or household.
* This array is dirty, melting persons adapted (or not) to vis, with _id and _label.
* @return array - An array of persons mapped and taken in state.persons
*/ */
getWithFoldedPersons: (state) => (array) => { getPersonsGroup: (state) => (array) => {
let withFolded = [] let group = []
array.forEach(item => { array.forEach(item => {
let id = splitId(item.person.id, 'id') let id = splitId(item.person.id, 'id')
if (state.personLoadedIds.includes(id)) { if (state.personLoadedIds.includes(id)) {
withFolded.push(state.persons.filter(person => person._id === id)[0]) group.push(state.persons.filter(person => person._id === id)[0])
} }
}) })
//console.log('array', array.map(item => item.person.id)) //console.log('array', array.map(item => item.person.id))
console.log('get withFoldedPersons', withFolded.map(f => f.id)) console.log('get persons group', group.map(f => f.id))
return withFolded return group
}, },
}, },
mutations: { mutations: {
addPerson(state, [person, options]) { addPerson(state, [person, options]) {
let debug = ''
/// Debug mode ~ display person_id on visgraph
// uncomment
debug = `\nid ${person.id}`
person.group = person.type person.group = person.type
person._id = person.id person._id = person.id
person.id = `person_${person.id}` person.id = `person_${person.id}`
person.label = `*${person.text}*\n_${getGender(person.gender)} - ${getAge(person.birthdate)}_` person.label = `*${person.text}*\n_${getGender(person.gender)} - ${getAge(person.birthdate)}_${debug}` //
person.folded = false person.folded = false
// folded is used for missing persons // folded is used for missing persons
if (options.folded) { if (options.folded) {
@ -385,6 +394,8 @@ const store = createStore({
dashes: true, dashes: true,
label: getRelationshipLabel(relationship), label: getRelationshipLabel(relationship),
title: getRelationshipTitle(relationship), title: getRelationshipTitle(relationship),
relation: relationship.relation,
reverse: relationship.reverse
}) })
for (let person of [relationship.fromPerson, relationship.toPerson]) { for (let person of [relationship.fromPerson, relationship.toPerson]) {
if (!getters.isPersonLoaded(person.id)) { if (!getters.isPersonLoaded(person.id)) {
@ -418,7 +429,7 @@ const store = createStore({
*/ */
unfoldPersonsByCourse({ getters, commit, dispatch }, course) { unfoldPersonsByCourse({ getters, commit, dispatch }, course) {
const participations = getters.getParticipationsByCourse(course.id) const participations = getters.getParticipationsByCourse(course.id)
getters.getWithFoldedPersons(participations) getters.getPersonsGroup(participations)
.forEach(person => { .forEach(person => {
if (person.folded === true) { if (person.folded === true) {
console.log('-=. unfold and expand person', person.id) console.log('-=. unfold and expand person', person.id)
@ -436,7 +447,7 @@ const store = createStore({
*/ */
unfoldPersonsByHousehold({ getters, commit, dispatch }, household) { unfoldPersonsByHousehold({ getters, commit, dispatch }, household) {
const members = getters.getMembersByHousehold(household.id) const members = getters.getMembersByHousehold(household.id)
getters.getWithFoldedPersons(members) getters.getPersonsGroup(members)
.forEach(person => { .forEach(person => {
if (person.folded === true) { if (person.folded === true) {
console.log('-=. unfold and expand person', person.id) console.log('-=. unfold and expand person', person.id)
@ -463,10 +474,10 @@ const store = createStore({
throw 'undefined case with this id' throw 'undefined case with this id'
} }
} }
let group = getters.getPersonsGroup(personGroup())
if (action === 'add') { if (action === 'add') {
commit('addExcludedNode', id) commit('addExcludedNode', id)
getters.getWithFoldedPersons(personGroup()) group.forEach(person => {
.forEach(person => {
// countLinks < 2 but parent has just already been added ! // countLinks < 2 but parent has just already been added !
if (!getters.isInWhitelist(person.id) && getters.countLinksByNode(person.id) < 1) { if (!getters.isInWhitelist(person.id) && getters.countLinksByNode(person.id) < 1) {
commit('addExcludedNode', person.id) commit('addExcludedNode', person.id)
@ -475,8 +486,7 @@ const store = createStore({
} }
if (action === 'remove') { if (action === 'remove') {
commit('removeExcludedNode', id) commit('removeExcludedNode', id)
getters.getWithFoldedPersons(personGroup()) group.forEach(person => {
.forEach(person => {
commit('removeExcludedNode', person.id) commit('removeExcludedNode', person.id)
}) })
} }