finish form behaviour

src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod/AccompanyingPeriodWork.php

@@ -45,6 +45,7 @@ use Symfony\Component\Validator\Constraints as Assert;
 
     /**
      * @ORM\ManyToOne(targetEntity=AccompanyingPeriod::class)
+     * @Serializer\Groups({"read"})
      */
     private ?AccompanyingPeriod $accompanyingPeriod = null;
 

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

@@ -69,6 +69,90 @@
         <div><!-- empty for results --></div>
       </div>
     </div>
+
+
+    <div 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 id="handlingThirdParty">
+      <h2>Tiers traitant</h2>
+
+      <div v-if="!hasHandlingThirdParty">
+        <p class="chill-no-data-statement">
+          Aucun tiers traitant
+        </p>
+
+        <ul class="record_actions">
+          <li>
+            <add-persons
+               buttonTitle="Indiquer un tiers traitant"
+               modalTitle="Choisir un tiers"
+               v-bind:key="handlingThirdPartyPicker.key"
+               v-bind:options="handlingThirdPartyPicker.options"
+               @addNewPersons="setHandlingThirdParty"
+               ref="handlingThirdPartyPicker"> <!-- to cast child method -->
+            </add-persons>
+          </li>
+        </ul>
+      </div>
+      <div v-else>
+        <p>{{ handlingThirdParty.text }}</p>
+        <show-address :address="handlingThirdParty.address"></show-address>
+
+        <ul class="record_actions">
+          <li>
+            <button class="sc-button bt-delete" @click="removeHandlingThirdParty">
+              Supprimer le tiers traitant
+            </button>
+          </li>
+        </ul>
+      </div>
+
+    </div>
+
+
+    <div id="thirdParties">
+      <h2>Tiers intervenants</h2>
+
+      <div v-if="!hasThirdParties">
+        <p class="chill-no-data-statement">Aucun tiers intervenant</p>
+
+      </div>
+      <div v-else>
+        <ul>
+          <li v-for="t in thirdParties">
+            <p>{{ t.text }}</p>
+            <show-address :address="t.address"></show-address>
+
+            <ul class="record_actions">
+              <button class="sc-button bt-delete" @click="removeThirdParty(t)"></button>
+            </ul>
+          </li>
+        </ul>
+      </div>
+
+      <ul class="record_actions">
+        <li>
+          <add-persons
+             buttonTitle="Ajouter des tiers"
+             modalTitle="Choisir des tiers"
+             v-bind:key="thirdPartyPicker.key"
+             v-bind:options="thirdPartyPicker.options"
+             @addNewPersons="addThirdParties"
+             ref="thirdPartyPicker"> <!-- to cast child method -->
+          </add-persons>
+        </li>
+      </ul>
+    </div>
   </div>
 
 </template>
@@ -82,6 +166,9 @@
     "startDate endDate"
     "comment comment"
     "objectives objectives"
+    "persons persons"
+    "handling handling"
+    "3parties 3parties"
     ;
   
   #title {
@@ -116,6 +203,15 @@
       }
     }
   }
+  #persons {
+    grid-area: persons;
+  }
+  #handlingThirdParty {
+    grid-area: handling;
+  }
+  #thirdParties {
+    grid-area: 3parties;
+  }
 }
 
 </style>
@@ -123,21 +219,43 @@
 <script>
 
 import { mapState, mapGetters, } from 'vuex';
-import { dateToISO, ISOToDatetime } from 'ChillMainAssets/js/date.js';
+import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/js/date.js';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/modules/ckeditor5/index.js';
 import AddResult from './_components/AddResult.vue';
