rdv: add the concernedGroup vuejs component in add a new rdv

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}
      */

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue

@@ -0,0 +1,14 @@
+<template>
+   <concerned-groups></concerned-groups>
+</template>
+
+<script>
+import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
+
+export default {
+   name: "App",
+   components: {
+      ConcernedGroups,
+   }
+}
+</script>

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
+};

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: `<app></app>`,
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#calendar');

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;

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 }}');
         });
     </script>
+    {{ encore_entry_script_tags('vue_calendar') }}
 {% endblock %}
 
 {% block css %}
     {{ parent() }}
     <link rel="stylesheet" href="{{ asset('build/async_upload.css') }}"/>
 {% endblock %}
+
+

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');
+};