visgraph: pass context to modals

This commit is contained in:
Mathieu Jaumotte 2021-11-01 15:36:57 +01:00
parent d3a08149f0
commit 9cce62c294
3 changed files with 69 additions and 22 deletions

View File

@ -23,16 +23,37 @@
<teleport to="body">
<modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
<template v-slot:header>
<h2 class="modal-title">Créer un lien de filiation</h2>
<h2 class="modal-title">{{ $t(modal.title) }}</h2>
</template>
<template v-slot:body>
<div v-if="modal.action === 'delete'">
<p>
{{ $t('visgraph.delete_confirmation_text') }}
</p>
</div>
<div v-else>
<form>
{{ modal.data.id }}
<div class="row">
<div class="col">
{{ modal.data.from }}
</div>
<div class="col text-end">
{{ modal.data.to }}
</div>
</div>
<p>
phrase
</p>
<div>
toggle reverse
</div>
</form>
</div>
</template>
<template v-slot:footer>
<button class="btn btn-create" @click="modal.showModal = false">
{{ $t('action.save')}}</button>
<button class="btn" :class="modal.button.class" @click="modal.showModal = false">
{{ $t(modal.button.text)}}</button>
</template>
</modal>
</teleport>
@ -55,7 +76,14 @@ export default {
checkedLayers: [],
modal: {
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-md"
modalDialogClass: "modal-dialog-scrollable modal-md",
title: null,
action: null,
data: {},
button: {
class: null,
text: null
},
},
}
},
@ -105,14 +133,14 @@ export default {
},
created() {
eventHub.on('add-relationship-link', this.addRelationshipLink)
eventHub.on('edit-relationship-link', this.editRelationshipLink)
eventHub.on('delete-relationship-link', this.deleteRelationshipLink)
eventHub.on('add-relationship-modal', this.addRelationshipModal)
eventHub.on('edit-relationship-modal', this.editRelationshipModal)
eventHub.on('delete-relationship-modal', this.deleteRelationshipModal)
},
unmounted() {
eventHub.off('add-relationship-link', this.addRelationshipLink)
eventHub.off('edit-relationship-link', this.editRelationshipLink)
eventHub.off('delete-relationship-link', this.deleteRelationshipLink)
eventHub.off('add-relationship-modal', this.addRelationshipModal)
eventHub.off('edit-relationship-modal', this.editRelationshipModal)
eventHub.off('delete-relationship-modal', this.deleteRelationshipModal)
},
mounted() {
console.log('=== mounted: init graph')
@ -150,16 +178,31 @@ export default {
this.$store.commit('addExcludedNode', id)
},
addRelationshipLink(edgeData) {
console.log('==> addRelationshipLink <=======================', edgeData)
addRelationshipModal(edgeData) {
console.log('==> addRelationshipModal <=======================', edgeData)
this.modal.data = edgeData
this.modal.action = 'create'
this.modal.title = 'visgraph.add_relationship_link'
this.modal.button.class = 'btn-create'
this.modal.button.text = 'action.create'
this.modal.showModal = true
},
editRelationshipLink(edgeData) {
console.log('==> editRelationshipLink <=======================', edgeData)
editRelationshipModal(edgeData) {
console.log('==> editRelationshipModal <=======================', edgeData)
this.modal.data = edgeData
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
},
deleteRelationshipLink(edgeData) {
console.log('==> deleteRelationshipLink <=======================', edgeData)
deleteRelationshipModal(edgeData) {
console.log('==> deleteRelationshipModal <=======================', edgeData)
this.modal.data = edgeData
this.modal.action = 'delete'
this.modal.title = 'visgraph.delete_relationship_link'
this.modal.button.class = 'btn-delete'
this.modal.button.text = 'action.delete'
this.modal.showModal = true
},
}

View File

@ -11,6 +11,10 @@ const visMessages = {
man: 'masculin',
years: 'ans',
click_to_expand: 'cliquez pour étendre',
add_relationship_link: "Créer un lien de filiation",
edit_relationship_link: "Modifier le lien de filiation",
delete_relationship_link: "Êtes-vous sûr ?",
delete_confirmation_text: "Vous allez supprimer le lien entre ces 2 usagers.",
},
edit: 'Éditer',
del: 'Supprimer',

View File

@ -104,7 +104,7 @@ window.options = {
&& splitId(edgeData.to,'type') === 'person'
) {
console.log('addEdge', edgeData)
eventHub.emit('add-relationship-link', edgeData)
eventHub.emit('add-relationship-modal', edgeData)
callback(edgeData)
}
},
@ -114,13 +114,13 @@ window.options = {
&& splitId(edgeData.to,'type') === 'person'
) {
console.log('editEdge', edgeData)
eventHub.emit('edit-relationship-link', edgeData)
eventHub.emit('edit-relationship-modal', edgeData)
callback(edgeData)
}
},
deleteEdge: function(edgeData, callback) {
console.log('deleteEdge', edgeData) // array with edges id
eventHub.emit('delete-relationship-link', edgeData)
eventHub.emit('delete-relationship-modal', edgeData)
callback(edgeData)
},
controlNodeStyle: {