visgraph: pass context to modals

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue

@@ -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">
+            <button class="btn" :class="modal.button.class" @click="modal.showModal = false">
-               {{ $t('action.save')}}</button>
+               {{ $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('add-relationship-modal', this.addRelationshipModal)
-      eventHub.on('edit-relationship-link', this.editRelationshipLink)
+      eventHub.on('edit-relationship-modal', this.editRelationshipModal)
-      eventHub.on('delete-relationship-link', this.deleteRelationshipLink)
+      eventHub.on('delete-relationship-modal', this.deleteRelationshipModal)
    },
    unmounted() {
-      eventHub.off('add-relationship-link', this.addRelationshipLink)
+      eventHub.off('add-relationship-modal', this.addRelationshipModal)
-      eventHub.off('edit-relationship-link', this.editRelationshipLink)
+      eventHub.off('edit-relationship-modal', this.editRelationshipModal)
-      eventHub.off('delete-relationship-link', this.deleteRelationshipLink)
+      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) {
+      addRelationshipModal(edgeData) {
-         console.log('==> addRelationshipLink <=======================', 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) {
+      editRelationshipModal(edgeData) {
-         console.log('==> editRelationshipLink <=======================', 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) {
+      deleteRelationshipModal(edgeData) {
-         console.log('==> deleteRelationshipLink <=======================', 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
       },
    }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js

@@ -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',

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js

@@ -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: {