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;