visgraph: test form without vis-network

This commit is contained in:
Mathieu Jaumotte 2021-11-02 18:45:15 +01:00
parent cbb3ad04f0
commit 9cffe5161a

View File

@ -1,4 +1,9 @@
<template> <template>
<!-- TEST appelle la fonction sans passer par le callback de vis-network -->
<button class="btn btn-sm btn-create" @click="addRelationshipModal({ from: 'person_1617', to: 'person_1614' })">add link</button>
<!--// <=== InternalError: too much recursion -->
<div id="visgraph"></div> <div id="visgraph"></div>
<teleport to="#visgraph-legend"> <teleport to="#visgraph-legend">
@ -61,18 +66,14 @@
> >
</VueMultiselect> </VueMultiselect>
</div> </div>
<div v-if="relation && relation.title && relation.reverseTitle"> <div v-if="relation && relation.title">
<p class="text-end" v-if="reverse"> <p class="text-end" v-if="reverse">
{{ $t('visgraph.relation_from_to_like', [ {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.title.fr.toLowerCase() ])}}<br>
getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.title.fr.toLowerCase() ])}}<br> {{ $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() ])}}
</p> </p>
<p class="text-start" v-else> <p class="text-start" v-else>
{{ $t('visgraph.relation_from_to_like', [ {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.title.fr.toLowerCase() ])}}<br>
getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.title.fr.toLowerCase() ])}}<br> {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.reverseTitle.fr.toLowerCase() ])}}
{{ $t('visgraph.relation_from_to_like', [
getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.reverseTitle.fr.toLowerCase() ])}}
</p> </p>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
@ -132,8 +133,7 @@ export default {
computed: { computed: {
...mapGetters(['nodes', 'edges']), ...mapGetters(['nodes', 'edges']),
...mapState(['households', 'courses', 'excludedNodesIds', 'persons', ...mapState(['households', 'courses', 'excludedNodesIds', 'persons',
// not used // not used 'links', 'relationships', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
'links', 'relationships', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
]), ]),
visgraph_data() { visgraph_data() {
@ -244,7 +244,7 @@ export default {
addRelationshipModal(edgeData) { addRelationshipModal(edgeData) {
this.modal.data = edgeData this.modal.data = edgeData
console.log('==- addRelationshipModal', edgeData) console.log('==- addRelationshipModal', edgeData) // { from: "person_1617", to: "person_1614" }
this.modal.action = 'create' this.modal.action = 'create'
this.modal.title = 'visgraph.add_relationship_link' this.modal.title = 'visgraph.add_relationship_link'
this.modal.button.class = 'btn-create' this.modal.button.class = 'btn-create'
@ -269,6 +269,14 @@ export default {
this.modal.button.text = 'action.delete' this.modal.button.text = 'action.delete'
this.modal.showModal = true this.modal.showModal = true
}, },
resetForm() {
console.log('==- reset Form')
this.modal.data = {}
this.modal.action = null
this.modal.title = null
this.modal.button.class = null
this.modal.button.text = null
},
getRelationsList() { getRelationsList() {
console.log('fetch relationsList') console.log('fetch relationsList')
@ -286,22 +294,23 @@ export default {
let person = this.persons.filter(p => p.id === idtext) let person = this.persons.filter(p => p.id === idtext)
return person[0] return person[0]
}, },
submitRelationship() { submitRelationship() {
console.log('submitRelationship') console.log('submitRelationship')
if (this.modal.action !== 'delete') {
return postRelationship( return postRelationship(
this.getPerson(this.modal.data.from), this.getPerson(this.modal.data.from), this.getPerson(this.modal.data.to), this.relation, this.reverse
this.getPerson(this.modal.data.to),
this.relation,
this.reverse
) )
.then(response => new Promise(resolve =>{ .then(response => new Promise(resolve => {
console.log('', response) console.log('', response)
modal.showModal = false modal.showModal = false
this.resetForm()
resolve() resolve()
})) }))
.catch() .catch()
} }
} }
}
} }
</script> </script>