Merge branch 'master' into 616_rapid-action

src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss

@@ -14,6 +14,31 @@
 @import './scss/person_by_phonenumber.scss';
 @import './scss/address_history.scss';
 
+/*
+ * Mixins
+ */
+
+@mixin context_buttons ($context) {
+    .chill-entity.entity-address .address {
+        padding-right: 1em;
+    }
+    .address-details-button,
+    .household-link {
+        border: 1px solid white;
+        background-color: transparent;
+        width: 1.85rem;
+        height: 1.85rem;
+        font-size: 75%;
+        padding: .38rem;
+        border-radius: 5px;
+        color: white;
+        cursor: pointer;
+        &:hover {
+            background-color: white;
+            color: $context
+        }
+    }
+}
 
 /*
 *  PERSON CONTEXT
@@ -39,17 +64,7 @@ div.banner {
                 margin-right: 1em;
             }
         }
-        .household-link {
-            border: 1px solid white;
-            padding: .05rem .3rem;
-            border-radius: 5px;
-            color: white;
-            cursor: pointer;
-            &:hover {
-                background-color: white;
-                color: $chill-person-context
-            }
-        }
+        @include context_buttons($chill-person-context);
     }
 }
 
@@ -219,6 +234,8 @@ div.banner {
             font-weight: 700;
             font-weight: bold;
         }
+
+        @include context_buttons($chill-household-context);
     }
 }
 

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss

@@ -1,13 +1,16 @@
-/// AccompanyingCourse Work list Page
-div.accompanying_course_work-list {
+/// AccompanyingCourse Work Pages
+div.accompanying-course-work {
 
     table.obj-res-eval {
         border-collapse: collapse;
         border-radius: 5px;
         width: 100%;
+        margin-top: 1em;
+        margin-bottom: 1em;
         &, tr, th, td {
             border: 1px solid lightgray;
             padding: 0.3em;
+            background-color: $white;
         }
         th {
             h4.title_label {
@@ -17,18 +20,24 @@ div.accompanying_course_work-list {
                 margin: 0;
             }
         }
-        td {
-            font-size: 85%;
-        }
         td.obj,
         td.res {
             width: 50%;
         }
         td.eval {
             width: 100%;
+            div.download {
+                .row > * {
+                    transform: scale(0.85);
+                }
+            }
         }
     }
 
+    .smallfont table.obj-res-eval {
+        font-size: 85%;
+    }
+
     ul {
         &.goal_title,
         &.result_list,
@@ -47,10 +56,32 @@ div.accompanying_course_work-list {
         }
     }
 
+    div.item-bloc {
+        &.short {}
+        &.long {}
+        &.uniq {}
+        &.extended {
+            table.obj-res-eval {
+                margin-top: 0;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+        &.colored {
+            background-color: $chill-llight-gray;
+        }
+    }
+
 }
 
-div.flex-table div.item-bloc:nth-child(2n) table.obj-res-eval {
-    &, tr, th, td {
-        background-color:  $chill-llight-gray;
+/// item-bloc with background-color altern: even case
+div.flex-table div.item-bloc:nth-child(2n) {
+
+    // set table background
+    table.obj-res-eval {
+        &, tr, th, td {
+            background-color:  $chill-llight-gray;
+        }
     }
 }

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss

@@ -128,7 +128,7 @@ ul.columns { // XS:1  SM:2  MD:1  LG:2  XL:2  XXL:2
 }
 
 /// dashboard_like_badge in AccompanyingCourse Work list Page
-div[class*='accompanying_course_work'] {
+div[class*='accompanying-course-work'] {
     div.dashboard,
     h4.badge-title,
     h3.badge-title,

src/Bundle/ChillPersonBundle/Resources/public/lib/household.js

@@ -1,4 +1,4 @@
-import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 const fetchHouseholdByAddressReference = async (reference) => {
   const url = `/api/1.0/person/household/by-address-reference/${reference.id}.json`

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

@@ -1,6 +1,6 @@
 import {createApp} from 'vue';
 import SetReferrer from 'ChillPersonAssets/vuejs/_components/AccompanyingPeriod/SetReferrer.vue';
-import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.js';
+import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 /**
  *

src/Bundle/ChillPersonBundle/Resources/public/types.ts

@@ -0,0 +1,22 @@
+import {Address, Center, Civility, DateTime} from "../../../ChillMainBundle/Resources/public/types";
+
+export interface Person {
+    id: number;
+    type: "person";
+    text: string;
+    textAge: string;
+    firstName: string;
+    lastName: string;
+    current_household_address: Address | null;
+    birthdate: DateTime | null;
+    deathdate: DateTime | null;
+    age: number;
+    phonenumber: string;
+    mobilenumber: string;
+    email: string;
+    gender: "woman" | "man" | "other";
+    centers: Center[];
+    civility: Civility | null;
+    current_household_id: number;
+    current_residential_addresses: Address[];
+}

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

@@ -14,7 +14,7 @@
    <scopes></scopes>
    <referrer></referrer>
    <resources></resources>
-   <start-date v-if="accompanyingCourse.step === 'CONFIRMED'"></start-date>
+   <start-date v-if="accompanyingCourse.step.startsWith('CONFIRMED')"></start-date>
    <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
    <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js

@@ -1,4 +1,4 @@
-import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 /*
 * Endpoint v.2 chill_api_single_accompanying_course__entity

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AdminLocation.vue

@@ -34,7 +34,7 @@
 
 <script>
 import VueMultiselect from 'vue-multiselect';
-import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
+import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods';
 import { mapState, mapGetters } from 'vuex';
 
 export default {
@@ -58,23 +58,17 @@ export default {
    },
    methods: {
       getOptions() {
-         const url = `/api/1.0/main/location.json`;
-         makeFetch('GET', url)
+         fetchResults(`/api/1.0/main/location.json`)
             .then(response => {
-               let options = response.results;
-               let uniqueLocationTypeId = [...new Set(options.map(o => o.locationType.id))];
+               let uniqueLocationTypeId = [...new Set(response.map(o => o.locationType.id))];
                let results = [];
                for (let id of uniqueLocationTypeId) {
                   results.push({
-                    locationCategories: options.filter(o => o.locationType.id === id)[0].locationType.title.fr,
-                    locations: options.filter(o => o.locationType.id === id)
+                    locationCategories: response.filter(o => o.locationType.id === id)[0].locationType.title.fr,
+                    locations: response.filter(o => o.locationType.id === id)
                   })
                }
                this.options = results;
-               return response;
-            })
-            .catch((error) => {
-               this.$toast.open({message: error.txt})
             })
       },
       updateAdminLocation(value) {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue

@@ -11,18 +11,33 @@
             {{ $t('course.step.draft') }}
          </span>
       </span>
-      <span v-else-if="accompanyingCourse.step === 'CONFIRMED'" class="text-md-end">
-         <span class="d-md-block mb-md-3">
+      <span v-else-if="accompanyingCourse.step === 'CONFIRMED' || accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT' || accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'" class="text-md-end">
+         <span v-if="accompanyingCourse.step === 'CONFIRMED'" class="d-md-block mb-md-3">
             <span class="badge bg-primary">
                {{ $t('course.step.active') }}
             </span>
          </span>
+         <span v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT'" class="d-md-block mb-md-3">
+            <span class="badge bg-chill-yellow text-primary">
+               {{ $t('course.step.inactive_short') }}
+            </span>
+         </span>
+         <span v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'" class="d-md-block mb-md-3">
+            <span class="badge bg-chill-pink">
+               {{ $t('course.step.inactive_long') }}
+            </span>
+         </span>
          <span class="d-md-block">
             <span class="d-md-block ms-3 ms-md-0">
                <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
             </span>
             <span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
-               <span class="item-key">{{ $t('course.referrer') }}:</span> <b>{{ accompanyingCourse.user.text }}</b>
+               <span class="item-key">{{ $t('course.referrer') }}:</span>&nbsp;
+               <b>{{ accompanyingCourse.user.text }}</b>
+               <template v-if="accompanyingCourse.user.isAbsent">
+                 &nbsp;
+                 <span class="badge bg-danger rounded-pill" title="Absent">A</span>
+               </template>
             </span>
          </span>
       </span>
@@ -59,13 +74,15 @@
 import ToggleFlags from './Banner/ToggleFlags';
 import SocialIssue from './Banner/SocialIssue.vue';
 import PersonsAssociated from './Banner/PersonsAssociated.vue';
+import UserRenderBoxBadge from 'ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue';
 
 export default {
    name: 'Banner',
    components: {
       ToggleFlags,
       SocialIssue,
-      PersonsAssociated
+      PersonsAssociated,
+      UserRenderBoxBadge,
    },
    computed: {
       accompanyingCourse() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue

@@ -164,7 +164,8 @@ export default {
                id: this.accompanyingCourse.id
             },
             edit: false,
-            addressId: null
+            addressId: null,
+            defaults: window.addaddress
          }
          if (this.accompanyingCourse.location) {
             context['edit'] = true;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue

@@ -15,33 +15,36 @@
       :person="participation.person"
       :returnPath="getAccompanyingCourseReturnPath">
 
-      <template v-slot:record-actions>
-         <ul class="record_actions">
+      <template v-slot:end-bloc>
+        <div class="item-row separator">
+          <ul class="record_actions">
             <button-location
-               v-if="hasCurrentHouseholdAddress"
-               v-bind:person="participation.person">
+                v-if="hasCurrentHouseholdAddress && !isPersonLocatingCourse(participation.person)"
+                v-bind:person="participation.person">
             </button-location>
             <li v-if="participation.person.current_household_id">
-               <a class="btn btn-sm btn-chill-beige"
-                  :href="getCurrentHouseholdUrl"
-                  :title="$t('persons_associated.show_household_number', { id: participation.person.current_household_id })">
-                  <i class="fa fa-fw fa-home"></i>
-               </a>
+              <a class="btn btn-sm btn-chill-beige"
+                 :href="getCurrentHouseholdUrl"
+                 :title="$t('persons_associated.show_household_number', { id: participation.person.current_household_id })">
+                <i class="fa fa-fw fa-home"></i>
+              </a>
             </li>
             <li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="show"></on-the-fly></li>
             <li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
             <li>
-               <button v-if="!participation.endDate"
-                  class="btn btn-sm btn-remove"
-                  v-bind:title="$t('persons_associated.leave_course')"
-                       @click="modal.showModal = true">
-               </button>
+              <button v-if="!participation.endDate"
+                      class="btn btn-sm btn-remove"
+                      v-bind:title="$t('persons_associated.leave_course')"
+                      @click="modal.showModal = true">
+              </button>
             </li>
-         </ul>
+          </ul>
+        </div>
 
       </template>
    </person-render-box>
 
+
    <teleport to="body">
       <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
          <template v-slot:header>
@@ -106,9 +109,12 @@ export default {
       },
       getCurrentHouseholdUrl() {
          return `/fr/person/household/${this.participation.person.current_household_id}/summary?returnPath=${this.getAccompanyingCourseReturnPath}`
-      }
+      },
    },
    methods: {
+     isPersonLocatingCourse(person) {
+       return this.$store.getters.isPersonLocatingCourse(person);
+     },
       saveFormOnTheFly(payload) {
          console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
          payload.target = 'participation';

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue

@@ -2,6 +2,29 @@
   <div class="vue-component">
     <h2><a id="section-80"></a>{{ $t('referrer.title') }}</h2>
 
+    <teleport to="body">
+      <modal v-if="modal.showModal"
+             :modalDialogClass="modal.modalDialogClass"
+             @close="cancelChange">
+        <template v-slot:header>
+          <h3 class="modal-title">{{ $t('confirm.title') }}</h3>
+        </template>
+
+        <template v-slot:body-head>
+          <div class="modal-body">
+            <p v-html="$t('confirm.sure_referrer', { referrer: this.value.text })"></p>
+          </div>
+        </template>
+
+        <template v-slot:footer>
+          <button class="btn btn-save"
+                  @click.prevent="this.confirmReferrer">
+            {{ $t('confirm.ok_referrer')}}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+
     <div>
 
       <label class="col-form-label" for="selectJob">
@@ -35,6 +58,8 @@
           :searchable="true"
           :placeholder="$t('referrer.placeholder')"
           v-model="value"
+          @select="updateReferrer"
+          @remove="removeReferrer"
           :options="users"
           :select-label="$t('multiselect.select_label')"
           :deselect-label="$t('multiselect.deselect_label')"
@@ -78,16 +103,24 @@ import VueMultiselect from 'vue-multiselect';
 import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods';
 import {mapState, mapGetters} from 'vuex';
 import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 
 export default {
   name: "Referrer",
   components: {
     UserRenderBoxBadge,
     VueMultiselect,
+    Modal
   },
   data() {
     return {
-      jobs: []
+      jobs: [],
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-scrollable modal-xl"
+      },
+      value: this.$store.state.accompanyingCourse.user,
+      confirmed: false
     }
   },
   computed: {
@@ -118,22 +151,6 @@ export default {
             });
       }
     },
-    value: {
-      get() {
-        return this.$store.state.accompanyingCourse.user;
-      },
-      set(value) {
-        console.log('set referrer', value);
-        this.$store.dispatch('updateReferrer', value)
-            .catch(({name, violations}) => {
-              if (name === 'ValidationException' || name === 'AccessException') {
-                violations.forEach((violation) => this.$toast.open({message: violation}));
-              } else {
-                this.$toast.open({message: 'An error occurred'})
-              }
-            });
-      }
-    },
   },
   mounted() {
     this.getJobs();
@@ -141,6 +158,7 @@ export default {
   methods: {
     updateReferrer(value) {
       this.value = value;
+      this.toggleModal();
     },
     getJobs() {
       const url = '/api/1.0/main/user-job.json';
@@ -159,12 +177,38 @@ export default {
       const url = `/api/1.0/main/whoami.json`;
       makeFetch('GET', url)
           .then(user => {
-            this.value = user
+            // this.value = user
+            this.updateReferrer(user);
           })
-      /*.catch((error) => {
-         commit('catchError', error);
-         this.$toast.open({message: error.body})
-      })*/
+    },
+    toggleModal() {
+      this.modal.showModal = !this.modal.showModal;
+    },
+    confirmReferrer() {
+      this.$store.dispatch('updateReferrer', this.value)
+          .catch(({name, violations}) => {
+            if (name === 'ValidationException' || name === 'AccessException') {
+              violations.forEach((violation) => this.$toast.open({message: violation}));
+            } else {
+              this.$toast.open({message: 'An error occurred'})
+            }
+          });
+      this.toggleModal()
+    },
+    removeReferrer() {
+      console.log('remove option')  
+      this.$store.dispatch('updateReferrer', null)
+          .catch(({name, violations}) => {
+            if (name === 'ValidationException' || name === 'AccessException') {
+              violations.forEach((violation) => this.$toast.open({message: violation}));
+            } else {
+              this.$toast.open({message: 'An error occurred'})
+            }
+          });
+    },
+    cancelChange() {
+      this.value = this.$store.state.accompanyingCourse.user
+      this.toggleModal()
     }
   }
 }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue

@@ -12,40 +12,42 @@
          hLevel : 3,
          isConfidential : true
       }">
-      <template v-slot:record-actions>
-         <ul class="record_actions">
+      <template v-slot:end-bloc>
+        <div class="item-row separator">
+          <ul class="record_actions">
             <li>
-               <write-comment
+              <write-comment
                   :resource="resource"
                   @updateComment="updateComment"
-               ></write-comment>
+              ></write-comment>
             </li>
             <li>
-               <on-the-fly
+              <on-the-fly
                   :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="show">
-               </on-the-fly>
+              </on-the-fly>
             </li>
             <li>
-               <on-the-fly
+              <on-the-fly
                   :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="edit"
                   @saveFormOnTheFly="saveFormOnTheFly"
                   ref="onTheFly">
