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

src/Bundle/ChillPersonBundle/Controller/HouseholdController.php

@@ -9,6 +9,8 @@ use Symfony\Component\Form\FormInterface;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\Serializer\Normalizer\AbstractNormalizer;
+use Symfony\Component\Serializer\SerializerInterface;
 use Symfony\Component\Translation\TranslatorInterface;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
 use Chill\PersonBundle\Entity\Household\Household;
@@ -24,11 +26,16 @@ class HouseholdController extends AbstractController
 
     private PositionRepository $positionRepository;
 
-    public function __construct(TranslatorInterface $translator, PositionRepository $positionRepository)
+    private SerializerInterface $serializer;
 
-    {
+    public function __construct(
+        TranslatorInterface $translator,
+        PositionRepository $positionRepository,
+        SerializerInterface $serializer
+    ) {
         $this->translator = $translator;
         $this->positionRepository = $positionRepository;
+        $this->serializer = $serializer;
     }
 
     /**
@@ -177,9 +184,13 @@ class HouseholdController extends AbstractController
      */
     public function showRelationship(Request $request, Household $household)
     {
+        $jsonString = $this->serializer->serialize($household->getCurrentPersons(),
+            'json', [ AbstractNormalizer::GROUPS => ['read']]);
+
         return $this->render('@ChillPerson/Household/relationship.html.twig',
             [
-                'household' => $household
+                'household' => $household,
+                'persons' => $jsonString
             ]
         );
     }

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 }

src/Bundle/ChillPersonBundle/Resources/views/Household/relationship.html.twig

@@ -4,24 +4,22 @@
 
 {% block content %}
     <h1>{{ block('title') }}</h1>
-    <div id="graph-relationship"></div>
 
-    {% for m in household.members %}
+    <div id="relationship-graph"
-        {% if m.endDate is null %}
+        data-persons="{{ persons|e('html_attr') }}">
-            {{ dump(m) }}
+    </div>
-        {% endif %}
+    {#
-    {% endfor %}
+        {{ dump() }}
+    #}
 
 {% endblock %}
 
-{% block js %}
-    {{ parent() }}
-    {{ encore_entry_script_tags('page_vis') }}
-{% endblock %}
-
-{% block css %}
-    {{ parent() }}
-    {{ encore_entry_link_tags('page_vis') }}
-{% endblock %}
-
 {% block block_post_menu %}{% endblock %}
+
+{% block js %}
+    {{ encore_entry_script_tags('vue_visgraph') }}
+{% endblock %}
+
+{% block css %}
+    {{ encore_entry_link_tags('vue_visgraph') }}
+{% endblock %}

src/Bundle/ChillPersonBundle/chill.webpack.config.js

@@ -12,9 +12,9 @@ module.exports = function(encore, entries)
     encore.addEntry('vue_accourse', __dirname + '/Resources/public/vuejs/AccompanyingCourse/index.js');
     encore.addEntry('vue_accourse_work_create', __dirname + '/Resources/public/vuejs/AccompanyingCourseWorkCreate/index.js');
     encore.addEntry('vue_accourse_work_edit', __dirname + '/Resources/public/vuejs/AccompanyingCourseWorkEdit/index.js');
+    encore.addEntry('vue_visgraph', __dirname + '/Resources/public/vuejs/VisGraph/index.js');
 
     encore.addEntry('page_household_edit_metadata', __dirname + '/Resources/public/page/household_edit_metadata/index.js');
     encore.addEntry('page_person', __dirname + '/Resources/public/page/person/index.js');
     encore.addEntry('page_accompanying_course_index_person_locate', __dirname + '/Resources/public/page/accompanying_course_index/person_locate.js');
-    encore.addEntry('page_vis', __dirname + '/Resources/public/page/vis/index.js');
 };

src/Bundle/ChillPersonBundle/translations/messages+intl-icu.fr.yaml

@@ -51,8 +51,8 @@ household:
     Household summary: Résumé du ménage
     Accompanying period: Parcours d'accompagnement
     Addresses: Historique adresse
-    Relationship: Composition familiale
+    Relationship: Filiation
-    Household relationships: Composition du ménage
+    Household relationships: Filiations dans le ménage
     Current address: Adresse actuelle
     Household does not have any address currently: Le ménage n'a pas d'adresse renseignée actuellement
     Edit household members: Modifier l'appartenance au ménage