accompanyingPeriodWork: add referrer in vuejs form

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

@@ -151,6 +151,40 @@
          </ul>
       </div>
 
+      <div id="referrers" class="action-row">
+         <h3>{{ $t('referrers') }}</h3>
+
+         <div v-if="!hasReferrers">
+            <p class="chill-no-data-statement">{{ $t('no_referrers') }}</p>
+         </div>
+
+         <div v-else>
+            <div class="flex-bloc mb-3">
+                  <div v-for="u in referrers" :key="u.id" class="referrer">
+                     <span class="badge-user">
+                        {{ u.text }}
+                     </span>
+                     <span class="referrer-close-btn">
+                        <button :title="$t('remove_referrer')" class="btn btn-sm btn-remove" @click="removeReferrer(u)" />
+                     </span>
+                  </div>
+            </div>
+         </div>
+
+         <ul class="record_actions">
+            <li class="add-persons">
+               <add-persons
+                  ref="referrerPicker"
+                  :key="referrerPicker.key"
+                  :buttonTitle="$t('add_referrers')"
+                  :modalTitle="$t('choose_referrers')"
+                  :options="referrerPicker.options"
+                  @addNewPersons="addReferrers">
+               </add-persons>
+            </li>
+         </ul>
+      </div>
+
       <div id="handlingThirdParty" class="action-row">
          <h3>{{ $t('handling_thirdparty') }}</h3>
 
@@ -289,7 +323,6 @@ import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vu
 import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
 
-
 const i18n = {
    messages: {
       fr: {
@@ -322,6 +355,10 @@ const i18n = {
          available_evaluations_text: "Évaluations disponibles pour ajout :",
          no_evaluations_available: "Aucune évaluation disponible",
          no_goals_available: "Aucun objectif disponible",
+         referrers: "Agents traitants",
+         no_referrers: "Aucun agent traitant",
+         choose_referrers: "Choisir des agents traitants",
+         remove_referrer: "Enlever l'agent"
       }
    }
 };
@@ -370,6 +407,17 @@ export default {
                }
             },
          },
+         referrerPicker: {
+            key: 'referrer',
+            options: {
+               type: ['user'],
+               priority: null,
+               uniq: false,
+               button: {
+                  display: false
+               }
+            },
+         },
       };
    },
   computed: {
@@ -381,6 +429,7 @@ export default {
          'personsReachables',
          'handlingThirdParty',
          'thirdParties',
+         'referrers',
          'isPosting',
          'errors',
          'templatesAvailablesForAction',
@@ -389,6 +438,7 @@ export default {
          'hasResultsForAction',
          'hasHandlingThirdParty',
          'hasThirdParties',
+         'hasReferrers'
       ]),
       startDate: {
          get() {
@@ -465,6 +515,14 @@ export default {
       removeThirdParty(t) {
          this.$store.commit('removeThirdParty', t);
       },
+      addReferrers({selected, modal}) {
+         this.$store.commit('addReferrers', selected.map(r => r.result));
+         this.$refs.referrerPicker.resetSearch();
+         modal.showModal = false;
+      },
+      removeReferrer(u) {
+         this.$store.commit('removeReferrer', u);
+      },
       goToGenerateWorkflow({link}) {
         console.log('save before leave to generate workflow')
         const callback = (data) => {
@@ -521,6 +579,7 @@ div#workEditor {
       "objectives objectives"
       "evaluations evaluations"
       "persons persons"
+      "referrers referrers"
       "handling handling"
       "tparties tparties"
       "errors errors";
@@ -543,6 +602,8 @@ div#workEditor {
       grid-area: handling; }
    #thirdParties {
       grid-area: tparties; }
+   #referrers {
+      grid-area: referrers; }
    #errors {
       grid-area: errors; }
 
@@ -657,5 +718,17 @@ div#workEditor {
    }
 }
 
+.referrer {
+   margin-bottom: 0.4rem;
+   .referrer-close-btn {
+      margin-left: 0.4rem;
+      margin-right: 0.4rem;
+      button {
+         height: 1.45rem;
+         min-width: 1.45rem;
+         font-size: 0.4rem;
+      }
+   }
+}
 
 </style>

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

@@ -31,6 +31,7 @@ const store = createStore({
       .map(p => p.person),
     handlingThirdParty: window.accompanyingCourseWork.handlingThierParty,
     thirdParties: window.accompanyingCourseWork.thirdParties,
+    referrers: window.accompanyingCourseWork.referrers,
     isPosting: false,
     errors: [],
   },
@@ -54,6 +55,9 @@ const store = createStore({
     hasHandlingThirdParty(state) {
       return state.handlingThirdParty !== null;
     },
+    hasReferrers(state) {
+      return state.referrers.length > 0;
+    },
     hasThirdParties(state) {
       return state.thirdParties.length > 0;
     },
@@ -82,6 +86,7 @@ const store = createStore({
         },
         results: state.resultsPicked.map(r => ({id: r.id, type: r.type})),
         thirdParties: state.thirdParties.map(t => ({id: t.id, type: t.type})),
+        referrers: state.referrers.map(t => ({id: t.id, type: t.type})),
         goals: state.goalsPicked.map(g => {
           let o = {
             type: g.type,
@@ -302,6 +307,18 @@ const store = createStore({
       state.thirdParties = state.thirdParties
         .filter(t => t.id !== thirdParty.id);
     },
+    addReferrers(state, referrers) {
+      let ids = state.referrers.map(t => t.id);
+      let unexistings = referrers.filter(t => !ids.includes(t.id));
+
+      for (let i in unexistings) {
+        state.referrers.push(unexistings[i]);
+      }
+    },
+    removeReferrer(state, user) {
+      state.referrers = state.referrers
+        .filter(u => u.id !== user.id);
+    },
     setErrors(state, errors) {
       state.errors = errors;
     },
@@ -315,7 +332,6 @@ const store = createStore({
   },
   actions: {
     updateThirdParty({ commit }, payload) {
-      console.log(payload);
       commit('updateThirdParty', payload);
     },
     getReachablesGoalsForAction({ getters, commit, dispatch }) {