From 9cffe5161af93dd9742025c10f96f435862537a5 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Tue, 2 Nov 2021 18:45:15 +0100
Subject: [PATCH] visgraph: test form without vis-network

---
 .../Resources/public/vuejs/VisGraph/App.vue   | 57 +++++++++++--------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index a83ff1456..03cf624ea 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
@@ -1,4 +1,9 @@
 <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">
@@ -61,18 +66,14 @@
                         >
                      </VueMultiselect>
                   </div>
-                  <div v-if="relation && relation.title && relation.reverseTitle">
+                  <div v-if="relation && relation.title">
                      <p class="text-end" v-if="reverse">
-                        {{ $t('visgraph.relation_from_to_like', [
-                           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.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() ])}}
                      </p>
                      <p class="text-start" v-else>
-                        {{ $t('visgraph.relation_from_to_like', [
-                           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.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() ])}}
                      </p>
                   </div>
                   <div class="form-check form-switch">
@@ -132,8 +133,7 @@ export default {
    computed: {
       ...mapGetters(['nodes', 'edges']),
       ...mapState(['households', 'courses', 'excludedNodesIds', 'persons',
-         // not used
-         'links', 'relationships', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
+         // not used 'links', 'relationships', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
       ]),
 
       visgraph_data() {
@@ -244,7 +244,7 @@ export default {
 
       addRelationshipModal(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.title = 'visgraph.add_relationship_link'
          this.modal.button.class = 'btn-create'
@@ -269,6 +269,14 @@ export default {
          this.modal.button.text = 'action.delete'
          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() {
          console.log('fetch relationsList')
@@ -286,20 +294,21 @@ export default {
          let person = this.persons.filter(p => p.id === idtext)
          return person[0]
       },
+      
       submitRelationship() {
          console.log('submitRelationship')
-         return postRelationship(
-            this.getPerson(this.modal.data.from),
-            this.getPerson(this.modal.data.to),
-            this.relation,
-            this.reverse
-         )
-         .then(response => new Promise(resolve =>{
-            console.log('', response)
-            modal.showModal = false
-            resolve()
-         }))
-         .catch()
+         if (this.modal.action !== 'delete') {
+            return postRelationship(
+               this.getPerson(this.modal.data.from), this.getPerson(this.modal.data.to), this.relation, this.reverse
+            )
+            .then(response => new Promise(resolve => {
+               console.log('', response)
+               modal.showModal = false
+               this.resetForm()
+               resolve()
+            }))
+            .catch()
+         }
       }
    }
 }