+import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import ShowAddress from 'ChillMainAssets/vuejs/_components/ShowAddress.vue';
 
 export default {
   name: 'App',
   components: {
     ckeditor: CKEditor.component,
     AddResult,
+    AddPersons,
+    Person,
+    ShowAddress,
   },
   data() {
     return {
       editor: ClassicEditor,
       showAddObjective: false,
+      handlingThirdPartyPicker: {
+        key: 'handling-third-party',
+        options: {
+          type: [ 'thirdparty' ],
+          priority: null,
+          uniq: true
+        },
+      },
+      thirdPartyPicker: {
+        key: 'third-party',
+        options: {
+          type: [ 'thirdparty' ],
+          priority: null,
+          uniq: false,
+        },
+      }
     };
   },
   computed: {
@@ -145,9 +263,14 @@ export default {
       'work',
       'resultsForAction',
       'goalsPicked',
+      'personsReachables',
+      'handlingThirdParty',
+      'thirdParties'
     ]),
     ...mapGetters([
       'hasResultsForAction',
+      'hasHandlingThirdParty',
+      'hasThirdParties',
     ]),
     startDate: {
       get() {
@@ -155,7 +278,7 @@ export default {
         return dateToISO(this.$store.state.startDate);
       },
       set(v) {
-        this.$store.mutate('setStartDate', ISOToDate(v));
+        this.$store.commit('setStartDate', ISOToDate(v));
       }
     },
     endDate: {
@@ -164,7 +287,7 @@ export default {
         return dateToISO(this.$store.state.endDate);
       },
       set(v) {
-        this.$store.mutate('setEndDate', ISOToDate(v));
+        this.$store.commit('setEndDate', ISOToDate(v));
       }
     },
     note: {
@@ -172,7 +295,7 @@ export default {
         return this.$store.state.note;
       },
       set(v) {
-        this.$store.mutate('setNote', note);
+        this.$store.commit('setNote', note);
       }
     },
     availableForCheckGoal() {
@@ -182,6 +305,18 @@ export default {
 
       return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
     },
+    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);
+      }
+    },
   },
   methods: {
     toggleAddObjective() {
@@ -195,6 +330,26 @@ export default {
       console.log('remove goal', g);
       this.$store.commit('removeGoal', g);
     },
+    setHandlingThirdParty({ selected, modal }) {
+      console.log('setHandlingThirdParty', selected);
+      this.$store.commit('setHandlingThirdParty', selected.shift().result);
+      this.$refs.handlingThirdPartyPicker.resetSearch();
+      modal.showModal = false;
+    },
+    removeHandlingThirdParty() {
+      console.log('removeHandlingThirdParty');
+      this.$store.commit('setHandlingThirdParty', null);
+    },
+    addThirdParties({ selected, modal}) {
+      console.log('addThirdParties', selected);
+      this.$store.commit('addThirdParties', selected.map(r => r.result));
+      this.$refs.thirdPartyPicker.resetSearch();
+      modal.showModal = false;
+    },
+    removeThirdParty(t) {
+      console.log('remove third party', t);
+      this.$store.commit('removeThirdParty', t);
+    },
   }
 };
 

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

@@ -20,6 +20,11 @@ const store = createStore({
     resultsForAction: [],
     goalsForAction: [],
     resultsForGoal: [],
+    personsPicked: window.accompanyingCourseWork.persons,
+    personsReachables: window.accompanyingCourseWork.accompanyingPeriod.participations.filter(p => p.endDate == null)
+      .map(p => p.person),
+    handlingThirdParty: window.accompanyingCourseWork.handlingThierParty,
+    thirdParties: window.accompanyingCourseWork.thirdParties,
     errors: [],
   },
   getters: {
@@ -38,7 +43,13 @@ const store = createStore({
       let found = state.goalsPicked.find(g => g.id === goal.id);
       
       return found === undefined ? [] : found.results;
-    }
+    },
+    hasHandlingThirdParty(state) {
+      return state.handlingThirdParty !== null;
+    },
+    hasThirdParties(state) {
+      return state.thirdParties.length > 0;
+    },
   },
   mutations: {
     setStartDate(state, date) {
@@ -94,15 +105,37 @@ const store = createStore({
 
       found.results = found.results.filter(r => r.id !== result.id);
     },
+    setPersonsPickedIds(state, ids) {
+      console.log('persons ids', ids);
+      state.personsPicked = state.personsReachables
+        .filter(p => ids.includes(p.id))
+    },
+    setNote(state, note) {
+      state.note = note;
+    },
+    setHandlingThirdParty(state, thirdParty) {
+      state.handlingThirdParty = thirdParty;
+    },
+    addThirdParties(state, thirdParties) {
+      console.log('addThirdParties', thirdParties);
+      // filter to remove existing thirdparties
+      let ids = state.thirdParties.map(t => t.id);
+      let unexistings = thirdParties.filter(t => !ids.includes(t.id));
+      console.log('unexisting third parties', unexistings);
+      for (let i in unexistings) {
+        state.thirdParties.push(unexistings[i]);
+      }
+    },
+    removeThirdParty(state, thirdParty) {
+      state.thirdParties = state.thirdParties
+        .filter(t => t.id !== thirdParty.id);
+    },
     addErrors(state, errors) {
       console.log('handling errors', errors);
       for (let i in errors) {
         state.push(errors[i]);
       }
     },
-    setNote(state, note) {
-      state.note = note;
-    },
   },
   actions: {
     getReachablesGoalsForAction({ getters, commit, dispatch }) {