mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
visgraph: improve nodes that are hidden when uncheck layer
- a new getter count links by node. before exclude person, check first if node has others visible links - links id are rewrote to serve count links getter - unfold and expand only folded person
This commit is contained in:
parent
9494bdee2a
commit
bfcd420cdf
@ -140,7 +140,10 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['nodes', 'edges']),
|
||||
...mapGetters(['nodes', 'edges',
|
||||
// not used
|
||||
'isInWhitelist', 'isHouseholdLoading', 'isCourseLoaded', 'isRelationshipLoaded', 'isPersonLoaded', 'isExcludedNode', 'countLinksByNode', 'getParticipationsByCourse', 'getMembersByHousehold', 'getFoldedPersons',
|
||||
]),
|
||||
...mapState(['households', 'courses', 'excludedNodesIds', 'persons',
|
||||
// not used
|
||||
'links', 'relationships', 'whitelistIds', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
|
||||
@ -234,16 +237,15 @@ export default {
|
||||
if (data.nodes.length > 1) {
|
||||
throw 'Multi selection is not allowed. Disable it in options.interaction !'
|
||||
}
|
||||
let nodeType = splitId(data.nodes[0], 'type')
|
||||
switch (nodeType) {
|
||||
let node = data.nodes[0]
|
||||
|
||||
// test
|
||||
console.log(
|
||||
splitId('accompanying_period_124', 'id')
|
||||
)
|
||||
//this.countLinksByNode(node)
|
||||
|
||||
let nodeType = splitId(node, 'type')
|
||||
switch (nodeType) {
|
||||
case 'person':
|
||||
let person = this.nodes.filter(n => n.id === data.nodes[0])[0]
|
||||
let person = this.nodes.filter(n => n.id === node)[0]
|
||||
console.log('@@@@@@ event on selected Node', person.id)
|
||||
if (person.label === null) {
|
||||
this.$store.commit('unfoldPerson', person)
|
||||
@ -252,14 +254,14 @@ export default {
|
||||
break
|
||||
|
||||
case 'household':
|
||||
let household = this.nodes.filter(n => n.id === data.nodes[0])[0]
|
||||
let household = this.nodes.filter(n => n.id === node)[0]
|
||||
console.log('@@@@@@ event on selected Node', household.id)
|
||||
this.$store.dispatch('unfoldPersonsByHousehold', household)
|
||||
this.forceUpdateComponent()
|
||||
break
|
||||
|
||||
case 'accompanying_period':
|
||||
let course = this.nodes.filter(n => n.id === data.nodes[0])[0]
|
||||
let course = this.nodes.filter(n => n.id === node)[0]
|
||||
console.log('@@@@@@ event on selected Node', course.id)
|
||||
this.$store.dispatch('unfoldPersonsByCourse', course)
|
||||
this.forceUpdateComponent()
|
||||
|
||||
@ -64,6 +64,21 @@ const store = createStore({
|
||||
return state.excludedNodesIds.includes(id)
|
||||
},
|
||||
|
||||
countLinksByNode: (state) => (node_id) => {
|
||||
let array = []
|
||||
state.links.filter(link => ! link.id.startsWith('relationship'))
|
||||
.forEach(link => {
|
||||
if (link.from === node_id || link.to === node_id) {
|
||||
if (state.excludedNodesIds.indexOf(splitId(link.id, 'link')) === -1) {
|
||||
array.push(link)
|
||||
}
|
||||
//console.log(link.id, state.excludedNodesIds.indexOf(splitId(link.id, 'link')))
|
||||
}
|
||||
})
|
||||
console.log(array.length, array.map(i => i.id))
|
||||
return array.length
|
||||
},
|
||||
|
||||
getParticipationsByCourse: (state) => (course_id) => {
|
||||
//console.log('getParticipationsByCourse', course_id)
|
||||
const course = state.courses.filter(c => c.id === course_id)[0]
|
||||
@ -88,14 +103,13 @@ const store = createStore({
|
||||
*/
|
||||
getFoldedPersons: (state) => (array) => {
|
||||
let folded = []
|
||||
console.log('array', array.map(item => item.person.id))
|
||||
array.forEach(item => {
|
||||
let id = splitId(item.person.id, 'id')
|
||||
console.log(id)
|
||||
if (state.personLoadedIds.includes(id)) {
|
||||
folded.push(state.persons.filter(person => person._id === id)[0])
|
||||
}
|
||||
})
|
||||
//console.log('array', array.map(item => item.person.id))
|
||||
console.log('get FoldedPersons', folded.map(f => f.id))
|
||||
return folded
|
||||
},
|
||||
@ -197,16 +211,11 @@ const store = createStore({
|
||||
|
||||
//// unfold
|
||||
unfoldPerson(state, person) {
|
||||
if (person.folded === true) {
|
||||
console.log('unfoldPerson', person)
|
||||
person.label = person._label
|
||||
delete person._label
|
||||
delete person.title
|
||||
person.folded = false
|
||||
} else {
|
||||
console.log('person is not folded', person)
|
||||
//throw 'person is not folded'
|
||||
}
|
||||
console.log('unfoldPerson', person)
|
||||
person.label = person._label
|
||||
delete person._label
|
||||
delete person.title
|
||||
person.folded = false
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@ -247,7 +256,7 @@ const store = createStore({
|
||||
getHouseholdByPerson(person)
|
||||
.then(household => new Promise(resolve => {
|
||||
commit('addHousehold', household)
|
||||
//dispatch('addExcludedNode', household.id) // layer uncheck when added
|
||||
//dispatch('addExcludedNode', household.id) // uncheck layer when added
|
||||
dispatch('addLinkFromPersonsToHousehold', household)
|
||||
resolve()
|
||||
})
|
||||
@ -269,7 +278,7 @@ const store = createStore({
|
||||
commit('addLink', {
|
||||
from: `${m.person.type}_${m.person.id}`,
|
||||
to: `household_${m.person.current_household_id}`,
|
||||
id: `p${m.person.id}-h${m.person.current_household_id}`,
|
||||
id: `household_${m.person.current_household_id}-person_${m.person.id}`,
|
||||
arrows: 'from',
|
||||
color: 'pink',
|
||||
font: { color: '#D04A60' },
|
||||
@ -331,7 +340,7 @@ const store = createStore({
|
||||
commit('addLink', {
|
||||
from: `${p.person.type}_${p.person.id}`,
|
||||
to: `${course.id}`,
|
||||
id: `p${p.person.id}-c`+ splitId(course.id,'id'),
|
||||
id: `accompanying_period_${splitId(course.id,'id')}-person_${p.person.id}`,
|
||||
arrows: 'from',
|
||||
color: 'orange',
|
||||
font: { color: 'darkorange' },
|
||||
@ -384,7 +393,7 @@ const store = createStore({
|
||||
commit('addLink', {
|
||||
from: `person_${r.fromPerson.id}`,
|
||||
to: `person_${r.toPerson.id}`,
|
||||
id: 'r' + splitId(r.id,'id') + '_p' + r.fromPerson.id + '_p' + r.toPerson.id,
|
||||
id: 'relationship_' + splitId(r.id,'id') + '-person_' + r.fromPerson.id + '-person_' + r.toPerson.id,
|
||||
arrows: getRelationshipDirection(r),
|
||||
color: 'lightblue',
|
||||
font: { color: '#33839d' },
|
||||
@ -426,9 +435,14 @@ const store = createStore({
|
||||
const participations = getters.getParticipationsByCourse(course.id)
|
||||
getters.getFoldedPersons(participations)
|
||||
.forEach(person => {
|
||||
console.log('-=. unfold and expand person', person.id)
|
||||
commit('unfoldPerson', person)
|
||||
dispatch('fetchInfoForPerson', person)
|
||||
if (person.folded === true) {
|
||||
console.log('-=. unfold and expand person', person.id)
|
||||
commit('unfoldPerson', person)
|
||||
dispatch('fetchInfoForPerson', person)
|
||||
//} else {
|
||||
//console.log('person is not folded', person)
|
||||
//throw 'person is not folded'
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@ -442,9 +456,14 @@ const store = createStore({
|
||||
const members = getters.getMembersByHousehold(household.id)
|
||||
getters.getFoldedPersons(members)
|
||||
.forEach(person => {
|
||||
console.log('-=. unfold and expand person', person.id)
|
||||
commit('unfoldPerson', person)
|
||||
dispatch('fetchInfoForPerson', person)
|
||||
if (person.folded === true) {
|
||||
console.log('-=. unfold and expand person', person.id)
|
||||
commit('unfoldPerson', person)
|
||||
dispatch('fetchInfoForPerson', person)
|
||||
//} else {
|
||||
//console.log('person is not folded', person)
|
||||
//throw 'person is not folded'
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@ -471,7 +490,8 @@ const store = createStore({
|
||||
commit('addExcludedNode', id)
|
||||
getters.getFoldedPersons(personGroup())
|
||||
.forEach(person => {
|
||||
if (!getters.isInWhitelist(person.id)) {
|
||||
// countLinks < 2 but parent has just already been added !
|
||||
if (!getters.isInWhitelist(person.id) && getters.countLinksByNode(person.id) < 1) {
|
||||
commit('addExcludedNode', person.id)
|
||||
}
|
||||
})
|
||||
|
||||
@ -264,17 +264,19 @@ const getRelationshipTitle = (relationship) => {
|
||||
* Split string id and return type|id substring
|
||||
* @param id
|
||||
* @param position
|
||||
* @returns string
|
||||
* @returns string|integer
|
||||
*/
|
||||
const splitId = (id, position) => {
|
||||
switch (position) {
|
||||
case 'type':
|
||||
return /(.+)_/.exec(id)[1] // return 'accompanying_period'
|
||||
case 'type': // return 'accompanying_period'
|
||||
return /(.+)_/.exec(id)[1]
|
||||
case 'id': // return 124
|
||||
return parseInt(id
|
||||
.toString()
|
||||
.split("_")
|
||||
.pop())
|
||||
case 'link':
|
||||
return id.split("-")[0] // return first segment
|
||||
default:
|
||||
throw 'position undefined'
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user