prepare vue_visgraph component, with store, dataset and display basic graph

src/Bundle/ChillPersonBundle/Resources/public/page/vis/index.js

@@ -1,32 +0,0 @@
-import vis from 'vis-network/dist/vis-network.min';
-
-require('./scss/vis.scss');
-
-// create an array with nodes
-let nodes = new vis.DataSet([
-    { id: 1, label: "Node 1" },
-    { id: 2, label: "Node 2" },
-    { id: 3, label: "Node 3" },
-    { id: 4, label: "Node 4" },
-    { id: 5, label: "Node 5", cid: 1 },
-]);
-
-// create an array with edges
-let edges = new vis.DataSet([
-    { from: 1, to: 3 },
-    { from: 1, to: 2 },
-    { from: 2, to: 4 },
-    { from: 2, to: 5 },
-    { from: 3, to: 3 },
-]);
-
-// create a network
-let container = document.getElementById("graph-relationship");
-let data = {
-    nodes: nodes,
-    edges: edges,
-};
-let options = {};
-
-//
-let network = new vis.Network(container, data, options);

src/Bundle/ChillPersonBundle/Resources/public/page/vis/scss/vis.scss

@@ -1,5 +0,0 @@
-div#graph-relationship {
-    margin: 2em auto;
-    height: 500px;
-    border: 1px solid lightgray;
-}

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

@@ -0,0 +1,51 @@
+<template>
+   <div id="visgraph"></div>
+</template>
+
+<script>
+import vis from 'vis-network/dist/vis-network.min'
+import { mapState } from "vuex"
+
+export default {
+   name: "App",
+   data() {
+      return {
+         options: {}
+      }
+   },
+   computed: {
+      ...mapState(['persons', 'households', 'courses', 'relationships']),
+      nodes() {
+         /*[{id: 1, label: "Node 1"}]*/
+         return new vis.DataSet(this.persons)
+      },
+      edges() {
+         /*[{ from: 1, to: 3 }]*/
+         return new vis.DataSet(this.relationships)
+      }
+   },
+   methods: {
+   },
+   mounted() {
+      const container = document.getElementById('visgraph')
+
+      console.log('mounted: get stored persons', this.persons)
+
+      let network = new vis.Network(
+         container, {
+            nodes: this.nodes,
+            edges: this.edges
+         }, this.options
+      );
+      console.log('network', network)
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+div#visgraph {
+   margin: 2em auto;
+   height: 500px;
+   border: 1px solid lightgray;
+}
+</style>

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

@@ -0,0 +1,79 @@
+/**
+ * @var makeFetch
+ */
+const makeFetch = (method, url, body) => {
+
+    return fetch(url, {
+        method: method,
+        headers: {
+            'Content-Type': 'application/json;charset=utf-8'
+        },
+        body: JSON.stringify(body)
+    })
+    .then(response => {
+
+        if (response.ok) {
+            return response.json();
+        }
+
+        if (response.status === 422) {
+            return response.json();
+        }
+
+        throw {
+            msg: 'Error while updating AccompanyingPeriod Course.',
+            sta: response.status,
+            txt: response.statusText,
+            err: new Error(),
+            body: response.body
+        };
+    });
+}
+
+/**
+ * @var getHousehold
+*/
+const getHousehold = (person) => {
+    console.log('getHousehold', person.id)
+    makeFetch(
+        'GET',
+        `/api/1.0/person/household/by-person/${person.id}.json`,
+        {
+            type: 'person',
+            id: person.id
+        })
+}
+
+/**
+ * @var getCourse
+*/
+const getCourse = (person) => {
+    console.log('getCourse', person.id)
+    makeFetch(
+        'GET',
+        `/api/1.0/person/accompanying-course/by-person/${person.id}.json`,
+        {
+            type: 'person',
+            id: person.id
+        })
+}
+
+/**
+ * @var getRelationship
+*/
+const getRelationship = (person) => {
+    console.log('getRelationship', person.id)
+    makeFetch(
+        'GET',
+        `/api/1.0/relations/relationship/by-person/${person.id}.json`,
+        {
+            type: 'person',
+            id: person.id
+        })
+}
+
+export {
+    getHousehold,
+    getCourse,
+    getRelationship
+}

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

@@ -0,0 +1,15 @@
+//import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
+
+const visMessages = {
+    fr: {
+        visgraph: {
+
+        }
+    }
+}
+
+//Object.assign(visMessages.fr, personMessages.fr);
+
+export {
+    visMessages
+}

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

@@ -0,0 +1,27 @@
+import { createApp } from "vue"
+import { store } from "./store.js"
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
+import { visMessages } from './i18n'
+import App from './App.vue'
+
+const i18n = _createI18n(visMessages)
+
+const container = document.getElementById('relationship-graph')
+
+const persons = JSON.parse(container.dataset.persons)
+
+persons.forEach(person => {
+    store.dispatch('addPerson', person)
+    store.dispatch('fetchInfoForPerson', person)
+})
+
+const app = createApp({
+    template: `<app></app>`
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#relationship-graph')
+
+
+//console.log('container dataset', container.dataset.persons)

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

@@ -0,0 +1,47 @@
+import { createStore } from 'vuex'
+import { getHousehold, getCourse, getRelationship } from './api'
+
+const debug = process.env.NODE_ENV !== 'production'
+
+const store = createStore({
+    strict: debug,
+    state: {
+        persons: [],
+        households: [],
+        courses: [],
+        relationships: [],
+    },
+    getters: {
+        getNodes() {
+            let nodes = [];
+            state.households.forEach(h => {
+                nodes.push(h)
+            });
+            return nodes
+        },
+        getEdges() {
+        }
+    },
+    mutations: {
+        addPerson(state, person) {
+            person.label = person.text // vis need label
+            state.persons.push(person)
+        }
+    },
+    actions: {
+        addPerson({ commit }, person) {
+            //console.log('addPerson', person)
+            commit('addPerson', person)
+        },
+        fetchInfoForPerson({ commit }, person) {
+            console.log('fetchInfoForPerson', person)
+
+            getHousehold(person)
+            getCourse(person)
+            getRelationship(person)
+
+        },
+    }
+});
+
+export { store }