visgraph: prepare UI for add relationship link

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

@@ -1,13 +1,24 @@
 <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>
 
    <teleport to="#visgraph-legend">
+      <div class="list-group mt-4">
+         <button type="button" class="list-group-item list-group-item-action btn btn-create" @click="addRelationshipLink">
+            {{ $t('visgraph.add_link') }}
+         </button>
+         <button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork">
+            <i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
+         </button>
+         <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') }}
+         </button>
+      </div>
+
+      <div v-if="displayHelpMessage" class="alert alert-info mt-3">
+         {{ $t('visgraph.create_link_help') }}
+      </div>
+
       <div class="my-4 post-menu legend">
          <h3>{{ $t('visgraph.Legend') }}</h3>
          <div class="list-group">
@@ -23,7 +34,6 @@
             </label>
          </div>
       </div>
-      <button class="btn btn-sm btn-outline-secondary" @click="refreshNetwork">{{ $t('action.refresh') }}</button>
    </teleport>
 
    <teleport to="body">
@@ -126,6 +136,7 @@ export default {
          relations: [],
          relation: null,
          reverse: false,
+         displayHelpMessage: false,
          modal: {
             showModal: false,
             modalDialogClass: "modal-md",
@@ -207,16 +218,6 @@ export default {
       },
 
 
-   },
-   created() {
-      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-modal', this.addRelationshipModal)
-      eventHub.off('edit-relationship-modal', this.editRelationshipModal)
-      eventHub.off('delete-relationship-modal', this.deleteRelationshipModal)
    },
    mounted() {
       //console.log('=== mounted: init graph')
@@ -274,6 +275,8 @@ export default {
          this.$forceUpdate()
          this.refreshNetwork
       },
+
+      /// Control Layers
       toggleLayer(value) {
          let id = value.target.value
          console.log('@@@@@ toggle Layer', id)
@@ -295,6 +298,7 @@ export default {
          this.$store.dispatch('excludedNode', ['add', id])
       },
 
+      /// control Modal
       addRelationshipModal(edgeData) {
          this.modal.data = edgeData
          console.log('==- addRelationshipModal', edgeData) // { from: "person_1617", to: "person_1614" }
@@ -322,6 +326,7 @@ export default {
          this.modal.button.text = 'action.delete'
          this.modal.showModal = true
       },
+
       resetForm() {
          console.log('==- reset Form')
          this.modal.data = {}
@@ -330,7 +335,6 @@ export default {
          this.modal.button.class = null
          this.modal.button.text = null
       },
-
       getRelationsList() {
          //console.log('fetch relationsList')
          return getRelationsList().then(relations => new Promise(resolve => {
@@ -348,6 +352,20 @@ export default {
          return person[0]
       },
 
+
+      addRelationshipLink() {
+         this.displayHelpMessage = true
+         let edgeData = { from: "person_1617", to: "person_1614" }
+         let callback = (d) => {
+            console.log('d', d)
+         }
+         //open
+         window.network.addEdgeMode()
+         window.network.addEdge
+
+         //close
+         window.network.disableEditMode()
+      },
       submitRelationship() {
          console.log('submitRelationship with action', this.modal.action)
          switch (this.modal.action) {
@@ -388,6 +406,18 @@ export default {
                throw "undefined action"
          }
       }
+   },
+
+   /// Tiny emitter events
+   created() {
+      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-modal', this.addRelationshipModal)
+      eventHub.off('edit-relationship-modal', this.editRelationshipModal)
+      eventHub.off('delete-relationship-modal', this.deleteRelationshipModal)
    }
 }
 </script>

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

@@ -19,6 +19,10 @@ const visMessages = {
             relation_from_to_like: "{2} de {1}", // disable {0}
             between: "entre",
             and: "et",
+            add_link: "Créer un lien de filiation",
+            create_link_help: "Pour créer un lien de filiation: cliquez d'abord sur un usager, puis sur un second, précisez ensuite la nature du lien dans le formulaire d'édition.",
+            refresh: "Rafraîchir",
+            screenshot: "Prendre une photo",
         },
         edit: 'Éditer',
         del: 'Supprimer',

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

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