From 1b0c19a68f544a0c74bb58f667cdaa320774e872 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Mon, 18 Oct 2021 15:47:57 +0200 Subject: [PATCH] prepare vue_visgraph component, with store, dataset and display basic graph --- .../Controller/HouseholdController.php | 17 +++- .../Resources/public/page/vis/index.js | 32 -------- .../Resources/public/page/vis/scss/vis.scss | 5 -- .../Resources/public/vuejs/VisGraph/App.vue | 51 ++++++++++++ .../Resources/public/vuejs/VisGraph/api.js | 79 +++++++++++++++++++ .../Resources/public/vuejs/VisGraph/i18n.js | 15 ++++ .../Resources/public/vuejs/VisGraph/index.js | 27 +++++++ .../Resources/public/vuejs/VisGraph/store.js | 47 +++++++++++ .../views/Household/relationship.html.twig | 30 ++++--- .../ChillPersonBundle/chill.webpack.config.js | 2 +- .../translations/messages+intl-icu.fr.yaml | 4 +- 11 files changed, 250 insertions(+), 59 deletions(-) delete mode 100644 src/Bundle/ChillPersonBundle/Resources/public/page/vis/index.js delete mode 100644 src/Bundle/ChillPersonBundle/Resources/public/page/vis/scss/vis.scss create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/index.js create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js diff --git a/src/Bundle/ChillPersonBundle/Controller/HouseholdController.php b/src/Bundle/ChillPersonBundle/Controller/HouseholdController.php index 1b9824184..bd3bf7889 100644 --- a/src/Bundle/ChillPersonBundle/Controller/HouseholdController.php +++ b/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 ] ); } diff --git a/src/Bundle/ChillPersonBundle/Resources/public/page/vis/index.js b/src/Bundle/ChillPersonBundle/Resources/public/page/vis/index.js deleted file mode 100644 index f11e930c0..000000000 --- a/src/Bundle/ChillPersonBundle/Resources/public/page/vis/index.js +++ /dev/null @@ -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); diff --git a/src/Bundle/ChillPersonBundle/Resources/public/page/vis/scss/vis.scss b/src/Bundle/ChillPersonBundle/Resources/public/page/vis/scss/vis.scss deleted file mode 100644 index 3d29c47ce..000000000 --- a/src/Bundle/ChillPersonBundle/Resources/public/page/vis/scss/vis.scss +++ /dev/null @@ -1,5 +0,0 @@ -div#graph-relationship { - margin: 2em auto; - height: 500px; - border: 1px solid lightgray; -} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue new file mode 100644 index 000000000..bbaebf670 --- /dev/null +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js new file mode 100644 index 000000000..009d1309d --- /dev/null +++ b/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 +} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js new file mode 100644 index 000000000..950f5533c --- /dev/null +++ b/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 +} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/index.js new file mode 100644 index 000000000..e70e3bb18 --- /dev/null +++ b/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: `` +}) +.use(store) +.use(i18n) +.component('app', App) +.mount('#relationship-graph') + + +//console.log('container dataset', container.dataset.persons) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js new file mode 100644 index 000000000..ecb79c16e --- /dev/null +++ b/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 } diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/relationship.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/relationship.html.twig index 5d5fc77af..db143e39f 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/Household/relationship.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/relationship.html.twig @@ -4,24 +4,22 @@ {% block content %}

{{ block('title') }}

-
- {% for m in household.members %} - {% if m.endDate is null %} - {{ dump(m) }} - {% 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 %} diff --git a/src/Bundle/ChillPersonBundle/chill.webpack.config.js b/src/Bundle/ChillPersonBundle/chill.webpack.config.js index 925a5ccf8..e033fc89d 100644 --- a/src/Bundle/ChillPersonBundle/chill.webpack.config.js +++ b/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'); }; diff --git a/src/Bundle/ChillPersonBundle/translations/messages+intl-icu.fr.yaml b/src/Bundle/ChillPersonBundle/translations/messages+intl-icu.fr.yaml index c92dc6a31..ba7133b2a 100644 --- a/src/Bundle/ChillPersonBundle/translations/messages+intl-icu.fr.yaml +++ b/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 - Household relationships: Composition du ménage + Relationship: Filiation + 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