This commit is contained in:
Mathieu Jaumotte 2021-11-09 22:48:29 +01:00
parent bfca6d2afc
commit a63e1321b0
3 changed files with 34 additions and 42 deletions

View File

@ -5,7 +5,7 @@
<teleport to="#visgraph-legend"> <teleport to="#visgraph-legend">
<div class="post-menu"> <div class="post-menu">
<div class="list-group mt-4"> <div class="list-group mt-4">
<button type="button" class="list-group-item list-group-item-action btn btn-create" @click="newRelationshipLinkButton"> <button type="button" class="list-group-item list-group-item-action btn btn-create" @click="createRelationship">
{{ $t('visgraph.add_link') }} {{ $t('visgraph.add_link') }}
</button> </button>
<button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork"> <button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork">
@ -14,13 +14,6 @@
<button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork"> <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') }} <i class="fa fa-refresh fa-fw"></i> {{ $t('visgraph.refresh') }}
</button> </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>
<div v-if="displayHelpMessage" class="alert alert-info mt-3"> <div v-if="displayHelpMessage" class="alert alert-info mt-3">
@ -211,12 +204,6 @@ export default {
return this.checkedLayers return this.checkedLayers
}, },
/*
toggleIdPerson() {
console.log('toggleIdPerson')
},
*/
relation: { relation: {
get() { get() {
return this.modal.data.relation return this.modal.data.relation
@ -249,6 +236,8 @@ export default {
// Instanciate vis objects in separate window variables, see vis-network.js // Instanciate vis objects in separate window variables, see vis-network.js
window.network = new vis.Network(this.container, this.visgraph_data, window.options) window.network = new vis.Network(this.container, this.visgraph_data, window.options)
}, },
// events
listenOnGraph() { listenOnGraph() {
window.network.on('selectNode', (data) => { window.network.on('selectNode', (data) => {
if (data.nodes.length > 1) { if (data.nodes.length > 1) {
@ -300,7 +289,7 @@ export default {
console.log('@@@@@ event on selected Edge', data.edges.length, linkType, data) console.log('@@@@@ event on selected Edge', data.edges.length, linkType, data)
if (linkType.startsWith('relationship')) { if (linkType.startsWith('relationship')) {
console.log('linkType relationship') //console.log('linkType relationship')
let relationships = this.edges.filter(l => l.id === link) let relationships = this.edges.filter(l => l.id === link)
if (relationships.length > 1) { if (relationships.length > 1) {
@ -308,7 +297,7 @@ export default {
} }
let relationship = relationships[0] let relationship = relationships[0]
console.log(relationship) //console.log(relationship)
this.editRelationshipModal({ this.editRelationshipModal({
from: relationship.from, from: relationship.from,
@ -318,20 +307,12 @@ export default {
reverse: relationship.reverse reverse: relationship.reverse
}) })
} }
/* Disabled
if (linkType.startsWith('household')) {
console.log('linkType household')
} else
if (linkType.startsWith('accompanying_period')) {
console.log('linkType accompanying_period')
} else
*/
}) })
}, },
listenStepsToAddRelationship(person) { listenStepsToAddRelationship(person) {
console.log(' @@> listenStep', this.listenPersonFlag) console.log(' @@> listenStep', this.listenPersonFlag)
if (this.listenPersonFlag === 'step2') { if (this.listenPersonFlag === 'step2') {
console.log(' @@> person 2', person) //console.log(' @@> person 2', person)
this.newEdgeData.to = person.id this.newEdgeData.to = person.id
this.addRelationshipModal(this.newEdgeData) this.addRelationshipModal(this.newEdgeData)
this.displayHelpMessage = false this.displayHelpMessage = false
@ -339,11 +320,13 @@ export default {
this.newEdgeData = {} this.newEdgeData = {}
} }
if (this.listenPersonFlag === 'step1') { if (this.listenPersonFlag === 'step1') {
console.log(' @@> person 1', person) //console.log(' @@> person 1', person)
this.newEdgeData.from = person.id this.newEdgeData.from = person.id
this.listenPersonFlag = 'step2' this.listenPersonFlag = 'step2'
} }
}, },
// force refresh
forceUpdateComponent() { forceUpdateComponent() {
//console.log('!! forceUpdateComponent !!') //console.log('!! forceUpdateComponent !!')
this.$forceUpdate() this.$forceUpdate()
@ -374,7 +357,7 @@ export default {
/// control Modal /// control Modal
addRelationshipModal(edgeData) { addRelationshipModal(edgeData) {
console.log('==- addRelationshipModal', edgeData) //console.log('==- addRelationshipModal', edgeData)
this.modal.data.from = edgeData.from this.modal.data.from = edgeData.from
this.modal.data.to = edgeData.to this.modal.data.to = edgeData.to
this.modal.action = 'create' this.modal.action = 'create'
@ -387,7 +370,7 @@ export default {
this.modal.data = edgeData this.modal.data = edgeData
this.relation = this.modal.data.relation this.relation = this.modal.data.relation
this.reverse = this.modal.data.reverse this.reverse = this.modal.data.reverse
console.log('==- editRelationshipModal', this.modal.data) //console.log('==- editRelationshipModal', this.modal.data)
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'
@ -395,6 +378,7 @@ export default {
this.modal.showModal = true this.modal.showModal = true
}, },
// form
resetForm() { resetForm() {
console.log('==- reset Form') console.log('==- reset Form')
this.modal.data = { this.modal.data = {
@ -409,6 +393,7 @@ export default {
this.modal.button.class = null this.modal.button.class = null
this.modal.button.text = null this.modal.button.text = null
}, },
getRelationsList() { getRelationsList() {
//console.log('fetch relationsList') //console.log('fetch relationsList')
return getRelationsList().then(relations => new Promise(resolve => { return getRelationsList().then(relations => new Promise(resolve => {
@ -421,32 +406,33 @@ export default {
//console.log('customLabel', value) //console.log('customLabel', value)
return (value.title && value.reverseTitle) ? `${value.title.fr}${value.reverseTitle.fr}` : '' return (value.title && value.reverseTitle) ? `${value.title.fr}${value.reverseTitle.fr}` : ''
}, },
getPerson(id) {
getPerson(idtext) { let person = this.persons.filter(p => p.id === id)
let person = this.persons.filter(p => p.id === idtext)
return person[0] return person[0]
}, },
newRelationshipLinkButton() { // actions
createRelationship() {
this.displayHelpMessage = true this.displayHelpMessage = true
this.listenPersonFlag = 'step1' this.listenPersonFlag = 'step1'
console.log(' @@> switch listener to create link mode:', this.listenPersonFlag) console.log(' @@> switch listener to create link mode:', this.listenPersonFlag)
}, },
dropRelationship() { dropRelationship() {
console.log('delete', this.modal.data) //console.log('delete', this.modal.data)
deleteRelationship(this.modal.data) deleteRelationship(this.modal.data)
.catch()
this.$store.commit('removeLink', this.modal.data.id) this.$store.commit('removeLink', this.modal.data.id)
this.modal.showModal = false this.modal.showModal = false
this.resetForm() this.resetForm()
}, },
submitRelationship() { submitRelationship() {
console.log('submitRelationship with action', this.modal.action) console.log('submitRelationship', this.modal.action)
switch (this.modal.action) { switch (this.modal.action) {
case 'create': case 'create':
return postRelationship(this.modal.data) return postRelationship(this.modal.data)
.then(relationship => new Promise(resolve => { .then(relationship => new Promise(resolve => {
console.log('post response', relationship) console.log('post relationship response', relationship)
this.$store.dispatch('addLinkFromRelationship', relationship) this.$store.dispatch('addLinkFromRelationship', relationship)
this.modal.showModal = false this.modal.showModal = false
this.resetForm() this.resetForm()
@ -457,7 +443,7 @@ export default {
case 'edit': case 'edit':
return patchRelationship(this.modal.data) return patchRelationship(this.modal.data)
.then(relationship => new Promise(resolve => { .then(relationship => new Promise(resolve => {
console.log('patch relationship', relationship) console.log('patch relationship response', relationship)
this.$store.commit('updateLink', relationship) this.$store.commit('updateLink', relationship)
this.modal.showModal = false this.modal.showModal = false
this.resetForm() this.resetForm()
@ -471,6 +457,7 @@ export default {
} }
}, },
/*
/// Tiny emitter events /// Tiny emitter events
created() { created() {
eventHub.on('add-relationship-modal', this.addRelationshipModal) eventHub.on('add-relationship-modal', this.addRelationshipModal)
@ -482,6 +469,7 @@ export default {
eventHub.off('edit-relationship-modal', this.editRelationshipModal) eventHub.off('edit-relationship-modal', this.editRelationshipModal)
eventHub.off('delete-relationship-modal', this.deleteRelationshipModal) eventHub.off('delete-relationship-modal', this.deleteRelationshipModal)
} }
*/
} }
</script> </script>

View File

@ -216,11 +216,11 @@ const store = createStore({
//// excluded //// excluded
addExcludedNode(state, id) { addExcludedNode(state, id) {
console.log('==> exclude list: +', id) //console.log('==> exclude list: +', id)
state.excludedNodesIds.push(id) state.excludedNodesIds.push(id)
}, },
removeExcludedNode(state, id) { removeExcludedNode(state, id) {
console.log('<== exclude list: -', id) //console.log('<== exclude list: -', id)
state.excludedNodesIds = state.excludedNodesIds.filter(e => e !== id) state.excludedNodesIds = state.excludedNodesIds.filter(e => e !== id)
}, },

View File

@ -1,5 +1,5 @@
import { visMessages } from './i18n' import { visMessages } from './i18n'
import { TinyEmitter } from "tiny-emitter"; //import { TinyEmitter } from "tiny-emitter";
/** /**
* Vis-network initial data/configuration script * Vis-network initial data/configuration script
@ -8,8 +8,8 @@ import { TinyEmitter } from "tiny-emitter";
* cfr. https://github.com/almende/vis/issues/2524#issuecomment-307108271 * cfr. https://github.com/almende/vis/issues/2524#issuecomment-307108271
*/ */
console.log('@@@ init eventHub App @@@') //console.log('@@@ init eventHub App @@@')
window.eventHub = new TinyEmitter() //window.eventHub = new TinyEmitter()
window.network = {} window.network = {}
@ -82,8 +82,11 @@ window.options = {
enabled: false, enabled: false,
initiallyActive: false, initiallyActive: false,
addNode: false, addNode: false,
//editNode: function(nodeData, callback) { callback(nodeData) }, //disabled if undefined
deleteNode: false, deleteNode: false,
/*
//disabled if undefined
//editNode: function(nodeData, callback) { callback(nodeData) },
// TODO see alternative with 'Manipulation methods to use the manipulation system without GUI.' // TODO see alternative with 'Manipulation methods to use the manipulation system without GUI.'
addEdge: function(edgeData, callback) { addEdge: function(edgeData, callback) {
if ( if (
@ -111,6 +114,7 @@ window.options = {
callback(edgeData) callback(edgeData)
} }
// end TODO // end TODO
*/
}, },
nodes: { nodes: {
borderWidth: 1, borderWidth: 1,