-               </on-the-fly>
+              </on-the-fly>
             </li>
             <li>
-               <button
+              <button
                   class="btn btn-sm btn-remove"
                   :title="$t('action.remove')"
                   @click.prevent="$emit('remove', resource)">
-               </button>
+              </button>
             </li>
-         </ul>
+          </ul>
+        </div>
       </template>
    </person-render-box>
 
@@ -59,40 +61,42 @@
          addInfo: false,
          hLevel: 3
       }">
-      <template v-slot:record-actions>
-         <ul class="record_actions">
+      <template v-slot:end-bloc>
+        <div class="item-row separator">
+          <ul class="record_actions">
             <li>
-               <write-comment
+              <write-comment
                   :resource="resource"
                   @updateComment="updateComment"
-               ></write-comment>
+              ></write-comment>
             </li>
             <li>
-               <on-the-fly
+              <on-the-fly
                   :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="show">
-               </on-the-fly>
+              </on-the-fly>
             </li>
             <li>
-               <on-the-fly
+              <on-the-fly
                   :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="edit"
                   @saveFormOnTheFly="saveFormOnTheFly"
                   ref="onTheFly">
-               </on-the-fly>
+              </on-the-fly>
             </li>
             <li>
-               <button
+              <button
                   class="btn btn-sm btn-remove"
                   :title="$t('action.remove')"
                   @click.prevent="$emit('remove', resource)">
-               </button>
+              </button>
             </li>
-         </ul>
+          </ul>
+        </div>
       </template>
    </third-party-render-box>
 </template>
@@ -178,7 +182,7 @@ export default {
                body.civility = {type: 'chill_main_civility', id: payload.data.civility.id};
             }
             if (null !== payload.data.profession) {
-               body.profession = {type: 'third_party_profession', id: payload.data.profession.id};
+               body.profession = payload.data.profession;
             }
             // console.log('body', body);
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue

@@ -16,7 +16,7 @@
 
 <script>
 
