set referrer app

src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js

@@ -2,25 +2,44 @@ import {createApp} from 'vue';
 import SetReferrer from 'ChillPersonAssets/vuejs/_components/AccompanyingPeriod/SetReferrer.vue';
 import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.js';
 
+/**
+ *
+ * To start this app, add this container into recordAction passed as argument to
+ *  `ChillPerson/AccompanyingPeriod/_list_item.html.twig`:
+ *
+ *  ```html+twig
+ *  {% if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_UPDATE', period) %}
+ *  <li>
+ *  <span data-set-referrer-app="data-set-referrer-app" data-set-referrer-accompanying-period-id="{{ period.id }}"></span>
+ *  </li>
+ *  {% endif %}
+ *  ```
+ *
+ *  The app will update the referrer displayed into dedicated span
+ */
+
 document.querySelectorAll('[data-set-referrer-app]').forEach(function (el) {
   let
     periodId = Number.parseInt(el.dataset.setReferrerAccompanyingPeriodId);
 
   const url = `/api/1.0/person/accompanying-course/${periodId}/referrers-suggested.json`;
+
   fetchResults(url).then(suggested => {
+
     const app = createApp({
       components: {
         SetReferrer,
       },
       template:
-        '<set-referrer :suggested="this.suggested" :periodId="periodId" @referrerSet="onReferrerSet"></set-referrer>',
+        '<set-referrer :suggested="suggested" :periodId="periodId" @referrerSet="onReferrerSet"></set-referrer>',
       data() {
         return {
-          suggested, periodId,
+          periodId, suggested, original: suggested,
         }
       },
       methods: {
         onReferrerSet(ref) {
+
           const bloc = document.querySelector(`[data-accompanying-period-id="${this.periodId}"]`);
           if (bloc === null) {
             console.error('bloc not found');
@@ -37,6 +56,7 @@ document.querySelectorAll('[data-set-referrer-app]').forEach(function (el) {
           label.textContent = ref.text;
           label.classList.remove('chill-no-data-statement');
 
+          this.suggested = this.original.filter(user => user.id !== ref.id);
         }
       }
     });