add involved persons to accompanying period work

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

@@ -28,8 +28,19 @@
       <div v-if="isLoadingSocialActions">
         <p>spinner</p>
       </div>
-    </div>
 
+      <div v-if="hasSocialActionPicked" id="persons">
+        <h2>{{ $t('persons_involved') }}</h2>
+
+        <ul>
+          <li v-for="p in personsReachables" :key="p.id">
+            <input type="checkbox" :value="p.id" v-model="personsPicked">
+            <person :person="p"></person>
+          </li>
+        </ul>
+      </div>
+
+    </div>
     <div v-if="hasSocialActionPicked" id="start_date">
       <p><label>{{ $t('startDate') }}</label> <input type="date" v-model="startDate" /></p>
     </div>
@@ -85,6 +96,14 @@
 
   #picking {
     grid-area: picking;
+
+    #persons {
+      ul {
+        padding: 0;
+
+        list-style-type: none;
+      }
+    }
   }
 
   #start_date {
@@ -105,6 +124,7 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import VueMultiselect from 'vue-multiselect';
 import { dateToISO, ISOToDate } from 'ChillMainAssets/js/date.js';
+import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
 
 const i18n = {
   messages: {
@@ -115,6 +135,7 @@ const i18n = {
       pick_social_issue: "Choisir une problématique sociale",
       pick_an_action: "Choisir une action d'accompagnement",
       pick_social_issue_linked_with_action: "Indiquez la problématique sociale liée à l'action d'accompagnement",
+      persons_involved: "Usagers concernés",
 
     }
   }
@@ -124,6 +145,7 @@ export default {
   name: 'App',
   components: {
     VueMultiselect,
+    Person,
   },
   methods: {
     submit() {
@@ -136,6 +158,7 @@ export default {
       'socialIssues',
       'socialActionsReachables',
       'errors',
+      'personsReachables',
     ]),
     ...mapGetters([
       'hasSocialIssuePicked',
@@ -144,6 +167,18 @@ export default {
       'isPostingWork',
       'hasErrors',
     ]),
+    personsPicked: {
+      get() {
+        let s = this.$store.state.personsPicked.map(p => p.id);
+        console.log('persons picked', s);
+
+        return s;
+      },
+      set(v) {
+        console.log('persons picked', v); 
+        this.$store.commit('setPersonsPickedIds', v);
+      }
+    },
     socialIssuePicked: {
       get() {
         let s = this.$store.state.socialIssuePicked;

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

@@ -14,6 +14,10 @@ const store = createStore({
     socialIssuePicked: null,
     socialActionsReachables: [],
     socialActionPicked: null,
+    personsPicked: window.accompanyingCourse.participations.filter(p => p.endDate == null)
+      .map(p => p.person),
+    personsReachables: window.accompanyingCourse.participations.filter(p => p.endDate == null)
+      .map(p => p.person),
     startDate: new Date(),
     endDate: null,
     isLoadingSocialActions: false,
@@ -44,9 +48,17 @@ const store = createStore({
         },
         startDate: {
           datetime: datetimeToISO(state.startDate)
-        }
+        },
+        persons: []
       };
 
+      for (let i in state.personsPicked) {
+        payload.persons.push({
+          id: state.personsPicked[i].id,
+          type: 'person'
+        });
+      }
+
       if (null !== state.endDate) {
         payload.endDate = {
           datetime: datetimeToISO(state.endDate)
@@ -71,12 +83,16 @@ const store = createStore({
       state.socialActionPicked = socialAction;
     },
     setSocialIssue(state, socialIssueId) {
+      console.log('set social issue', socialIssueId);
       if (socialIssueId === null) {
         state.socialIssuePicked = null;
-        return;
+      } else {
+        let mapped = state.socialIssues
+          .find(e => e.id === socialIssueId);
+        console.log('mapped', mapped);
+        state.socialIssuePicked = mapped;
+        console.log('social issue setted', state.socialIssuePicked);
       }
-      state.socialIssuePicked = state.socialIssues
-        .find(e => e.id === socialIssueId);
     },
     setIsLoadingSocialActions(state, s) {
       state.isLoadingSocialActions = s;
@@ -90,6 +106,11 @@ const store = createStore({
     setEndDate(state, date) {
       state.endDate = date;
     },
+    setPersonsPickedIds(state, ids) {
+      console.log('persons ids', ids);
+      state.personsPicked = state.personsReachables
+        .filter(p => ids.includes(p.id))
+    },
     addErrors(state, { errors, cancel_posting }) {
       console.log('add errors', errors);
       state.errors = errors;
@@ -103,8 +124,10 @@ const store = createStore({
       console.log('pick social issue');
 
       commit('setIsLoadingSocialActions', true);
-      commit('setSocialIssue', null);
+      commit('setSocialAction', null);
       commit('setSocialActionsReachables', []);
+      commit('setSocialIssue', null);
+
 
       findSocialActionsBySocialIssue(socialIssueId).then(
         (response) => {