mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
visgraph: trying to pass value to edit relationship form fields (wip)
This commit is contained in:
parent
46e552d034
commit
d6da6a5d9d
@ -1,4 +1,6 @@
|
||||
<template>
|
||||
<test></test>
|
||||
|
||||
<banner></banner>
|
||||
<sticky-nav></sticky-nav>
|
||||
|
||||
@ -23,8 +25,8 @@
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import test from 'ChillPersonAssets/vuejs/VisGraph/components/test'
|
||||
import { mapState } from 'vuex'
|
||||
import Banner from './components/Banner.vue';
|
||||
import StickyNav from './components/StickyNav.vue';
|
||||
@ -42,6 +44,7 @@ import Confirm from './components/Confirm.vue';
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
test,
|
||||
Banner,
|
||||
StickyNav,
|
||||
OriginDemand,
|
||||
|
||||
@ -3,35 +3,44 @@
|
||||
<div id="visgraph"></div>
|
||||
|
||||
<teleport to="#visgraph-legend">
|
||||
<div class="list-group mt-4">
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-create" @click="addRelationshipLink">
|
||||
{{ $t('visgraph.add_link') }}
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork">
|
||||
<i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork">
|
||||
<i class="fa fa-refresh fa-fw"></i> {{ $t('visgraph.refresh') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="post-menu">
|
||||
<div class="list-group mt-4">
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-create" @click="newRelationshipLinkButton">
|
||||
{{ $t('visgraph.add_link') }}
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork">
|
||||
<i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork">
|
||||
<i class="fa fa-refresh fa-fw"></i> {{ $t('visgraph.refresh') }}
|
||||
</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">
|
||||
{{ $t('visgraph.create_link_help') }}
|
||||
</div>
|
||||
<div v-if="displayHelpMessage" class="alert alert-info mt-3">
|
||||
{{ $t('visgraph.create_link_help') }}
|
||||
</div>
|
||||
|
||||
<div class="my-4 post-menu legend">
|
||||
<h3>{{ $t('visgraph.Legend') }}</h3>
|
||||
<div class="list-group">
|
||||
<label class="list-group-item" v-for="layer in legendLayers">
|
||||
<input
|
||||
class="form-check-input me-1"
|
||||
type="checkbox"
|
||||
:value="layer.id"
|
||||
v-model="checkedLayers"
|
||||
@change="toggleLayer"
|
||||
/>
|
||||
{{ layer.label }}
|
||||
</label>
|
||||
<div class="my-4 legend">
|
||||
<h3>{{ $t('visgraph.Legend') }}</h3>
|
||||
<div class="list-group">
|
||||
<label class="list-group-item" v-for="layer in legendLayers">
|
||||
<input
|
||||
class="form-check-input me-1"
|
||||
type="checkbox"
|
||||
:value="layer.id"
|
||||
v-model="checkedLayers"
|
||||
@change="toggleLayer"
|
||||
/>
|
||||
{{ layer.label }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
@ -51,9 +60,7 @@
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">{{ $t('visgraph.between') }}<br>{{ $t('visgraph.and') }}</div>
|
||||
<div class="col">
|
||||
<h4>
|
||||
{{ getPerson(modal.data.from).text }}
|
||||
</h4>
|
||||
<h4>{{ getPerson(modal.data.from).text }}</h4>
|
||||
<p class="text-start" v-if="relation && relation.title">
|
||||
<span v-if="reverse">
|
||||
{{ $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>
|
||||
</div>
|
||||
<div class="col text-end">
|
||||
<h4>
|
||||
{{ getPerson(modal.data.to).text }}
|
||||
</h4>
|
||||
<h4>{{ getPerson(modal.data.to).text }}</h4>
|
||||
<p class="text-end" v-if="relation && relation.title">
|
||||
<span v-if="reverse">
|
||||
{{ $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 class="my-3"><!--
|
||||
:value="relation"
|
||||
-->
|
||||
<VueMultiselect
|
||||
:value="relation"
|
||||
id="relation"
|
||||
label="title"
|
||||
track-by="id"
|
||||
:custom-label="customLabel"
|
||||
:placeholder="$t('Choisissez le lien de parenté')"
|
||||
:placeholder="$t('visgraph.choose_relation')"
|
||||
:close-on-select="true"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
@ -103,12 +108,18 @@
|
||||
>
|
||||
<label class="form-check-label" for="reverse">{{ $t('visgraph.reverse_relation') }}</label>
|
||||
</div>
|
||||
<pre class="debug">
|
||||
modal.data
|
||||
{{ modal.data }}
|
||||
</pre>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<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>
|
||||
</modal>
|
||||
</teleport>
|
||||
@ -116,16 +127,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import test from './components/test'
|
||||
import vis from 'vis-network/dist/vis-network'
|
||||
import { mapState, mapGetters } from "vuex"
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal'
|
||||
import VueMultiselect from 'vue-multiselect'
|
||||
import { getRelationsList, postRelationship } from "./api";
|
||||
import { getRelationsList, postRelationship, patchRelationship, deleteRelationship } from "./api";
|
||||
import { splitId } from "./vis-network";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
test,
|
||||
Modal,
|
||||
VueMultiselect
|
||||
},
|
||||
@ -137,6 +150,8 @@ export default {
|
||||
relation: null,
|
||||
reverse: false,
|
||||
displayHelpMessage: false,
|
||||
listenPersonFlag: 'normal',
|
||||
newEdgeData: {},
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-md",
|
||||
@ -153,7 +168,7 @@ export default {
|
||||
computed: {
|
||||
...mapGetters(['nodes', 'edges',
|
||||
// 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',
|
||||
// not used
|
||||
@ -197,6 +212,11 @@ export default {
|
||||
return this.checkedLayers
|
||||
},
|
||||
|
||||
toggleIdPerson() {
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
relation: {
|
||||
get() {
|
||||
return this.relation
|
||||
@ -211,12 +231,12 @@ export default {
|
||||
get() {
|
||||
return this.reverse
|
||||
},
|
||||
set(value) {
|
||||
//console.log('setter reverse', value) // <=== InternalError: too much recursion
|
||||
this.reverse = value
|
||||
set(newValue) {
|
||||
//console.log('setter reverse', newValue) // <=== InternalError: too much recursion
|
||||
this.reverse = newValue
|
||||
}
|
||||
},
|
||||
|
||||
*/
|
||||
|
||||
},
|
||||
mounted() {
|
||||
@ -244,9 +264,15 @@ export default {
|
||||
case 'person':
|
||||
let person = this.nodes.filter(n => n.id === node)[0]
|
||||
console.log('@@@@@@ event on selected Node', person.id)
|
||||
if (person.folded === true) {
|
||||
this.$store.commit('unfoldPerson', person)
|
||||
this.forceUpdateComponent()
|
||||
if (this.listenPersonFlag === 'normal') {
|
||||
if (person.folded === true) {
|
||||
console.log(' @@> expand mode event')
|
||||
this.$store.commit('unfoldPerson', person)
|
||||
this.forceUpdateComponent()
|
||||
}
|
||||
} else {
|
||||
console.log(' @@> create link mode event')
|
||||
this.listenStepsToAddRelationship(person)
|
||||
}
|
||||
break
|
||||
|
||||
@ -269,25 +295,58 @@ export default {
|
||||
}
|
||||
})
|
||||
window.network.on('selectEdge', (data) => {
|
||||
if (data.nodes.length !== 0 && data.edges.length !== 1) {
|
||||
return false
|
||||
if (data.nodes.length !== 0 || data.edges.length !== 1) {
|
||||
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')) {
|
||||
console.log('@@@@@ event on selected Edge', data)
|
||||
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')) {
|
||||
console.log('linkType household')
|
||||
} else
|
||||
if (linkType.startsWith('accompanying_period')) {
|
||||
console.log('linkType accompanying_period')
|
||||
} 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() {
|
||||
//console.log('!! forceUpdateComponent !!')
|
||||
this.$forceUpdate()
|
||||
@ -297,7 +356,7 @@ export default {
|
||||
/// Control Layers
|
||||
toggleLayer(value) {
|
||||
let id = value.target.value
|
||||
console.log('@@@@@ toggle Layer', id)
|
||||
console.log('@@@@@@ toggle Layer', id)
|
||||
this.forceUpdateComponent()
|
||||
if (this.checkedLayers.includes(id)) {
|
||||
this.removeLayer(id)
|
||||
@ -328,13 +387,16 @@ export default {
|
||||
},
|
||||
editRelationshipModal(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.title = 'visgraph.edit_relationship_link'
|
||||
this.modal.button.class = 'btn-edit'
|
||||
this.modal.button.text = 'action.edit'
|
||||
this.modal.showModal = true
|
||||
},
|
||||
/*
|
||||
deleteRelationshipModal(edgeData) {
|
||||
this.modal.data = edgeData
|
||||
console.log('==- deleteRelationshipModal', edgeData)
|
||||
@ -344,6 +406,7 @@ export default {
|
||||
this.modal.button.text = 'action.delete'
|
||||
this.modal.showModal = true
|
||||
},
|
||||
*/
|
||||
|
||||
resetForm() {
|
||||
console.log('==- reset Form')
|
||||
@ -370,19 +433,16 @@ export default {
|
||||
return person[0]
|
||||
},
|
||||
|
||||
|
||||
addRelationshipLink() {
|
||||
newRelationshipLinkButton() {
|
||||
this.displayHelpMessage = true
|
||||
let edgeData = { from: "person_1617", to: "person_1614" }
|
||||
let callback = (d) => {
|
||||
console.log('d', d)
|
||||
}
|
||||
//open
|
||||
window.network.addEdgeMode()
|
||||
window.network.addEdge
|
||||
|
||||
//close
|
||||
window.network.disableEditMode()
|
||||
this.listenPersonFlag = 'step1'
|
||||
console.log(' @@> switch listener to create link mode:', this.listenPersonFlag)
|
||||
},
|
||||
dropRelationship() {
|
||||
console.log('delete')
|
||||
deleteRelationship(relationship) /// param ?
|
||||
this.modal.showModal = false
|
||||
this.resetForm()
|
||||
},
|
||||
submitRelationship() {
|
||||
console.log('submitRelationship with action', this.modal.action)
|
||||
@ -402,26 +462,18 @@ export default {
|
||||
.catch()
|
||||
|
||||
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)
|
||||
.then(response => new Promise(resolve => {
|
||||
console.log('patch response', response)
|
||||
this.$store.dispatch('updateLinkFromRelationship', response)
|
||||
.then(relationship => new Promise(resolve => {
|
||||
console.log('patch relationship', relationship)
|
||||
this.$store.dispatch('updateLinkFromRelationship', relationship)
|
||||
this.modal.showModal = false
|
||||
this.resetForm()
|
||||
resolve()
|
||||
}))
|
||||
.catch()
|
||||
|
||||
case 'delete':
|
||||
break
|
||||
default:
|
||||
throw "undefined action"
|
||||
throw "uncaught action"
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -455,4 +507,10 @@ div#visgraph-legend {
|
||||
.modal-mask {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.debug {
|
||||
margin: 1em; padding: 1em;
|
||||
color: dimgray;
|
||||
font-style: italic;
|
||||
font-size: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -73,6 +73,16 @@ const patchFetch = (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
|
||||
@ -145,29 +155,36 @@ const postRelationship = (fromPerson, toPerson, relation, reverse) => {
|
||||
* @returns {Promise<Response>}
|
||||
*/
|
||||
const patchRelationship = (relationship) => {
|
||||
console.log(relationship)
|
||||
return patchFetch(
|
||||
`/api/1.0/relations/relationship/${relationship._id}.json`,
|
||||
`/api/1.0/relations/relationship/${relationship.id}.json`,
|
||||
{
|
||||
type: 'relationship',
|
||||
fromPerson: { type: 'person',
|
||||
id: fromPerson._id
|
||||
},
|
||||
toPerson: { type: 'person',
|
||||
id: toPerson._id
|
||||
},
|
||||
relation: { type: 'relation',
|
||||
id: relation.id
|
||||
},
|
||||
reverse: reverse
|
||||
fromPerson: { type: 'person', id: relationship.fromPerson.id },
|
||||
toPerson: { type: 'person', id: relationship.toPerson.id },
|
||||
relation: { type: 'relation', id: relationship.relation.id },
|
||||
reverse: relationship.reverse
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function deleteRelationship
|
||||
* @param relationship
|
||||
* @returns {Promise<Response>}
|
||||
*/
|
||||
const deleteRelationship = (relationship) => {
|
||||
return deleteFetch(
|
||||
`/api/1.0/relations/relationship/${relationship.id}.json`
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
getHouseholdByPerson,
|
||||
getCoursesByPerson,
|
||||
getRelationshipsByPerson,
|
||||
getRelationsList,
|
||||
postRelationship,
|
||||
patchRelationship
|
||||
patchRelationship,
|
||||
deleteRelationship
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -20,9 +20,10 @@ const visMessages = {
|
||||
between: "entre",
|
||||
and: "et",
|
||||
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",
|
||||
screenshot: "Prendre une photo",
|
||||
choose_relation: "Choisissez le lien de parenté",
|
||||
},
|
||||
edit: 'Éditer',
|
||||
del: 'Supprimer',
|
||||
|
||||
@ -78,16 +78,16 @@ const store = createStore({
|
||||
getParticipationsByCourse: (state) => (course_id) => {
|
||||
const course = state.courses.filter(c => c.id === course_id)[0]
|
||||
const currentParticipations = course.participations.filter(p => p.endDate === null)
|
||||
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))
|
||||
//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))
|
||||
return currentParticipations
|
||||
},
|
||||
|
||||
getMembersByHousehold: (state) => (household_id) => {
|
||||
const household = state.households.filter(h => h.id === household_id)[0]
|
||||
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),
|
||||
'with folded', currentMembers.filter(m => m.person.folded === true).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))
|
||||
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 (!?!)
|
||||
* This getter compare input array (participations|members) to personLoadedIds array
|
||||
* 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) => {
|
||||
let withFolded = []
|
||||
getPersonsGroup: (state) => (array) => {
|
||||
let group = []
|
||||
array.forEach(item => {
|
||||
let id = splitId(item.person.id, '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('get withFoldedPersons', withFolded.map(f => f.id))
|
||||
return withFolded
|
||||
console.log('get persons group', group.map(f => f.id))
|
||||
return group
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
mutations: {
|
||||
addPerson(state, [person, options]) {
|
||||
let debug = ''
|
||||
/// Debug mode ~ display person_id on visgraph
|
||||
// uncomment
|
||||
debug = `\nid ${person.id}`
|
||||
person.group = person.type
|
||||
person._id = 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
|
||||
// folded is used for missing persons
|
||||
if (options.folded) {
|
||||
@ -385,6 +394,8 @@ const store = createStore({
|
||||
dashes: true,
|
||||
label: getRelationshipLabel(relationship),
|
||||
title: getRelationshipTitle(relationship),
|
||||
relation: relationship.relation,
|
||||
reverse: relationship.reverse
|
||||
})
|
||||
for (let person of [relationship.fromPerson, relationship.toPerson]) {
|
||||
if (!getters.isPersonLoaded(person.id)) {
|
||||
@ -418,7 +429,7 @@ const store = createStore({
|
||||
*/
|
||||
unfoldPersonsByCourse({ getters, commit, dispatch }, course) {
|
||||
const participations = getters.getParticipationsByCourse(course.id)
|
||||
getters.getWithFoldedPersons(participations)
|
||||
getters.getPersonsGroup(participations)
|
||||
.forEach(person => {
|
||||
if (person.folded === true) {
|
||||
console.log('-=. unfold and expand person', person.id)
|
||||
@ -436,7 +447,7 @@ const store = createStore({
|
||||
*/
|
||||
unfoldPersonsByHousehold({ getters, commit, dispatch }, household) {
|
||||
const members = getters.getMembersByHousehold(household.id)
|
||||
getters.getWithFoldedPersons(members)
|
||||
getters.getPersonsGroup(members)
|
||||
.forEach(person => {
|
||||
if (person.folded === true) {
|
||||
console.log('-=. unfold and expand person', person.id)
|
||||
@ -463,10 +474,10 @@ const store = createStore({
|
||||
throw 'undefined case with this id'
|
||||
}
|
||||
}
|
||||
let group = getters.getPersonsGroup(personGroup())
|
||||
if (action === 'add') {
|
||||
commit('addExcludedNode', id)
|
||||
getters.getWithFoldedPersons(personGroup())
|
||||
.forEach(person => {
|
||||
group.forEach(person => {
|
||||
// countLinks < 2 but parent has just already been added !
|
||||
if (!getters.isInWhitelist(person.id) && getters.countLinksByNode(person.id) < 1) {
|
||||
commit('addExcludedNode', person.id)
|
||||
@ -475,8 +486,7 @@ const store = createStore({
|
||||
}
|
||||
if (action === 'remove') {
|
||||
commit('removeExcludedNode', id)
|
||||
getters.getWithFoldedPersons(personGroup())
|
||||
.forEach(person => {
|
||||
group.forEach(person => {
|
||||
commit('removeExcludedNode', person.id)
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user