From 6ff80be88d958cb49f84046284ec01327a554adc Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 22 Oct 2021 10:11:33 +0200
Subject: [PATCH] vue_visgraph: add vis manipulation actions and vis styles

---
 .../Resources/public/vuejs/VisGraph/App.vue   | 82 +++++++++++++------
 .../Resources/public/vuejs/VisGraph/store.js  |  2 +
 2 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index f78b9fb62..0518a93d2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
@@ -1,59 +1,87 @@
 <template>
    <div id="visgraph"></div>
+   <!--
+   <button class="btn btn-outline-primary" @click="updateNetwork">UPDATE data</button>
+   -->
 </template>
 
 <script>
-import vis from 'vis-network/dist/vis-network.min'
+import vis from 'vis-network/dist/vis-network'
 import { mapState, mapGetters } from "vuex"
 
 export default {
    name: "App",
    data() {
       return {
-         network: {},
-         options: {}
+         container: '',
+         network: null,
+         options: {
+            manipulation: {
+               enabled: true,
+               initiallyActive: true,
+               addNode: function(nodeData, callback) {
+                  console.log('addNode', nodeData)
+                  nodeData.label = 'hello world';
+                  callback(nodeData);
+               },
+               editNode: function(nodeData, callback) {
+                  console.log('editNode', nodeData)
+                  callback(nodeData);
+               },
+               addEdge: function(edgeData, callback) {
+                  console.log('addEdge', edgeData)
+                  callback(edgeData);
+               },
+               editEdge: function(edgeData, callback) {
+                  console.log('editNode', edgeData)
+                  callback(edgeData);
+               },
+            },
+            nodes: {
+               physics: true
+            }
+         }
       }
    },
    computed: {
       ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']),
       ...mapGetters(['nodes', 'edges']),
-      getNetwork() {
-         console.log('refresh network', this.network, 'with', this.nodes.length, 'nodes')
-         this.network.setData({
+      visgraph_data() {
+         console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
+         return {
             nodes: this.nodes,
             edges: this.edges
-         })
-      }, /*
-      getNodes() {
-         console.log('refresh nodes', this.nodes.length)
-         /// BOUM
-         this.network.setData({nodes: this.nodes})
-         return this.nodes
+         }
       },
-      getEdges() {
-         /// BOUM
-         //this.network.setData({edges: this.edges})
-         return this.edges
-      }  */
+      /*
+      updateNetwork() {
+         console.log('refresh network', this.network, 'with', this.nodes.length, 'nodes')
+         this.network.setData(this.visgraph_data)
+      }
+      */
+   },
+   mounted() {
+      console.log('mounted: init graph')
+      this.initGraph()
    },
    methods: {
       initGraph() {
-         const container = document.getElementById('visgraph')
+         this.container = document.getElementById('visgraph')
          this.network = new vis.Network(
-            container, {
-               nodes: new vis.DataSet(this.nodes),
-               edges: new vis.DataSet(this.relationships)
-            }, this.options
+            this.container,
+            this.visgraph_data,
+            this.options
          )
+         /*{
+            nodes: new vis.DataSet(this.nodes),
+            edges: new vis.DataSet(this.relationships)
+         }*/
       }
-   },
-   mounted() {
-      console.log('mounted')
-      this.initGraph()
    }
 }
 </script>
 
+<style src="vis-network/dist/dist/vis-network.min.css"></style>
 <style lang="scss" scoped>
 div#visgraph {
    margin: 2em auto;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
index d286bf75f..d4ec95210 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
@@ -34,10 +34,12 @@ const store = createStore({
     mutations: {
         addPerson(state, person) {
             person.label = person.text // vis need label
+            person.id = `person_${person.id}`
             state.persons.push(person)
         },
         addHousehold(state, household) {
             household.label = `Ménage n° ${household.id}` // vis need label
+            household.id = `household_${household.id}`
             state.households.push(household)
         },
         markHouseholdLoading(state, id) {