-import { dateToISO, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
+import { dateToISO, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
 import { mapState } from 'vuex';
 
 export default {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -21,7 +21,9 @@ const appMessages = {
          step: {
             draft: "Brouillon",
             active: "En file active",
-            closed: "Cloturé"
+            closed: "Cloturé",
+            inactive_short: "Hors file active",
+            inactive_long: "Pré-archivé",
          },
          open_at: "ouvert le ",
          by: "par ",
@@ -29,7 +31,8 @@ const appMessages = {
          emergency: "urgent",
          confidential: "confidentiel",
          regular: "régulier",
-         occasional: "ponctuel"
+         occasional: "ponctuel",
+         absent: "Absent",
       },
       origin: {
          title: "Origine de la demande",
@@ -138,8 +141,10 @@ const appMessages = {
          set_a_scope: "indiquez au moins un service",
          sure: "Êtes-vous sûr ?",
          sure_description: "Une fois le changement confirmé, il ne sera plus possible de le remettre à l'état de brouillon !",
+         sure_referrer: "Êtes-vous sûr de vouloir assigner ce parcours à <b>{referrer}</b>",
          ok: "Confirmer le parcours",
          delete: "Supprimer le parcours",
+         ok_referrer: "Confirmer le référent",
          no_suggested_referrer: "Il n'y a aucun référent qui puisse être suggéré pour ce parcours. Vérifiez la localisation du parcours, les métiers et service indiqués. Si les données sont correctes, vous pouvez confirmer ce parcours.",
          one_suggested_referrer: "Un unique référent peut être suggéré pour ce parcours",
          choose_suggested_referrer: "Voulez-vous le désigner directement ?",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -1,6 +1,6 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import { fetchScopes } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { fetchScopes } from 'ChillMainAssets/lib/api/apiMethods.ts';
 import { getAccompanyingCourse,
    getReferrersSuggested,
    getUsers,
@@ -8,7 +8,7 @@ import { getAccompanyingCourse,
 import { patchPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
 import { patchThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
-import { datetimeToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
+import { datetimeToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date';
 
 
 const debug = process.env.NODE_ENV !== 'production';
@@ -49,6 +49,13 @@ let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCou
             postFirstPinnedCommentResponse: null,
          },
          getters: {
+            isPersonLocatingCourse: (state) => (person) => {
+               if (state.accompanyingCourse.locationStatus !== 'person') {
+                  return false;
+               }
+
+               return state.accompanyingCourse.personLocation.id === person.id;
+            },
             isParticipationValid(state) {
                return state.accompanyingCourse.participations.length > 0;
             },
@@ -785,7 +792,7 @@ let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCou
                return makeFetch('PATCH', url, body)
                   .then((response) => {
                      commit('updateReferrer', response.user);
-                     if (null !== payload.user_job && payload.user_job !== state.accompanyingCourse.job) {
+                     if (null !== payload && null !== payload.user_job && payload.user_job !== state.accompanyingCourse.job) {
                         this.dispatch('updateJob', payload.user_job);
                      }
                      // commit('setFilteredReferrersSuggested'); // this mutation doesn't exist?

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

@@ -127,7 +127,7 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import VueMultiselect from 'vue-multiselect';
-import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
+import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date';
 import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 const i18n = {

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

@@ -1,15 +1,22 @@
-import { createApp } from 'vue';
-import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
-import { store } from './store';
-import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
+import {createApp} from 'vue';
+import {_createI18n} from 'ChillMainAssets/vuejs/_js/i18n';
+import {store} from './store';
+import {personMessages} from 'ChillPersonAssets/vuejs/_js/i18n'
 import App from './App.vue';
+import VueToast from "vue-toast-notification";
 
 const i18n = _createI18n(personMessages);
 
 const app = createApp({
-   template: `<app></app>`,
+    template: `<app></app>`,
 })
-.use(store)
-.use(i18n)
-.component('app', App)
-.mount('#accompanying_course_work_create');
+    .use(store)
+    .use(i18n)
+    .use(VueToast, {
+        position: "bottom-right",
+        type: "error",
+        duration: 10000,
+        dismissible: true,
+    })
+    .component('app', App)
+    .mount('#accompanying_course_work_create');

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

@@ -1,6 +1,6 @@
 
 import { createStore } from 'vuex';
-import { datetimeToISO, dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
+import { datetimeToISO, dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date';
 import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
 // import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
@@ -107,6 +107,9 @@ const store = createStore({
     setPostingWork(state) {
       state.isPostingWork = true;
     },
+    setPostingWorkDone(state) {
+      state.isPostingWork = false;
+    },
     setStartDate(state, date) {
       state.startDate = date;
     },
@@ -150,11 +153,12 @@ const store = createStore({
       const url = `/api/1.0/person/accompanying-course/${state.accompanyingCourse.id}/work.json`;
       commit('setPostingWork');
 
-      makeFetch('POST', url, payload)
+      return makeFetch('POST', url, payload)
         .then((response) => {
           window.location.assign(`/fr/person/accompanying-period/work/${response.id}/edit`)
         })
         .catch((error) => {
+          commit('setPostingWorkDone');
           throw error;
         });
     },

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

@@ -1,5 +1,5 @@
 <template>
-   <div id="workEditor" class="accompanying_course_work_edit my-4">
+   <div id="workEditor" class="my-4">
       <div id="title" class="action-row">
          <div>
             <p class="wl-item social-issues">
@@ -314,7 +314,7 @@
 
 <script>
 import {mapState, mapGetters,} from 'vuex';
-import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
+import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import AddResult from './components/AddResult.vue';
@@ -549,7 +549,14 @@ export default {
             .catch(e => { console.log(e); throw e; });
       },
       submit() {
-         this.$store.dispatch('submit');
+         this.$store.dispatch('submit').catch((error) => {
+            if (error.name === 'ValidationException' || error.name === 'AccessException') {
+               error.violations.forEach((violation) => this.$toast.open({message: violation}));
+            } else {
+               this.$toast.open({message: 'An error occurred'});
+               throw error;
+            }
+         });
       },
       saveFormOnTheFly(payload) {
          console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue

@@ -49,6 +49,20 @@
          </div>
       </div>
 
+     <div class="row mb-3">
+       <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+         {{ $t('evaluation_time_spent') }}
+       </label>
+       <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+         <select class="form-control form-control-sm" type="time" v-model="timeSpent">
+           <option disabled value="">{{ $t('select_time_spent') }}</option>
+           <option v-for="time in timeSpentChoices" :value="time.value">
+             {{ time.text }}
+           </option>
+         </select>
+       </div>
+     </div>
+
       <div class="row mb-3">
          <label class="col-sm-4 col-form-label visually-hidden">{{ $t('evaluation_public_comment') }}</label>
          <div class="col-sm-12">
@@ -111,14 +125,13 @@
                      </add-async-upload>
                    </li>
                    <li>
-                     <add-async-upload-downloader
-                        :buttonTitle="$t('download')"
-                        :storedObject="d.storedObject"
-                     >
-                     </add-async-upload-downloader>
-                   </li>
-                   <li v-if="canEditDocument(d)">
-                     <a :href="buildEditLink(d.storedObject)" class="btn btn-wopilink"></a>
+                     <document-action-buttons-group
+                         :stored-object="d.storedObject"
+                         :filename="d.title"
+                         :can-edit="true"
+                         :execute-before-leave="submitBeforeLeaveToEditor"
+                         @on-stored-object-status-change="onStatusDocumentChanged"
+                     ></document-action-buttons-group>
                    </li>
                    <li v-if="d.workflows.length === 0">
                      <a class="btn btn-delete" @click="removeDocument(d)">
@@ -164,7 +177,7 @@
 </template>
 
 <script>
-import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
+import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import { mapGetters, mapState } from 'vuex';
@@ -174,6 +187,7 @@ import AddAsyncUpload from 'ChillDocStoreAssets/vuejs/_components/AddAsyncUpload
 import AddAsyncUploadDownloader from 'ChillDocStoreAssets/vuejs/_components/AddAsyncUploadDownloader.vue';
 import ListWorkflowModal from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue';
 import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
+import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
 
 const i18n = {
    messages: {
@@ -191,6 +205,8 @@ const i18n = {
          evaluation_choose_a_template: "Choisir un modèle",
          evaluation_add_a_document: "Ajouter un document",
          evaluation_add: "Ajouter une évaluation",
+         evaluation_time_spent: "Temps de rédaction",
+         select_time_spent: "Indiquez le temps de rédaction",
          Documents: "Documents",
          document_add: "Générer ou téléverser un document",
          document_upload: "Téléverser un document",
@@ -212,6 +228,7 @@ export default {
       AddAsyncUpload,
       AddAsyncUploadDownloader,
       ListWorkflowModal,
+      DocumentActionButtonsGroup,
    },
    i18n,
    data() {
@@ -223,77 +240,21 @@ export default {
             maxPostSize: 15000000,
             required: false,
          },
-         mime: [
-            // TODO temporary hardcoded. to be replaced by twig extension or a collabora server query
-            'application/clarisworks',
-            'application/coreldraw',
-            'application/macwriteii',
-            'application/msword',
-            'application/vnd.lotus-1-2-3',
-            'application/vnd.ms-excel',
-            'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
-            'application/vnd.ms-excel.sheet.macroEnabled.12',
-            'application/vnd.ms-excel.template.macroEnabled.12',
-            'application/vnd.ms-powerpoint',
-            'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
-            'application/vnd.ms-powerpoint.template.macroEnabled.12',
-            'application/vnd.ms-visio.drawing',
-            'application/vnd.ms-word.document.macroEnabled.12',
-            'application/vnd.ms-word.template.macroEnabled.12',
-            'application/vnd.ms-works',
-            'application/vnd.oasis.opendocument.chart',
-            'application/vnd.oasis.opendocument.formula',
-            'application/vnd.oasis.opendocument.graphics',
-            'application/vnd.oasis.opendocument.graphics-flat-xml',
-            'application/vnd.oasis.opendocument.graphics-template',
-            'application/vnd.oasis.opendocument.presentation',
-            'application/vnd.oasis.opendocument.presentation-flat-xml',
-            'application/vnd.oasis.opendocument.presentation-template',
-            'application/vnd.oasis.opendocument.spreadsheet',
-            'application/vnd.oasis.opendocument.spreadsheet-flat-xml',
-            'application/vnd.oasis.opendocument.spreadsheet-template',
-            'application/vnd.oasis.opendocument.text',
-            'application/vnd.oasis.opendocument.text-flat-xml',
-            'application/vnd.oasis.opendocument.text-master',
-            'application/vnd.oasis.opendocument.text-master-template',
-            'application/vnd.oasis.opendocument.text-template',
-            'application/vnd.oasis.opendocument.text-web',
-            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-            'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
-            'application/vnd.openxmlformats-officedocument.presentationml.template',
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
-            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-            'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
-            'application/vnd.sun.xml.calc',
-            'application/vnd.sun.xml.calc.template',
-            'application/vnd.sun.xml.chart',
-            'application/vnd.sun.xml.draw',
-            'application/vnd.sun.xml.draw.template',
-            'application/vnd.sun.xml.impress',
-            'application/vnd.sun.xml.impress.template',
-            'application/vnd.sun.xml.math',
-            'application/vnd.sun.xml.writer',
-            'application/vnd.sun.xml.writer.global',
-            'application/vnd.sun.xml.writer.template',
-            'application/vnd.visio',
-            'application/vnd.visio2013',
-            'application/vnd.wordperfect',
-            'application/x-abiword',
-            'application/x-aportisdoc',
-            'application/x-dbase',
-            'application/x-dif-document',
-            'application/x-fictionbook+xml',
-            'application/x-gnumeric',
-            'application/x-hwp',
-            'application/x-iwork-keynote-sffkey',
-            'application/x-iwork-numbers-sffnumbers',
-            'application/x-iwork-pages-sffpages',
-            'application/x-mspublisher',
-            'application/x-mswrite',
-            'application/x-pagemaker',
-            'application/x-sony-bbeb',
-            'application/x-t602',
+         timeSpentChoices: [
+           { text: '1 minute', value: 60 }, { text: '2 minutes', value: 120 },
+           { text: '3 minutes', value: 180 }, { text: '4 minutes', value: 240 },
+           { text: '5 minutes', value: 300 }, { text: '10 minutes', value: 600 },
+           { text: '15 minutes', value: 900 },{ text: '20 minutes', value: 1200 },
+           { text: '25 minutes', value: 1500 }, { text: '30 minutes', value: 1800 },
+           { text: '45 minutes', value: 2700 },{ text: '1 hour', value: 3600 },
+           { text: '1 hour 15 minutes', value: 4500 }, { text: '1 hour 30 minutes', value: 5400 },
+           { text: '1 hour 45 minutes', value: 6300 }, { text: '2 hours', value: 7200 },
+           { text: '2 hours 30 minutes', value: 9000 }, { text: '3 hours', value: 10800 },
+           { text: '3 hours 30 minutes', value: 12600 },{ text: '4 hours', value: 14400 },
+           { text: '4 hours 30 minutes', value: 16200 },{ text: '5 hours', value: 18000 },
+           { text: '5 hours 30 minutes', value: 19800 },{ text: '6 hours', value: 21600 },
+           { text: '6 hours 30 minutes', value: 23400 },{ text: '7 hours', value: 25200 },
+           { text: '7 hours 30 minutes', value: 27000 },{ text: '8 hours', value: 28800 },
          ]
       }
    },
@@ -336,6 +297,10 @@ export default {
          get() { return this.evaluation.warningInterval; },
          set(v) { this.$store.commit('setEvaluationWarningInterval', { key: this.evaluation.key, days: v }); }
       },
+     timeSpent: {
+        get() { return this.evaluation.timeSpent },
+        set(v) { this.$store.commit('setEvaluationTimeSpent', { key: this.evaluation.key, time: v}) }
+     },
       comment: {
          get() { return this.evaluation.comment; },
          set(v) { this.$store.commit('setEvaluationComment', { key: this.evaluation.key, comment: v }); }
@@ -343,10 +308,6 @@ export default {
    },
    methods: {
       ISOToDatetime,
-      canEditDocument(document) {
-         return 'storedObject' in document ?
-            this.mime.includes(document.storedObject.type) : false;
-      },
       listAllStatus() {
          console.log('load all status');
          let url = `/api/`;
@@ -359,10 +320,25 @@ export default {
          })
          ;
       },
-      buildEditLink(storedObject) {
-         return `/wopi/edit/${storedObject.uuid}?returnPath=` + encodeURIComponent(
+      buildEditLink(document) {
+         return `/chill/wopi/edit/${document.storedObject.uuid}?returnPath=` + encodeURIComponent(
             window.location.pathname + window.location.search + window.location.hash);
       },
+      submitBeforeLeaveToEditor() {
+        console.log('submit beore edit 2');
+        // empty callback
+        const callback = () => null;
+        return this.$store.dispatch('submit', callback).catch(e => { console.log(e); throw e; });
+      },
+     submitBeforeEdit(storedObject) {
+         const callback = (data) => {
+            let evaluation = data.accompanyingPeriodWorkEvaluations.find(e => e.key === this.evaluation.key);
+            let document = evaluation.documents.find(d => d.storedObject.id === storedObject.id);
+            //console.log('=> document', document);
+            window.location.assign(this.buildEditLink(document));
+         };
+         return this.$store.dispatch('submit', callback).catch(e => { console.log(e); throw e; });
+      },
       submitBeforeGenerate({template}) {
          const callback = (data) => {
             let evaluationId = data.accompanyingPeriodWorkEvaluations.find(e => e.key === this.evaluation.key).id;
@@ -399,6 +375,10 @@ export default {
             this.$store.commit('removeDocument', {key: this.evaluation.key, document: document});
          }
       },
+      onStatusDocumentChanged(newStatus) {
+        console.log('onStatusDocumentChanged', newStatus);
+        this.$store.commit('statusDocumentChanged', {key: this.evaluation.key, newStatus: newStatus});
+      },
       goToGenerateWorkflowEvaluationDocument({event, link, workflowName, payload}) {
          const callback = (data) => {
             let evaluation = data.accompanyingPeriodWorkEvaluations.find(e => e.key === this.evaluation.key);

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

@@ -15,7 +15,7 @@ const app = createApp({
 .use(VueToast, {
    position: "bottom-right",
    type: "error",
-   duration: 5000,
+   duration: 10000,
    dismissible: true
 })
 .use(i18n)

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

@@ -1,8 +1,8 @@
 import { createStore } from 'vuex';
-import { dateToISO, ISOToDate, datetimeToISO, ISOToDatetime, intervalDaysToISO, intervalISOToDays } from 'ChillMainAssets/chill/js/date.js';
+import { dateToISO, ISOToDate, datetimeToISO, ISOToDatetime, intervalDaysToISO, intervalISOToDays } from 'ChillMainAssets/chill/js/date';
 import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
 import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
-import { fetchResults, makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { fetchResults, makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
 import { fetchTemplates } from 'ChillDocGeneratorAssets/api/pickTemplate.js';
 
 const debug = process.env.NODE_ENV !== 'production';
@@ -116,6 +116,7 @@ const store = createStore({
             endDate: e.endDate === null || e.endDate === '' ? null : { datetime: datetimeToISO(ISOToDate(e.endDate)) },
             maxDate: e.maxDate === null || e.maxDate === '' ? null : { datetime: datetimeToISO(ISOToDate(e.maxDate)) },
             warningInterval: intervalDaysToISO(e.warningInterval),
+            timeSpent: e.timeSpent,
             comment: e.comment,
             documents: e.documents
           };
@@ -138,6 +139,7 @@ const store = createStore({
           endDate: e.endDate !== null ? dateToISO(new Date(e.endDate.datetime)) : null,
           maxDate: e.maxDate !== null ? dateToISO(new Date(e.maxDate.datetime)) : null,
           warningInterval: e.warningInterval !== null ? intervalISOToDays(e.warningInterval) : null,
+          timeSpent: e.timeSpent !== null ? e.timeSpent : null,
           documents: e.documents.map((d, docIndex) => {
             return Object.assign(d, {
               key: docIndex
@@ -258,6 +260,7 @@ const store = createStore({
         endDate:  null,
         maxDate:  null,
         warningInterval: null,
+        timeSpent: null,
         comment: "",
         editEvaluation: true,
         workflows_availables: state.work.workflows_availables_evaluation,
@@ -286,6 +289,10 @@ const store = createStore({
       state.evaluationsPicked.find(e => e.key === key)
           .warningInterval = days;
     },
+    setEvaluationTimeSpent(state, {key, time}) {
+      state.evaluationsPicked.find(e => e.key === key)
+          .timeSpent = time;
+    },
     setEvaluationComment(state, {key, comment}) {
       state.evaluationsPicked.find(e => e.key === key)
           .comment = comment;
@@ -360,7 +367,22 @@ const store = createStore({
         state.evaluationsPicked.find(e => e.key === payload.evaluationKey)
           .documents.find(d => d.id === payload.id).title = payload.title;
       }
-    }
+    },
+    statusDocumentChanged(state, {newStatus, key}) {
+      const e = state.evaluationsPicked.find(e => e.key === key);
+      if (typeof e === 'undefined') {
+        console.error('evaluation not found for given key', {key});
+      }
+
+      const doc = e.documents.find(d => d.storedObject?.id === newStatus.id);
+      if (typeof doc === 'undefined') {
+        console.error('document not found', {newStatus});
+      }
+
+      doc.storedObject.status = newStatus.status;
+      doc.storedObject.type = newStatus.type;
+      doc.storedObject.filename = newStatus.filename;
+    },
   },
   actions: {
     updateThirdParty({ commit }, payload) {
@@ -467,7 +489,7 @@ const store = createStore({
       ;
       commit('setIsPosting', true);
 
-      console.log('payload', payload);
+      console.log('the social action', payload);
 
       return makeFetch('PUT', url, payload)
         .then(data => {
@@ -478,9 +500,8 @@ const store = createStore({
             window.location.assign(`/fr/person/accompanying-period/${state.work.accompanyingPeriod.id}/work`);
           }
         }).catch(error => {
-          console.log('error on submit', error);
           commit('setIsPosting', false);
-          commit('setErrors', error.violations);
+          throw error;
         });
     },
     updateDocumentTitle({commit}, payload) {

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

@@ -0,0 +1,381 @@
+<template>
+   <teleport to="#export_filters_social_work_type_filter_form">
+      
+      <fieldset class="mb-3" id="actionType">
+         <div class="row">
+            <legend class="col-sm-4 col-form-label">{{ $t('action.label')}}</legend>
+            <div class="col-sm-8">
+      
+               <VueMultiselect
+                  v-model="action"
+                  :options="actions.options"
+                  @select="selectAction"
+                  @remove="unselectAction"
+                  :multiple="true"
+                  :close-on-select="false"
+                  :placeholder="$t('action.placeholder')"
+                  label="text"
+                  track-by="id"
+                  :searchable="true"
+               ></VueMultiselect>
+               
+            </div>
+         </div>
+      </fieldset>
+   
+      <fieldset class="mb-3" id="goal">
+         <div class="row">
+            <legend class="col-sm-4 col-form-label">{{ $t('goal.label')}}</legend>
+            <div class="col-sm-8">
+            
+               <VueMultiselect
+                  v-model="goal"
+                  :options="goals.options"
+                  @select="selectGoal"
+                  @remove="unselectGoal"
+                  :multiple="true"
+                  :close-on-select="false"
+                  :placeholder="$t('goal.placeholder')"
+                  label="title"
+                  :custom-label="transTitle"
+                  track-by="id"
+                  :searchable="true"
+               ></VueMultiselect>
+         
+            </div>
+         </div>
+      </fieldset>
+   
+      <fieldset class="mb-3" id="result">
+         <div class="row">
+            <legend class="col-sm-4 col-form-label">{{ $t('result.label')}}</legend>
+            <div class="col-sm-8">
+            
+               <VueMultiselect
+                  v-model="result"
+                  :options="results.options"
+                  @select="selectResult"
+                  @remove="unselectResult"
+                  :multiple="true"
+                  :close-on-select="false"
+                  :placeholder="$t('result.placeholder')"
+                  label="title"
+                  :custom-label="transTitle"
+                  track-by="id"
+                  :searchable="true"
+               ></VueMultiselect>
+         
+            </div>
+         </div>
+      </fieldset>
+   
+   </teleport>
+</template>
+
+<script>
+import VueMultiselect from 'vue-multiselect';
+import { getSocialActions, getGoalByAction, getResultByAction, getResultByGoal } from './api';
+
+export default {
+   name: "App",
+   components: {
+      VueMultiselect
+   },
+   i18n: {
+      messages: {
+         fr: {
+            action: {
+               label: 'Types d\'actions',
+               placeholder: 'Choisissez une ou plusieurs actions',
+            },
+            goal: {
+               label: 'Objectifs',
+               placeholder: 'Choisissez un ou plusieurs objectifs',
+            },
+            result: {
+               label: 'Résultats',
+               placeholder: 'Choisissez un ou plusieurs résultats',
+            }
+         }
+      }
+   },
+   data() {
+      return {
+         actions: {
+            options: [], // array with multiselect options
+            value: [],   // array with selected values
+            hiddenField: document.getElementById(
+               'export_filters_social_work_type_filter_form_actionType'),
+         },
+         goals: {
+            options: [],
+            value: [],
+            hiddenField: document.getElementById(
+               'export_filters_social_work_type_filter_form_goal'),
+         },
+         results: {
+            options: [],
+            value: [],
+            hiddenField: document.getElementById(
+               'export_filters_social_work_type_filter_form_result'),
+         },
+      }
+   },
+   computed: {
+      action: {
+         get() {
+            return this.actions.value;
+         },
+         set(value) {
+            this.actions.value = value;
+            this.rebuildHiddenFieldValues('actions');
+         }
+      },
+      goal: {
+         get() {
+            return this.goals.value;
+         },
+         set(value) {
+            this.goals.value = value;
+            this.rebuildHiddenFieldValues('goals');
+         }
+      },
+      result: {
+         get() {
+            return this.results.value;
+         },
+         set(value) {
+            this.results.value = value;
+            this.rebuildHiddenFieldValues('results');
+         }
+      },
+   },
+   mounted() {
+      this.getSocialActionsList();
+      
+      this.actions.hiddenField.value = '';
+      this.goals.hiddenField.value = '';
+      this.results.hiddenField.value = '';
+   
+      //console.log(this.actions.hiddenField, this.goals.hiddenField, this.results.hiddenField);
+   },
+   methods: {
+      async getSocialActionsList() {
+         this.actions.options = await getSocialActions();
+      },
+   
+      /**
+       * Select/unselect in Action Multiselect
+       * @param value
+       */
+      selectAction(value) {
+         //console.log('----'); console.log('select action', value.id);
+         let children = this.getChildrensFromParent(value);
+         this.addSelectedElement('actions', children);
+         
+         let parentAndChildren = [...[value], ...children];
+         parentAndChildren.forEach(elem => {
+            getGoalByAction(elem.id).then(response => new Promise((resolve, reject) => {
+               this.addElementInData('goals', response.results);
+               resolve();
+            })).catch;
+            getResultByAction(elem.id).then(response => new Promise((resolve, reject) => {
+               this.addElementInData('results', response.results);
+               resolve();
+            })).catch;
+         });
+      },
+      
+      unselectAction(value) {
+         //console.log('----'); console.log('unselect action', value.id);
+         getGoalByAction(value.id).then(response => new Promise((resolve, reject) => {
+            [ this.goals.options, this.goals.value ] = this.removeElementInData('goals', response.results);
+            resolve();
+         })).catch;
+         getResultByAction(value.id).then(response => new Promise((resolve, reject) => {
+            [ this.results.options, this.results.value ] = this.removeElementInData('results', response.results);
+            resolve();
+         })).catch;
+      },
+   
+      /**
+       * Select/unselect in Goal Multiselect
+       * @param value
+       */
+      selectGoal(value) {
+         //console.log('----'); console.log('select goal', value.id);
+         getResultByGoal(value.id).then(response => new Promise((resolve, reject) => {
+            this.addElementInData('results', response.results);
+            resolve();
+         })).catch;
+      },
+      
+      unselectGoal(value) {
+         //console.log('----'); console.log('unselect goal', value.id);
+         getResultByGoal(value.id).then(response => new Promise((resolve, reject) => {
+            [ this.results.options, this.results.value ] = this.removeElementInData('results', response.results);
+            resolve();
+         })).catch;
+      },
+   
+      /**
+       * Select/unselect in Result Multiselect
+       * @param value
+       */
+      selectResult(value) {
+         //console.log('----'); console.log('select result', value.id);
+      },
+      
+      unselectResult(value) {
+         //console.log('----'); console.log('unselect result', value.id);
+      },
+   
+      /**
+       * Choose parent action will involve retaining the "children" actions.
+       * @param value
+       * @return array
+       */
+      getChildrensFromParent(value) {
+         if (null === value.parent) {
+            let excludeParent = this.actions.options.filter(o => o.parent !== null);
+            let children = excludeParent.filter(o => o.parent.id === value.id);
+            //console.log("get childrens", children.map(e => e.id));
+            return children;
+         }
+         return [];
+      },
+   
+      /**
+       * Add response elements in data target
+       * @param target string -> 'actions', 'goals' or 'results'
+       * @param response array of objects with fetch results
+       */
+      addElementInData(target, response) {
+         let data = this[target];
+         let dump = [];
+         response.forEach(elem => {
+            let found = data.options.some(e => e.id === elem.id);
+            if (!found) {
+               data.options.push(elem);
+               dump.push(elem.id);
+            }
+         })
+         if (dump.length > 0) {
+            //console.log('push ' + dump.length + ' elems in', target, dump);
+         }
+      },
+   
+      /**
+       * Remove response elements from data target
+       * @param target string -> 'actions', 'goals' or 'results'
+       * @param response array of objects with fetch results
+       * @returns data.<target>.options
+       */
+      removeElementInData(target, response) {
+         let data = this[target];
+         let dump = [];
+         response.forEach(elem => {
+            let found = data.options.some(e => e.id === elem.id);
+            if (found) {
+               data.options = data.options.filter(e => e.id !== elem.id);
+               dump.push(elem.id);
+               
+               this.removeSelectedElement(target, elem);
+            }
+         })
+         if (dump.length > 0) {
+            //console.log('remove ' + dump.length + ' elems from ' + target + ' options', dump);
+         }
+         return [ data.options, data.value ];
+      },
+   
+      /**
+       *
+       * @param target
+       * @param elements
+       */
+      addSelectedElement(target, elements) {
+         let data = this[target];
+         let dump = [];
+         elements.forEach(elem => {
+            let selected = data.value.some(e => e.id === elem.id);
+            if (!selected) {
+               
+               data.value.push(elem);
+               dump.push(elem.id);
+   
+               // add in hiddenField
+               this.rebuildHiddenFieldValues(target);
+            }
+         });
+         if (dump.length > 0) {
+            //console.log('add ' + dump.length + ' selected elems in', target, dump);
+         }
+      },
+   
+      /**
+       * Remove element from selected and from hiddenField
+       * @param target
+       * @param elem
+       */
+      removeSelectedElement(target, elem) {
+         let data = this[target];
+         let selected = data.value.some(e => e.id === elem.id);
+         if (selected) {
+      
+            // remove from selected
+            data.value = data.value.filter(e => e.id !== elem.id);
+            //console.log('remove ' + elem.id + ' from selected ' + target);
+      
+            // remove from hiddenField
+            this.rebuildHiddenFieldValues(target);
+      
+            // in any cases, remove should be recursive
+            this.unselectToNextField(target, elem);
+         }
+      },
+      
+      /**
+       * When unselect Action, it could remove elements in goals multiselect.
+       * In that case, we have to unselect Goal to remove elements in results too.
+       * @param target
+       * @param elem
+       */
+      unselectToNextField(target, elem) {
+         if (target === 'goals') {
+            //console.log('!!!! target is goal: unselect goal', elem.id);
+            this.unselectGoal(elem);
+            //console.log('!!!! done');
+         }
+      },
+   
+      /**
+       * Rebuild values serie (string) in target HiddenField
+       * @param target
+       */
+      rebuildHiddenFieldValues(target) {
+         let data = this[target];
+         //console.log('rebuild hiddenFields ' + target + ' values :');
+         data.hiddenField.value = ''; // reset
+         data.value.forEach(elem => {
+            data.hiddenField.value = this.addIdToValue(data.hiddenField.value, elem.id);
+         })
+         //console.log(data.hiddenField);
+      },
+      
+      addIdToValue(string, id) {
+         let array = string ? string.split(',') : [];
+         array.push(id.toString());
+         let str = array.join();
+         return str;
+      },
+      
+      transTitle ({ title }) {
+         return title.fr //TODO multilang
+      },
+   },
+}
+</script>
+
+<style scoped>
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/api.js

@@ -0,0 +1,41 @@
+import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods';
+
+const getSocialActions = () => fetchResults(
+    '/api/1.0/person/social/social-action.json', {
+        item_per_page: 200
+    }
+);
+
+const getGoalByAction = (id) => {
+    let url = `/api/1.0/person/social-work/goal/by-social-action/${id}.json`;
+    return fetch(url)
+        .then(response => {
+            if (response.ok) { return response.json(); }
+            throw Error('Error with request resource response');
+        });
+};
+
+const getResultByAction = (id) => {
+    let url = `/api/1.0/person/social-work/result/by-social-action/${id}.json`;
+    return fetch(url)
+        .then(response => {
+            if (response.ok) { return response.json(); }
+            throw Error('Error with request resource response');
+        });
+};
+
+const getResultByGoal = (id) => {
+    let url = `/api/1.0/person/social-work/result/by-goal/${id}.json`;
+    return fetch(url)
+        .then(response => {
+            if (response.ok) { return response.json(); }
+            throw Error('Error with request resource response');
+        });
+};
+
+export {
+    getSocialActions,
+    getGoalByAction,
+    getResultByAction,
+    getResultByGoal,
+}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/index.js

@@ -0,0 +1,13 @@
+import { createApp } from "vue";
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import App from './App.vue';
+
+const i18n = _createI18n({});
+
+const app = createApp({
+    template: `<app></app>`,
+})
+.use(i18n)
+.component('app', App)
+.mount('#export_export')
+;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/index.js

@@ -2,6 +2,8 @@ import { createApp } from 'vue';
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
 import { appMessages } from './js/i18n';
 import { store } from './store';
+import VueToast from 'vue-toast-notification';
+import 'vue-toast-notification/dist/theme-sugar.css';
 
 import App from './App.vue';
 
@@ -12,5 +14,11 @@ const app = createApp({
 })
 .use(store)
 .use(i18n)
+.use(VueToast, {
+ position: "bottom-right",
+ type: "error",
+ duration: 5000,
+ dismissible: true
+})
 .component('app', App)
 .mount('#household_members_editor');

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js

@@ -1,10 +1,11 @@
 import { createStore } from 'vuex';
 import { householdMove, fetchHouseholdSuggestionByAccompanyingPeriod, fetchAddressSuggestionByPerson} from './../api.js';
-import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js'
+import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.ts'
 import { fetchHouseholdByAddressReference } from 'ChillPersonAssets/lib/household.js';
-import { datetimeToISO, dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
+import { datetimeToISO, dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date';
 
 const debug = process.env.NODE_ENV !== 'production';
+//console.log('AJAJAJA', window.addaddress);
 
 const concerned = window.household_members_editor_data.persons.map(p => {
   return {
@@ -115,6 +116,7 @@ const store = createStore({
             name: state.household.type,
             id: state.household.id
           },
+          defaults: window.addaddress,
           suggestions: state.addressesSuggestion
         };
       } else {
@@ -125,6 +127,7 @@ const store = createStore({
             name: state.household.type,
             id: state.household.id
           },
+          defaults: window.addaddress,
         };
       }
     },

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

@@ -5,15 +5,12 @@
    <teleport to="#visgraph-legend">
       <div class="post-menu">
          <div class="list-group mt-4">
-            <button type="button" class="list-group-item list-group-item-action btn btn-create" @click="createRelationship">
-               {{ $t('visgraph.add_link') }}
+            <button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="createRelationship">
+               <i class="fa fa-plus"></i> {{ $t('visgraph.add_link') }}
             </button>
             <a type="button" class="list-group-item list-group-item-action btn btn-misc" id="exportCanvasBtn" @click="exportCanvasAsImage">
                <i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
             </a>
-            <button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork">
-               <i class="fa fa-refresh fa-fw"></i> {{ $t('visgraph.refresh') }}
-            </button>
          </div>
 
          <div v-if="displayHelpMessage" class="alert alert-info mt-3">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js

@@ -1,12 +1,14 @@
 import { splitId } from './vis-network';
-import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 /**
  * @function getFetch
  * @param url
  * @returns {Promise<Response>}
+ * @deprecated use makeFetch instead
  */
 const getFetch = (url) => {
+    console.error('deprecated method');
     return makeFetch('GET', url, null)
 }
 
@@ -51,8 +53,10 @@ const getHouseholdByPerson = (person) => {
     if (person.current_household_id === null) {
         throw 'Currently the person has not household!'
     }
-    return getFetch(
-        `/api/1.0/person/household/${person.current_household_id}.json`)
+    return makeFetch(
+        'GET',
+        `/api/1.0/person/household/${person.current_household_id}.json`
+    );
 }
 
 /**
@@ -62,8 +66,10 @@ const getHouseholdByPerson = (person) => {
  */
 const getCoursesByPerson = (person) => {
     //console.log('getCoursesByPerson', person._id)
-    return getFetch(
-        `/api/1.0/person/accompanying-course/by-person/${person._id}.json`)
+    return makeFetch(
+        'GET',
+        `/api/1.0/person/accompanying-course/by-person/${person._id}.json`
+    );
 }
 
 /**
@@ -73,8 +79,10 @@ const getCoursesByPerson = (person) => {
  */
 const getRelationshipsByPerson = (person) => {
     //console.log('getRelationshipsByPerson', person.id)
-    return getFetch(
-        `/api/1.0/relations/relationship/by-person/${person._id}.json`)
+    return makeFetch(
+        'GET',
+        `/api/1.0/relations/relationship/by-person/${person._id}.json`
+    );
 }
 
 /**
@@ -82,7 +90,7 @@ const getRelationshipsByPerson = (person) => {
  * @returns {Promise<Response>}
  */
 const getRelationsList = () => {
-    return getFetch(`/api/1.0/relations/relation.json`)
+    return makeFetch('GET', `/api/1.0/relations/relation.json`);
 }
 
 /**

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js

@@ -1,3 +1,5 @@
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods';
+
 /*
 * GET a person by id
 */
@@ -22,6 +24,8 @@ const getCivilities = () =>
       throw Error('Error with request resource response');
    });
 
+const getCentersForPersonCreation = () => makeFetch('GET', '/api/1.0/person/creation/authorized-centers', null);
+
 /*
 * POST a new person
 */
@@ -59,6 +63,7 @@ const patchPerson = (id, body) => {
 };
 
 export {
+    getCentersForPersonCreation,
    getPerson,
    getPersonAltNames,
    getCivilities,

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue

@@ -6,7 +6,7 @@
 
 <script>
 
-import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 export default {
   name: "SetReferrer",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -303,7 +303,7 @@ export default {
                                        'id': responsePerson.id
                                     },
                                     'start_date': {
-                                       // TODO: use date.js methods (low priority)
+                                       // TODO: use date.ts methods (low priority)
                                        'datetime': `${new Date().toISOString().split('T')[0]}T00:00:00+02:00`
                                     },
                                     'holder': false,

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container tpartycontainer">
       <div class="tparty-identification">
-        <span v-if="item.result.profession" class="profession">{{ item.result.profession.name.fr }}</span>
+        <span v-if="item.result.profession" class="profession">{{ item.result.profession }}</span>
         <span class="name">
           {{ item.result.text }}&nbsp;
         </span>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUser.vue

@@ -1,9 +1,7 @@
 <template>
     <div class="container usercontainer">
       <div class="user-identification">
-        <span class="name">
-           {{ item.result.text }}
-        </span>
+        <user-render-box-badge :user="item.result"></user-render-box-badge>
       </div>
     </div>
     <div class="right_actions">
@@ -16,10 +14,12 @@
 
 <script>
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import UserRenderBoxBadge from 'ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue';
 
 export default {
    name: 'SuggestionUser',
    components: {
+     UserRenderBoxBadge,
       BadgeEntity
    },
    props: ['item'],

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -1,184 +1,191 @@
 <template>
-<div v-if="render === 'bloc'" class="item-bloc">
+  <div v-if="render === 'bloc'" class="item-bloc">
     <section class="chill-entity entity-person">
-        <div class="item-row entity-bloc">
+      <div class="item-row entity-bloc">
 
-        <div  class="item-col">
-            <div class="entity-label">
+        <div class="item-col">
+          <div class="entity-label">
 
-                <div :class="'denomination h' + options.hLevel">
+            <div :class="'denomination h' + options.hLevel">
 
-                    <a v-if="options.addLink === true" :href="getUrl">
-                      <!-- use person-text here to avoid code duplication ? TODO -->
-                        <span class="firstname">{{ person.firstName }}</span>
-                        <span class="lastname">{{ person.lastName }}</span>
-                        <span v-if="person.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
-                        <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
+              <a v-if="options.addLink === true" :href="getUrl">
+                <!-- use person-text here to avoid code duplication ? TODO -->
+                <span class="firstname">{{ person.firstName }}</span>
+                <span class="lastname">{{ person.lastName }}</span>
+                <span v-if="person.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
+                <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
                             <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                         </span>
-                    </a>
+              </a>
 
-                  <!-- use person-text here to avoid code duplication ? TODO -->
-                    <span class="firstname">{{ person.firstName }}</span>
-                    <span class="lastname">{{ person.lastName }}</span>
-                    <span v-if="person.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
-                    <span v-if="person.deathdate" class="deathdate"> (‡)</span>
-                    <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
+              <!-- use person-text here to avoid code duplication ? TODO -->
+              <span class="firstname">{{ person.firstName }}</span>
+              <span class="lastname">{{ person.lastName }}</span>
+              <span v-if="person.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
+              <span v-if="person.deathdate" class="deathdate"> (‡)</span>
+              <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
                         <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                     </span>
 
-                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
+              <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
 
-                    <badge-entity v-if="options.addEntity === true"
-                        :entity="person"
-                        :options="{ displayLong: options.entityDisplayLong }">
-                    </badge-entity>
+              <badge-entity v-if="options.addEntity === true"
+                            :entity="person"
+                            :options="{ displayLong: options.entityDisplayLong }">
+              </badge-entity>
 
-                </div>
-
-                <p v-if="options.addInfo === true" class="moreinfo">
-                    <i :class="'fa fa-fw ' + getGenderIcon" :title="$t(getGender)"></i>
-
-                    <time v-if="person.birthdate && !person.deathdate" :datetime="person.birthdate" :title="birthdate">
-                        {{ $t(getGenderTranslation) + ' ' + $d(birthdate, 'text') }}
-                    </time>
-
-                    <time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
-                        {{ $d(birthdate) }} - {{ $d(deathdate) }}
-                    </time>
-
-                    <time v-else-if="person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
-                        {{ $t('renderbox.deathdate') + ' ' + deathdate }}
-                    </time>
-
-                    <span v-if="options.addAge && person.birthdate" class="age">{{ $tc('renderbox.years_old', person.age) }}</span>
-                </p>
             </div>
+
+            <p v-if="options.addInfo === true" class="moreinfo">
+              <i :class="'fa fa-fw ' + getGenderIcon" :title="$t(getGender)"></i>
+
+              <time v-if="person.birthdate && !person.deathdate" :datetime="person.birthdate" :title="birthdate">
+                {{ $t(getGenderTranslation) + ' ' + $d(birthdate, 'text') }}
+              </time>
+
+              <time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate"
+                    :title="person.deathdate">
+                {{ $d(birthdate) }} - {{ $d(deathdate) }}
+              </time>
+
+              <time v-else-if="person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
+                {{ $t('renderbox.deathdate') + ' ' + deathdate }}
+              </time>
+
+              <span v-if="options.addAge && person.birthdate" class="age">{{
+                  $tc('renderbox.years_old', person.age)
+                }}</span>
+            </p>
+          </div>
         </div>
 
         <div class="item-col">
-            <div class="float-button bottom">
-                <div class="box">
-                    <div class="action">
-                        <slot name="record-actions"></slot>
-                    </div>
-                    <ul class="list-content fa-ul">
-                        <li v-if="person.current_household_id">
-                            <i class="fa fa-li fa-map-marker"></i>
-                            <address-render-box v-if="person.current_household_address"
-                                :address="person.current_household_address"
-                                :isMultiline="isMultiline">
-                            </address-render-box>
-                            <p v-else class="chill-no-data-statement">
-                                {{ $t('renderbox.household_without_address') }}
-                            </p>
-                            <a v-if="options.addHouseholdLink === true"
-                                :href="getCurrentHouseholdUrl"
-                                :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
+          <div class="float-button bottom">
+            <div class="box">
+              <div class="action">
+                <slot name="record-actions"></slot>
+              </div>
+              <ul class="list-content fa-ul">
+                <li v-if="person.current_household_id">
+                  <i class="fa fa-li fa-map-marker"></i>
+                  <address-render-box v-if="person.current_household_address"
+                                      :address="person.current_household_address"
+                                      :isMultiline="isMultiline">
+                  </address-render-box>
+                  <p v-else class="chill-no-data-statement">
+                    {{ $t('renderbox.household_without_address') }}
+                  </p>
+                  <a v-if="options.addHouseholdLink === true"
+                     :href="getCurrentHouseholdUrl"
+                     :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
                                 <span class="badge rounded-pill bg-chill-beige">
                                     <i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}-->
                                 </span>
-                            </a>
-                        </li>
-                        <li v-else-if="options.addNoData">
-                            <i class="fa fa-li fa-map-marker"></i>
-                            <p class="chill-no-data-statement">
-                                {{ $t('renderbox.no_data') }}
-                            </p>
-                        </li>
+                  </a>
+                </li>
+                <li v-else-if="options.addNoData">
+                  <i class="fa fa-li fa-map-marker"></i>
+                  <p class="chill-no-data-statement">
+                    {{ $t('renderbox.no_data') }}
+                  </p>
+                </li>
 
-                        <li v-if="person.email">
-                            <i class="fa fa-li fa-envelope-o"></i>
-                            <a :href="'mailto: ' + person.email">{{ person.email }}</a>
-                        </li>
-                        <li v-else-if="options.addNoData">
-                            <i class="fa fa-li fa-envelope-o"></i>
-                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                        </li>
+                <li v-if="person.email">
+                  <i class="fa fa-li fa-envelope-o"></i>
+                  <a :href="'mailto: ' + person.email">{{ person.email }}</a>
+                </li>
+                <li v-else-if="options.addNoData">
+                  <i class="fa fa-li fa-envelope-o"></i>
+                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
 
-                        <li v-if="person.mobilenumber">
-                            <i class="fa fa-li fa-mobile"></i>
-                            <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
-                        </li>
-                        <li v-else-if="options.addNoData">
-                            <i class="fa fa-li fa-mobile"></i>
-                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                        </li>
-                        <li v-if="person.phonenumber">
-                            <i class="fa fa-li fa-phone"></i>
-                            <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
-                        </li>
-                        <li v-else-if="options.addNoData">
-                            <i class="fa fa-li fa-phone"></i>
-                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                        </li>
+                <li v-if="person.mobilenumber">
+                  <i class="fa fa-li fa-mobile"></i>
+                  <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
+                </li>
+                <li v-else-if="options.addNoData">
+                  <i class="fa fa-li fa-mobile"></i>
+                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                <li v-if="person.phonenumber">
+                  <i class="fa fa-li fa-phone"></i>
+                  <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
+                </li>
+                <li v-else-if="options.addNoData">
+                  <i class="fa fa-li fa-phone"></i>
+                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
 
-                        <li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
-                            <i class="fa fa-li fa-long-arrow-right"></i>
-                            <template v-for="c in person.centers">{{ c.name }}</template>
-                        </li>
-                        <li v-else-if="options.addNoData">
-                            <i class="fa fa-li fa-long-arrow-right"></i>
-                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                        </li>
-                        <slot name="custom-zone"></slot>
+                <li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
+                  <i class="fa fa-li fa-long-arrow-right"></i>
+                  <template v-for="c in person.centers">{{ c.name }}</template>
+                </li>
+                <li v-else-if="options.addNoData">
+                  <i class="fa fa-li fa-long-arrow-right"></i>
+                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                <slot name="custom-zone"></slot>
 
-                    </ul>
-                </div>
+              </ul>
             </div>
+          </div>
         </div>
 
-        <div class="item-col mx-3" v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
-            <div class="float-button bottom">
-                <div class="box" >
-                    <ul class="list-content fa-ul">
-                        <li v-for="(addr, i) in person.current_residential_addresses" :key="i">
-                            <i class="fa fa-li fa-map-marker"></i>
-                            <div v-if="addr.address">
-                                <address-render-box
-                                    :address="addr.address"
-                                    :isMultiline="isMultiline">
-                                </address-render-box>
-                                <p>({{ $t('renderbox.residential_address') }})</p>
-                            </div>
-                            <div v-else-if="addr.hostPerson" class="mt-3">
-                                <p>{{ $t('renderbox.located_at') }}:</p>
-                                <span class="chill-entity entity-person badge-person">
+        <div class="item-col mx-3"
+             v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
+          <div class="float-button bottom">
+            <div class="box">
+              <ul class="list-content fa-ul">
+                <li v-for="(addr, i) in person.current_residential_addresses" :key="i">
+                  <i class="fa fa-li fa-map-marker"></i>
+                  <div v-if="addr.address">
+                    <address-render-box
+                        :address="addr.address"
+                        :isMultiline="isMultiline">
+                    </address-render-box>
+                    <p>({{ $t('renderbox.residential_address') }})</p>
+                  </div>
+                  <div v-else-if="addr.hostPerson" class="mt-3">
+                    <p>{{ $t('renderbox.located_at') }}:</p>
+                    <span class="chill-entity entity-person badge-person">
                                     <person-text
                                         v-if="addr.hostPerson"
                                         :person="addr.hostPerson"
                                     ></person-text>
                                 </span>
-                                <address-render-box v-if="addr.hostPerson.address"
-                                    :address="addr.hostPerson.address"
-                                    :isMultiline="isMultiline">
-                                </address-render-box>
-                            </div>
-                            <div v-else-if="addr.hostThirdParty" class="mt-3">
-                                <p>{{ $t('renderbox.located_at') }}:</p>
-                                <span class="chill-entity entity-person badge-thirdparty">
+                    <address-render-box v-if="addr.hostPerson.address"
+                                        :address="addr.hostPerson.address"
+                                        :isMultiline="isMultiline">
+                    </address-render-box>
+                  </div>
+                  <div v-else-if="addr.hostThirdParty" class="mt-3">
+                    <p>{{ $t('renderbox.located_at') }}:</p>
+                    <span class="chill-entity entity-person badge-thirdparty">
                                     <third-party-text
                                         v-if="addr.hostThirdParty"
                                         :thirdparty="addr.hostThirdParty"
                                     ></third-party-text>
                                 </span>
-                                <address-render-box v-if="addr.hostThirdParty.address"
-                                    :address="addr.hostThirdParty.address"
-                                    :isMultiline="isMultiline">
-                                </address-render-box>
-                            </div>
+                    <address-render-box v-if="addr.hostThirdParty.address"
+                                        :address="addr.hostThirdParty.address"
+                                        :isMultiline="isMultiline">
+                    </address-render-box>
+                  </div>
 
-                        </li>
-                    </ul>
-                </div>
+                </li>
+              </ul>
             </div>
+          </div>
         </div>
 
-        </div>
+      </div>
+
+      <slot name="end-bloc"></slot>
+
     </section>
-</div>
+  </div>
 
-<span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
+  <span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
     <a v-if="options.addLink === true" :href="getUrl">
         <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
             <i class="fa fa-circle fa-stack-1x text-success"></i>
@@ -200,117 +207,125 @@
 </template>
 
 <script>
-import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
+import {dateToISO} from 'ChillMainAssets/chill/js/date';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 import ThirdPartyText from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyText.vue';
+import AddressDetailsButton from "ChillMainAssets/vuejs/_components/AddressDetails/AddressDetailsButton.vue";
 
 export default {
-    name: "PersonRenderBox",
-    components: {
-        AddressRenderBox,
-        Confidential,
-        BadgeEntity,
-        PersonText,
-        ThirdPartyText
+  name: "PersonRenderBox",
+  components: {
+    AddressRenderBox,
+    Confidential,
+    BadgeEntity,
+    PersonText,
+    ThirdPartyText
+  },
+  props: {
+    person: {
+      required: true,
     },
-    props: {
-      person: {
-        required: true,
-      },
-      options: {
-        type: Object,
-        required: false,
-      },
-      render: {
-        type: String,
-      },
-      returnPath: {
-        type: String,
-      },
-      showResidentialAddresses: {
-        type: Boolean,
-        default: false,
+    options: {
+      type: Object,
+      required: false,
+    },
+    render: {
+      type: String,
+    },
+    returnPath: {
+      type: String,
+    },
+    showResidentialAddresses: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+    isMultiline: function () {
+      if (this.options.isMultiline) {
+        return this.options.isMultiline
+      } else {
+        return false
       }
     },
-    computed: {
-        isMultiline: function() {
-            if(this.options.isMultiline){
-                return this.options.isMultiline
-            } else {
-                return false
-            }
-        },
-        getGenderIcon: function() {
-            return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
-        },
-        getGenderTranslation: function() {
-            return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
-        },
-        getGender() {
-            return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined';
-        },
-        birthdate: function(){
-            if(this.person.birthdate !== null || this.person.birthdate === "undefined"){
-            return new Date(this.person.birthdate.datetime);
-            } else {
-                return "";
-            }
-        },
-        deathdate: function(){
-            if(this.person.deathdate !== null || this.person.birthdate === "undefined"){
-               return new Date(this.person.deathdate.datetime);
-            } else {
-                return "";
-            }
-        },
-        altNameLabel: function() {
-            for(let i = 0; i < this.person.altNames.length; i++){
-                return this.person.altNames[i].label
-            }
-        },
-        altNameKey: function() {
-            for(let i = 0; i < this.person.altNames.length; i++){
-                return this.person.altNames[i].key
-            }
-        },
-        getUrl: function() {
-            return `/fr/person/${this.person.id}/general`;
-        },
-        getCurrentHouseholdUrl: function() {
-           let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
-           return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`
-        }
+    getGenderIcon: function () {
+      return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
+    },
+    getGenderTranslation: function () {
+      return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
+    },
+    getGender() {
+      return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined';
+    },
+    birthdate: function () {
+      if (this.person.birthdate !== null || this.person.birthdate === "undefined") {
+        return new Date(this.person.birthdate.datetime);
+      } else {
+        return "";
+      }
+    },
+    deathdate: function () {
+      if (this.person.deathdate !== null || this.person.birthdate === "undefined") {
+        return new Date(this.person.deathdate.datetime);
+      } else {
+        return "";
+      }
+    },
+    altNameLabel: function () {
+      for (let i = 0; i < this.person.altNames.length; i++) {
+        return this.person.altNames[i].label
+      }
+    },
+    altNameKey: function () {
+      for (let i = 0; i < this.person.altNames.length; i++) {
+        return this.person.altNames[i].key
+      }
+    },
+    getUrl: function () {
+      return `/fr/person/${this.person.id}/general`;
+    },
+    getCurrentHouseholdUrl: function () {
+      let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
+      return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`
     }
+  }
 }
 </script>
 
 <style lang='scss'>
 
-.lastname:before{
-    content: " "
+.lastname:before {
+  content: " "
 }
 
 div.flex-table {
-   div.item-bloc {
-      div.item-row {
-         div.item-col:first-child {
-            width: 33%;
-         }
-         div.item-col:last-child {
-            justify-content: flex-start;
-
-         }
+  div.item-bloc {
+    div.item-row {
+      div.item-col:first-child {
+        width: 33%;
       }
-   }
+
+      div.item-col:last-child {
+        justify-content: flex-start;
+
+      }
+    }
+  }
 }
 
-.age{
-    margin-left: 0.5em;
-    &:before { content: '('; }
-    &:after { content: ')'; }
+.age {
+  margin-left: 0.5em;
+
+  &:before {
+    content: '(';
+  }
+
+  &:after {
+    content: ')';
+  }
 }
 </style>
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -87,6 +87,18 @@
       <label>{{ $t('person.gender.title') }}</label>
    </div>
 
+  <div class="form-floating mb-3" v-if="showCenters && config.centers.length > 1">
+    <select
+         class="form-select form-select-lg"
+         id="center"
+         v-model="center"
+         >
+         <option selected disabled>{{ $t('person.center.placeholder') }}</option>
+         <option v-for="c in config.centers" :value="c" :key="c.id" >{{ c.name }}</option>
+    </select>
+    <label>{{ $t('person.center.title') }}</label>
+  </div>
+
    <div class="form-floating mb-3">
       <select
          class="form-select form-select-lg"
@@ -166,7 +178,7 @@
 </template>
 
 <script>
-import { getCivilities, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
+import { getCentersForPersonCreation, getCivilities, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
 import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
 
@@ -182,13 +194,18 @@ export default {
       return {
          person: {
             type: 'person',
+            lastName: '',
+            firstName: '',
             altNames: [],
-            addressId: null
+            addressId: null,
+            center: null,
          },
          config: {
             altNames: [],
-            civilities: []
+            civilities: [],
+            centers: [],
          },
+         showCenters: false, // NOTE: must remains false if the form is not in create mode
          showAddressFormValue: false,
          addAddress: {
             options: {
@@ -201,7 +218,8 @@ export default {
             context: {
                target: {}, // boilerplate for getting the address id
                edit: false,
-               addressId: null
+               addressId: null,
+               defaults: window.addaddress
             }
          },
          errors: []
@@ -254,6 +272,19 @@ export default {
          set(value) { this.showAddressFormValue = value; },
          get() { return this.showAddressFormValue; }
       },
+      center: {
+         set(value) {
+           console.log('will set center', value);
+           this.person.center = {id: value.id, type: value.type};
+         },
+         get() {
+           const center = this.config.centers.find(c => this.person.center !== null && this.person.center.id === c.id);
+
+           console.log('center get', center);
+
+           return typeof center === 'undefined' ? null : center;
+         },
+      },
       genderClass() {
          switch (this.person.gender) {
             case 'woman':
@@ -295,23 +326,36 @@ export default {
                this.config.civilities = civilities.results;
             }
          });
-
       if (this.action !== 'create') {
          this.loadData();
+      } else {
+        console.log('show centers', this.showCenters);
+        getCentersForPersonCreation()
+            .then(params => {
+              this.config.centers = params.centers;
+              this.showCenters = params.showCenters;
+              console.log('show centers inside', this.showCenters);
+              if (this.showCenters && this.config.centers.length === 1) {
+                this.person.center = this.config.centers[0];
+              }
+            });
       }
    },
    methods: {
       checkErrors(e) {
          this.errors = [];
-         if (!this.person.lastName) {
+         if (this.person.lastName === "") {
             this.errors.push("Le nom ne doit pas être vide.");
          }
-         if (!this.person.firstName) {
+         if (this.person.firstName === "") {
             this.errors.push("Le prénom ne doit pas être vide.");
          }
          if (!this.person.gender) {
             this.errors.push("Le genre doit être renseigné");
          }
+         if (this.showCenters && this.person.center === null) {
+           this.errors.push("Le centre doit être renseigné");
+         }
       },
       loadData() {
          getPerson(this.id)

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js

@@ -47,6 +47,10 @@ const personMessages = {
             create_address: "Ajouter une adresse",
             show_address_form: "Ajouter une adresse pour un usager non suivi et seul dans un ménage",
             warning: "Un nouveau ménage va être créé. L'usager sera membre de ce ménage."
+         },
+         center: {
+            placeholder: "Choisissez un centre",
+            title: "Centre",
          }
       },
       error_only_one_person: "Une seule personne peut être sélectionnée !"

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_join_household.html.twig

@@ -1,7 +1,7 @@
 <div class="alert alert-warning alert-with-actions">
     <div class="float-button bottom">
         <div class="box">
-
+            {% if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_UPDATE', accompanyingCourse) %}
             <div class="action">
                 <ul class="record_actions">
                     <li>
@@ -13,6 +13,8 @@
                     </li>
                 </ul>
             </div>
+            {% endif %}
+
             <p>{{ 'Some peoples does not belong to any household currently. Add them to an household soon'|trans }}</p>
         </div>
     </div>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_warning_address.html.twig

@@ -3,6 +3,7 @@
 <div class="alert alert-danger {% if hasPersonLocation %}alert-with-actions{% endif %}">
     <div class="float-button bottom">
         <div class="box">
+            {% if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_UPDATE', accompanyingCourse) %}
             <div class="action">
                 <ul class="record_actions">
                     <li>
@@ -14,6 +15,7 @@
                     </li>
                 </ul>
             </div>
+            {% endif %}
                 <p>
             {{ 'This course is located at a temporarily address. You should locate this course to an user'|trans }}</p>
             {% if not hasPersonLocation %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/dispatch_list.html.twig

@@ -14,7 +14,7 @@
     {% if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_UPDATE', period) %}
         <div class="item-col item-meta">
             {% set job_id = null %}
-            {% if period.job is defined %}
+            {% if period.job is not null %}
                 {% set job_id = period.job.id %}
             {% endif %}
             <span
@@ -76,7 +76,7 @@
             <div class="flex-table">
                 {% for period in periods %}
                     {% include '@ChillPerson/AccompanyingPeriod/_list_item.html.twig' with {'period': period,
-                        'recordAction': m.period_actions(period), 'itemMeta': m.period_meta(period) } %}
+                        'recordAction': m.period_actions(period), 'itemMeta': m.period_meta(period), 'show_address': true } %}
                 {% endfor %}
             </div>
         {% endif %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig

@@ -1,9 +1,5 @@
 {% extends "@ChillMain/layoutWithVerticalMenu.html.twig" %}
 
-{% block head_custom %}
-<link rel="preload" href="{{ preload(path('chill_api_single_accompanying_course__entity', {'id': accompanyingCourse.id, '_format': 'json' }), {as: 'fetch'}) }}" as="fetch" />
-{% endblock %}
-
 {% block top_banner %}
     {{ include('@ChillPerson/AccompanyingCourse/banner.html.twig', { title: block('title') }) }}
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_item.html.twig

@@ -1,4 +1,11 @@
-<div class="item-bloc accompanying_course_work-item{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+{#
+#  OPTIONS
+#  - itemBlocClass: [uniq|colored|extended]
+#  - displayContent: [short|long] default: short
+#  - displayAction: [true|false] default: false
+#  - displayFontSmall: [true|false] default: false
+#}
+<div class="item-bloc{% if displayContent is defined %} {{ displayContent }}{% endif %}{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
 
     <div class="item-row">
         <h2 class="badge-title">
@@ -15,6 +22,13 @@
                             <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
                             <b>{{ w.endDate|format_date('short') }}</b>
                         </li>
+                    {% else %}
+                        {% if displayContent is defined and displayContent == 'long' %}
+                            <li>
+                                <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
+                                <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                            </li>
+                        {% endif %}
                     {% endif %}
                 </ul>
 
@@ -25,7 +39,7 @@
     <div class="item-row separator">
         <div class="wrap-list">
 
-            {%- if w.persons -%}
+            {%- if w.persons -%}{# Usagers du parcours #}
                 <div class="wl-row">
                     <div class="wl-col title">
                         <h3>{{ 'Persons in accompanying course'|trans }}</h3>
@@ -45,7 +59,7 @@
                 </div>
             {% endif %}
 
-            {%- if w.handlingThierParty -%}
+            {%- if w.handlingThierParty -%}{# Tiers traitant #}
                 <div class="wl-row">
                     <div class="wl-col title">
                         <h3>{{ 'Thirdparty handling'|trans }}</h3>
@@ -62,23 +76,25 @@
                 </div>
             {% endif %}
 
-            {%- if w.referrers -%}
-                <div class="wl-row">
-                    <div class="wl-col title">
-                        <h3>{{ 'Referrers'|trans }}</h3>
-                    </div>
-                    <div class="wl-col list">
+            <div class="wl-row">{# Agents traitants #}
+                <div class="wl-col title">
+                    <h3>{%- if w.referrers|length > 1 -%}{{ 'Referrers'|trans }}{% else %}{{ 'Referrer2'|trans }}{% endif %}</h3>
+                </div>
+                <div class="wl-col list">
+                    {%- if w.referrers|length > 0 -%}
                         {% for u in w.referrers %}
                             <span class="wl-item">
-                                {{ u|chill_entity_render_box }}
+                                <span class="badge-user">{{ u|chill_entity_render_box }}</span>
                                 {% if not loop.last %}, {% endif %}
                             </span>
                         {% endfor %}
-                    </div>
+                    {% else %}
+                        <span class="chill-no-data-statement">{{ 'No referrer'|trans }}</span>
+                    {% endif %}
                 </div>
-            {% endif %}
+            </div>
 
-            {%- if w.socialAction.issue -%}
+            {%- if w.socialAction.issue -%}{# Problématique sociale #}
                 <div class="wl-row">
                     <div class="wl-col title">
                         <h3>{{ 'Social issue'|trans }}</h3>
@@ -94,56 +110,94 @@
         </div>
     </div>
 
-    <div class="item-row column">
-        {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' %}
-    </div>
-
-    <div class="item-row separator">
-        <div class="item-col item-meta">
-            {% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork', w.id) %}
-            {% if notif_counter.total > 0 %}
-                {{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork', w.id) }}
-            {% endif %}
-
-            {% import '@ChillPerson/Macro/updatedBy.html.twig' as macro %}
-            {{ macro.updatedBy(w) }}
+    {% if displayContent is not defined or displayContent == 'short' %}
+        <div class="item-row column{% if displayFontSmall is defined and displayFontSmall == true %} smallfont{% endif %}">
+            {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' with {
+                'displayContent': displayContent
+            } %}
         </div>
+    {% endif %}
 
-        {% if displayAction is defined and displayAction == true %}
-        <ul class="item-col record_actions">
-            {% set suppEvaluations = [] %}
-            {% for e in w.accompanyingPeriodWorkEvaluations %}
-                {% set suppEvaluations = suppEvaluations|merge([
-                    {'relatedEntityClass': 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation', 'relatedEntityId': e.id }
-                ]) %}
+    {% if displayContent is not defined or displayContent == 'short' %}
+        <div class="item-row separator">
 
-                {% for d in e.documents %}
-                    {% set suppEvaluations = suppEvaluations|merge([
-                        {'relatedEntityClass': 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument', 'relatedEntityId': d.id }
-                    ]) %}
-                {% endfor %}
-            {% endfor %}
-            <li>
-                {{ chill_entity_workflow_list(
-                    'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork',
-                    w.id, [], suppEvaluations) }}
-            </li>
-            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', w) %}
+            {% import '@ChillPerson/AccompanyingCourseWork/_macros.html.twig' as macro  %}
+
+            <div class="item-col item-meta">
+                {{ macro.metadata(w) }}
+            </div>
+
+            {% if displayAction is defined and displayAction == true %}
+            <ul class="item-col record_actions">
+                <li>{{ macro.workflowButton(w) }}</li>
                 <li>
-                    <a class="btn btn-edit" title="{{ 'Edit'|trans }}"
-                    href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"
+                    <a class="btn btn-show" title="{{ 'Show'|trans }}"
+                       href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_show', {'id': w.id }) }}"
                     ></a>
                 </li>
+                {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', w) %}
+                    <li>
+                        <a class="btn btn-edit" title="{{ 'Edit'|trans }}"
+                           href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"
+                        ></a>
+                    </li>
+                {% endif %}
+                {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_DELETE', w) %}
+                    <li>
+                        <a class="btn btn-delete" title="{{ 'Delete'|trans }}"
+                           href="{{ path('chill_person_accompanying_period_work_delete', { 'id': w.id } ) }}"
+                        ></a>
+                    </li>
+                {% endif %}
+            </ul>
             {% endif %}
-            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_DELETE', w) %}
-                <li>
-                    <a class="btn btn-delete" title="{{ 'Delete'|trans }}"
-                       href="{{ path('chill_person_accompanying_period_work_delete', { 'id': w.id } ) }}"
-                    ></a>
-                </li>
-            {% endif %}
-        </ul>
-        {% endif %}
-    </div>
+        </div>
+    {% endif %}
 
 </div>
+
+{#
+ #   This is for 'long' version of content
+ #   Note: this include is wrapped in a flex-table container.
+ #   We start by closing the flex-table so we can add more.
+ #   At the end we leave the last flex-table open, as it will be closed in the container.
+#}
+{% if displayContent is defined and displayContent == 'long' %}
+    </div>
+
+    {% if w.results|length > 0 or w.goals|length > 0 or w.accompanyingPeriodWorkEvaluations|length > 0 %}
+        <h2 class="chill-blue">{{ 'Dispositifs' }}</h2>
+
+        <div class="flex-table">{# new flex-table wrapper #}
+            <div class="item-bloc colored{% if displayContent is defined %} {{ displayContent }}{% endif %}{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+                {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' with {
+                    'displayContent': displayContent
+                } %}
+            </div>
+        </div>
+    {% endif %}
+
+    <h2 class="chill-blue">{{ 'Comments'|trans }}</h2>
+
+    <div class="flex-table">
+        <div class="item-bloc no-altern{% if displayContent is defined %} {{ displayContent }}{% endif %}{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+            <h3 class="chill-beige">Public</h3>
+            {% if w.note is not empty %}
+                <blockquote class="chill-user-quote">
+                    {{ w.note|chill_entity_render_box({'metadata': true }) }}
+                </blockquote>
+            {% else %}
+                <span class="chill-no-data-statement">{{ 'No comment associated'|trans }}</span>
+            {% endif %}
+        </div>
+        {% if w.privateComment.hasCommentForUser(app.user) %}
+            <div class="item-bloc no-altern{% if displayContent is defined %} {{ displayContent }}{% endif %}{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+                <h3 class="chill-beige">Privé</h3>
+                <blockquote class="chill-user-quote private-quote">
+                    {{ w.privateComment.commentForUser(app.user)|chill_markdown_to_html }}
+                </blockquote>
+            </div>
+        {% endif %}
+    {# Here flex-table stay open ! read above #}
+
+{% endif %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_macros.html.twig

@@ -0,0 +1,23 @@
+{% macro metadata(w) %}
+    {% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork', w.id) %}
+    {% if notif_counter.total > 0 %}
+        {{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork', w.id) }}
+    {% endif %}
+    {% import '@ChillPerson/Macro/updatedBy.html.twig' as macro %}
+    {{ macro.updatedBy(w) }}
+{% endmacro %}
+
+{% macro workflowButton(w) %}
+    {% set suppEvaluations = [] %}
+    {% for e in w.accompanyingPeriodWorkEvaluations %}
+        {% set suppEvaluations = suppEvaluations|merge([
+            {'relatedEntityClass': 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation', 'relatedEntityId': e.id }
+        ]) %}
+        {% for d in e.documents %}
+            {% set suppEvaluations = suppEvaluations|merge([
+                {'relatedEntityClass': 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument', 'relatedEntityId': d.id }
+            ]) %}
+        {% endfor %}
+    {% endfor %}
+    {{ chill_entity_workflow_list('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork', w.id, [], suppEvaluations) }}
+{% endmacro %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_objectifs_results_evaluations.html.twig

@@ -1,6 +1,9 @@
-
+{#
+#  OPTIONS
+#  - displayContent: [short|long] default: short
+#}
 {% if w.results|length > 0 %}
-    <table class="obj-res-eval my-3">
+    <table class="obj-res-eval">
         <thead>
         <th class="obj"><h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4></th>
         <th class="res"><h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4></th>
@@ -23,7 +26,7 @@
 {% endif %}
 
 {% if w.goals|length > 0 %}
-    <table class="obj-res-eval my-3">
+    <table class="obj-res-eval">
         <thead>
         <th class="obj"><h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4></th>
         <th class="res"><h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4></th>
@@ -54,7 +57,7 @@
 {% endif %}
 
 {% if w.accompanyingPeriodWorkEvaluations|length > 0 %}
-    <table class="obj-res-eval my-3">
+    <table class="obj-res-eval">
         <thead>
         <th class="eval">
             <h4 class="title_label">{{ 'accompanying_course_work.evaluations'|trans }}</h4>
@@ -72,28 +75,89 @@
                                     <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
                                     <b>{{ e.startDate|format_date('short') }}</b>
                                 </li>
+
                                 {% if e.endDate %}
                                     <li>
                                         <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
                                         <b>{{ e.endDate|format_date('short') }}</b>
                                     </li>
+                                {% else %}
+                                    {% if displayContent is defined and displayContent == 'long' %}
+                                        <li>
+                                            <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
+                                            <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                                        </li>
+                                    {% endif %}
                                 {% endif %}
+
                                 {% if e.maxDate %}
                                     <li>
                                         <span class="item-key">{{ 'accompanying_course_work.max_date'|trans ~ ' : ' }}</span>
                                         <b>{{ e.maxDate|format_date('short') }}</b>
                                     </li>
+                                {% else %}
+                                    {% if displayContent is defined and displayContent == 'long' %}
+                                        <li>
+                                            <span class="item-key">{{ 'accompanying_course_work.max_date'|trans ~ ' : ' }}</span>
+                                            <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                                        </li>
+                                    {% endif %}
                                 {% endif %}
+
                                 {% if e.warningInterval and e.warningInterval.d > 0 %}
                                     <li>
                                         {% set days = (e.warningInterval.d + e.warningInterval.m * 30) %}
                                         <span class="item-key">{{ 'accompanying_course_work.warning_interval'|trans ~ ' : ' }}</span>
                                         {{ 'accompanying_course_work.%days% days before max_date'|trans({'%days%': days }) }}
                                     </li>
+                                {% else %}
+                                    {% if displayContent is defined and displayContent == 'long' %}
+                                        <li>
+                                            <span class="item-key">{{ 'accompanying_course_work.warning_interval'|trans ~ ' : ' }}</span>
+                                            <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                                        </li>
+                                    {% endif %}
+                                {% endif %}
+
+                                {% if e.timeSpent is not null and e.timeSpent > 0 %}
+                                    <li>
+                                        {% set minutes = (e.timeSpent / 60) %}
+                                        <span class="item-key">{{ 'accompanying_course_work.timeSpent'|trans ~ ' : ' }}</span> {{ 'duration.minute'|trans({ '{m}' : minutes }) }}
+                                    </li>
+                                {% elseif displayContent is defined and displayContent == 'long' %}
+                                    <li>
+                                        <span class="item-key">{{ 'accompanying_course_work.timeSpent'|trans ~ ' : ' }}</span>
+                                        <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                                    </li>
                                 {% endif %}
                             </ul>
                         </li>
                     </ul>
+                    {% if displayContent is defined and displayContent == 'long' %}
+
+                        {% if e.comment is not empty %}
+                            <blockquote class="chill-user-quote">{{ e.comment|chill_entity_render_box }}</blockquote>
+                        {% endif %}
+
+                        {% import "@ChillDocStore/Macro/macro.html.twig" as m %}
+                        {% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
+
+                        {% if e.documents|length > 0 %}
+                            <table class="table mt-4 mx-auto">
+                                {% for d in e.documents %}
+                                    <tr class="border-0">
+                                        <td class="border-0">{{ d.title }}</td>
+                                        <td class="border-0">{{ mm.mimeIcon(d.storedObject.type) }}</td>
+                                        <td class="border-0 text-end">{{ d.storedObject|chill_document_button_group(d.title, is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', w), {'small': true}) }}</td>
+                                    </tr>
+                                {% endfor %}
+                            </table>
+                        {% else %}
+                            <span class="chill-no-data-statement">{{ 'No document found'|trans }}</span>
+                        {% endif %}
+
+
+                    {% endif %}
                 </td>
             </tr>
         {% endfor %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/create.html.twig

@@ -4,11 +4,11 @@
 
 
 {% block content %}
-<div class="accompanying_course_work-create">
+<div class="accompanying-course-work">
 
-            <h1>{{ block('title') }}</h1>
+    <h1>{{ block('title') }}</h1>
 
-            <div id="accompanying_course_work_create"></div>
+    <div id="accompanying_course_work_create"></div>
 
 </div>
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/delete.html.twig

@@ -6,7 +6,7 @@
 
 {% block content %}
 
-    <div class="accompanying_course_work-list">
+    <div class="accompanying-course-work">
         <h2 class="badge-title">
             <span class="title_label"></span>
             <span class="title_action">{{ work.socialAction|chill_entity_render_string }}</span>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig

@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="accompanying_course_work-edit">
+<div class="accompanying-course-work">
     <h1>{{ block('title') }}</h1>
     <div id="accompanying_course_work_edit"></div>
 </div>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/index.html.twig

@@ -13,16 +13,21 @@
 {% endblock %}
 
 {% block content %}
-    <div class="accompanying_course_work">
+    <div class="accompanying-course-work">
 
         <h1>{{ block('title') }}</h1>
 
         {% if works|length == 0 %}
             <p class="chill-no-data-statement">{{ 'accompanying_course_work.Any work'|trans }}</p>
         {% else %}
-            <div class="flex-table accompanying_course_work-list">
+            <div class="flex-table">
                 {% for w in works %}
-                    {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with { 'displayAction': true } %}
+                    {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with {
+                        'displayAction': true,
+                        'displayContent': 'short',
+                        'displayFontSmall': true,
+                        'itemBlocClass': ''
+                    } %}
                 {% endfor %}
             </div>
         {% endif %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig

@@ -1,4 +1,4 @@
-  <div class="accompanying_course_work-list">
+  <div class="accompanying-course-work">
     {% for w in works | slice(0,5) %}
 
     <a href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"
@@ -33,8 +33,10 @@
                         <span class="item-key">{{ 'Referrers'|trans ~ ' : ' }}</span>
                         {% for u in w.referrers %}
                             <span class="badge-user">{{ u|chill_entity_render_box }}</span>
-                            {% if not loop.last %}, {% endif %}
                         {% endfor %}
+                        {% if w.referrers|length == 0 %}
+                            <span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
+                        {% endif %}
                     </li>
                     {% endif %}
                     <li class="associated-persons">

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/show.html.twig

@@ -0,0 +1,60 @@
+{% extends '@ChillPerson/AccompanyingCourse/layout.html.twig' %}
+
+{% import '@ChillPerson/AccompanyingCourseWork/_macros.html.twig' as macro  %}
+
+{% block title 'accompanying_course_work.Show accompanying course work'|trans %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_entity_workflow_pick') }}
+    {{ encore_entry_link_tags('mod_document_action_buttons_group') }}
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_entity_workflow_pick') }}
+    {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
+{% endblock %}
+
+{% block content %}
+    <div class="accompanying-course-work">
+        <h1>{{ block('title') }}</h1>
+
+        <div class="flex-table mt-4">
+            {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with {
+                'w': work,
+                'displayAction': false,
+                'displayContent': 'long',
+                'itemBlocClass': 'uniq extended',
+            } %}
+            <div class="p-3 mt-3">{{ macro.metadata(work) }}</div>
+        </div>
+
+        <ul class="record_actions sticky-form-buttons">
+            <li class="cancel">
+                <a href="{{ path('chill_person_accompanying_period_work_list', { 'id': accompanyingCourse.id }) }}"
+                   class="btn btn-cancel">{{ 'Back to the list'|trans }}</a>
+            </li>
+            <li>{{ macro.workflowButton(work) }}</li>
+            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', work) %}
+                <li>
+                    <a class="btn btn-edit"
+                       href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': work.id }) }}"
+                    >{{ 'Edit'|trans }}</a>
+                </li>
+            {% endif %}
+            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_DELETE', work) %}
+                <li>
+                    <a class="btn btn-delete"
+                       href="{{ path('chill_person_accompanying_period_work_delete', { 'id': work.id } ) }}"
+                    >{{ 'Delete'|trans }}</a>
+                </li>
+            {% endif %}
+        </ul>
+
+    </div>
+{% endblock %}
+
+{% block block_post_menu %}
+    <div class="post-menu pt-4"></div>
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig

@@ -48,13 +48,66 @@
 {% endmacro %}
 
 {% block content %}
-    <div class="flex-table accompanyingcourse-list">
-        {% for period in accompanying_periods %}
 
+    {# WARNING: this list is rendered in either person context or houshold context #}
+
+    {%- set acps = [] %}
+    {%- set acpsClosed = [] %}
+    {% for acp in accompanying_periods %}
+        {% if acp.step == 'CLOSED' or (person is defined and acp.requestorPerson is not same as(person) and acp.openParticipationContainsPerson(person) is null ) %}
+            {%- set acpsClosed = acpsClosed|merge([acp]) %}
+        {% else %}
+            {%- set acps = acps|merge([acp]) %}
+        {% endif %}
+    {% endfor %}
+
+    <div class="flex-table accompanyingcourse-list">
+        {% for period in acps %}
             {% include 'ChillPersonBundle:AccompanyingPeriod:_list_item.html.twig' with {
                 'recordAction': _self.recordAction(period, contextEntity)
             } %}
-
+        {% else %}
+            <p class="chill-no-data-statement">{{ 'Any accompanying periods are open'|trans }}</p>
         {% endfor %}
     </div>
+
+    {% if acpsClosed|length > 0 %}
+        {% if person is defined %}
+            {% set identifier = person.id %}
+        {% else  %}
+            {% set identifier = household.id %}
+        {% endif %}
+
+        <div class="accordion" id="member_{{ identifier }}">
+            <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_{{ identifier }}">
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapse_{{ identifier }}"
+                        aria-expanded="false"
+                        aria-controls="collapse_{{ identifier }}">
+                        <span class="folded">{{ 'periods.show closed periods'|trans({ 'nb_items': acpsClosed|length }) }}</span>
+                        <span class="unfolded text-secondary">{{ 'periods.hide closed periods'|trans({ 'nb_items': acpsClosed|length }) }}</span>
+                    </button>
+                </h2>
+
+                <div id="collapse_{{ identifier }}"
+                     class="accordion-collapse collapse"
+                     aria-labelledby="heading_{{ identifier }}"
+                     data-bs-parent="#nonCurrent">
+
+                    <div class="flex-table accompanyingcourse-list">
+                        {% for period in acpsClosed %}
+                            {% include 'ChillPersonBundle:AccompanyingPeriod:_list_item.html.twig' with {
+                                'recordAction': _self.recordAction(period, contextEntity)
+                            } %}
+                        {% endfor %}
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    {% endif %}
 {% endblock content %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig

@@ -113,6 +113,16 @@
                         </div>
                     </div>
                 {% endif %}
+                {% if show_address|default(false) and period.location is not null %}
+                    <div class="wl-row">
+                        <div class="wl-col title"><h3>{{ 'Accompanying course location'|trans }}</h3></div>
+                        <div class="wl-col list">
+                                <p class="wl-item">
+                                    {{ period.location|chill_entity_render_string }}
+                                </p>
+                        </div>
+                    </div>
+                {% endif %}
             </div>
         </div>
     {% endif %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/notification_location_user_on_period_has_moved.fr.txt.twig

@@ -3,6 +3,7 @@
 #}{{ period.user.label }},
 
 L'usager {{ oldPersonLocation|chill_entity_render_string }} a déménagé.
+{{ app.user|chill_entity_render_string }} a enregistré ce déménagement.
 
 Son adresse était utilisée pour localiser le parcours n°{{ period.id }}, dont vous êtes
 le référent.

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/reassign_list.html.twig

@@ -5,11 +5,13 @@
 {% block js %}
     {{ encore_entry_script_tags('mod_set_referrer') }}
     {{ encore_entry_script_tags('mod_pickentity_type') }}
+    {{ encore_entry_script_tags('mod_pick_postal_code') }}
 {% endblock %}
 
 {% block css %}
     {{ encore_entry_link_tags('mod_set_referrer') }}
     {{ encore_entry_link_tags('mod_pickentity_type') }}
+    {{ encore_entry_link_tags('mod_pick_postal_code') }}
 {% endblock %}
 
 {% macro period_meta(period) %}
@@ -48,6 +50,8 @@
                 {{ form_start(form) }}
                 {{ form_label(form.user ) }}
                 {{ form_widget(form.user, {'attr': {'class': 'select2'}}) }}
+                {{ form_label(form.postal_code) }}
+                {{ form_widget(form.postal_code) }}
                 <ul class="record_actions">
                     <li>
                         <button type="submit" class="btn btn-misc">
@@ -87,7 +91,7 @@
         <div class="flex-table">
             {% for period in periods %}
                 {% include '@ChillPerson/AccompanyingPeriod/_list_item.html.twig' with {'period': period,
-                    'recordAction': m.period_actions(period), 'itemMeta': m.period_meta(period) } %}
+                    'recordAction': m.period_actions(period), 'itemMeta': m.period_meta(period), 'show_address': true } %}
             {% else %}
                 {% if userFrom is same as(null) %}
                     <p class="chill-no-data-statement">{{ 'period_by_user_list.Pick a user'|trans }}</p>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/user_draft_periods_list.html.twig

@@ -22,6 +22,7 @@
 
     <div class="col-md-10">
         <h1>{{ 'My accompanying periods in draft'|trans }}</h1>
+        <p class="help-text">{{ 'Display draft periods created by me'|trans }}</p>
 
         <div class="flex-table accompanyingcourse-list">
             {% for period in accompanyingPeriods %}
@@ -31,7 +32,9 @@
             {% endfor %}
         </div>
 
-        {{ chill_pagination(pagination) }}
+        {% if accompanyingPeriods|length > 0 %}
+            {{ chill_pagination(pagination) }}
+        {% endif %}
 
     </div>
 

src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig

@@ -4,17 +4,15 @@
 
 {% block content %}
     <h1>{{ block('title') }}</h1>
-
-    <div>
-        {# include vue_address component #}
-        {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
-            targetEntity: { name: 'household', id: household.id },
-            backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
-            openPanesInModal: false,
-            stickyActions: true,
-            useValidFrom: true,
-            useValidTo: true,
-        } %}
-    </div>
+    
+    {# include vue_address component #}
+    {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
+        targetEntity: { name: 'household', id: household.id },
+        backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
+        openPanesInModal: false,
+        stickyActions: true,
+        useValidFrom: true,
+        useValidTo: true,
+    } %}
 
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig

@@ -4,18 +4,14 @@
 
 {% block content %}
     <h1>{{ block('title') }}</h1>
-
-    <div>
-        {# include vue_address component #}
-        {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
-            targetEntity: { name: 'household', id: household.id },
-            backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
-            openPanesInModal: false,
-            stickyActions: true,
-            useValidFrom: true,
-        } %}
-        {#
-        #}
-    </div>
+    
+    {# include vue_address component #}
+    {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
+        targetEntity: { name: 'household', id: household.id },
+        backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
+        openPanesInModal: false,
+        stickyActions: true,
+        useValidFrom: true,
+    } %}
 
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig

@@ -58,7 +58,8 @@
                     {% else %}
                         <span class=" d-block d-sm-inline-block">
                             {{ address|chill_entity_render_box({
-                                'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
+                                'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true,
+                                'details_button': false
                             }) }}
                         </span>
                     {% endif %}

src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig

@@ -23,7 +23,11 @@
             {% if address is empty %}
                 <p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
             {% else %}
-                {{ address|chill_entity_render_box({'multiline': true, 'extended_infos': true }) }}
+                {{ address|chill_entity_render_box({
+                    'multiline': true,
+                    'extended_infos': true,
+                    'details_button': true
+                }) }}
             {% endif %}
 
             <ul class="list-inline text-right mt-2">
@@ -180,10 +184,16 @@
               {% if members|length > 0 %}
                 <div class="flex-table list-household-members">
                   {% for m in members %}
+                    {% if m.position is null or m.position.shareHousehold %}
                       {% include '@ChillPerson/Household/_render_member.html.twig' with {
                           'member': m,
                           'customButtons': { 'before': _self.customButtons(m, household) }
                       } %}
+                    {% else %}
+                        {% include '@ChillPerson/Household/_render_member.html.twig' with {
+                          'member': m,
+                      } %}
+                    {% endif %}
                   {% endfor %}
                 </div>
               {% else %}

src/Bundle/ChillPersonBundle/Resources/views/HouseholdCompositionType/edit.html.twig

@@ -0,0 +1,11 @@
+{% extends '@ChillMain/CRUD/Admin/index.html.twig' %}
+
+{% block title %}
+    {% include('@ChillMain/CRUD/_edit_title.html.twig') %}
+{% endblock %}
+
+{% block admin_content %}
+    {% embed '@ChillMain/CRUD/_edit_content.html.twig' %}
+        {% block content_form_actions_save_and_show %}{% endblock %}
+    {% endembed %}
+{% endblock admin_content %}

src/Bundle/ChillPersonBundle/Resources/views/HouseholdCompositionType/index.html.twig

@@ -0,0 +1,41 @@
+{% extends '@ChillMain/CRUD/Admin/index.html.twig' %}
+
+{% block admin_content %}
+    {% embed '@ChillMain/CRUD/_index.html.twig' %}
+        {% block table_entities_thead_tr %}
+            <th>{{ 'Id'|trans }}</th>
+            <th>{{ 'Label'|trans }}</th>
+            <th>{{ 'Active'|trans }}</th>
+            <th>&nbsp;</th>
+        {% endblock %}
+
+        {% block table_entities_tbody %}
+            {% for entity in entities %}
+                <tr>
+                    <td>{{ entity.id }}</td>
+                    <td>{{ entity.label|localize_translatable_string }}</td>
+                    <td style="text-align:center;">
+						{%- if entity.isActive -%}
+							<i class="fa fa-check-square-o"></i>
+						{%- else -%}
+							<i class="fa fa-square-o"></i>
+						{%- endif -%}
+					</td>
+                    <td>
+                        <ul class="record_actions">
+                            <li>
+                                <a href="{{ chill_path_add_return_path('chill_crud_person_household_composition_type_edit', { 'id': entity.id }) }}" class="btn btn-edit"></a>
+                            </li>
+                        </ul>
+                    </td>
+                </tr>
+             {% endfor %}
+        {% endblock %}
+
+        {% block actions_before %}
+            <li class='cancel'>
+                <a href="{{ path('chill_main_admin_central') }}" class="btn btn-cancel">{{'Back to the admin'|trans}}</a>
+            </li>
+        {% endblock %}
+    {% endembed %}
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/HouseholdCompositionType/new.html.twig

@@ -0,0 +1,12 @@
+{% extends '@ChillMain/CRUD/Admin/index.html.twig' %}
+
+{% block title %}
+    {% include('@ChillMain/CRUD/_new_title.html.twig') %}
+{% endblock %}
+
+{% block admin_content %}
+    {% embed '@ChillMain/CRUD/_new_content.html.twig' %}
+        {% block content_form_actions_save_and_show %}{% endblock %}
+    {% endembed %}
+{% endblock admin_content %}
+

src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig

@@ -19,25 +19,25 @@
     <div id="header-person-details" class="header-details">
         <div class="container-xxl">
             <div class="row justify-content-between">
+                <div class="col-md-12 ps-md-5 ps-xxl-0 container">
+                    <div class="row contact">
 
-                <div class="col-md-12 ps-md-5 ps-xxl-0">
-                    <div class="contact">
                         {% if person.phonenumber %}
-                            <span class="phonenumber d-block d-sm-inline-block">
+                            <span class="col-auto phonenumber">
                                 <i class="fa fa-fw fa-phone"></i>
                                 <a href="{{ 'tel:' ~ person.phonenumber|phone_number_format('E164') }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
                                     {{ person.phonenumber|chill_format_phonenumber }}</a>
                             </span>
                         {% endif %}
                         {% if person.mobilenumber %}
-                            <span class="mobilenumber d-block d-sm-inline-block">
+                            <span class="col-auto mobilenumber">
                                 <i class="fa fa-fw fa-mobile"></i>
                                 <a href="{{ 'tel:' ~ person.mobilenumber|phone_number_format('E164') }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
                                     {{ person.mobilenumber|chill_format_phonenumber }}</a>
                             </span>
                         {% endif %}
                         {% if person.email %}
-                            <span class="email d-block d-sm-inline-block">
+                            <span class="col-auto email">
                                 <i class="fa fa-fw fa-envelope-o"></i>
                                 <a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
                                     {{ person.email }}
@@ -51,23 +51,25 @@
                         {%- elseif person.lastAddress is not empty -%}
                             {% set address = person.lastAddress %}
                         {%- endif -%}
-                        {%- if address is not null -%}
-                            <span class=" d-block d-sm-inline-block">
+
+                        <span class="col-md-auto address">
+                            {%- if address is not null -%}
                                 {{ address|chill_entity_render_box({
-                                    'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
+                                    'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true,
+                                    'details_button': false
                                 }) }}
-                            </span>
-                        {%- endif -%}
-                        {% if person.getCurrentHousehold is not null %}
-                            <span>
-                                <a class="household-link" href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id' : person.getCurrentHousehold.id } ) }}">
-                                    <i class="fa fa-home"></i>
+                            {%- endif -%}
+                            {% if person.getCurrentHousehold is not null %}
+                                <a class="btn household-link text-end"
+                                    href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id' : person.getCurrentHousehold.id } ) }}"
+                                    title="{{ 'Show household'|trans }}">
+                                    <i class="fa fa-lg fa-home"></i>
                                 </a>
-                            </span>
-                        {% endif %}
+                            {% endif %}
+                        </span>
+
                     </div>
                 </div>
-
             </div>
         </div>
     </div>

src/Bundle/ChillPersonBundle/Resources/views/Person/edit.html.twig

@@ -63,6 +63,41 @@
         {%- endif -%}
     </fieldset>
 
+    {%- if form.email is defined or form.phonenumber is defined or form.mobilenumber is defined or form.contactInfo is defined-%}
+        <fieldset>
+            <legend><h2>{{ 'Contact information'|trans }}</h2></legend>
+            {%- if form.email is defined -%}
+                <div id="personEmail">
+                    {{ form_row(form.email, {'label': 'Email'}) }}
+                </div>
+            {% endif %}
+            {%- if form.acceptEmail is defined -%}
+                <div id="personAcceptEmail">
+                    {{ form_row(form.acceptEmail, {'label' : 'Accept emails ?'}) }}
+                </div>
+            {%- endif -%}
+
+            {%- if form.phonenumber is defined -%}
+                {{ form_row(form.phonenumber, {'label': 'Phonenumber'}) }}
+            {%- endif -%}
+            {%- if form.mobilenumber is defined -%}
+                <div id="personPhoneNumber">
+                    {{ form_row(form.mobilenumber, {'label': 'Mobilenumber'}) }}
+                </div>
+                <div id="personAcceptSMS">
+                    {{ form_row(form.acceptSMS, {'label' : 'Accept short text message ?'}) }}
+                </div>
+            {%- endif -%}
+            {%- if form.otherPhoneNumbers is defined -%}
+                {{ form_widget(form.otherPhoneNumbers) }}
+                {{ form_errors(form.otherPhoneNumbers) }}
+            {%- endif -%}
+            {%- if form.contactInfo is defined -%}
+                {{ form_row(form.contactInfo, {'label': 'Notes on contact information'}) }}
+            {%- endif -%}
+        </fieldset>
+    {%- endif -%}
+
     {%- if form.nationality is defined or form.spokenLanguages is defined -%}
     <fieldset>
         <legend><h2>{{ 'Administrative information'|trans }}</h2></legend>
@@ -93,41 +128,6 @@
     </fieldset>
     {%- endif -%}
 
-    {%- if form.email is defined or form.phonenumber is defined or form.mobilenumber is defined or form.contactInfo is defined-%}
-    <fieldset>
-        <legend><h2>{{ 'Contact information'|trans }}</h2></legend>
-        {%- if form.email is defined -%}
-            <div id="personEmail">
-                {{ form_row(form.email, {'label': 'Email'}) }}
-            </div>
-        {% endif %}
-        {%- if form.acceptEmail is defined -%}
-            <div id="personAcceptEmail">
-                {{ form_row(form.acceptEmail, {'label' : 'Accept emails ?'}) }}
-            </div>
-        {%- endif -%}
-
-        {%- if form.phonenumber is defined -%}
-            {{ form_row(form.phonenumber, {'label': 'Phonenumber'}) }}
-        {%- endif -%}
-        {%- if form.mobilenumber is defined -%}
-            <div id="personPhoneNumber">
-                {{ form_row(form.mobilenumber, {'label': 'Mobilenumber'}) }}
-            </div>
-            <div id="personAcceptSMS">
-                {{ form_row(form.acceptSMS, {'label' : 'Accept short text message ?'}) }}
-            </div>
-        {%- endif -%}
-        {%- if form.otherPhoneNumbers is defined -%}
-            {{ form_widget(form.otherPhoneNumbers) }}
-            {{ form_errors(form.otherPhoneNumbers) }}
-        {%- endif -%}
-        {%- if form.contactInfo is defined -%}
-            {{ form_row(form.contactInfo, {'label': 'Notes on contact information'}) }}
-        {%- endif -%}
-    </fieldset>
-    {%- endif -%}
-
     {{ form_rest(form) }}
 
     <ul class="record_actions sticky-form-buttons">

src/Bundle/ChillPersonBundle/Resources/views/Person/household_history.html.twig

@@ -65,18 +65,18 @@
                     <h3>{{ 'household.Members at same time'|trans }}</h3>
                 </div>
                 <div class="wl-col list">
-                    {% set simultaneous = p.household.getMembersDuringMembership(p) %}
+                    {% set simultaneous = p.household.getPersonsDuringMembership(p) %}
                     {% if simultaneous|length == 0 %}
                         <p class="chill-no-data-statement">
                             {{ 'household.Any simultaneous members'|trans }}
                         </p>
                     {% else %}
-                        {% for m in simultaneous -%}
+                        {% for person in simultaneous -%}
                             {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
                                 action: 'show', displayBadge: true,
-                                targetEntity: { name: 'person', id: m.person.id },
-                                buttonText: m.person|chill_entity_render_string,
-                                isDead: m.person.deathdate is not null
+                                targetEntity: { name: 'person', id: person.id },
+                                buttonText: person|chill_entity_render_string,
+                                isDead: person.deathdate is not null
                             } %}
                         {%- endfor -%}
                     {% endif %}

src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig

@@ -1,6 +1,6 @@
 {% macro button_person_after(person) %}
     {% set household = person.getCurrentHousehold %}
-    {% if household is not null %}
+    {% if household is not null and is_granted('CHILL_PERSON_HOUSEHOLD_SEE', household) %}
         <li>
             <a href="{{ path('chill_person_household_summary', { 'household_id': household.id }) }}"
                class="btn btn-sm btn-chill-beige"
@@ -15,6 +15,11 @@
         'args' : { 'person': person }
     }) }}
     
+    {% if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_CREATE', person) %}
+        <li>
+            <a href="{{ path('chill_person_accompanying_course_new', { 'person_id': [ person.id ]}) }}" class="btn btn-sm btn-create change-icon" title="{{ 'Create an accompanying period'|trans }}"><i class="fa fa-random"></i></a>
+        </li>
+    {% endif %}
 {% endmacro %}
 
 {% macro accompanying_period(acp, person) %}
@@ -57,11 +62,13 @@
                             {% endif %}
 
                             {% if acp.step == 'DRAFT' %}
-                                <span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.draft'|trans }}">{{ 'course.draft'|trans }}</span>
-                            {% endif %}
-
-                            {% if acp.step == 'CLOSED' %}
-                                <span class="badge bg-danger" style="font-size: 85%;" title="{{ 'course.closed'|trans }}">{{ 'course.closed'|trans }}</span>
+                                <span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.draft'|trans|e('html_attr') }}">{{ 'course.draft'|trans }}</span>
+                            {% elseif acp.step == 'CLOSED' %}
+                                <span class="badge bg-danger" style="font-size: 85%;" title="{{ 'course.closed'|trans|e('html_attr') }}">{{ 'course.closed'|trans }}</span>
+                            {% elseif acp.step == 'CONFIRMED_INACTIVE_SHORT' %}
+                                <span class="badge bg-chill-yellow text-primary" style="font-size: 85%;" title="{{ 'course.inactive_short'|trans|e('html_attr') }}">{{ 'course.inactive_short'|trans }}</span>
+                            {% elseif acp.step == 'CONFIRMED_INACTIVE_LONG' %}
+                                <span class="badge bg-danger" style="font-size: 85%;" title="{{ 'course.inactive_long'|trans|e('html_attr') }}">{{ 'course.inactive_long'|trans }}</span>
                             {% endif %}
                         </div>
                     </div>
@@ -74,7 +81,7 @@
                         </div>
                         <div class="wl-col list">
                             <div class="user">
-                                {{ acp.user|chill_entity_render_box }}
+                                <span class="badge-user">{{ acp.user|chill_entity_render_box }}</span>
                             </div>
                         </div>
                     </div>
@@ -156,6 +163,24 @@
                     {% endif %}
                 {% endif %}
 
+                {% set calendars = [] -%}
+                {% for c in acp.nextCalendarsForPerson(person, 10) -%}
+                    {% if is_granted('CHILL_CALENDAR_CALENDAR_SEE', c) -%}
+                        {% set calendars = calendars|merge([c]) -%}
+                    {% endif -%}
+                {% endfor -%}
+                {% if calendars|length > 0 %}
+                    <div class="wl-row">
+                        <div class="wl-col title">
+                            <h3>{{ 'chill_calendar.Next calendars'|trans }}</h3>
+                        </div>
+                        <div class="wl-col list">
+                            {% for c in calendars %}<span>{{ c.startDate|format_datetime('long', 'short') }}</span>{% if not loop.last %}, {% endif %}{% endfor %}
+                        </div>
+                    </div>
+
+                {% endif %}
+
                 {% if acp.step == 'CLOSED' and acp.closingMotive is not null %}
                     <div class="wl-row">
                         <div class="wl-col title">
@@ -247,7 +272,8 @@
                     {%- set acpsClosed = [] %}
                     {%- for acp in person.accompanyingPeriodInvolved %}
                         {%- if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_SEE', acp) %}
-                            {% if acp.step == 'CLOSED' %}
+                            {# filter for "current" periods: either the person is a requestor, or is member of the period and not closed #}
+                            {% if acp.step == 'CLOSED' or (acp.requestorPerson is not same as(person) and acp.openParticipationContainsPerson(person) is null ) %}
                                 {%- set acpsClosed = acpsClosed|merge([acp]) %}
                             {% else %}
                                 {%- set acps = acps|merge([acp]) %}

src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/_sidepane.html.twig

@@ -36,7 +36,7 @@
 {%- macro links(person, options) -%}
 <ul>
 
-    <li><b>{{ person.counters.nb_activity }}</b> {{ (person.counters.nb_activity > 1)? 'activités' : 'activité' }}</li>
+    <li><b>{{ person.counters.nb_activity }}</b> {{ (person.counters.nb_activity > 1)? 'échanges' : 'échange' }}</li>
     <li><b>{{ person.counters.nb_task }}</b> {{ (person.counters.nb_task > 1)? 'tâches' : 'tâche' }}</li>
     <li><b>{{ person.counters.nb_document }}</b> {{ (person.counters.nb_document > 1)? 'documents' : 'document' }}</li>
     <li><b>{{ person.counters.nb_event }}</b> {{ (person.counters.nb_event > 1)? 'événements' : 'événement' }}</li>

src/Bundle/ChillPersonBundle/Resources/views/SocialWork/SocialAction/index.html.twig

@@ -3,10 +3,10 @@
 {% block admin_content %}
     {% embed '@ChillMain/CRUD/_index.html.twig' %}
         {% block table_entities_thead_tr %}
-            <th>{{ 'Id'|trans }}</th>
+            <th>{{ 'Id' }}</th>
             <th>{{ 'Title'|trans }}</th>
             <th>{{ 'Social issue'|trans }}</th>
-            <th>{{ 'Ordering'|trans }}</th>
+            <th>{{ 'Order'|trans }}</th>
             <th>{{ 'goal.desactivationDate'|trans }}</th>
             <th>&nbsp;</th>
         {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/SocialWork/SocialIssue/edit.html.twig

@@ -8,15 +8,19 @@
     {% embed '@ChillMain/CRUD/_edit_content.html.twig' %}
 
         {% block crud_content_form_rows %}
-            {% for f in form %}
-                {% if f.vars.name == 'parent' %}
-                    {{ form_row(f, { 'attr':{'disabled':'disabled'}}) }}
-                {% else %}
-                    {{ form_row(f) }}
-                {% endif %}
-            {% endfor %}
+            {{ form_row(form.title) }}
+            <div class="mb-3 row">
+                <label class="col-form-label col-sm-4">
+                    {{ 'Parent'|trans }}
+                </label>
+                <div class="col-sm-8">
+                    {{ entity.parent|chill_entity_render_box }}
+                </div>
+            </div>
+            {{ form_row(form.ordering) }}
+            {{ form_row(form.desactivationDate) }}
         {% endblock crud_content_form_rows %}
 
         {% block content_form_actions_save_and_show %}{% endblock %}
     {% endembed %}
-{% endblock admin_content %}
+{% endblock admin_content %}

src/Bundle/ChillPersonBundle/Resources/views/Workflow/_accompanying_period_work.html.twig

@@ -1,17 +1,24 @@
-<div class="flex-table accompanying_course_work-list">
-    {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with {
-        'w': work,
-        'itemBlocClass': 'bg-chill-llight-gray'
-    } %}
-</div>
-
-{% if display_action is defined and display_action == true %}
-    <ul class="record_actions">
-        <li>
-            <a class="btn btn-update"
-               href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': work.id }) }}">
-                {{ 'Edit'|trans }}
-            </a>
-        </li>
-    </ul>
-{% endif %}
+{% if work is null %}
+    <div class="alert alert-warning">
+        {{ 'workflow.SocialAction deleted'|trans }}
+    </div>
+{% else %}
+    <div class="flex-table accompanying-course-work">
+        {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with {
+            'w': work,
+            'displayAction': false,
+            'displayContent': 'short',
+            'itemBlocClass': 'bg-chill-light-gray'
+        } %}
+    </div>
+    {% if display_action is defined and display_action == true %}
+        <ul class="record_actions">
+            <li>
+                <a class="btn btn-update"
+                   href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': work.id }) }}">
+                    {{ 'Edit'|trans }}
+                </a>
+            </li>
+        </ul>
+    {% endif %}
+{% endif %}

src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation.html.twig

@@ -1,4 +1,4 @@
-<div class="flex-table accompanying_course_work-list">
+<div class="flex-table accompanying-course-work">
     <div class="item-bloc evaluation-item bg-chill-llight-gray">
         <div class="item-row mb-2">
             <h2 class="badge-title">
@@ -21,7 +21,7 @@
             </h2>
         </div>
         <div class="item-row column">
-            <table class="obj-res-eval my-3" style="font-size: 110% !important;">
+            <table class="obj-res-eval my-3">
                 <thead>
                     <tr>
                         <th class="eval">

src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation_document.html.twig

@@ -5,7 +5,7 @@
         {{ 'workflow.doc for evaluation deleted'|trans }}
     </div>
 {% else %}
-    <div class="flex-table accompanying_course_work-list">
+    <div class="flex-table accompanying-course-work">
         <div class="item-bloc evaluation-item bg-chill-llight-gray">
             <div class="item-row mb-2">
                 <h1>{{ doc.title }}</h1>
@@ -49,7 +49,7 @@
                 </div>
             </div>
             <div class="item-row column">
-                <table class="obj-res-eval my-3" style="font-size: 110% !important;">
+                <table class="obj-res-eval my-3">
                     <thead>
                         <tr>
                             <th class="eval">
@@ -120,20 +120,13 @@
     </div>
 
     {% if display_action is defined and display_action == true %}
-        {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', evaluation.accompanyingPeriodWork) %}
         <ul class="record_actions">
-            <li>{{ m.download_button(doc.storedObject, doc.title) }}</li>
-            {% if chill_document_is_editable(doc.storedObject) %}
-                <li>
-                    {{ doc.storedObject|chill_document_edit_button }}
-                </li>
-            {% endif %}
+            <li>{{ doc.storedObject|chill_document_button_group(doc.title, is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', evaluation.accompanyingPeriodWork)) }}</li>
             <li>
                 <a class="btn btn-show" href="{{ path('chill_person_accompanying_period_work_edit', {'id': evaluation.accompanyingPeriodWork.id}) }}">
                     {{ 'Show'|trans }}
                 </a>
             </li>
         </ul>
-        {% endif %}
     {% endif %}
 {% endif %}

src/Bundle/ChillPersonBundle/Resources/views/menu.html.twig

@@ -17,9 +17,13 @@
 
 <div class="list-group vertical-menu {{ 'menu-' ~ menus.name }}">
     {% for menu in menus %}
-        <a class="list-group-item list-group-item-action"
+
+        <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
             href="{{ menu.uri }}">
             {{ menu.label|upper }}
+            {% if menu.extras.counter is defined and menu.extras.counter is not null %}
+                <span class="badge rounded-pill bg-secondary notification-counter">{{ menu.extras.counter }}</span>
+            {% endif %}
         </a>
     {% endfor %}
 </div>