From 1557b8f80abd26e2bcf00b497d4e79ea6108cd25 Mon Sep 17 00:00:00 2001 From: nobohan Date: Fri, 16 Jul 2021 18:21:27 +0200 Subject: [PATCH] rdv: add the concernedGroup vuejs component in add a new rdv --- .../ChillCalendarBundle/Form/CalendarType.php | 23 +++ .../Resources/public/vuejs/Calendar/App.vue | 14 ++ .../Resources/public/vuejs/Calendar/i18n.js | 27 +++ .../Resources/public/vuejs/Calendar/index.js | 16 ++ .../Resources/public/vuejs/Calendar/store.js | 179 ++++++++++++++++++ .../Calendar/newAccompanyingCourse.html.twig | 3 + .../chill.webpack.config.js | 10 + 7 files changed, 272 insertions(+) create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/index.js create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js create mode 100644 src/Bundle/ChillCalendarBundle/chill.webpack.config.js diff --git a/src/Bundle/ChillCalendarBundle/Form/CalendarType.php b/src/Bundle/ChillCalendarBundle/Form/CalendarType.php index 44a627ed2..36388fa83 100644 --- a/src/Bundle/ChillCalendarBundle/Form/CalendarType.php +++ b/src/Bundle/ChillCalendarBundle/Form/CalendarType.php @@ -13,6 +13,9 @@ use Chill\MainBundle\Form\Type\CommentType; use Chill\CalendarBundle\Entity\Calendar; use Chill\CalendarBundle\Entity\CancelReason; use Chill\MainBundle\Templating\TranslatableStringHelper; +use Chill\PersonBundle\Entity\Person; +use Symfony\Component\Form\CallbackTransformer; +use Symfony\Component\Form\Extension\Core\Type\HiddenType; class CalendarType extends AbstractType { @@ -60,6 +63,26 @@ class CalendarType extends AbstractType )) ; + $builder->add('persons', HiddenType::class); + $builder->get('persons') + ->addModelTransformer(new CallbackTransformer( + function (iterable $personsAsIterable): string { + $personIds = []; + foreach ($personsAsIterable as $value) { + $personIds[] = $value->getId(); + } + return implode(',', $personIds); + }, + function (?string $personsAsString): array { + return array_map( + fn(string $id): ?Person => $this->om->getRepository(Person::class)->findOneBy(['id' => (int) $id]), + explode(',', $personsAsString) + ); + } + )) + ; + + }/** * {@inheritdoc} */ diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue new file mode 100644 index 000000000..f1e8069a7 --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js new file mode 100644 index 000000000..3262a37a5 --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js @@ -0,0 +1,27 @@ +import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n' + +const appMessages = { + fr: { + activity: { + // + social_issues: "Problématiques sociales", + choose_other_social_issue: "Ajouter une autre problématique sociale...", + social_actions: "Actions d'accompagnement", + select_first_a_social_issue: "Sélectionnez d'abord une problématique sociale", + + // + add_persons: "Ajouter des personnes concernées", + bloc_persons: "Usagers", + bloc_persons_associated: "Usagers du parcours", + bloc_persons_not_associated: "Tiers non-pro.", + bloc_thirdparty: "Tiers professionnels", + bloc_users: "T(M)S", + } + } +} + +Object.assign(appMessages.fr, personMessages.fr); + +export { + appMessages +}; diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/index.js new file mode 100644 index 000000000..d4c07f4a7 --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/index.js @@ -0,0 +1,16 @@ +import { createApp } from 'vue'; +import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n' +import { appMessages } from './i18n' +import store from './store' + +import App from './App.vue'; + +const i18n = _createI18n(appMessages); + +const app = createApp({ + template: ``, +}) +.use(store) +.use(i18n) +.component('app', App) +.mount('#calendar'); diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js new file mode 100644 index 000000000..91b67aae3 --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js @@ -0,0 +1,179 @@ +import 'es6-promise/auto'; +import { createStore } from 'vuex'; + +const debug = process.env.NODE_ENV !== 'production'; +//console.log('window.activity', window.activity); + +const addIdToValue = (string, id) => { + let array = string ? string.split(',') : []; + array.push(id.toString()); + let str = array.join(); + return str; +}; + +const removeIdFromValue = (string, id) => { + let array = string.split(','); + array = array.filter(el => el !== id.toString()); + let str = array.join(); + return str; +}; + + +const activity = { + accompanyingPeriod: null, + socialIssues: [], + persons: [] +}; // TODO: get this object from window.activity ? + +const store = createStore({ + strict: debug, + state: { + activity: activity, + socialIssuesOther: [], + socialActionsList: [], + }, + mutations: { + + // SocialIssueAcc + addIssueInList(state, issue) { + //console.log('add issue list', issue.id); + state.activity.accompanyingPeriod.socialIssues.push(issue); + }, + addIssueSelected(state, issue) { + //console.log('add issue selected', issue.id); + state.activity.socialIssues.push(issue); + }, + updateIssuesSelected(state, issues) { + //console.log('update issues selected', issues); + state.activity.socialIssues = issues; + }, + updateIssuesOther(state, payload) { + //console.log('update issues other'); + state.socialIssuesOther = payload; + }, + removeIssueInOther(state, issue) { + //console.log('remove issue other', issue.id); + state.socialIssuesOther = state.socialIssuesOther.filter(i => i.id !== issue.id); + }, + resetActionsList(state) { + //console.log('reset list actions'); + state.socialActionsList = []; + }, + addActionInList(state, action) { + //console.log('add action list', action.id); + state.socialActionsList.push(action); + }, + updateActionsSelected(state, actions) { + //console.log('update actions selected', actions); + state.activity.socialActions = actions; + }, + filterList(state, list) { + const filterList = (list) => { + // remove duplicates entries + list = list.filter((value, index) => list.findIndex(array => array.id === value.id) === index); + // alpha sort + list.sort((a,b) => (a.text > b.text) ? 1 : ((b.text > a.text) ? -1 : 0)); + return list; + }; + if (list === 'issues') { + state.activity.accompanyingPeriod.socialIssues = filterList(state.activity.accompanyingPeriod.socialIssues); + } + if (list === 'actions') { + state.socialActionsList = filterList(state.socialActionsList); + } + }, + + // ConcernedGroups + addPersonsInvolved(state, payload) { + //console.log('### mutation addPersonsInvolved', payload.result.type); + console.log(state) + console.log(payload) + switch (payload.result.type) { + case 'person': + state.activity.persons.push(payload.result); + break; + case 'thirdparty': + state.activity.thirdParties.push(payload.result); + break; + case 'user': + state.activity.users.push(payload.result); + break; + }; + }, + removePersonInvolved(state, payload) { + //console.log('### mutation removePersonInvolved', payload.type); + switch (payload.type) { + case 'person': + state.activity.persons = state.activity.persons.filter(person => person !== payload); + break; + case 'thirdparty': + state.activity.thirdParties = state.activity.thirdParties.filter(thirdparty => thirdparty !== payload); + break; + case 'user': + state.activity.users = state.activity.users.filter(user => user !== payload); + break; + }; + } + }, + actions: { + addIssueSelected({ commit }, issue) { + let aSocialIssues = document.getElementById("chill_calendarbundle_calendar_socialIssues"); + aSocialIssues.value = addIdToValue(aSocialIssues.value, issue.id); + commit('addIssueSelected', issue); + }, + updateIssuesSelected({ commit }, payload) { + let aSocialIssues = document.getElementById("chill_calendarbundle_calendar_socialIssues"); + aSocialIssues.value = ''; + payload.forEach(item => { + aSocialIssues.value = addIdToValue(aSocialIssues.value, item.id); + }); + commit('updateIssuesSelected', payload); + }, + updateActionsSelected({ commit }, payload) { + let aSocialActions = document.getElementById("chill_calendarbundle_calendar_socialActions"); + aSocialActions.value = ''; + payload.forEach(item => { + aSocialActions.value = addIdToValue(aSocialActions.value, item.id); + }); + commit('updateActionsSelected', payload); + }, + addPersonsInvolved({ commit }, payload) { + //console.log('### action addPersonsInvolved', payload.result.type); + switch (payload.result.type) { + case 'person': + let aPersons = document.getElementById("chill_calendarbundle_calendar_persons"); + aPersons.value = addIdToValue(aPersons.value, payload.result.id); + break; + case 'thirdparty': + let aThirdParties = document.getElementById("chill_calendarbundle_calendar_thirdParties"); + aThirdParties.value = addIdToValue(aThirdParties.value, payload.result.id); + break; + case 'user': + let aUsers = document.getElementById("chill_calendarbundle_calendar_users"); + aUsers.value = addIdToValue(aUsers.value, payload.result.id); + break; + }; + commit('addPersonsInvolved', payload); + }, + removePersonInvolved({ commit }, payload) { + //console.log('### action removePersonInvolved', payload); + switch (payload.type) { + case 'person': + let aPersons = document.getElementById("chill_calendarbundle_calendar_persons"); + aPersons.value = removeIdFromValue(aPersons.value, payload.id); + break; + case 'thirdparty': + let aThirdParties = document.getElementById("chill_calendarbundle_calendar_thirdParties"); + aThirdParties.value = removeIdFromValue(aThirdParties.value, payload.id); + break; + case 'user': + let aUsers = document.getElementById("chill_calendarbundle_calendar_users"); + aUsers.value = removeIdFromValue(aUsers.value, payload.id); + break; + }; + commit('removePersonInvolved', payload); + } + } +}); + +export default store; diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig index 72345b98f..7d1d27d4c 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig +++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig @@ -26,9 +26,12 @@ '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}'); }); + {{ encore_entry_script_tags('vue_calendar') }} {% endblock %} {% block css %} {{ parent() }} {% endblock %} + + diff --git a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js new file mode 100644 index 000000000..74f1dd6ea --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js @@ -0,0 +1,10 @@ +// this file loads all assets from the Chill calendar bundle +module.exports = function(encore, entries) { + //entries.push(__dirname + '/Resources/public/index.js'); + + encore.addAliases({ + ChillCalendarAssets: __dirname + '/Resources/public' + }); + + encore.addEntry('vue_calendar', __dirname + '/Resources/public/vuejs/Calendar/index.js'); +};