From 326fe5f50b27cc389cf6b1b16057a4d86cb0e81c Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Wed, 27 Oct 2021 11:53:34 +0200
Subject: [PATCH] vue_visgraph: cleaning + i18n

---
 .../Resources/public/vuejs/_js/i18n.js        |  3 +-
 .../Resources/public/vuejs/VisGraph/App.vue   | 35 +++++++------------
 .../Resources/public/vuejs/VisGraph/i18n.js   |  5 +--
 3 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index c16b4c65d..4b998f98a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -45,7 +45,8 @@ const messages = {
          redirect: {
             person: "Quitter la page et ouvrir la fiche de l'usager",
             thirdparty: "Quitter la page et voir le tiers",
-         }
+         },
+         refresh: 'Rafraîchir'
       },
       nav: {
          next: "Suivant",
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index cb9e07716..7be18e6eb 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
@@ -3,7 +3,7 @@
 
    <teleport to="#visgraph-legend">
       <div class="my-4 post-menu legend">
-         <h3>Légende</h3>
+         <h3>{{ $t('visgraph.Legend')}}</h3>
 
          <div class="list-group">
             <label class="list-group-item" v-for="layer in legendLayers">
@@ -13,17 +13,12 @@
                   :value="layer.id"
                   v-model="checkedLayers"
                   @change="toggleLayer"
-                  /> <!--
-                  -->
+                  />
                   {{ layer.label }}
             </label>
          </div>
       </div>
-<pre>
-Checked layers: {{ checkedLayers }}
-Unchecked layers: {{ excludedNodesIds }}
-</pre>
-      <button class="btn btn-sm btn-outline-secondary" @click="refreshNetwork">Rafraîchir</button>
+      <button class="btn btn-sm btn-outline-secondary" @click="refreshNetwork">{{ $t('action.refresh') }}</button>
    </teleport>
 </template>
 
@@ -41,8 +36,7 @@ export default {
    },
    computed: {
       ...mapGetters(['nodes', 'edges']),
-      ...mapState(['households', 'courses',
-         'excludedNodesIds'
+      ...mapState(['households', 'courses', 'excludedNodesIds'
          //'persons',
          //'relationships',
          //'householdLoadingIds',
@@ -57,13 +51,13 @@ export default {
          }
       },
 
-      refreshNetwork() {  // B
+      refreshNetwork() {
          console.log('--- refresh network')
          window.network.setData(this.visgraph_data)
       },
 
       legendLayers() {
-         console.log('--- refresh legendLayers')
+         console.log('--- refresh legend')
          return [
             ...this.households,
             ...this.courses
@@ -71,7 +65,7 @@ export default {
       },
 
       rebuildCheckedLayers() {
-         console.log('-*- rebuild checked Layers Arrays from graph nodes')
+         console.log('--- rebuild checked Layers')
          this.checkedLayers = []
          let layersDisplayed = [
             ...this.nodes.filter(n => n.id.startsWith('household')),
@@ -94,36 +88,33 @@ export default {
    methods: {
       initGraph() {
          this.container = document.getElementById('visgraph')
-         // Instanciate vis objects in window variables, see vis-network.js
-         window.network = new vis.Network(this.container, this.visgraph_data, window.options )  // A
+         // Instanciate vis objects in separate window variables, see vis-network.js
+         window.network = new vis.Network(this.container, this.visgraph_data, window.options )
       },
       forceUpdateComponent() {
-         console.log('forceUpdateComponent - method 3')
+         console.log('forceUpdateComponent')
          this.$forceUpdate()
          this.refreshNetwork
       },
-
       toggleLayer(value) {
+         //console.log('toggleLayer')
          let id = value.target.value
-         console.log('--> toggleLayer', this.checkedLayers)
          if (this.checkedLayers.includes(id)) {
             this.removeLayer(id)
          } else {
             this.addLayer(id)
          }
-         console.log('<-- toggleLayer after', this.checkedLayers)
       },
       addLayer(id) {
-         console.log('+ add Layer', id)
+         console.log('+ addLayer', id)
          this.checkedLayers.push(id)
          this.$store.commit('removeExcludedNode', id)
       },
       removeLayer(id) {
-         console.log('- remove Layer', id)
+         console.log('- removeLayer', id)
          this.checkedLayers = this.checkedLayers.filter(i => i !== id)
          this.$store.commit('addExcludedNode', id)
       },
-
    }
 /*
    TODO / TO CHECK / TO UNDERSTAND
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
index 9fa8eca26..db3f8998f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
@@ -3,8 +3,9 @@
 const visMessages = {
     fr: {
         visgraph: {
-            'Course': 'Parcours',
-            'Household': 'Ménage',
+            Course: 'Parcours',
+            Household: 'Ménage',
+            Legend: 'Légende',
         },
         edit: 'Éditer',
         del: 'Supprimer',