Merge conflicts fixed

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

@@ -80,6 +80,8 @@ div.dashboard {
     }
 }
 div.dashboard,
+h4.badge-title,
+h3.badge-title,
 h2.badge-title {
     display: flex;
     flex-direction: row;
@@ -128,6 +130,8 @@ 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.dashboard,
+    h4.badge-title,
+    h3.badge-title,
     h2.badge-title {
         span.title_label {
             // Calculate same color then border:groove
@@ -143,6 +147,8 @@ div[class*='accompanying_course_work'] {
 /// dashboard_like_badge in Activities on resume page
 div[class*='activity-'] {
     div.dashboard,
+    h4.badge-title,
+    h3.badge-title,
     h2.badge-title {
         span.title_label {
             // Calculate same color then border:groove
@@ -184,5 +190,9 @@ div[class*='activity-'] {
         background-color: $chill-ll-gray;
         color: $chill-blue;
     }
+    &.bg-confidential {
+        background-color: $chill-ll-gray;
+        color: $chill-red;
+    }
 }
 

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

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

src/Bundle/ChillPersonBundle/Resources/public/page/person/suggest-names.js

@@ -0,0 +1,61 @@
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toLocaleUpperCase() + string.slice(1);
+}
+
+window.addEventListener('DOMContentLoaded', function() {
+
+    const uri = decodeURI(location.hash.substring(1))
+    let searchFragments = uri.split(' ')
+    searchFragments = searchFragments.filter((el) => {
+        if ( ( el.startsWith("firstname") || el.startsWith("lastname") ) || (el !== '' && !el.startsWith('birthdate') && !el.startsWith('gender') && !el.startsWith('city') && !el.startsWith('phonenumber') && !el.startsWith('@'))) {
+            return el
+        }
+    })
+
+    searchFragments = searchFragments.map((el) => {
+        if (el.startsWith("firstname")) {
+            return el.slice(10)
+        } else if (el.startsWith("lastname")) {
+            return el.slice(10)
+        }
+        return el.replace('\"', '')
+    })
+
+    if (searchFragments) {
+        const pre = '<ul class="list-suggest add-items inline">';
+        const after = '</ul>';
+
+        document.querySelectorAll('[data-suggest-container]').forEach(function(container) {
+            const suggestions = searchFragments.map((el) => `<li class="suggest-item-name"><span data-suggest-target="${container.dataset.suggestContainer}">${capitalizeFirstLetter(el)}</span></li>`);
+            container.innerHTML = pre + suggestions.join(' ') + after;
+        })
+    }
+
+    const tags = document.querySelectorAll('[data-suggest-target]').forEach((tag) => {
+        tag.addEventListener('click', function(e) {
+            const field = document.querySelector(`[name="${e.target.dataset.suggestTarget}"]`);
+            let suggestion = e.target.textContent.trim();
+            switch (field.dataset.suggestTransform) {
+                case 'uppercase_all':
+                   suggestion = suggestion.toLocaleUpperCase();
+                   break;
+                case 'uppercase_first_letter':
+                default:
+                   suggestion = capitalizeFirstLetter(suggestion);
+            }
+
+            if (field.value === '') {
+                    field.value = suggestion;
+                } else {
+                    field.value = `${field.value} ${suggestion}`
+                }
+                e.target.style.display = "none";
+
+                [...document.querySelectorAll("[data-suggest-target]")]
+                    .filter(p => p.textContent.includes(e.target.textContent))
+                    .forEach(p => p.remove());
+        })
+    })
+
+})
+

src/Bundle/ChillPersonBundle/Resources/public/page/person_resource/showhide-input.js

@@ -0,0 +1,55 @@
+import {ShowHide} from 'ChillMainAssets/lib/show_hide/show_hide.js';
+
+window.addEventListener('DOMContentLoaded', function() {
+    let
+        personContainer = document.querySelector('#person-entity'),
+        entitySelector = document.querySelector('#entity-selector'),
+        freetextContainer = document.querySelector('#freetext-entity'),
+        thirdpartyContainer = document.querySelector('#thirdparty-entity')
+    ;
+    if (null === entitySelector) {
+        return;
+    }
+
+    new ShowHide({
+        debug: false,
+        load_event: null,
+        froms: [entitySelector],
+        container: [personContainer],
+        test: function(froms, event) {
+            for (let container of froms) {
+                return container.querySelector('input[value="person"]').checked;
+            }
+            console.log('we couldnt find the input');
+            return false;
+        },
+    })
+
+    new ShowHide({
+        debug: false,
+        load_event: null,
+        froms: [entitySelector],
+        container: [thirdpartyContainer],
+        test: function(froms, event) {
+            for (let container of froms) {
+                return container.querySelector('input[value="thirdparty"]').checked;
+            }
+            console.log('we couldnt find the input');
+            return false;
+        },
+    })
+
+    new ShowHide({
+        debug: false,
+        load_event: null,
+        froms: [entitySelector],
+        container: [freetextContainer],
+        test: function(froms, event) {
+            for (let container of froms) {
+                return container.querySelector('input[value="freetext"]').checked;
+            }
+            console.log('we couldnt find the input');
+            return false;
+        },
+    })
+});

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

@@ -14,6 +14,7 @@
    <scopes></scopes>
    <referrer></referrer>
    <resources></resources>
+   <start-date v-if="accompanyingCourse.step === 'CONFIRMED'"></start-date>
    <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
    <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
 
@@ -39,6 +40,7 @@ import Referrer from './components/Referrer.vue';
 import Resources from './components/Resources.vue';
 import Comment from './components/Comment.vue';
 import Confirm from './components/Confirm.vue';
+import StartDate from './components/StartDate.vue';
 
 export default {
    name: 'App',
@@ -56,6 +58,7 @@ export default {
       Resources,
       Comment,
       Confirm,
+      StartDate
    },
    computed: {
       ...mapState([

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

@@ -15,21 +15,15 @@ const getAccompanyingCourse = (id) => {
       });
 };
 
-const getUsers = () => {
-   const url = `/api/1.0/main/user.json`;
-
-   return fetchResults(url);
-};
+const getUsers = () => fetchResults('/api/1.0/main/user.json');
 
 const getReferrersSuggested = (course) => {
    const url = `/api/1.0/person/accompanying-course/${course.id}/referrers-suggested.json`;
-
    return fetchResults(url);
 }
 
-/*
-* Endpoint
-*/
+const getUserJobs = () => fetchResults('/api/1.0/main/user-job.json');
+
 const getSocialIssues = () => {
    const url = `/api/1.0/person/social-work/social-issue.json`;
    return fetch(url)
@@ -54,4 +48,5 @@ export {
    getAccompanyingCourse,
    getUsers,
    getReferrersSuggested,
+   getUserJobs
 };

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

@@ -19,6 +19,9 @@
             :options="options"
             group-values="locations"
             group-label="locationCategories"
+            :select-label="$t('multiselect.select_label')"
+            :deselect-label="$t('multiselect.deselect_label')"
+            :selected-label="$t('multiselect.selected_label')"
             @select="updateAdminLocation">
          </VueMultiselect>
       </div>

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

@@ -4,7 +4,7 @@
          <i class="fa fa-home fa-fw text-light" :title="$t('persons_associated.show_household_number', { id: h.id })"></i>
       </a>
       <span v-for="person in h.persons" class="me-1" :key="person.id">
-         <on-the-fly :type="person.type" :id="person.id" :buttonText="person.text" :displayBadge="'true' === 'true'" action="show"></on-the-fly>
+         <on-the-fly :type="person.type" :id="person.id" :buttonText="person.textAge" :displayBadge="'true' === 'true'" action="show"></on-the-fly>
       </span>
    </span>
 </template>

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

@@ -59,9 +59,35 @@
          </template>
          <template v-slot:body>
             <p>{{ $t('confirm.sure_description') }}</p>
+            <div v-if="accompanyingCourse.user === null">
+                <div v-if="filteredReferrersSuggested.length === 0">
+                   <p class="alert alert-warning">{{ $t('confirm.no_suggested_referrer') }}</p>
+                </div>
+                <div v-if="filteredReferrersSuggested.length === 1" class="alert alert-info">
+                   <p>{{ $t('confirm.one_suggested_referrer') }}:</p>
+                   <ul class="list-suggest add-items inline">
+                     <li>
+                       <user-render-box-badge :user="filteredReferrersSuggested[0]"></user-render-box-badge>
+                     </li>
+                   </ul>
+                   <p>{{ $t('confirm.choose_suggested_referrer') }}</p>
+                   <ul class="record_actions">
+                      <li>
+                     <button class="btn btn-save mr-5" @click="chooseSuggestedReferrer">
+                        {{ $t('confirm.choose_button') }}
+                     </button>
+                      </li>
+                      <li>
+                     <button class="btn btn-secondary" @click="doNotChooseSuggestedReferrer">
+                        {{ $t('confirm.do_not_choose_button') }}
+                     </button>
+                     </li>
+                   </ul>
+                </div>
+            </div>
          </template>
          <template v-slot:footer>
-            <button class="btn btn-danger" @click="confirmCourse">
+            <button class="btn btn-danger" :disabled="disableConfirm" @click="confirmCourse">
                {{ $t('confirm.ok') }}
             </button>
          </template>
@@ -74,11 +100,13 @@
 <script>
 import {mapGetters, mapState} from "vuex";
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";
 
 export default {
    name: "Confirm",
    components: {
       Modal,
+      UserRenderBoxBadge
    },
    data() {
       return {
@@ -110,26 +138,38 @@ export default {
             scopes: {
               msg: 'confirm.set_a_scope',
               anchor: '#section-70'
-            }
-         }
+            },
+            job: {
+               msg: 'confirm.job_not_valid',
+               anchor: '#section-80'
+            },
+         },
+         clickedDoNotChooseReferrer: false
       }
    },
    computed: {
-      ...mapState([
-         'accompanyingCourse'
-      ]),
+      ...mapState({
+         accompanyingCourse: state => state.accompanyingCourse,
+         filteredReferrersSuggested: state => state.filteredReferrersSuggested
+      }),
       ...mapGetters([
          'isParticipationValid',
          'isSocialIssueValid',
          'isOriginValid',
          'isAdminLocationValid',
          'isLocationValid',
+         'isJobValid',
          'validationKeys',
          'isValidToBeConfirmed'
       ]),
       deleteLink() {
          return `/fr/parcours/${this.accompanyingCourse.id}/delete`; //TODO locale
       },
+      disableConfirm() {
+         return this.clickedDoNotChooseReferrer
+               ? (this.accompanyingCourse.user === null && this.filteredReferrersSuggested.length === 0)
+               : (this.accompanyingCourse.user === null && this.filteredReferrersSuggested.length === 0) || (this.filteredReferrersSuggested.length === 1);
+      }
    },
    methods: {
       confirmCourse() {
@@ -141,6 +181,19 @@ export default {
                   this.$toast.open({message: 'An error occurred'})
                }
             });
+      },
+      chooseSuggestedReferrer() {
+         this.$store.dispatch('updateReferrer', this.filteredReferrersSuggested[0])
+            .catch(({name, violations}) => {
+               if (name === 'ValidationException' || name === 'AccessException') {
+                  violations.forEach((violation) => this.$toast.open({message: violation}));
+               } else {
+                  this.$toast.open({message: 'An error occurred'})
+               }
+            });
+      },
+      doNotChooseSuggestedReferrer() {
+         this.clickedDoNotChooseReferrer = true;
       }
    }
 }

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

@@ -27,7 +27,7 @@
                   :value="p.person.id"
                />
                <label class="form-check-label">
-                  {{ p.person.text }}
+                  <person-text :person="p.person"></person-text>
                </label>
             </div>
             <input type="hidden" name="expand_suggestions" value="true">
@@ -50,9 +50,9 @@
    <div v-if="suggestedPersons.length > 0">
       <ul class="list-suggest add-items inline">
          <li v-for="p in suggestedPersons" :key="p.id" @click="addSuggestedPerson(p)">
-             <span>{{ p.text }}</span>
-          </li>
-        </ul>
+            <person-text :person="p"></person-text>
+         </li>
+      </ul>
    </div>
 
    <div>
@@ -76,12 +76,14 @@
 import {mapGetters, mapState} from 'vuex';
 import ParticipationItem from "./PersonsAssociated/ParticipationItem.vue";
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 export default {
    name: 'PersonsAssociated',
    components: {
       ParticipationItem,
-      AddPersons
+      AddPersons,
+      PersonText
    },
    data() {
       return {
@@ -110,15 +112,15 @@ export default {
          )
          // filter persons appearing twice in requestor and resources
          .filter(
-             (e, index, suggested) => {
+            (e, index, suggested) => {
                for (let i = 0; i < suggested.length; i = i+1) {
-                 if (i < index && e.id === suggested[i].id) {
-                   return false
-                 }
+                  if (i < index && e.id === suggested[i].id) {
+                     return false
+                  }
                }
 
                return true;
-             }
+            }
          )
       }),
       ...mapGetters([

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

@@ -28,7 +28,7 @@
                </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"></on-the-fly></li>
+            <li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" :canCloseModal="canCloseOnTheFlyModal"></on-the-fly></li>
             <li>
                <button v-if="!participation.endDate"
                   class="btn btn-sm btn-remove"
@@ -63,6 +63,7 @@ import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
 
 export default {
    name: 'ParticipationItem',
@@ -88,7 +89,8 @@ export default {
                addAge: false,
                hLevel: 1
             }
-         }
+         },
+         canCloseOnTheFlyModal: false
       }
    },
    computed: {
@@ -110,14 +112,53 @@ export default {
       saveFormOnTheFly(payload) {
          console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
          payload.target = 'participation';
-         this.$store.dispatch('patchOnTheFly', payload)
-            .catch(({name, violations}) => {
-               if (name === 'ValidationException' || name === 'AccessException') {
-                  violations.forEach((violation) => this.$toast.open({message: violation}));
-               } else {
-                  this.$toast.open({message: 'An error occurred'})
-               }
-            });
+
+         let body = { type: payload.type };
+         if (payload.type === 'person') {
+            body.firstName = payload.data.firstName;
+            body.lastName = payload.data.lastName;
+            if (payload.data.birthdate !== null) { body.birthdate = payload.data.birthdate; }
+            body.phonenumber = payload.data.phonenumber;
+            body.mobilenumber = payload.data.mobilenumber;
+            body.gender = payload.data.gender;
+
+            makeFetch('PATCH', `/api/1.0/person/person/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addPerson', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
+         else if (payload.type === 'thirdparty') {
+            body.name = payload.data.text;
+            body.email = payload.data.email;
+            body.telephone = payload.data.phonenumber;
+            body.address = { id: payload.data.address.address_id };
+
+            makeFetch('PATCH', `/api/1.0/third-party/third-party/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addThirdparty', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
+
       }
    }
 }

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

@@ -3,6 +3,27 @@
    <h2><a id="section-80"></a>{{ $t('referrer.title') }}</h2>
 
    <div>
+
+      <label class="col-form-label" for="selectJob">
+         {{ $t('job.label') }}
+      </label>
+
+      <VueMultiselect
+         name="selectJob"
+         label="text"
+         :custom-label="customJobLabel"
+         track-by="id"
+         :multiple="false"
+         :searchable="true"
+         :placeholder="$t('job.placeholder')"
+         v-model="valueJob"
+         :options="jobs"
+         :select-label="$t('multiselect.select_label')"
+         :deselect-label="$t('multiselect.deselect_label')"
+         :selected-label="$t('multiselect.selected_label')"
+         @select="updateJob">
+      </VueMultiselect>
+
       <label class="col-form-label" for="selectReferrer">
          {{ $t('referrer.label') }}
       </label>
@@ -15,16 +36,16 @@
          :searchable="true"
          :placeholder="$t('referrer.placeholder')"
          v-model="value"
-         v-bind:options="users"
+         :options="users"
          :select-label="$t('multiselect.select_label')"
          :deselect-label="$t('multiselect.deselect_label')"
          :selected-label="$t('multiselect.selected_label')"
          @select="updateReferrer">
       </VueMultiselect>
 
-      <template v-if="referrersSuggested.length > 0">
+      <template v-if="filteredReferrersSuggested.length > 0">
          <ul class="list-suggest add-items inline">
-            <li v-for="(u, i) in referrersSuggested" @click="updateReferrer(u)" :key="`referrer-${i}`">
+            <li v-for="(u, i) in filteredReferrersSuggested" @click="updateReferrer(u)" :key="`referrer-${i}`">
                <span>
                   <user-render-box-badge :user="u"></user-render-box-badge>
                </span>
@@ -47,13 +68,17 @@
       </ul>
    </div>
 
+   <div v-if="!isJobValid" class="alert alert-warning to-confirm">
+      {{ $t('job.not_valid') }}
+   </div>
+
 </div>
 </template>
 
 <script>
 import VueMultiselect from 'vue-multiselect';
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";
 
 export default {
@@ -62,23 +87,33 @@ export default {
      UserRenderBoxBadge,
      VueMultiselect,
    },
+   data() {
+      return {
+         jobs: []
+      }
+   },
    computed: {
       ...mapState({
          value: state => state.accompanyingCourse.user,
-         users: state => state.users,
-         referrersSuggested: state => {
-           return state.referrersSuggested.filter(u => {
-             if (null === state.accompanyingCourse.user) {
-               return true;
-             }
-             return state.accompanyingCourse.user.id !== u.id;
-           })
-         },
+         valueJob: state => state.accompanyingCourse.job,
+         users: state => state.users.filter(u => {
+            if (u.user_job && state.accompanyingCourse.job) {
+                return u.user_job.id === state.accompanyingCourse.job.id;
+            } else {
+               return false;
+            }
+         }),
+         filteredReferrersSuggested: state => state.filteredReferrersSuggested,
       }),
+      ...mapGetters([
+         'isJobValid'
+      ])
+   },
+   mounted() {
+      this.getJobs();
    },
    methods: {
       updateReferrer(value) {
-         //console.log('value', value);
          this.$store.dispatch('updateReferrer', value)
             .catch(({name, violations}) => {
                if (name === 'ValidationException' || name === 'AccessException') {
@@ -88,6 +123,29 @@ export default {
                }
             });
       },
+      getJobs() {
+         const url = '/api/1.0/main/user-job.json';
+         makeFetch('GET', url)
+            .then(response => {
+               this.jobs  = response.results;
+            })
+            .catch((error) => {
+               this.$toast.open({message: error.txt})
+            })
+      },
+      updateJob(value) {
+         this.$store.dispatch('updateJob', 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'})
+               }
+            });
+      },
+      customJobLabel(value) {
+          return value.label.fr;
+      },
       assignMe() {
          const url = `/api/1.0/main/whoami.json`;
          makeFetch('GET', url)

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

@@ -45,7 +45,8 @@
                   addInfo: true,
                   hLevel: 3,
                   isMultiline: true,
-                  isConfidential: false
+                  isConfidential: false,
+                  addAge: true,
                   }"
             >
                <template v-slot:record-actions>
@@ -113,7 +114,7 @@
          <template v-slot:record-actions>
             <ul class="record_actions">
                <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
-               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly"></on-the-fly></li>
+               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" :canCloseModal="canCloseOnTheFlyModal"></on-the-fly></li>
             </ul>
          </template>
       </person-render-box>
@@ -136,9 +137,10 @@
    <div v-if="accompanyingCourse.requestor === null && suggestedEntities.length > 0">
       <ul class="list-suggest add-items inline">
          <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
-             <span>{{ p.text }}</span>
-          </li>
-        </ul>
+            <person-text v-if="p.type === 'person'" :person="p"></person-text>
+            <span v-else>{{ p.text }}</span>
+         </li>
+      </ul>
    </div>
 
    <div>
@@ -162,6 +164,9 @@ import PersonRenderBox from '../../_components/Entity/PersonRenderBox.vue';
 import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import { mapState } from 'vuex';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+
 
 export default {
    name: 'Requestor',
@@ -170,7 +175,8 @@ export default {
       OnTheFly,
       PersonRenderBox,
       ThirdPartyRenderBox,
-      Confidential
+      Confidential,
+      PersonText
    },
    props: ['isAnonymous'],
    data() {
@@ -182,7 +188,8 @@ export default {
                priority: null,
                uniq: true,
             }
-         }
+         },
+         canCloseOnTheFlyModal: false
       }
    },
    computed: {
@@ -246,14 +253,52 @@ export default {
       saveFormOnTheFly(payload) {
          console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
          payload.target = 'requestor';
-         this.$store.dispatch('patchOnTheFly', payload)
-            .catch(({name, violations}) => {
-               if (name === 'ValidationException' || name === 'AccessException') {
-                  violations.forEach((violation) => this.$toast.open({message: violation}));
-               } else {
-                  this.$toast.open({message: 'An error occurred'})
-               }
-            });
+
+         let body = { type: payload.type };
+         if (payload.type === 'person') {
+            body.firstName = payload.data.firstName;
+            body.lastName = payload.data.lastName;
+            if (payload.data.birthdate !== null) { body.birthdate = payload.data.birthdate; }
+            body.phonenumber = payload.data.phonenumber;
+            body.mobilenumber = payload.data.mobilenumber;
+            body.gender = payload.data.gender;
+
+            makeFetch('PATCH', `/api/1.0/person/person/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addPerson', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
+         else if (payload.type === 'thirdparty') {
+            body.name = payload.data.text;
+            body.email = payload.data.email;
+            body.telephone = payload.data.phonenumber;
+            body.address = { id: payload.data.address.address_id };
+
+            makeFetch('PATCH', `/api/1.0/third-party/third-party/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addThirdparty', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
       },
       addSuggestedEntity(e) {
          this.$store.dispatch('addRequestor', { result: e, type: e.type })

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

@@ -22,7 +22,8 @@
    <div v-if="suggestedEntities.length > 0">
       <ul class="list-suggest add-items inline">
          <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
-            <span>{{ p.text }}</span>
+            <person-text v-if="p.type === 'person'" :person="p"></person-text>
+            <span v-else>{{ p.text }}</span>
          </li>
       </ul>
    </div>
@@ -45,12 +46,15 @@
 import { mapState } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import ResourceItem from './Resources/ResourceItem.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+
 
 export default {
    name: 'Resources',
    components: {
       AddPersons,
-      ResourceItem
+      ResourceItem,
+      PersonText
    },
    data() {
       return {

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

@@ -34,7 +34,8 @@
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="edit"
-                  @saveFormOnTheFly="saveFormOnTheFly">
+                  @saveFormOnTheFly="saveFormOnTheFly"
+                  :canCloseModal="canCloseOnTheFlyModal">
                </on-the-fly>
             </li>
             <li>
@@ -80,7 +81,8 @@
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="edit"
-                  @saveFormOnTheFly="saveFormOnTheFly">
+                  @saveFormOnTheFly="saveFormOnTheFly"
+                  :canCloseModal="canCloseOnTheFlyModal">
                </on-the-fly>
             </li>
             <li>
@@ -101,6 +103,7 @@ import ButtonLocation from '../ButtonLocation.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 import WriteComment from './WriteComment';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
 
 export default {
    name: 'ResourceItem',
@@ -113,6 +116,11 @@ export default {
    },
    props: ['resource'],
    emits: ['remove'],
+   data() {
+      return {
+         canCloseOnTheFlyModal: false
+      }
+   },
    computed: {
       parent() {
          return {
@@ -136,14 +144,52 @@ export default {
       saveFormOnTheFly(payload) {
          console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
          payload.target = 'resource';
-         this.$store.dispatch('patchOnTheFly', payload)
-            .catch(({name, violations}) => {
-               if (name === 'ValidationException' || name === 'AccessException') {
-                  violations.forEach((violation) => this.$toast.open({message: violation}));
-               } else {
-                  this.$toast.open({message: 'An error occurred'})
-               }
-            });
+
+         let body = { type: payload.type };
+         if (payload.type === 'person') {
+            body.firstName = payload.data.firstName;
+            body.lastName = payload.data.lastName;
+            if (payload.data.birthdate !== null) { body.birthdate = payload.data.birthdate; }
+            body.phonenumber = payload.data.phonenumber;
+            body.mobilenumber = payload.data.mobilenumber;
+            body.gender = payload.data.gender;
+
+            makeFetch('PATCH', `/api/1.0/person/person/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addPerson', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
+         else if (payload.type === 'thirdparty') {
+            body.name = payload.data.text;
+            body.email = payload.data.email;
+            body.telephone = payload.data.phonenumber;
+            body.address = { id: payload.data.address.address_id };
+
+            makeFetch('PATCH', `/api/1.0/third-party/third-party/${payload.data.id}.json`, body)
+               .then(response => {
+                  this.$store.dispatch('addThirdparty', { target: payload.target, body: response })
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                         this.$toast.open({message: v });
+                     }
+                  } else {
+                      this.$toast.open({message: 'An error occurred'});
+                  }
+               })
+         }
       },
       updateComment(resource) {
          console.log('updateComment', resource);

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

@@ -7,7 +7,7 @@
         -->
         <VueMultiselect
            name="field"
-           :close-on-select="false"
+           :close-on-select="true"
            :allow-empty="true"
            :show-labels="false"
            track-by="id"

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

@@ -0,0 +1,46 @@
+<template>
+<div class="vue-component">
+    <h2><a id="section-110"></a>
+        {{ $t('startdate.change') }}
+    </h2>
+    <div>
+        <div class="mb-3 row">
+            <label class="col-form-label col-sm-4">{{ $t('startdate.date') }}</label>
+            <div class="col-sm-8">
+                <input class="form-control" type="date" v-model="startDate" @change="updateStartDate" />
+            </div>
+        </div>
+    </div>
+</div>
+
+</template>
+
+<script>
+
+import { datetimeToISO, dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
+import { mapState, mapGetters } from 'vuex';
+
+export default {
+    name: 'startDate',
+    methods: {
+        updateStartDate(event) {
+            const date = event.target.value;
+            // console.log(date)
+            this.$store.dispatch('updateStartDate', date)
+                .catch(({name, violations}) => {
+                    if (name === 'ValidationException' || name === 'AccessException') {
+                        violations.forEach((violation) => this.$toast.open({message: violation}));
+                    } else {
+                        this.$toast.open({message: 'An error occurred'})
+                    }
+            });
+        },
+    },
+    computed: {
+        ...mapState({
+            startDate: state => dateToISO(ISOToDatetime(state.accompanyingCourse.openingDate.datetime))
+        })
+    }
+}
+
+</script>

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

@@ -13,7 +13,7 @@ const root = window.vueRootComponent;
 *  Load all App component, for AccompanyingCourse edition page
 */
 if (root === 'app') {
-   initPromise.then(store => {
+   initPromise(root).then(store => {
 
       const i18n = _createI18n(appMessages);
 
@@ -37,7 +37,7 @@ if (root === 'app') {
 *  Load only Banner sub-component, for all others AccompanyingCourse page
 */
 if (root === 'banner') {
-   initPromise.then(store => {
+   initPromise(root).then(store => {
 
       const i18n = _createI18n(appMessages);
 

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

@@ -102,7 +102,7 @@ const appMessages = {
          no_address: "Il n'y a pas d'adresse associée au parcours"
       },
       scopes: {
-         title: "Services",
+         title: "Services concernés",
          add_at_least_one: "Indiquez au moins un service",
       },
       referrer: {
@@ -134,11 +134,26 @@ const appMessages = {
          location_not_valid: "indiquez au minimum une localisation temporaire du parcours",
          origin_not_valid: "Indiquez une origine à la demande",
          adminLocation_not_valid: "Indiquez une localisation administrative à la demande",
+         job_not_valid: "Indiquez un métier du référent",
          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 !",
          ok: "Confirmer le parcours",
-         delete: "Supprimer le parcours"
+         delete: "Supprimer le parcours",
+         no_suggested_referrer: "Il n'y a aucun référent qui puisse être désigné pour ce parcours. Vérifiez la localisation du parcours, les métiers et service indiqués. Si le problème persiste, contactez l'administrateur du logiciel.",
+         one_suggested_referrer: "Un unique référent peut être suggéré pour ce parcours",
+         choose_suggested_referrer: "Voulez-vous le désigner directement ?",
+         choose_button: "Désigner",
+         do_not_choose_button: "Ne pas désigner"
+      },
+      job: {
+         label: "Métier",
+         placeholder: "Choisir un métier",
+         not_valid: "Sélectionnez un métier du référent"
+      },
+      startdate: {
+         change: "Date d'ouverture",
+         date: "Date d'ouverture",
       },
       // catch errors
       'Error while updating AccompanyingPeriod Course.': "Erreur du serveur lors de la mise à jour du parcours d'accompagnement.",

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

@@ -8,15 +8,20 @@ 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';
 
 
 const debug = process.env.NODE_ENV !== 'production';
 const id = window.accompanyingCourseId;
 
-let scopesPromise = fetchScopes();
+let getScopesPromise = (root) => {
+   if (root === 'app') {
+      return fetchScopes();
+   }
+}
 let accompanyingCoursePromise = getAccompanyingCourse(id);
 
-let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
+let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCoursePromise])
   .then(([scopes, accompanyingCourse]) => new Promise((resolve, reject) => {
 
       const store = createStore({
@@ -35,6 +40,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             scopesAtBackend: accompanyingCourse.scopes.map(scope => scope),
             // the users which are available for referrer
             referrersSuggested: [],
+            filteredReferrersSuggested: [],
             // all the users available
             users: [],
             permissions: {}
@@ -55,6 +61,9 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             isLocationValid(state) {
                return state.accompanyingCourse.location !== null;
             },
+            isJobValid(state) {
+               return state.accompanyingCourse.job !== null;
+            },
             isScopeValid(state) {
                //console.log('is scope valid', state.accompanyingCourse.scopes.length > 0);
                return state.accompanyingCourse.scopes.length > 0;
@@ -63,6 +72,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                let keys = [];
                if (!getters.isParticipationValid) { keys.push('participation'); }
                if (!getters.isLocationValid) { keys.push('location'); }
+               if (!getters.isJobValid) { keys.push('job'); }
                if (!getters.isSocialIssueValid) { keys.push('socialIssue'); }
                if (!getters.isOriginValid) { keys.push('origin'); }
                if (!getters.isAdminLocationValid) { keys.push('adminLocation'); }
@@ -193,6 +203,9 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                //console.log('value', value);
                state.accompanyingCourse.user = value;
             },
+            updateJob(state, value) {
+               state.accompanyingCourse.job = value;
+            },
             setReferrersSuggested(state, users) {
                state.referrersSuggested = users.map(u => {
                   if (state.accompanyingCourse.user !== null) {
@@ -203,6 +216,22 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                   return u;
                });
             },
+            setFilteredReferrersSuggested(state) {
+               state.filteredReferrersSuggested = state.referrersSuggested.filter(u => {
+                  if (u.user_job && state.accompanyingCourse.job && state.accompanyingCourse.user) {
+                      return u.user_job.id === state.accompanyingCourse.job.id && state.accompanyingCourse.user.id !== u.id
+                  } else {
+                     if (null === state.accompanyingCourse.user) {
+                         if (u.user_job && state.accompanyingCourse.job) {
+                            return u.user_job.id === state.accompanyingCourse.job.id
+                         } else {
+                            return true;
+                         }
+                     }
+                     return state.accompanyingCourse.user.id !== u.id;
+                  }
+               })
+            },
             confirmAccompanyingCourse(state, response) {
                //console.log('### mutation: confirmAccompanyingCourse: response', response);
                state.accompanyingCourse.step = response.step;
@@ -254,6 +283,10 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                if (scopeIds.includes(scope.id)) {
                   state.scopesAtBackend = state.scopesAtBackend.filter(s => s.id !== scope.id);
                }
+            },
+            updateStartDate(state, date) {
+               console.log('new state date', date)
+               state.accompanyingCourse.openingDate = date;
             }
          },
          actions: {
@@ -262,6 +295,12 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                commit('removeParticipation', payload);
                // fetch DELETE request...
             },
+            addPerson({ commit }, payload) {
+               commit('updatePerson', { target: payload.target, person: payload.body });
+            },
+            addThirdparty({ commit }, payload) {
+               commit('updateThirdparty', { target: payload.target, thirdparty: payload.body });
+            },
             /**
              * Add/close participation
              */
@@ -624,8 +663,8 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                   })
             },
             updateOrigin({ commit }, payload) {
-               const url = `/api/1.0/person/accompanying-course/${id}.json`
-               const body = { type: "accompanying_period", origin: { id: payload.id, type: payload.type }}
+               const url = `/api/1.0/person/accompanying-course/${id}.json`;
+               const body = { type: "accompanying_period", origin: { id: payload.id, type: payload.type }};
 
                return makeFetch('PATCH', url, body)
                   .then((response) => {
@@ -637,8 +676,8 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                   })
             },
             updateAdminLocation({ commit }, payload) {
-               const url = `/api/1.0/person/accompanying-course/${id}.json`
-               const body = { type: "accompanying_period", administrativeLocation: { id: payload.id, type: payload.type }}
+               const url = `/api/1.0/person/accompanying-course/${id}.json`;
+               const body = { type: "accompanying_period", administrativeLocation: { id: payload.id, type: payload.type }};
 
                return makeFetch('PATCH', url, body)
                   .then((response) => {
@@ -650,12 +689,42 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                   })
             },
             updateReferrer({ commit }, payload) {
-               const url = `/api/1.0/person/accompanying-course/${id}.json`
-               const body = { type: "accompanying_period", user: { id: payload.id, type: payload.type }}
+               const url = `/api/1.0/person/accompanying-course/${id}.json`;
+               const body = { type: "accompanying_period", user: { id: payload.id, type: payload.type }};
 
                return makeFetch('PATCH', url, body)
                   .then((response) => {
                      commit('updateReferrer', response.user);
+                     commit('setFilteredReferrersSuggested');
+                  })
+                  .catch((error) => {
+                     commit('catchError', error);
+                     throw error;
+                  })
+            },
+            updateJob({ commit }, payload) {
+               const url = `/api/1.0/person/accompanying-course/${id}.json`;
+               const body = { type: "accompanying_period", job: { id: payload.id, type: payload.type }};
+
+               return makeFetch('PATCH', url, body)
+                  .then((response) => {
+                     commit('updateJob', response.job);
+                     commit('setFilteredReferrersSuggested');
+                  })
+                  .catch((error) => {
+                     commit('catchError', error);
+                     throw error;
+                  })
+            },
+            updateStartDate({commit}, payload) {
+               console.log('payload', payload)
+               const date = ISOToDate(payload);
+               const url = `/api/1.0/person/accompanying-course/${id}.json`;
+               const body = { type: "accompanying_period", openingDate: { datetime: datetimeToISO(date) }};
+               console.log('body', body)
+               return makeFetch('PATCH', url, body)
+                  .then((response) => {
+                     commit('updateStartDate', response.openingDate);
                   })
                   .catch((error) => {
                      commit('catchError', error);
@@ -665,11 +734,12 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             async fetchReferrersSuggested({ state, commit}) {
                let users = await getReferrersSuggested(state.accompanyingCourse);
                commit('setReferrersSuggested', users);
+               commit('setFilteredReferrersSuggested');
                if (
-                 null === state.accompanyingCourse.user
-                 && !state.accompanyingCourse.confidential
-                 && !state.accompanyingCourse.step === 'DRAFT'
-                 && users.length === 1
+                  null === state.accompanyingCourse.user
+                  && !state.accompanyingCourse.confidential
+                  && !state.accompanyingCourse.step === 'DRAFT'
+                  && users.length === 1
                ) {
                   // set the user if unique
                   commit('updateReferrer', users[0]);
@@ -750,8 +820,11 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
          }
       });
 
-      store.dispatch('fetchReferrersSuggested');
-      store.dispatch('fetchUsers');
+      if (root === 'app') {
+         store.dispatch('fetchReferrersSuggested');
+         store.dispatch('fetchUsers');
+      }
+
       resolve(store);
    }));
 

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

@@ -5,7 +5,7 @@
 
   <div id="awc_create_form">
 
-      <div id="picking">
+      <div id="picking" class="">
           <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
           <div v-for="si in socialIssues" :key="si.id">
             <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
@@ -33,7 +33,7 @@
           </vue-multiselect>
         </div>
       </div>
-      <div v-if="hasSocialIssuePicked">
+      <div v-if="hasSocialIssuePicked" class="mb-3">
         <h2>{{ $t('pick_an_action') }}</h2>
         <div class="col-11">
           <vue-multiselect
@@ -52,26 +52,43 @@
         <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
       </div>
 
-      <div v-if="hasSocialActionPicked" id="persons">
+      <div v-if="hasSocialActionPicked" id="persons" class="mb-5">
         <h2>{{ $t('persons_involved') }}</h2>
 
         <ul>
           <li v-for="p in personsReachables" :key="p.id">
-            <input type="checkbox" :value="p.id" v-model="personsPicked">
-            <person-render-box render="badge" :options="{}" :person="p"></person-render-box>
+            <div class="form-check">
+              <input type="checkbox" :value="p.id" v-model="personsPicked" class="form-check-input" :id="'person_check'+p.id">
+              <label class="form-check-label" :for="'person_check' + p.id">
+                <person-text :person="p"></person-text>
+              </label>
+            </div>
           </li>
         </ul>
       </div>
 
     </div>
-    <div v-if="hasSocialActionPicked" id="start_date">
+    <!-- <div v-if="hasSocialActionPicked" id="start_date">
       <p><label>{{ $t('startDate') }}</label> <input type="date" v-model="startDate" /></p>
+    </div> -->
+    <div class="row">
+    <div v-if="hasSocialActionPicked" id="start_date" class="mb-3 row">
+      <label class="col-form-label col-sm-4">{{ $t('startDate') }}</label>
+      <div class="col-sm-8">
+          <input class="form-control" type="date" v-model="startDate"/>
+      </div>
     </div>
 
-    <div v-if="hasSocialActionPicked" id="end_date">
+    <!-- <div v-if="hasSocialActionPicked" id="end_date">
       <p><label>{{ $t('endDate') }}</label> <input type="date" v-model="endDate" /></p>
+    </div> -->
+    <div v-if="hasSocialActionPicked" id="end_date" class="mb-3 row">
+      <label class="col-form-label col-sm-4">{{ $t('endDate') }}</label>
+      <div class="col-sm-8">
+          <input class="form-control" type="date" v-model="endDate"/>
+      </div>
+    </div>
     </div>
-
     <div id="confirm">
       <div v-if="hasErrors">
         <p>{{ $t('form_has_errors') }}</p>
@@ -111,7 +128,7 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import VueMultiselect from 'vue-multiselect';
 import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
-import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 const i18n = {
   messages: {
@@ -133,7 +150,7 @@ export default {
   name: 'App',
   components: {
     VueMultiselect,
-    PersonRenderBox,
+    PersonText,
   },
   methods: {
     submit() {

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

@@ -141,10 +141,12 @@
 
          <ul class="list-unstyled">
             <li v-for="p in personsReachables" :key="p.id">
-               <label :for="p.id">
-                  <input v-model="personsPicked" :value="p.id" :id="p.id" type="checkbox" class="me-2">
-                  {{ p.text }}
+              <div class="form-check">
+                <input v-model="personsPicked" :value="p.id" type="checkbox" class="me-2 form-check-input" :id="'person_check'+p.id">
+                <label :for="'person_check'+p.id" class="form-check-label">
+                  <person-text :person="p"></person-text>
                </label>
+              </div>
             </li>
          </ul>
       </div>
@@ -233,18 +235,6 @@
          </ul>
       </div>
 
-   <div>
-      <pick-template
-         entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
-         :templates="this.templatesAvailablesForAction"
-         :entityId="work.id"
-         :beforeMove="beforeGenerateTemplate">
-      <template v-slot:title>
-         <h3>{{ $t('Generate doc') }}</h3>
-      </template>
-      </pick-template>
-   </div>
-
       <div v-if="errors.length > 0" id="errors" class="alert alert-danger flashbag">
          <p>{{ $t('fix_these_errors') }}</p>
          <ul>
@@ -253,7 +243,17 @@
       </div>
 
    </div>
-   <ul class="record_actions sticky-form-buttons">
+  <ul class="record_actions sticky-form-buttons">
+    <li>
+       <list-workflow-modal
+          :workflows="this.work.workflows"
+          :allowCreate="true"
+          relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
+          :relatedEntityId="this.work.id"
+          :workflowsAvailables="this.work.workflows_availables"
+          @go-to-generate-workflow="goToGenerateWorkflow"
+       ></list-workflow-modal>
+    </li>
 
       <li v-if="!isPosting">
          <button class="btn btn-save" @click="submit">
@@ -282,6 +282,10 @@ import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRe
 import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
+import ListWorkflowModal from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue';
+import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
 
 const i18n = {
    messages: {
@@ -329,7 +333,10 @@ export default {
       AddressRenderBox,
       ThirdPartyRenderBox,
       PickTemplate,
-      OnTheFly
+      ListWorkflowModal,
+      OnTheFly,
+      PickWorkflow,
+      PersonText,
    },
    i18n,
    data() {
@@ -359,11 +366,11 @@ export default {
                   display: false
                }
             },
-         }
+         },
       };
    },
-   computed: {
-      ...mapState([
+  computed: {
+    ...mapState([
          'work',
          'resultsForAction',
          'evaluationsForAction',
@@ -455,13 +462,18 @@ export default {
       removeThirdParty(t) {
          this.$store.commit('removeThirdParty', t);
       },
+      goToGenerateWorkflow({link}) {
+        console.log('save before leave to generate workflow')
+        const callback = (data) => {
+          window.location.assign(link);
+        };
+
+        return this.$store.dispatch('submit', callback)
+            .catch(e => { console.log(e); throw e; });
+      },
       submit() {
          this.$store.dispatch('submit');
       },
-      beforeGenerateTemplate() {
-         console.log('before generate');
-         return Promise.resolve();
-      },
       saveFormOnTheFly(payload) {
          console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
          payload.target = 'resource';

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

@@ -1,12 +1,26 @@
 <template>
    <div>
-      <div class="item-title">
+      <a id="evaluations"></a>
+      <div class="item-title" :title="evaluation.id || 'no id yet'">
          <span>{{ evaluation.evaluation.title.fr }}</span>
       </div>
 
       <div>
          <form-evaluation ref="FormEvaluation" :key="evaluation.key" :evaluation="evaluation"></form-evaluation>
-         <ul class="record_actions">
+
+        <ul class="record_actions">
+           <li v-if="evaluation.workflows_availables.length > 0">
+
+              <list-workflow-modal
+                 :workflows="evaluation.workflows"
+                 :allowCreate="true"
+                 relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+                 :relatedEntityId="evaluation.id"
+                 :workflowsAvailables="evaluation.workflows_availables"
+                 @go-to-generate-workflow="goToGenerateWorkflow"
+             ></list-workflow-modal>
+
+           </li>
             <li>
                <a class="btn btn-delete" @click="modal.showModal = true" :title="$t('action.delete')"></a>
             </li>
@@ -34,6 +48,8 @@
 <script>
 import FormEvaluation from './FormEvaluation.vue';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import ListWorkflowModal from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue';
+import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
 
 const i18n = {
    messages: {
@@ -60,7 +76,8 @@ export default {
    name: "AddEvaluation",
    components: {
       FormEvaluation,
-      Modal
+      Modal,
+      ListWorkflowModal,
    },
    props: ['evaluation'],
    i18n,
@@ -88,10 +105,18 @@ export default {
       submitForm() {
          this.toggleEditEvaluation();
       },
-      buildEditLink(storedObject) {
-         return `/edit/${storedObject.uuid}?returnPath=` + encodeURIComponent(
-            window.location.pathname + window.location.search + window.location.hash);
-      },
+      goToGenerateWorkflow({event, link, workflowName}) {
+        console.log('goToGenerate in evaluation', event, link, workflowName);
+
+        const callback = (data) => {
+          let evaluationId = data.accompanyingPeriodWorkEvaluations.find(e => e.key === this.evaluation.key).id;
+          window.location.assign(buildLinkCreate(workflowName,
+              'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation', evaluationId));
+        };
+
+        return this.$store.dispatch('submit', callback)
+            .catch(e => { console.log(e); throw e; });
+      }
    }
 }
 </script>

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

@@ -61,12 +61,39 @@
          </div>
       </div>
 
+     <div v-if="evaluation.documents.length > 0" class="row mb-3">
+       <h5>{{ $t('Documents') }} :</h5>
+
+       <div class="flex-table">
+         <div class="item-bloc" v-for="d in evaluation.documents">
+           <div class="item-row">
+             <div class="item-col"><h6>{{ d.template.name.fr }}</h6></div>
+             <div class="item-col">
+               <p>Créé par {{ d.createdBy.text }}<br/>
+               Le {{ $d(ISOToDatetime(d.createdAt.datetime), 'long') }}</p>
+
+             </div>
+           </div>
+           <div class="item-row">
+            <ul class="record_actions" >
+             <li>
+               <a :href="buildEditLink(d.storedObject)" class="btn btn-action btn-sm">
+                 <i class="fa fa-edit"></i>
+               </a>
+             </li>
+            </ul>
+           </div>
+         </div>
+       </div>
+     </div>
+
      <div class="row mb-3">
        <pick-template
            entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
            :id="evaluation.id"
            :templates="getTemplatesAvailables"
-           :beforeMove="submitBeforeGenerate"
+           :preventDefaultMoveToGenerate="true"
+           @go-to-generate-document="submitBeforeGenerate"
        >
          <template v-slot:title>
            <label class="col-sm-4 col-form-label">{{ $t('evaluation_generate_a_document') }}</label>
@@ -83,6 +110,7 @@ import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import { mapGetters, mapState } from 'vuex';
 import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
+import {buildLink} from 'ChillDocGeneratorAssets/lib/document-generator';
 
 const i18n = {
    messages: {
@@ -97,9 +125,10 @@ const i18n = {
          evaluation_public_comment: "Note publique",
          evaluation_comment_placeholder: "Commencez à écrire ...",
          evaluation_generate_a_document: "Générer un document",
-         evaluation_choose_a_template: "Choisir un gabarit",
+         evaluation_choose_a_template: "Choisir un modèle",
          evaluation_add_a_document: "Ajouter un document",
-         evaluation_add: "Ajouter une évaluation"
+         evaluation_add: "Ajouter une évaluation",
+         Documents: "Documents",
       }
    }
 };
@@ -163,6 +192,7 @@ export default {
       },
    },
    methods: {
+      ISOToDatetime,
       listAllStatus() {
          console.log('load all status');
          let url = `/api/`;
@@ -175,10 +205,15 @@ export default {
          })
          ;
       },
-      submitBeforeGenerate() {
+     buildEditLink(storedObject) {
+       return `/wopi/edit/${storedObject.uuid}?returnPath=` + encodeURIComponent(
+           window.location.pathname + window.location.search + window.location.hash);
+     },
+     submitBeforeGenerate({template}) {
         const callback = (data) => {
           let evaluationId = data.accompanyingPeriodWorkEvaluations.find(e => e.key === this.evaluation.key).id;
-          return Promise.resolve({entityId: evaluationId});
+
+          window.location.assign(buildLink(template, evaluationId, 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation'));
         };
 
         return this.$store.dispatch('submit', callback).catch(e => { console.log(e); throw e; });

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

@@ -58,7 +58,11 @@ const store = createStore({
       return state.thirdParties.length > 0;
     },
     getTemplatesAvailablesForEvaluation: (state) => (evaluation) => {
-      return state.templatesAvailablesForEvaluation.get(evaluation.id) || [];
+      if (state.templatesAvailablesForEvaluation.has(evaluation.id)) {
+        return state.templatesAvailablesForEvaluation.get(evaluation.id);
+      }
+
+      return [];
     },
     buildPayload(state) {
       return {
@@ -171,7 +175,6 @@ const store = createStore({
       };
       g.id = tmpIndex() -1
       state.goalsPicked.push(g);
-      //console.log('goals picked ids', state.goalsPicked.map(g => g.id))
     },
     removeGoal(state, goal) {
       state.goalsPicked = state.goalsPicked.filter(g => g.id !== goal.id);
@@ -205,6 +208,9 @@ const store = createStore({
         warningInterval: null,
         comment: "",
         editEvaluation: true,
+        workflows_availables: state.work.workflows_availables_evaluation,
+        documents: [],
+        workflows: [],
       };
       state.evaluationsPicked.push(e);
     },
@@ -367,11 +373,11 @@ const store = createStore({
 
       return makeFetch('PUT', url, payload)
         .then(data => {
-          console.log('data received', data);
           if (typeof(callback) !== 'undefined') {
             return callback(data);
           } else {
-            console.info('nothing to do here, bye bye');window.location.assign(`/fr/person/accompanying-period/${state.work.accompanyingPeriod.id}/work`);
+            console.info('nothing to do here, bye bye');
+            window.location.assign(`/fr/person/accompanying-period/${state.work.accompanyingPeriod.id}/work`);
           }
         }).catch(error => {
           console.log('error on submit', error);

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

@@ -32,7 +32,7 @@
       </button>
     </li>
     <li v-else>
-      <button class="btn btn-save" @click="confirm" :disabled="hasWarnings">
+      <button class="btn btn-save" @click="confirm" :disabled="hasWarnings || !lastStepIsSaveAllowed">
         {{ $t('household_members_editor.app.save') }}
       </button>
     </li>
@@ -104,6 +104,13 @@ export default {
 
       return false;
     },
+    lastStepIsSaveAllowed() {
+      let r = !this.$store.getters.isHouseholdNew ||
+          (this.$store.state.numberOfChildren !== null && this.$store.state.householdCompositionType !== null);
+      console.log('is saved allowed ?', r);
+
+      return r;
+    },
   },
   methods: {
     goToNext() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue

@@ -7,18 +7,14 @@
     </div>
   </div>
   <div v-else>
-    <p>
-      {{ $t('household_members_editor.concerned.persons_will_be_moved') }}&nbsp;:
-      <span v-for="c in concerned" :key="c.person.id">
-        <person-render-box render="badge" :options="{addLink: false}" :person="c.person"></person-render-box>
-        <button class="btn" @click="removePerson(c.person)" v-if="c.allowRemove" style="padding-left:0;">
-          <span class="fa-stack fa-lg" :title="$t('household_members_editor.concerned.remove_concerned')">
-            <i class="fa fa-circle fa-stack-1x text-danger"></i>
-            <i class="fa fa-times fa-stack-1x"></i>
-          </span>
-        </button>
-      </span>
-    </p>
+    <p>{{ $t('household_members_editor.concerned.persons_will_be_moved') }}&nbsp;:</p>
+
+    <ul class="list-suggest remove-items inline">
+      <li v-for="c in concerned" :key="c.person.id" @click="removeConcerned(c)">
+        <span><person-text :person="c.person"></person-text></span>
+      </li>
+    </ul>
+
     <div class="alert alert-info" v-if="concernedPersonsWithHouseholds.length > 0">
       <p>{{ $t('household_members_editor.concerned.persons_with_household') }}</p>
       <ul v-for="c in concernedPersonsWithHouseholds" :key="c.person.id">
@@ -61,12 +57,14 @@
 import { mapState, mapGetters } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 export default {
   name: 'Concerned',
   components: {
     AddPersons,
     PersonRenderBox,
+    PersonText,
   },
   computed: {
     ...mapState([
@@ -108,9 +106,14 @@ export default {
       this.$refs.addPersons.resetSearch(); // to cast child method
       modal.showModal = false;
     },
-    removePerson(person) {
-      console.log('remove person in concerned', person);
-      this.$store.dispatch('removePerson', person);
+    removeConcerned(concerned) {
+      console.log('removedconcerned', concerned);
+
+      if (!concerned.allowRemove) {
+        return;
+      }
+
+      this.$store.dispatch('removePerson', concerned.person);
     },
     makeHouseholdLink(id) {
       return `/fr/person/household/${id}/summary`

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue

@@ -4,17 +4,38 @@
 
   <h2>{{ $t('household_members_editor.dates.dates_title') }}</h2>
 
-  <p>
-    <label for="start_date">
+  <div class="mb-3 row">
+    <label for="start_date" class="col-form-label col-sm-4 required">
       {{ $t('household_members_editor.dates.start_date') }}
     </label>
-    <input type="date" v-model="startDate" />
-  </p>
+    <div class="col-sm-8">
+      <input type="date" v-model="startDate" class="form-control" />
+    </div>
+  </div>
+
+  <div v-if="this.isHouseholdNew">
+    <h2>{{ $t('household_members_editor.composition.composition') }}</h2>
+    <div class="mb-3 row">
+      <label class="col-form-label col-sm-4 required">{{ $t('household_members_editor.composition.household_composition') }}</label>
+      <div class="col-sm-8">
+        <select v-model="householdCompositionType" class="form-select form-control">
+          <option v-for="t in householdCompositionTypes" :key="t.id" :value="t.id">{{ t.label.fr }}</option>
+        </select>
+      </div>
+    </div>
+    <div class="mb-3 row">
+      <label class="col-form-label col-sm-4 required">{{ $t('household_members_editor.composition.number_of_children') }}</label>
+      <div class="col-sm-8">
+        <input type="number" v-model="numberOfChildren" min="0" max="30" class="form-control"/>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 
 import CurrentHousehold from "./CurrentHousehold";
+import {mapGetters, mapState} from 'vuex';
 
 export default {
   name: 'Dates',
@@ -22,6 +43,27 @@ export default {
     CurrentHousehold
   },
   computed: {
+    ...mapState(['householdCompositionTypes']),
+    ...mapGetters(['isHouseholdNew']),
+    householdCompositionType: {
+      get() {
+        if (this.$store.state.householdCompositionType !== null) {
+          return this.$store.state.householdCompositionType.id;
+        }
+        return null;
+      },
+      set(value) {
+        this.$store.commit('setHouseholdCompositionType', value);
+      },
+    },
+    numberOfChildren: {
+      get() {
+        return this.$store.state.numberOfChildren;
+      },
+      set(value) {
+        this.$store.commit('setNumberOfChildren', value);
+      }
+    },
     startDate: {
       get() {
         return [

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue

@@ -61,6 +61,16 @@
     <li v-if="hasHousehold">
       <button @click="resetMode" class="btn btn-sm btn-misc">{{ $t('household_members_editor.household.reset_mode')}}</button>
     </li>
+    <li v-if="!hasHousehold">
+      <add-persons
+          modalTitle="Chercher un ménage existant"
+          buttonTitle="Chercher un ménage existant"
+          v-bind:key="addPersons.key"
+          v-bind:options="addPersons.options"
+          @addNewPersons="pickHouseholdFound"
+          ref="pickHousehold"> <!-- to cast child method -->
+      </add-persons>
+    </li>
     <li v-if="!hasHousehold">
       <button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button>
     </li>
@@ -77,16 +87,30 @@
 import { mapGetters, mapState } from 'vuex';
 import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
 import CurrentHousehold from './CurrentHousehold';
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons';
 
 export default {
   name: 'Household',
   components: {
+    AddPersons,
     CurrentHousehold,
     HouseholdRenderBox,
   },
   emits: ['readyToGo'],
   data() {
     return {
+      addPersons: {
+        key: 'household_find',
+        options: {
+          type: ['household'],
+          priority: null,
+          uniq: true,
+          button: {
+            size: 'btn-sm',
+            type: 'btn-search',
+          }
+        }
+      },
       addAddress: {
         key: 'household_new',
         options: {
@@ -166,6 +190,13 @@ export default {
       this.$store.dispatch('selectHousehold', h);
       this.$emit('readyToGo');
     },
+    pickHouseholdFound({selected, modal}) {
+      selected.forEach(function(item) {
+        this.selectHousehold(item.result);
+      }, this);
+      this.$refs.pickHousehold.resetSearch(); // to cast child method
+      modal.showModal = false;
+    },
     removeHouseholdAddress() {
       this.$store.commit('removeHouseholdAddress');
     },

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue

@@ -0,0 +1,42 @@
+<template>
+  <ckeditor
+      name="content"
+      v-bind:placeholder="$t('comment.content')"
+      :editor="editor"
+      v-model="content"
+      tag-name="textarea">
+  </ckeditor>
+</template>
+
+<script>
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import ClassicEditor from "ChillMainAssets/module/ckeditor5";
+
+export default {
+  name: "PersonComment.vue",
+  components: {
+    ckeditor: CKEditor.component,
+  },
+  props: ['conc'],
+  data() {
+    return {
+      editor: ClassicEditor,
+    }
+  },
+  computed: {
+    content: {
+      get() {
+        return this.$props.conc.comment || '';
+      },
+      set(value) {
+        console.log('set content', value);
+        this.$store.commit('setComment', {conc: this.$props.conc, comment: value})
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue

@@ -3,15 +3,16 @@
 
     <h2>{{ $t('household_members_editor.positioning.persons_to_positionnate')}}</h2>
 
-    <div class="list-household-members">
+    <div class="list-household-members flex-table">
       <div
           v-for="conc in concerned"
-           class="item-bloc"
-           v-bind:key="conc.person.id"
+          class="item-bloc"
+          v-bind:key="conc.person.id"
       >
-          <div class="pick-position">
+          <div class="pick-position item-row">
             <div class="person">
-              <person-render-box render="badge" :options="{}" :person="conc.person"></person-render-box>
+              <!-- <h3>{{ conc.person.text }}</h3> -->
+              <h3><person-text :person="conc.person"></person-text></h3>
             </div>
             <div class="holder">
               <button
@@ -37,6 +38,12 @@
               </button>
             </div>
           </div>
+          <div class="item-row">
+            <div>
+              <h6>{{ $t('household_members_editor.positioning.comment') }}</h6>
+              <person-comment :conc="conc"></person-comment>
+            </div>
+          </div>
       </div>
     </div>
 </template>
@@ -46,12 +53,16 @@ import MemberDetails from './MemberDetails.vue';
 import {mapGetters, mapState} from "vuex";
 import CurrentHousehold from "./CurrentHousehold";
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+import PersonComment from './PersonComment';
+import PersonText from '../../_components/Entity/PersonText.vue';
 
 export default {
   name: "Positioning",
   components: {
     CurrentHousehold,
     PersonRenderBox,
+    PersonComment,
+    PersonText
   },
   computed: {
     ...mapState([

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

@@ -52,6 +52,7 @@ const appMessages = {
        positioning: {
          persons_to_positionnate: 'Usagers à positionner',
          holder: "Titulaire",
+         comment: "Commentaire",
        },
       app: {
        next: 'Suivant',
@@ -77,7 +78,12 @@ const appMessages = {
       dates: {
         start_date: "Début de validité",
         end_date: "Fin de validité",
-        dates_title: "Période de validité",
+        dates_title: "Depuis le",
+      },
+      composition: {
+        composition: "Composition familiale",
+        household_composition: "Composition du ménage",
+        number_of_children: "Nombre d'enfants mineurs au sein du ménage",
       },
       confirmation: {
         save: "Enregistrer",

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

@@ -1,5 +1,6 @@
 import { createStore } from 'vuex';
 import { householdMove, fetchHouseholdSuggestionByAccompanyingPeriod, fetchAddressSuggestionByPerson} from './../api.js';
+import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js'
 import { fetchHouseholdByAddressReference } from 'ChillPersonAssets/lib/household.js';
 import { datetimeToISO } from 'ChillMainAssets/chill/js/date.js';
 
@@ -54,8 +55,11 @@ const store = createStore({
      */
     householdSuggestionByAccompanyingPeriod: [], // TODO rename into householdsSuggestion
     showHouseholdSuggestion: window.household_members_editor_expand_suggestions === 1,
+    householdCompositionType: null,
+    numberOfChildren: 0,
     addressesSuggestion: [],
     showAddressSuggestion: true,
+    householdCompositionTypes: [],
     warnings: [],
     errors: []
   },
@@ -250,7 +254,8 @@ const store = createStore({
         payload_conc,
         payload = {
           concerned: [],
-          destination: null
+          destination: null,
+          composition: null,
         }
       ;
 
@@ -261,7 +266,6 @@ const store = createStore({
           };
 
         if (getters.isHouseholdNew && state.household.current_address !== null) {
-          console.log(state.household);
           payload.destination.forceAddress = { id: state.household.current_address.address_id };
         }
       }
@@ -290,6 +294,19 @@ const store = createStore({
         payload.concerned.push(payload_conc);
       }
 
+      if (getters.isHouseholdNew) {
+        payload.composition = {
+          household_composition_type: {
+            type: state.householdCompositionType.type,
+            id: state.householdCompositionType.id,
+          },
+          number_of_children: state.numberOfChildren,
+          start_date: {
+            datetime: datetimeToISO(state.startDate),
+          },
+        };
+      }
+
       return payload;
     },
   },
@@ -409,6 +426,15 @@ const store = createStore({
     setErrors(state, errors) {
       state.errors = errors;
     },
+    setHouseholdCompositionTypes(state, types) {
+      state.householdCompositionTypes = types;
+    },
+    setHouseholdCompositionType(state, id) {
+      state.householdCompositionType = state.householdCompositionTypes.find(t => t.id = id);
+    },
+    setNumberOfChildren(state, number) {
+      state.numberOfChildren = Number.parseInt(number);
+    },
     addAddressesSuggestion(state, addresses) {
       let existingIds = state.addressesSuggestion
         .map(a => a.address_id);
@@ -570,4 +596,8 @@ if (concerned.length > 0) {
   });
 }
 
+fetchResults(`/api/1.0/person/houehold/composition/type.json`).then(types => {
+  store.commit('setHouseholdCompositionTypes', types);
+})
+
 export { store };

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

@@ -0,0 +1,6 @@
+export const lightGreen = '#43b29d';
+export const darkGreen = '#368e7e';
+export const lightBrown = '#a2ac80';
+export const darkBrown = '#929d69';
+export const lightBlue = '#8d9dab';
+export const darkBlue = '#718596';

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

@@ -2,6 +2,7 @@ import { createStore } from 'vuex'
 import { getHouseholdByPerson, getCoursesByPerson, getRelationshipsByPerson } from './api'
 import { getHouseholdLabel, getHouseholdWidth, getRelationshipLabel, getRelationshipTitle, getRelationshipDirection, splitId, getGender, getAge } from './vis-network'
 import {visMessages} from "./i18n";
+import { darkBlue, darkBrown, darkGreen, lightBlue, lightBrown, lightGreen } from './colors';
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -130,7 +131,7 @@ const store = createStore({
             person.group = person.type
             person._id = person.id
             person.id = `person_${person.id}`
-            person.label = `*${person.text}*\n_${getGender(person.gender)}${age}_${debug}`
+            person.label = `*${person.text}${person.deathdate ? ' (‡)' : ''}*\n_${getGender(person.gender)}${age}_${debug}`
             person.folded = false
             // folded is used for missing persons
             if (options.folded) {
@@ -172,8 +173,8 @@ const store = createStore({
                 id: 'relationship_' + splitId(link.id,'id')
                     + '-person_' + link.fromPerson.id + '-person_' + link.toPerson.id,
                 arrows: getRelationshipDirection(link),
-                color: 'lightblue',
-                font: { color: '#33839d' },
+                color: lightGreen,
+                font: { color: darkGreen },
                 dashes: true,
                 label: getRelationshipLabel(link),
                 title: getRelationshipTitle(link),
@@ -316,10 +317,10 @@ const store = createStore({
                     to: `${household.id}`,
                     id: `${household.id}-person_${m.person.id}`,
                     arrows: 'from',
-                    color: 'pink',
-                    font: { color: '#D04A60' },
+                    color: lightBrown,
+                    font: { color: darkBrown },
                     dashes: (getHouseholdWidth(m) === 1)? [0,4] : false,  //edge style:  [dash, gap, dash, gap]
-                    label: getHouseholdLabel(m),
+                    //label: getHouseholdLabel(m),
                     width: getHouseholdWidth(m),
                 })
                 if (!getters.isPersonLoaded(m.person.id)) {
@@ -375,8 +376,8 @@ const store = createStore({
                     to: `${course.id}`,
                     id: `accompanying_period_${splitId(course.id,'id')}-person_${p.person.id}`,
                     arrows: 'from',
-                    color: 'orange',
-                    font: { color: 'darkorange' },
+                    color: lightBlue,
+                    font: { color: darkBlue },
                 })
                 if (!getters.isPersonLoaded(p.person.id)) {
                     dispatch('addMissingPerson', [p.person, course])
@@ -428,8 +429,8 @@ const store = createStore({
                 id: 'relationship_' + splitId(relationship.id,'id')
                     + '-person_' + relationship.fromPerson.id + '-person_' + relationship.toPerson.id,
                 arrows: getRelationshipDirection(relationship),
-                color: 'lightblue',
-                font: { color: '#33839d' },
+                color: lightGreen,
+                font: { color: darkGreen },
                 dashes: true,
                 label: getRelationshipLabel(relationship),
                 title: getRelationshipTitle(relationship),

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js

@@ -1,4 +1,5 @@
-import { visMessages } from './i18n'
+import { darkGreen, lightBlue, lightBrown, lightGreen } from './colors';
+import { visMessages } from './i18n';
 
 /**
  * Vis-network initial data/configuration script
@@ -15,12 +16,12 @@ window.options = {
     /*
     */
     configure: {
-        enabled: true,
+        enabled: false,
         filter: 'physics',
         showButton: true
     },
     physics: {
-        enabled: true,
+        enabled: false,
         barnesHut: {
             theta: 0.5,
             gravitationalConstant: -2000,
@@ -89,7 +90,7 @@ window.options = {
     edges: {
         font: {
             color: '#b0b0b0',
-            size: 9,
+            size: 14,
             face: 'arial',
             background: 'none',
             strokeWidth: 2, // px
@@ -112,30 +113,30 @@ window.options = {
             },
             color: {
                 border: '#b0b0b0',
-                background: 'rgb(193,229,222)',
+                background: lightGreen,
                 highlight: {
-                    border: '#89c9a9',
-                    background: 'rgb(156,213,203)'
+                    border: '#216458',
+                    background: darkGreen,
                 },
                 hover: {
-                    border: '#89c9a9',
-                    background: 'rgb(156,213,203)'
+                    border: '#216458',
+                    background: darkGreen,
                 }
             },
-            opacity: 0.85,
+            opacity: 0.9,
             shadow:{
                 enabled: true,
                 color: 'rgba(0,0,0,0.5)',
                 size:10,
                 x:5,
-                y:5
+                y:5,
             },
         },
         household: {
-            color: 'pink'
+            color: lightBrown,
         },
         accompanying_period: {
-            color: 'orange',
+            color: lightBlue,
         },
     }
 }

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

@@ -0,0 +1,51 @@
+<template>
+<ul class="list-suggest add-items" v-if="suggested.length > 0">
+  <li v-for="r in suggested" @click="setReferrer(r)"><span>{{ r.text }}</span></li>
+</ul>
+</template>
+
+<script>
+
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
+
+export default {
+  name: "SetReferrer",
+  props: {
+   suggested: {
+      type: Array,
+      required: false,
+      //default: [],
+    },
+    periodId: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      /*suggested: [
+        {id: 5, text: 'Robert'}, {id: 8, text: 'Monique'},
+      ]*/
+    }
+  },
+  emits: ['referrerSet'],
+  methods: {
+    setReferrer: function(ref) {
+      const url = `/api/1.0/person/accompanying-course/${this.periodId}.json`;
+      const body = { type: "accompanying_period", user: { id: ref.id, type: ref.type }};
+
+      return makeFetch('PATCH', url, body)
+          .then((response) => {
+            this.$emit('referrerSet', ref);
+          })
+          .catch((error) => {
+            throw error;
+          })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,12 +1,12 @@
 <template>
-   <ul class="record_actions">
+    <ul class="record_actions">
       <li class="add-persons">
-         <a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
-            @click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
+        <a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
+           @click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
       </li>
-   </ul>
+    </ul>
 
-   <teleport to="body">
+  <teleport to="body">
       <modal v-if="modal.showModal"
          :modalDialogClass="modal.modalDialogClass"
          @close="modal.showModal = false">
@@ -67,9 +67,10 @@
                <div class="create-button">
                   <on-the-fly
                      v-if="query.length >= 3"
-                     v-bind:buttonText="$t('onthefly.create.button', {q: query})"
+                     :buttonText="$t('onthefly.create.button', {q: query})"
                      action="create"
-                     @saveFormOnTheFly="saveFormOnTheFly">
+                     @saveFormOnTheFly="saveFormOnTheFly"
+                     :canCloseModal="canCloseOnTheFlyModal">
                   </on-the-fly>
                </div>
 
@@ -92,8 +93,7 @@ import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import PersonSuggestion from './AddPersons/PersonSuggestion';
 import { searchEntities } from 'ChillPersonAssets/vuejs/_api/AddPersons';
-import { postPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
-import { postThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
 
 export default {
    name: 'AddPersons',
@@ -121,7 +121,8 @@ export default {
             suggested: [],
             selected: [],
             priorSuggestion: {}
-         }
+         },
+         canCloseOnTheFlyModal: false
       }
    },
    computed: {
@@ -181,7 +182,7 @@ export default {
       },
       hasPriorSuggestion() {
          return this.search.priorSuggestion.key ? true : false;
-      }
+      },
    },
    methods: {
       openModal() {
@@ -195,18 +196,18 @@ export default {
 
          setTimeout(function() {
             if (query === "") {
-              this.loadSuggestions([]);
-              return;
+               this.loadSuggestions([]);
+               return;
             }
             if (query === this.search.query) {
-              if (this.currentSearchQueryController !== undefined) {
-                this.currentSearchQueryController.abort()
-              }
-              this.currentSearchQueryController = new AbortController();
-              searchEntities({ query, options: this.options }, this.currentSearchQueryController)
+               if (this.currentSearchQueryController !== undefined) {
+                  this.currentSearchQueryController.abort()
+               }
+               this.currentSearchQueryController = new AbortController();
+               searchEntities({ query, options: this.options }, this.currentSearchQueryController)
                   .then(suggested => new Promise((resolve, reject) => {
-                    this.loadSuggestions(suggested.results);
-                    resolve();
+                     this.loadSuggestions(suggested.results);
+                     resolve();
                   }));
             }
          }.bind(this), query.length > 3 ? 300 : 700);
@@ -241,13 +242,12 @@ export default {
          return item.result.type + item.result.id;
       },
       addPriorSuggestion() {
-         //console.log('addPriorSuggestion', this.hasPriorSuggestion);
+         // console.log('prior suggestion', this.priorSuggestion);
          if (this.hasPriorSuggestion) {
-            console.log('addPriorSuggestion',);
+            // console.log('addPriorSuggestion',);
             this.suggested.unshift(this.priorSuggestion);
             this.selected.unshift(this.priorSuggestion);
 
-            console.log('reset priorSuggestion');
             this.newPriorSuggestion(null);
          }
       },
@@ -261,6 +261,7 @@ export default {
             }
             this.search.priorSuggestion = suggestion;
             // console.log('search priorSuggestion', this.search.priorSuggestion);
+            this.addPriorSuggestion(suggestion);
          } else {
             this.search.priorSuggestion = {};
          }
@@ -268,23 +269,38 @@ export default {
       saveFormOnTheFly({ type, data }) {
          // console.log('saveFormOnTheFly from addPersons, type', type, ', data', data);
          if (type === 'person') {
-            // console.log('type person with', data);
-            postPerson(data)
-               .then(person => new Promise((resolve, reject) => {
-                  console.log('onthefly create: post person', person);
-                  this.newPriorSuggestion(person);
-                  resolve();
-               }));
+            makeFetch('POST', '/api/1.0/person/person.json', data)
+               .then(response => {
+                  this.newPriorSuggestion(response);
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                        this.$toast.open({message: v });
+                     }
+                  } else {
+                     this.$toast.open({message: 'An error occurred'});
+                  }
+               })
          }
          else if (type === 'thirdparty') {
-            // console.log('type thirdparty with', data);
-            postThirdparty(data)
-               .then(thirdparty => new Promise((resolve, reject) => {
-                  // console.log('onthefly create: post thirdparty', thirdparty);
-                  this.newPriorSuggestion(thirdparty);
-                  resolve();
-               }));
+            makeFetch('POST', '/api/1.0/thirdparty/thirdparty.json', data)
+               .then(response => {
+                  this.newPriorSuggestion(response);
+                  this.canCloseOnTheFlyModal = true;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                        this.$toast.open({message: v });
+                     }
+                  } else {
+                     this.$toast.open({message: 'An error occurred'});
+                  }
+               })
          }
+         this.canCloseOnTheFlyModal = false;
       }
    },
 }

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

@@ -26,6 +26,11 @@
             v-if="item.result.type === 'user'"
             v-bind:item="item">
          </suggestion-user>
+
+        <suggestion-household
+            v-if="item.result.type === 'household'"
+            v-bind:item="item">
+        </suggestion-household>
       </label>
 
    </div>
@@ -35,6 +40,7 @@
 import SuggestionPerson from './TypePerson';
 import SuggestionThirdParty from './TypeThirdParty';
 import SuggestionUser from './TypeUser';
+import SuggestionHousehold from './TypeHousehold';
 
 export default {
    name: 'PersonSuggestion',
@@ -42,6 +48,7 @@ export default {
       SuggestionPerson,
       SuggestionThirdParty,
       SuggestionUser,
+      SuggestionHousehold,
    },
    props: [
       'item',
@@ -87,11 +94,11 @@ export default {
          label {
             display: inline-flex;
             width: 100%;
-            div.container {
+            div.container:not(.household) {
                & > input {
                   margin-right: 0.8em;
                }
-               span:not(.name) {
+               > span:not(.name) {
                   margin-left: 0.5em;
                   opacity: 0.5;
                   font-size: 90%;

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

@@ -0,0 +1,27 @@
+<template>
+   <div class="container household">
+     <household-render-box :household="item.result" :isAddressMultiline="false"></household-render-box>
+   </div>
+
+   <div class="right_actions">
+      <badge-entity
+        :entity="item.result"
+        :options="{ displayLong: true }">
+      </badge-entity>
+   </div>
+</template>
+
+<script>
+
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
+
+export default {
+   name: 'SuggestionHousehold',
+   components: {
+     BadgeEntity,
+     HouseholdRenderBox,
+   },
+   props: ['item'],
+}
+</script>

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

@@ -1,7 +1,7 @@
 <template>
    <div class="container">
       <span class="name">
-         {{ item.result.text }}
+         <person-text :person="item.result"></person-text>
       </span>
       <span class="birthday" v-if="hasBirthdate">
          {{ $d(item.result.birthdate.datetime, 'short') }}
@@ -28,12 +28,14 @@
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 export default {
    name: 'SuggestionPerson',
    components: {
      OnTheFly,
-     BadgeEntity
+     BadgeEntity,
+     PersonText,
    },
    props: ['item'],
    computed: {

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

@@ -2,9 +2,9 @@
     <div class="container tpartycontainer">
       <div class="tparty-identification">
         <span class="name">
-            {{ item.result.text }}
+           {{ item.result.text }}&nbsp;
         </span>
-          <span class="location">
+        <span class="location">
           <template v-if="hasAddress">
             {{ getAddress.text }} -
             {{ getAddress.postcode.name }}
@@ -100,5 +100,13 @@ export default {
       font-variant: all-small-caps;
     }
  }
+ .tparty-identification {
+   span:not(.name) {
+     margin-left: 0.5em;
+     opacity: 0.5;
+     font-size: 90%;
+     font-style: italic;
+   }
+ }
 }
 </style>

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

@@ -1,14 +1,15 @@
 <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="'denomination h' + options.hLevel">
 
-                   <a v-if="options.addLink === true" :href="getUrl">
+                    <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.altNames && options.addAltNames ==  true" class="altnames">
@@ -16,19 +17,20 @@
                         </span>
                     </a>
 
-                   <span class="firstname">{{ person.firstName }}</span>
-                   <span class="lastname">{{ person.lastName }}</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>
+                  <!-- 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.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>
 
@@ -47,96 +49,96 @@
                         {{ $t('renderbox.deathdate') + ' ' + deathdate }}
                     </time>
 
-                    <span v-if="options.addAge && person.birthdate" class="age">{{ getAge }} {{ $t('renderbox.years_old')}}</span>
+                    <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">
+            <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>
 
-                    <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>
+                        <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>
+            </div>
+            </div>
 
-                 </ul>
-              </div>
-           </div>
         </div>
-
-      </div>
     </section>
-  </div>
+</div>
 
-  <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>
-        <i class="fa fa-stack-1x">T</i>
-      </span>
-      {{ person.text }}
+<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>
+            <i class="fa fa-stack-1x">T</i>
+        </span>
+
+        <person-text :person="person"></person-text>
     </a>
     <span v-else>
-       <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>
-        <i class="fa fa-stack-1x">T</i>
-      </span>
-      {{ person.text }}
+        <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>
+            <i class="fa fa-stack-1x">T</i>
+        </span>
+        <person-text :person="person"></person-text>
     </span>
     <slot name="post-badge"></slot>
-  </span>
+</span>
 
 </template>
 
@@ -145,13 +147,15 @@ import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 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';
 
 export default {
     name: "PersonRenderBox",
     components: {
         AddressRenderBox,
         Confidential,
-        BadgeEntity
+        BadgeEntity,
+        PersonText
     },
     props: ['person', 'options', 'render', 'returnPath'],
     computed: {
@@ -166,7 +170,7 @@ export default {
             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';
+            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';
@@ -198,24 +202,6 @@ export default {
         getUrl: function() {
             return `/fr/person/${this.person.id}/general`;
         },
-        getAge: function() {
-            // TODO only one abstract function
-            if(this.person.birthdate && !this.person.deathdate){
-                const birthday = new Date(this.person.birthdate.datetime)
-                const now = new Date()
-                return (now.getFullYear() - birthday.getFullYear())
-            } else if(this.person.birthdate && this.person.deathdate){
-                    const birthday = new Date(this.person.birthdate.datetime)
-                    const deathdate = new Date(this.person.deathdate.datetime)
-                    return (deathdate.getFullYear() - birthday.getFullYear())
-            } else if(!this.person.birthdate && this.person.deathdate.datetime) {
-                // todo: change this
-                    return "Age unknown"
-            } else {
-                // todo: change this
-                    return "Age unknown"
-            }
-        },
         getCurrentHouseholdUrl: function() {
            let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
            return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`

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

@@ -0,0 +1,50 @@
+<template>
+    <span v-if="isCut">{{ cutText }}</span>
+    <span v-else class="person-text">
+        <span class="firstname">{{ person.firstName }}</span>
+        <span class="lastname">{{ person.lastName }}</span>
+        <span v-if="person.altNames && person.altNames.length > 0" class="altnames">
+            <span :class="'altname altname-' + altNameKey"> ({{ altNameLabel }})</span>
+        </span>
+        <span class="age" v-if="this.addAge && person.birthdate !== null && person.deathdate === null">{{ $tc('renderbox.years_old', person.age) }}</span>
+        <span v-else-if="this.addAge && person.deathdate !== null">&nbsp;(‡)</span>
+    </span>
+</template>
+
+<script>
+
+export default {
+    name: "PersonText",
+    props: {
+      person: {
+        required: true,
+      },
+      isCut: {
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      addAge: {
+        type: Boolean,
+        required: false,
+        default: true,
+      }
+    },
+    computed: {
+        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
+            }
+        },
+        cutText: function() {
+            let more = (this.person.text.length > 15) ?'…' : '';
+            return this.person.text.slice(0,15) + more;
+        }
+    }
+}
+</script>

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

@@ -22,24 +22,45 @@
 <div v-else-if="action === 'edit' || action === 'create'">
 
    <div class="form-floating mb-3">
-      <input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
+      <input
+          class="form-control form-control-lg"
+          id="lastname"
+          v-model="lastName"
+          :placeholder="$t('person.lastname')"
+          @change="checkErrors"
+      />
       <label for="lastname">{{ $t('person.lastname') }}</label>
    </div>
 
    <div class="form-floating mb-3">
-      <input class="form-control form-control-lg" id="firstname" v-model="firstName" v-bind:placeholder="$t('person.firstname')" />
+      <input
+          class="form-control form-control-lg"
+          id="firstname"
+          v-model="firstName"
+          :placeholder="$t('person.firstname')"
+          @change="checkErrors"
+      />
       <label for="firstname">{{ $t('person.firstname') }}</label>
    </div>
 
    <div v-for="(a) in config.altNames" :key="a.key" class="form-floating mb-3">
-      <input class="form-control form-control-lg" :id="a.key" @input="onAltNameInput" />
+      <input
+          class="form-control form-control-lg"
+          :id="a.key"
+          @input="onAltNameInput"
+      />
       <label :for="a.key">{{ a.labels.fr }}</label>
    </div>
 
    <!--  TODO fix placeholder if undefined
    -->
    <div class="form-floating mb-3">
-      <select class="form-select form-select-lg" id="gender" v-model="gender">
+      <select
+         class="form-select form-select-lg"
+         id="gender"
+         v-model="gender"
+         @change="checkErrors"
+         >
          <option selected disabled >{{ $t('person.gender.placeholder') }}</option>
          <option value="woman">{{ $t('person.gender.woman') }}</option>
          <option value="man">{{ $t('person.gender.man') }}</option>
@@ -62,8 +83,8 @@
       <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
       <input class="form-control form-control-lg"
          v-model="phonenumber"
-         v-bind:placeholder="$t('person.phonenumber')"
-         v-bind:aria-label="$t('person.phonenumber')"
+         :placeholder="$t('person.phonenumber')"
+         :aria-label="$t('person.phonenumber')"
          aria-describedby="phonenumber" />
    </div>
 
@@ -71,8 +92,8 @@
       <span class="input-group-text" id="mobilenumber"><i class="fa fa-fw fa-mobile"></i></span>
       <input class="form-control form-control-lg"
          v-model="mobilenumber"
-         v-bind:placeholder="$t('person.mobilenumber')"
-         v-bind:aria-label="$t('person.mobilenumber')"
+         :placeholder="$t('person.mobilenumber')"
+         :aria-label="$t('person.mobilenumber')"
          aria-describedby="mobilenumber" />
    </div>
 
@@ -80,11 +101,17 @@
       <span class="input-group-text" id="email"><i class="fa fa-fw fa-at"></i></span>
       <input class="form-control form-control-lg"
          v-model="email"
-         v-bind:placeholder="$t('person.email')"
-         v-bind:aria-label="$t('person.email')"
+         :placeholder="$t('person.email')"
+         :aria-label="$t('person.email')"
          aria-describedby="email" />
    </div>
 
+   <div class="alert alert-warning" v-if="errors.length">
+     <ul>
+       <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
+     </ul>
+   </div>
+
 </div>
 </template>
 
@@ -108,6 +135,7 @@ export default {
          config: {
             altNames: []
          },
+         errors: []
       }
    },
    computed: {
@@ -183,6 +211,18 @@ export default {
       }
    },
    methods: {
+      checkErrors(e) {
+         this.errors = [];
+         if (!this.person.lastName) {
+             this.errors.push("Le nom ne doit pas être vide.");
+         }
+         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é");
+         }
+      },
       loadData() {
          getPerson(this.id)
             .then(person => new Promise((resolve, reject) => {

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/Comment/index.html.twig

@@ -7,7 +7,7 @@
 {% import '@ChillPerson/AccompanyingCourse/Comment/macro_showItem.html.twig' as m %}
 
 {% macro recordAction(comment, isPinned) %}
-    {% if isPinned is defined and isPinned == 'true' %}
+    {% if isPinned is defined and isPinned == true %}
     {% else %}
         <li>
             <form method="post" action="{{ chill_path_forward_return_path('chill_person_accompanying_period_comment_pin', {'id': comment.id}) }}">
@@ -66,8 +66,8 @@
                 {{ _self.form_comment('edit', edit_form) }}
             {% else %}
                 {{ m.show_comment(accompanyingCourse.pinnedComment, {
-                    'pinned': 'true',
-                    'recordAction': _self.recordAction(accompanyingCourse.pinnedComment, 'true')
+                    'pinned': true,
+                    'recordAction': _self.recordAction(accompanyingCourse.pinnedComment, true)
                 }) }}
             {% endif %}
         {% endif %}

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

@@ -3,7 +3,8 @@
     {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
         action: 'show', displayBadge: true,
         targetEntity: { name: type, id: entity.id },
-        buttonText: entity|chill_entity_render_string
+        buttonText: entity|chill_entity_render_string,
+        isDead: entity.deathdate is not null
     } %}
 {% endmacro %}
 

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

@@ -1,23 +1,25 @@
 {%- set countPersonLocation = accompanyingCourse.availablePersonLocation|length -%}
 {%- set hasPersonLocation = countPersonLocation > 0 -%}
 <div class="alert alert-danger {% if hasPersonLocation %}alert-with-actions{% endif %}">
-    <div class="float-button bottom"><div class="box">
-        <div class="action">
-            <ul class="record_actions">
-                <li>
-                    <a class="btn btn-sm btn-update change-icon"
-                       href="{{ path('chill_person_accompanying_course_edit', { 'accompanying_period_id': accompanyingCourse.id, '_fragment': 'section-20' }) }}">
-                        <i class="fa fa-fw fa-crosshairs"></i>
-                        {{ 'fix it'|trans }}
-                    </a>
-                </li>
-            </ul>
+    <div class="float-button bottom">
+        <div class="box">
+            <div class="action">
+                <ul class="record_actions">
+                    <li>
+                        <a class="btn btn-sm btn-update change-icon"
+                           href="{{ path('chill_person_accompanying_course_edit', { 'accompanying_period_id': accompanyingCourse.id, '_fragment': 'section-20' }) }}">
+                            <i class="fa fa-fw fa-crosshairs"></i>
+                            {{ 'fix it'|trans }}
+                        </a>
+                    </li>
+                </ul>
+            </div>
+                <p>
+            {{ 'This course is located at a temporarily address. You should locate this course to an user'|trans }}</p>
+            {% if not hasPersonLocation %}
+                <p>
+                {{ 'Associate at least one member with an household, and set an address to this household'|trans }}</p>
+            {% endif %}
         </div>
-            <p>
-        {{ 'This course is located at a temporarily address. You should locate this course to an user'|trans }}</p>
-        {% if not hasPersonLocation %}
-            <p>
-            {{ 'Associate at least one member with an household, and set an address to this household'|trans }}</p>
-        {% endif %}
-    </div></div>
+    </div>
 </div>

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

@@ -1,5 +1,7 @@
 {% extends "@ChillPerson/AccompanyingCourse/layout.html.twig"  %}
 
+{% block title %}{{ 'Close accompanying course'|trans }}{% endblock %}
+
 {% block content %}
     <h1>{{ "Close accompanying course"|trans }}</h1>
 

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

@@ -9,6 +9,7 @@
         action: 'show', displayBadge: true,
         targetEntity: { name: type, id: entity.id },
         buttonText: entity|chill_entity_render_string,
+        isDead: entity.deathdate is defined and entity.deathdate is not null,
         parent: parent
     } %}
 {% endmacro %}
@@ -76,7 +77,10 @@
                     <h4 class="item-key visually-hidden">{{ 'Pinned comment'|trans }}</h4>
                     <blockquote class="chill-user-quote">
                         <i class="fa fa-flag float-end text-chill-gray" title="{{ 'pinned'|trans }}"></i>
-                        {{ accompanyingCourse.pinnedComment.content|chill_markdown_to_html }}
+                        {{ accompanyingCourse.pinnedComment.content|u.truncate(250, '…', false)|chill_markdown_to_html }}
+                        {% if accompanyingCourse.pinnedComment.content|length > 250 %}
+                            <a href="{{ chill_path_add_return_path('chill_person_accompanying_period_comment_list', {'accompanying_period_id': accompanyingCourse.id}) }}">{{ 'Read more'|trans }}</a>
+                        {% endif %}
                         <div class="metadata">
                             {{ 'Last updated by'| trans }}
                             <span class="user">
@@ -131,10 +135,10 @@
         {% if accompanyingCourse.scopes is not empty %}
             <div class="mbloc col col-sm-6 col-lg-4">
                 <div class="scopes">
-                    <h4 class="item-key">{{ 'Scopes'|trans }}</h4>
+                    <h4 class="item-key">{{ 'Concerned scopes'|trans }}</h4>
                     <div>
                         {% for s in accompanyingCourse.scopes  %}
-                            <span>{{ s.name|localize_translatable_string|capitalize }}</span>{% if not loop.last %}, {% endif %}
+                            <span>{{ s.name|localize_translatable_string|upper }}</span>{% if not loop.last %}, {% endif %}
                         {% endfor %}
                     </div>
                 </div>
@@ -147,14 +151,14 @@
                     {% if accompanyingCourse.requestorPerson is not null %}
                         <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
                         {% if accompanyingCourse.requestorAnonymous %}
-                            <div class="confidential"><p class="blur">{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}</p></div>
+                            <div class="confidential"><p>{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}</p></div>
                         {% else %}
                             {{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}
                         {% endif %}
                     {% elseif accompanyingCourse.requestorThirdParty is not null %}
                         <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
                         {% if accompanyingCourse.requestorAnonymous %}
-                            <div class="confidential"><p class="blur">{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}</p></div>
+                            <div class="confidential"><p>{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}</p></div>
                         {% else %}
                             {{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}
                         {% endif %}
@@ -180,7 +184,25 @@
                 </div>
             </div>
         {% endif %}
-
+        
+        <div class="mbloc col col-sm-6 col-lg-4">
+            <div class="notification-counter">
+                <h4 class="item-key">{{ 'notification.Notifications'|trans }}</h4>
+                {% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', accompanyingCourse.id) %}
+                {% if notif_counter.total > 0 %}
+                    <div class="my-2">
+                        <a href="#notification-list">
+                            {{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', accompanyingCourse.id) }}
+                        </a>
+                    </div>
+                {% endif %}
+                <div class="d-grid gap-2">
+                    <a class="btn btn-notify" href="{{ chill_path_add_return_path('chill_main_notification_create', {'entityClass': 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod', 'entityId': accompanyingCourse.id}) }}">
+                        {{ 'notification.Notify'|trans }}
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 
     <div class="social-actions my-4">
@@ -206,21 +228,16 @@
         {% include 'ChillActivityBundle:Activity:list_recent.html.twig' with { 'context': 'accompanyingCourse', 'no_action': true } %}
     </div>
     {% endblock %}
-
+    
+    <div class="notification notification-list">
+        {% set notifications = chill_list_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', accompanyingCourse.id) %}
+        {% if notifications is not empty %}
+            {{ notifications|raw }}
+        {% endif %}
+    </div>
 </div>
 {% endblock %}
 
 {% block block_post_menu %}
-    <div class="post-menu pt-4">
-
-        <div class="d-grid gap-2">
-            <a class="btn btn-primary" href="{{ chill_path_add_return_path('chill_main_notification_create', {'entityClass': 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod', 'entityId': accompanyingCourse.id}) }}">
-                <i class="fa fa-paper-plane fa-fw"></i>
-                {{ 'notification.Notify'|trans }}
-            </a>
-        </div>
-
-        {{ chill_list_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', accompanyingCourse.id) }}
-
-    </div>
+<div class="post-menu pt-4"></div>
 {% endblock %}

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

@@ -0,0 +1,29 @@
+{% extends "@ChillPerson/AccompanyingCourse/layout.html.twig"  %}
+
+{% block title 'Re-Open a period'|trans  %}
+
+{% block content %}
+    <h1>{{ "Re-Open a period"|trans }}</h1>
+
+    <p class="message-confirm">{{ 'Are you sure you want to re-open this period ?'|trans }}<p>
+
+    {{ form_start(form) }}
+
+    {% set accompanying_course_id = null %}
+    {% if accompanyingCourse %}
+        {% set accompanying_course_id = accompanyingCourse.id %}
+    {% endif %}
+
+        <ul class="record_actions sticky-form-buttons">
+            <li class="cancel">
+                <a href="{{ chill_return_path_or('chill_person_accompanying_course_index',  {'accompanying_period_id' : accompanyingCourse.id}) }}" class="btn btn-cancel">
+                    {{ 'Return'|trans }}
+                </a>
+            </li>
+            <li>
+                <button class="btn btn-update" type="submit">{{ 'Save'|trans }}</button>
+            </li>
+        </ul>
+
+    {{ form_end(form) }}
+{% endblock %}

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

@@ -0,0 +1,127 @@
+<div class="item-bloc accompanying_course_work-item{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+
+    <div class="item-row">
+        <h2 class="badge-title">
+            <span class="title_label"></span>
+            <span class="title_action">{{ w.socialAction|chill_entity_render_string }}
+
+                <ul class="small_in_title columns mt-1">
+                    <li>
+                        <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
+                        <b>{{ w.startDate|format_date('short') }}</b>
+                    </li>
+                    {% if w.endDate %}
+                        <li>
+                            <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
+                            <b>{{ w.endDate|format_date('short') }}</b>
+                        </li>
+                    {% endif %}
+                </ul>
+
+            </span>
+        </h2>
+    </div>
+
+    <div class="item-row separator">
+        <div class="wrap-list">
+
+            {% if w.createdBy %}
+                <div class="wl-row">
+                    <div class="wl-col title">
+                        <h3>{{ 'Referrer'|trans }}</h3>
+                    </div>
+                    <div class="wl-col list">
+                        <p class="wl-item">
+                            {{ w.createdBy|chill_entity_render_box }}
+                        </p>
+                    </div>
+                </div>
+            {% endif %}
+
+            {%- if w.persons -%}
+                <div class="wl-row">
+                    <div class="wl-col title">
+                        <h3>{{ 'Persons in accompanying course'|trans }}</h3>
+                    </div>
+                    <div class="wl-col list">
+                        {% for p in w.persons %}
+                            <span class="wl-item">
+                                {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                    action: 'show', displayBadge: true,
+                                    targetEntity: { name: 'person', id: p.id },
+                                    buttonText: p|chill_entity_render_string,
+                                    isDead: p.deathdate is not null
+                                } %}
+                            </span>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+
+            {%- if w.handlingThierParty -%}
+                <div class="wl-row">
+                    <div class="wl-col title">
+                        <h3>{{ 'Thirdparty handling'|trans }}</h3>
+                    </div>
+                    <div class="wl-col list">
+                        <span class="wl-item">
+                            {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                action: 'show', displayBadge: true,
+                                targetEntity: { name: 'thirdparty', id: w.handlingThierParty.id },
+                                buttonText: w.handlingThierParty|chill_entity_render_string
+                            } %}
+                        </span>
+                    </div>
+                </div>
+            {% endif %}
+
+            {%- if w.socialAction.issue -%}
+                <div class="wl-row">
+                    <div class="wl-col title">
+                        <h3>{{ 'Social issue'|trans }}</h3>
+                    </div>
+                    <div class="wl-col list">
+                        <p class="wl-item social-issues">
+                            {{ w.socialAction.issue|chill_entity_render_box }}
+                        </p>
+                    </div>
+                </div>
+            {% endif %}
+
+        </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) }}
+        </div>
+            
+        {% if displayAction is defined and displayAction == true %}
+            <div class="item-col">
+                <ul class="record_actions">
+                    <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>
+                    <li>
+                        <a class="btn btn-delete" title="{{ 'Delete'|trans }}"
+                           href="{{ path('chill_person_accompanying_period_work_delete', { 'id': w.id } ) }}"
+                        ></a>
+                    </li>
+                </ul>
+            </div>
+        {% endif %}
+    </div>
+
+</div>

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

@@ -2,27 +2,29 @@
 
 {% block title 'accompanying_course_work.Edit accompanying course work'|trans %}
 
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('vue_accourse_work_edit') }}
+    {{ encore_entry_link_tags('mod_entity_workflow_pick') }}
+{% endblock %}
 
 {% block content %}
 <div class="accompanying_course_work-edit">
-
     <h1>{{ block('title') }}</h1>
-
     <div id="accompanying_course_work_edit"></div>
-
 </div>
 {% endblock %}
 
+{% block block_post_menu %}
+<div class="post-menu pt-4"></div>
+{% endblock %}
+
 {% block js %}
   {{ parent() }}
   <script type="text/javascript">
-    window.accompanyingCourseWork = {{ json|json_encode|raw }};
+      window.accompanyingCourseWork = {{ json|json_encode|raw }};
   </script>
-
   {{ encore_entry_script_tags('vue_accourse_work_edit') }}
+  {{ encore_entry_script_tags('mod_entity_workflow_pick') }}
 {% endblock %}
 
-{% block css %}
-  {{ parent() }}
-  {{ encore_entry_link_tags('vue_accourse_work_edit') }}
-{% endblock %}

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

@@ -18,130 +18,7 @@
         {% else %}
             <div class="flex-table accompanying_course_work-list">
                 {% for w in works %}
-                    <div class="item-bloc">
-
-                        <div class="item-row">
-                            <h2 class="badge-title">
-                                <span class="title_label"></span>
-                                <span class="title_action">{{ w.socialAction|chill_entity_render_string }}
-
-                                    <ul class="small_in_title columns mt-1">
-                                        <li>
-                                            <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
-                                            <b>{{ w.startDate|format_date('short') }}</b>
-                                        </li>
-                                        {% if w.endDate %}
-                                            <li>
-                                                <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
-                                                <b>{{ w.endDate|format_date('short') }}</b>
-                                            </li>
-                                        {% endif %}
-                                    </ul>
-
-                                </span>
-                            </h2>
-                        </div>
-
-                        <div class="item-row separator">
-                            <div class="wrap-list">
-
-                                {% if w.createdBy %}
-                                    <div class="wl-row">
-                                        <div class="wl-col title">
-                                            <h3>{{ 'Referrer'|trans }}</h3>
-                                        </div>
-                                        <div class="wl-col list">
-                                            <p class="wl-item">
-                                                {{ w.createdBy|chill_entity_render_box }}
-                                            </p>
-                                        </div>
-                                    </div>
-                                {% endif %}
-
-                                {%- if w.persons -%}
-                                    <div class="wl-row">
-                                        <div class="wl-col title">
-                                            <h3>{{ 'Persons in accompanying course'|trans }}</h3>
-                                        </div>
-                                        <div class="wl-col list">
-                                            {% for p in w.persons %}
-                                                <span class="wl-item">
-                                                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
-                                                        action: 'show', displayBadge: true,
-                                                        targetEntity: { name: 'person', id: p.id },
-                                                        buttonText: p|chill_entity_render_string
-                                                    } %}
-                                                </span>
-                                            {% endfor %}
-                                        </div>
-                                    </div>
-                                {% endif %}
-
-                                {%- if w.handlingThierParty -%}
-                                    <div class="wl-row">
-                                        <div class="wl-col title">
-                                            <h3>{{ 'Thirdparty handling'|trans }}</h3>
-                                        </div>
-                                        <div class="wl-col list">
-                                            <span class="wl-item">
-                                                {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
-                                                    action: 'show', displayBadge: true,
-                                                    targetEntity: { name: 'thirdparty', id: w.handlingThierParty.id },
-                                                    buttonText: w.handlingThierParty|chill_entity_render_string,
-                                                    parent: {
-                                                        'type': 'accompanying_period_resource',
-                                                        'id': r.id,
-                                                        'comment': r.comment,
-                                                        'parent': {
-                                                            'type': 'accompanying_period',
-                                                            'id': accompanyingCourse.id
-                                                        }
-                                                } %}
-                                            </span>
-                                        </div>
-                                    </div>
-                                {% endif %}
-
-                                {%- if w.socialAction.issue -%}
-                                    <div class="wl-row">
-                                        <div class="wl-col title">
-                                            <h3>{{ 'Social issue'|trans }}</h3>
-                                        </div>
-                                        <div class="wl-col list">
-                                            <p class="wl-item social-issues">
-                                                {{ w.socialAction.issue|chill_entity_render_box }}
-                                            </p>
-                                        </div>
-                                    </div>
-                                {% endif %}
-
-                            </div>
-                        </div>
-
-                        <div class="item-row column">
-                            {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' with {} %}
-                        </div>
-
-                        <div class="item-row separator">
-                            <div class="updatedBy">
-                                {{ 'Last updated by'|trans}} <b>{{ w.updatedBy|chill_entity_render_box }}</b>,<br>
-                                {{ 'le ' ~ w.updatedAt|format_datetime('long', 'short') }}
-                            </div>
-                            <ul class="record_actions">
-                                <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>
-                                <li>
-                                    <a class="btn btn-delete" title="{{ 'Delete'|trans }}"
-                                       href="{{ path('chill_person_accompanying_period_work_delete', { 'id': w.id } ) }}"
-                                    ></a>
-                                </li>
-                            </ul>
-                        </div>
-
-                    </div>
+                    {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with { 'displayAction': true } %}
                 {% endfor %}
             </div>
         {% endif %}

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

@@ -31,7 +31,7 @@
                     <li class="associated-persons">
                         <span class="item-key">{{ 'Participants'|trans ~ ' : ' }}</span>
                         {% for p in w.persons %}
-                            <span class="badge-person">{{ p|chill_entity_render_box }}</span>
+                            <span class="badge-person">{{ p|chill_entity_render_box({'addAgeBadge': true}) }}</span>
                         {% endfor %}
                     </li>
                 </ul>
@@ -46,16 +46,15 @@
                     {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' with {} %}
                 </ul>
 
-                <div class="metadata text-end" style="font-size: 60%">
-                    {{ 'Last updated by'|trans }}
-                    <span class="user">{{ w.updatedBy|chill_entity_render_box }}</span>:
-                    <span class="date">{{ w.updatedAt|format_datetime('short', 'short') }}</span>
+                <div class="metadata text-end">
+                    {% import '@ChillPerson/Macro/updatedBy.html.twig' as macro %}
+                    {{ macro.updatedBy(w) }}
                 </div>
 
             </span>
         </div>
 
-    </a>{# {{ dump(w) }} #}
+    </a>
     {% endfor %}
   </div>
 

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

@@ -1,4 +1,4 @@
-<div class="item-bloc accompanying-period-item{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+<div class="item-bloc accompanying-period-item{% if itemBlocClass is defined %} {{ itemBlocClass|raw }}{% endif %}" data-accompanying-period-id="{{ period.id|e('html_attr') }}">
     <div class="item-row">
         <div class="wrap-header">
             <div class="wh-row">
@@ -11,7 +11,7 @@
                         <span class="badge rounded-pill bg-danger">{{- 'Emergency'|trans|upper -}}</span>
                     {% endif %}
                     {% if period.confidential %}
-                        <span class="badge rounded-pill bg-danger">{{- 'Confidential'|trans|upper -}}</span>
+                        <span class="badge rounded-pill bg-confidential">{{- 'Confidential'|trans|upper -}}</span>
                     {% endif %}
                 </div>
                 <div class="wh-col">
@@ -43,11 +43,12 @@
                 </div>
                 <div class="wh-col">
                     {% if chill_accompanying_periods.fields.user == 'visible'  %}
+                        {# the tags `data-referrer-text` is used by module `@ChillPerson/mod/AccompanyingPeriod/setReferrer.js` #}
                         {% if period.user %}
                             <abbr class="referrer" title="{{ 'Referrer'|trans }}">{{ 'Referrer'|trans }}:</abbr>
-                            {{ period.user.username|chill_entity_render_box }}
+                            <span data-referrer-text="data-referrer-text">{{ period.user|chill_entity_render_box }}</span>
                         {% else %}
-                            <span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
+                            <span class="chill-no-data-statement" data-referrer-text="data-referrer-text">{{ 'No accompanying user'|trans }}</span>
                         {% endif %}
                     {% endif %}
                 </div>
@@ -65,7 +66,8 @@
                                 {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
                                     action: 'show', displayBadge: true,
                                     targetEntity: { name: 'person', id: period.requestorPerson.id },
-                                    buttonText: period.requestorPerson|chill_entity_render_string
+                                    buttonText: period.requestorPerson|chill_entity_render_string,
+                                    isDead: period.requestorPerson.deathdate is not null
                                 } %}
                             </span>
                         {% endif %}
@@ -90,7 +92,8 @@
                                 {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
                                     action: 'show', displayBadge: true,
                                     targetEntity: { name: 'person', id: p.person.id },
-                                    buttonText: p.person|chill_entity_render_string
+                                    buttonText: p.person|chill_entity_render_string,
+                                    isDead: p.person.deathdate is not null
                                 } %}
                             </span>
                         {% endfor %}
@@ -111,11 +114,19 @@
             {% endif %}
         </div>
     </div>
-    {% if recordAction is defined %}
-        <div class="item-row separator">
-            <ul class="record_actions">
-                {{ recordAction }}
-            </ul>
+    <div class="item-row separator">
+        <div class="item-col item-meta">
+            {% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', period.id) %}
+            {% if notif_counter.total > 0 %}
+                {{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', period.id) }}
+            {% endif %}
         </div>
-    {% endif %}
+        <div class="item-col">
+            {% if recordAction is defined %}
+                <ul class="record_actions">
+                    {{ recordAction }}
+                </ul>
+            {% endif %}
+        </div>
+    </div>
 </div>

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

@@ -0,0 +1,30 @@
+{% extends "@ChillMain/layout.html.twig" %}
+
+{% set activeRouteKey = 'chill_person_accompanying_period_user_list' %}
+
+{% block title %}{{ 'My accompanying periods'|trans }}{% endblock title %}
+
+{% macro recordAction(period) %}
+    <li>
+        <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': period.id }) }}"
+        class="btn btn-show" title="{{ 'See accompanying period'|trans }}"></a>
+    </li>
+{% endmacro %}
+
+
+{% block content %}
+
+    <div class="col-md-10">
+        <h1>{{ 'My accompanying periods'|trans }}</h1>
+
+        <div class="flex-table accompanyingcourse-list">
+            {% for period in accompanyingPeriods %}
+                {% include '@ChillPerson/AccompanyingPeriod/_list_item.html.twig' with {'period': period, 'recordAction': _self.recordAction(period)} %}
+            {% endfor %}
+        </div>
+
+        {{ chill_pagination(pagination) }}
+
+    </div>
+
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig

@@ -11,6 +11,7 @@
     * addCenter     bool
     * hLevel        integer
     * addDeath      bool
+    * addAgeBadge   bool
     * address_multiline     bool
     * customButtons [
         'before'    Twig\Markup, (injected with macro)
@@ -40,6 +41,11 @@
         {%- endfor -%}
         </span>
     {%- endif -%}
+    {%- if options['addAgeBadge'] -%}
+        {% if person.age is not null and person.deathDate is null %}
+        <span>({{- 'years_old'|trans({ 'age': person.age }) -}})</span>
+        {% endif %}
+    {% endif %}
 {% endmacro raw %}
 
 {% macro label(person, options) %}
@@ -90,7 +96,7 @@
                 {#- must be on one line to avoid spaces with dash -#}
                 <time datetime="{{ person.deathdate|date('Y-m-d') }}" title="{{ 'deathdate'|trans }}">{{ person.deathdate|format_date("medium") }}</time>
                 {%- if options['addAge'] -%}
-                    <span class="age">{{ 'years_old'|trans({ 'age': person.age }) }}</span>
+                    <span class="age">&nbsp;{{ 'years_old'|trans({ 'age': person.age }) }}</span>
                 {%- endif -%}
             {%- elseif person.birthdate is not null -%}
                 <time datetime="{{ person.birthdate|date('Y-m-d') }}" title="{{ 'Birthdate'|trans }}">

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

@@ -14,6 +14,7 @@
                 'render': 'label',
                 'addLink': true,
                 'addInfo': true,
+                'addAgeBadge': true,
                 'customArea': {
                     'afterLabel': _self.addHolder(member.holder)
                 }

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

@@ -4,12 +4,14 @@
 {% block title 'household.Edit household members'|trans  %}
 
 {% block content %}
-<div class="col-md-10 col-xxl household-members">
+    <div class="row">
+        <div class="col-md-10 col-xxl household-members">
 
-    <h1>{{ block('title') }}</h1>
-    <div id="household_members_editor"></div>
+            <h1>{{ block('title') }}</h1>
+            <div id="household_members_editor"></div>
 
-</div>
+        </div>
+    </div>
 {% endblock %}
 
 {% block js %}

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

@@ -51,7 +51,42 @@
         </div>
             <div class="item-bloc col-7 col-comment">
                 {% if form is null %}
-
+                    {% set currentComposition = household.currentComposition %}
+                    {% if currentComposition is not null %}
+                        <div>
+                            <h6>
+                                 {{ currentComposition.householdCompositionType.label|localize_translatable_string }}
+                            </h6>
+                            <p>
+                                {{ 'household_composition.numberOfChildren children in household'|trans({'numberOfChildren': currentComposition.numberOfChildren}) }}
+                            </p>
+                            <p>
+                                {{ 'household_composition.Since'|trans({'startDate': currentComposition.startDate}) }}
+                            </p>
+                            <ul class="record_actions">
+                                <li>
+                                    <a class="btn btn-sm btn-update change-icon"
+                                       href="{{ path('chill_person_household_composition_index', {'id': household.id}) }}">
+                                        {{ 'household_composition.Update composition'|trans }}
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    {% else %}
+                        <div class="alert alert-danger">
+                            <p>
+                                {{ 'household_composition.Currently no composition'|trans }}
+                            </p>
+                                <ul class="record_actions" style="margin-bottom: 0">
+                                    <li>
+                                        <a class="btn btn-sm btn-update change-icon"
+                                           href="{{ path('chill_person_household_composition_index', {'id': household.id}) }}">
+                                            {{ 'household_composition.Add a composition'|trans }}
+                                        </a>
+                                    </li>
+                                </ul>
+                        </div>
+                    {% endif %}
                     {% if household.waitingForBirth or not household.commentMembers.isEmpty() %}
                         <div class="p-4 bg-light">
                             {% if household.waitingForBirth %}
@@ -176,13 +211,26 @@
                                 <span class="unfolded text-secondary">{{ 'household.Hide memberships'|trans }}</span>
                             </button>
                         </h2>
+
+                        {% macro buttonsOldMembers(member) %}
+                            {% set household = member.person.getCurrentHousehold %}
+                            {% if household is not null %}
+                                <li>
+                                    <a href="{{ path('chill_person_household_summary', { 'household_id': household.id }) }}" class="btn btn-sm btn-chill-beige"><i class="fa fa-home"></i></a>
+                                </li>
+                            {% endif %}
+                        {% endmacro %}
+
                         <div id="collapse_{{ p == '_none' ? '_none' : p.id }}"
                             class="accordion-collapse collapse"
                             aria-labelledby="heading_{{ p == '_none' ? '_none' : p.id }}"
                             data-bs-parent="#nonCurrent">
                             <div class="flex-table my-0 list-household-members">
                                 {% for m in old_members %}
-                                    {% include '@ChillPerson/Household/_render_member.html.twig' with { 'member': m } %}
+                                    {% include '@ChillPerson/Household/_render_member.html.twig' with {
+                                        'member': m,
+                                        'customButtons': { 'before': _self.buttonsOldMembers(m) }
+                                    } %}
                                 {% endfor %}
                             </div>
                         </div>

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

@@ -0,0 +1,38 @@
+{% extends '@ChillPerson/Household/layout.html.twig' %}
+
+{% set activeRouteKey = 'chill_person_household_composition_index' %}
+
+{% block title  'Remove household composition'|trans %}
+
+{% block display_content %}
+    <p>{{ 'Concerns household n°%id%'|trans({ '%id%' : household.id } ) }}</p>
+    <div class="wl-row">
+                    <div class="wl-col title">
+                        <h3>{{ 'Composition'|trans }}:</h3>
+                    </div>
+                    <div class="wl-col list">
+                        {% for m in household.members %}
+                            <span class="wl-item">
+                                {% 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
+                                } %}
+                            </span>
+                        {% endfor %}
+                    </div>
+                </div>
+{% endblock %}
+
+{% block content %}
+{{ include('@ChillMain/Util/confirmation_template.html.twig',
+    {
+        'title'             : 'Remove household composition'|trans,
+        'confirm_question'  : 'Are you sure you want to remove this composition?'|trans,
+        'display_content'   : block('display_content'),
+        'cancel_route'      : 'chill_person_household_composition_index',
+        'cancel_parameters' : { 'composition_id' : composition.id, 'id' : household.id },
+        'form'              : form
+    } ) }}
+{% endblock %}

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

@@ -0,0 +1,99 @@
+{% extends '@ChillPerson/Household/layout.html.twig' %}
+
+{% block title 'household_composition.Compositions'|trans %}
+
+{% block block_post_menu %}
+    <div class="post-menu"></div>
+{% endblock %}
+
+{% block content %}
+<div class="household_composition">
+    <h1>{{ block('title') }}</h1>
+
+    {% if compositions|length == 0 %}
+        <p class="chill-no-data-statement">{{ 'household_composition.No composition yet'|trans }}</p>
+    {% else %}
+        <div class="flex-table">
+            {% for c in compositions %}
+                {% if c.id != editId %}
+                    <div class="item-bloc">
+                        <div class="item-row">
+                            <div class="item-col">
+                                <h3>{{ c.householdCompositionType.label|localize_translatable_string }}</h3>
+                                <p>{{ 'household_composition.numberOfChildren'|trans }}: {{ c.numberOfChildren }}</p>
+                            </div>
+                            <div class="item-col" style="justify-content: flex-end">{{ 'household_composition.Since'|trans({'startDate': c.startDate}) }}</div>
+                        </div>
+                        <div class="item-row">
+                            <div class="item-col">
+                                {% if c.endDate is null %}
+                                    <span class="chill-no-data-statement">{{ 'household_composition.Still active'|trans }}</span>
+                                {% else %}
+                                    {{ 'household_composition.Until'|trans({'endDate': c.endDate })}}
+                                {% endif %}
+                            </div>
+                        </div>
+                        {% if c.comment.comment is not empty %}
+                            <div class="item-row separator">
+                                {{ c.comment|chill_entity_render_box }}
+                            </div>
+                        {% endif %}
+                        {% if is_granted('CHILL_PERSON_HOUSEHOLD_EDIT', c.household) %}
+                            <div class="item-row">
+                                <ul class="record_actions">
+                                    <li>
+                                        <a href="{{ path('chill_person_household_composition_index', {'id': c.household.id, 'edit': c.id}) }}" class="btn btn-edit"></a>
+                                    </li>
+                                    <li>
+                                        <a href="{{ chill_path_add_return_path('chill_person_household_composition_delete', {'composition_id': c.id,
+                                                        'household_id': c.household.id}) }}"
+                                            class="btn btn-delete"
+                                            title="{{ 'Delete'|trans }}"></a>
+                                    </li>
+                                </ul>
+                            </div>
+                        {% endif %}
+                    </div>
+                {% else %}
+                    {{ form_start(form) }}
+
+                    {{ form_widget(form) }}
+
+                    <ul class="record_actions">
+                        <li class="cancel" style="margin-right: auto;">
+                            <a class="btn btn-cancel" href="{{ path('chill_person_household_composition_index', {'id': c.household.id}) }}">{{ 'Cancel'|trans }}</a>
+                        </li>
+                        <li>
+                            <button type="submit" class="btn btn-create">{{ 'Save'|trans }}</button>
+                        </li>
+                    </ul>
+                    {{ form_end(form) }}
+                {% endif %}
+            {% endfor %}
+        </div>
+    {% endif %}
+
+    <div id="collapseForm" class="{% if not isPosted %}collapse{% endif %}">
+        {{ form_start(form) }}
+
+        {{ form_widget(form) }}
+
+        <ul class="record_actions">
+           <li>
+               <button type="submit" class="btn btn-create">{{ 'Save'|trans }}</button>
+           </li>
+        </ul>
+        {{ form_end(form) }}
+    </div>
+
+    {% if editId == -1 %}
+        <ul class="record_actions sticky-form-buttons">
+                <li>
+                    <button class="btn btn-primary btn-create change-icon" type="button" data-bs-toggle="collapse" data-bs-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
+                        {{ 'Create'|trans }}
+                    </button>
+                </li>
+        </ul>
+    {% endif %}
+</div>
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Macro/updatedBy.html.twig

@@ -0,0 +1,12 @@
+{% macro updatedBy(entity) %}
+    <div class="updatedBy">
+        {{ 'Last updated on'|trans }}
+        <span class="date">
+            {{ entity.updatedAt|format_datetime('medium', 'short') }}
+        </span>,
+        {{ 'by_user'|trans }}
+        <span class="user">
+            {{ entity.updatedBy|chill_entity_render_box }}
+        </span>
+    </div>
+{% endmacro %}

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

@@ -63,18 +63,43 @@
 
     {{ form_start(form, {'attr' : {'id' : 'create-form'}}) }}
 
+    <div class="row mb-1" style="display:flex;">
+        {{ form_label(form.lastName, 'Last name'|trans) }}
+        <div class="col-sm-8">
+        {{ form_widget(form.lastName, {'attr': {'data-suggest-transform': 'uppercase_all' } }) }}
+        </div>
+    </div>
+    <div data-suggest-container="{{ form.lastName.vars.full_name|e('html_attr') }}" class="col-sm-8" style="margin-left: auto;"></div>
 
-    {{ form_row(form.lastName, { 'label' : 'Last name'|trans }) }}
-
-    {{ form_row(form.firstName, { 'label' : 'First name'|trans }) }}
+    <div class="row mb-1" style="display:flex;">
+        {{ form_label(form.firstName, 'First name'|trans) }}
+        <div class="col-sm-8">
+        {{ form_widget(form.firstName, {'attr': {'data-suggest-transform': 'uppercase_first_letter' } }) }}
+        </div>
+    </div>
+    <div data-suggest-container="{{ form.firstName.vars.full_name|e('html_attr') }}" class="col-sm-8" style="margin-left: auto;"></div>
 
     {% if form.altNames is defined %}
-        {{ form_widget(form.altNames) }}
+        {% for altName in form.altNames %}
+            <div class="row mb-1" style="display:flex;">
+                {{ form_label(altName) }}
+                <div class="col-sm-8">
+                    {{ form_widget(altName, {'attr': {'data-suggest-transform': 'uppercase_all' } }) }}
+                </div>
+            </div>
+            <div data-suggest-container="{{ altName.vars.full_name|e('html_attr') }}" class="col-sm-8" style="margin-left: auto;"></div>
+        {% endfor %}
     {% endif %}
 
+    {{ form_row(form.gender, { 'label' : 'Gender'|trans }) }}
+
     {{ form_row(form.birthdate, { 'label' : 'Date of birth'|trans }) }}
 
-    {{ form_row(form.gender, { 'label' : 'Gender'|trans }) }}
+    {{ form_row(form.phonenumber, { 'label' : 'Phonenumber'|trans }) }}
+
+    {{ form_row(form.mobilenumber, { 'label' : 'Mobilenumber'|trans }) }}
+
+    {{ form_row(form.email, { 'label' : 'Email'|trans }) }}
 
     {% if form.center is defined %}
         {{ form_row(form.center) }}
@@ -93,7 +118,7 @@
                 <li>
                     {{ form_widget(form.createPeriod, { 'attr': { 'class': 'dropdown-item' }}) }}
                 </li>
-           </ul>
+            </ul>
         </li>
     </ul>
 
@@ -103,5 +128,5 @@
 {% endblock content %}
 
 {% block js %}
-    {# {{ encore_entry_script_tags('mod_disablebuttons') }} #}
+    {{ encore_entry_script_tags('page_suggest_names') }}
 {% endblock js %}

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

@@ -85,9 +85,11 @@
         </div>
         <div id="maritalStatusDate">
             {{ form_row(form.maritalStatusDate, { 'label' : 'Date of last marital status change'} ) }}
-            {{ form_row(form.maritalStatusComment, { 'label' : 'Comment on the marital status'} ) }}
         </div>
         {%- endif -%}
+        <div id="maritalStatusComment">
+            {{ form_row(form.maritalStatusComment, { 'label' : 'Comment on the marital status'} ) }}
+        </div>
     </fieldset>
     {%- endif -%}
 

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

@@ -59,7 +59,8 @@
                             {% 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
+                                buttonText: m.person|chill_entity_render_string,
+                                isDead: m.person.deathdate is not null
                             } %}
                         {%- endfor -%}
                     {% endif %}
@@ -124,7 +125,7 @@
             {% if not person.isSharingHousehold() %}
                 <ul class="record_actions">
                     <li>
-                        <a class="btn btn-misc" href="{{chill_path_add_return_path('chill_person_household_members_editor', { 'persons': [ person.id ], 'followAfter': 'true'}) }}">
+                        <a class="btn btn-misc" href="{{chill_path_add_return_path('chill_person_household_members_editor', { 'persons': [ person.id ], 'followAfter': true}) }}">
                             <i class="fa fa-sign-in fa-fw"></i>
                             {{ 'household.Join'|trans }}
                         </a>

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

@@ -83,7 +83,7 @@
                 <ul class="record_actions">
                     {% if is_granted('CHILL_PERSON_CREATE') %}
                     <li>
-                        <a href="{{ path('chill_person_new') }}" class="btn btn-create">
+                        <a href="{{ path('chill_person_new', { "_fragment": pattern }) }}" class="btn btn-create">
                             {{ 'Add a person'|trans }}
                         </a>
                     </li>

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

@@ -26,7 +26,7 @@
     <ul class="record_actions">
         {% if is_granted('CHILL_PERSON_CREATE') %}
             <li>
-                <a href="{{ path('chill_person_new') }}" class="btn btn-create">
+                <a href="{{ path('chill_person_new', { "_fragment": pattern }) }}" class="btn btn-create">
                     {{ 'Add a person'|trans }}
                 </a>
             </li>
@@ -74,124 +74,157 @@
                     {# add as requestor #}
 
                     {% if acps|length > 0 %}
-                        <div class="item-row">
-                            <div class="wrap-list periods-list">
-                                {% for acp in acps %}
-                                    {% set app = person.findParticipationForPeriod(acp) %}
-                                    <div class="wl-row separator">
+                        {% for acp in acps %}
+                            {% set app = person.findParticipationForPeriod(acp) %}
+                            <div class="item-row separator">
+                                <div class="wrap-list periods-list">
+                                    <div class="wl-row">
                                         <div class="wl-col title">
-
-                                            {% if acp.step == 'DRAFT' %}
-                                                <div class="is-draft">
-                                                    <span class="course-draft badge bg-secondary" title="{{ 'course.draft'|trans }}">{{ 'course.draft'|trans }}</span>
-                                                </div>
-                                            {% endif %}
-                                            {% if acp.requestorPerson == person %}
-                                               <div>
-                                                <span class="as-requestor badge bg-info" title="{{ 'Requestor'|trans|e('html_attr') }}">
-                                                       {{ 'Requestor'|trans({'gender': person.gender}) }}
-                                                </span>
-                                               </div>
-                                            {% endif %}
-
-                                            <div class="date">
+                                            <h3 class="courseid mb-2">
+                                                    <i class="fa fa-random fa-fw"></i>
+                                                    {{ 'Course number'|trans }} {{ acp.id }}
+                                            </h3>
+                                        </div>
+                                        <div class="wl-col list">
+                                            <div class="d-flex flex-column justify-content-center">
                                                 {% if app != null %}
-                                                    {{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}
+                                                    <div class="date">
+                                                        {{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}
+                                                    </div>
+                                                {% endif %}
+
+                                                {% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', acp.id) %}
+                                                {% if notif_counter.total > 0 %}
+                                                    {{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', acp.id) }}
                                                 {% endif %}
                                             </div>
+                                            <div class="ms-auto">
+                                                {% if acp.requestoranonymous == false and acp.requestorPerson == person %}
+                                                    <span class="as-requestor badge bg-info" title="{{ 'Requestor'|trans|e('html_attr') }}">
+                                                        {{ 'Requestor'|trans({'gender': person.gender}) }}
+                                                    </span>
+                                                {% endif %}
 
-                                            {% if acp.user is not null %}
+                                                {% if acp.emergency %}
+                                                    <span class="badge rounded-pill bg-danger">{{- 'Emergency'|trans|upper -}}</span>
+                                                {% endif %}
+
+                                                {% if acp.confidential %}
+                                                    <span class="badge rounded-pill bg-confidential">{{- 'Confidential'|trans|upper -}}</span>
+                                                {% 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-secondary" style="font-size: 85%;" title="{{ 'course.closed'|trans }}">{{ 'course.closed'|trans }}</span>
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {% if acp.user is not null %}
+                                        <div class="wl-row">
+                                            <div class="wl-col title">
+                                                <h3 class="referrer">{{ 'Referrer'|trans }}</h3>
+                                            </div>
+                                            <div class="wl-col list">
                                                 <div class="user">
-                                                    <abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
                                                     {{ acp.user|chill_entity_render_box }}
                                                 </div>
-                                            {% endif %}
-
-                                            <div class="courseid">
-                                                {{ 'File number'|trans }} {{ acp.id }}
                                             </div>
-
-
                                         </div>
-                                        <div class="wl-col list">
-
-                                            {% for issue in acp.socialIssues %}
-                                                {{ issue|chill_entity_render_box }}
-                                            {% endfor %}
-
-                                            <ul class="record_actions record_actions_column">
-                                                <li>
-                                                    <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': acp.id }) }}"
-                                                       class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying period'|trans }}">
-                                                        <i class="fa fa-random fa-fw"></i>
-                                                    </a>
-                                                </li>
-                                                <li>
-                                                </li>
-                                            </ul>
-
-                                        </div>
-                                    </div>
-                                    {% if acp.currentParticipations|length > 1 %}
-                                    <div class="wl-row">
-                                       <div class="wl-col title">
-                                           <div class="participants">
-                                               {{ 'Participants'|trans }}
-                                           </div>
-                                       </div>
-                                        <div class="wl-col list">
-                                            {% set participating = false %}
-                                            {% for part in acp.currentParticipations  %}
-                                                {% if part.person.id != person.id %}
-                                                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
-                                                        targetEntity: { name: 'person', id: part.person.id },
-                                                        action: 'show',
-                                                        displayBadge: true,
-                                                        buttonText: part.person|chill_entity_render_string
-                                                    } %}
-                                                {% else %}
-                                                    {% set participating = true %}
-                                                {% endif %}
-                                            {% endfor %}
-                                            {% if participating %}
-                                            {{ 'person.and_himself'|trans({'gender': person.gender}) }}
-                                            {% endif %}
-                                        </div>
-                                    </div>
                                     {% endif %}
+
+                                    {% if acp.socialIssues|length > 0  %}
+                                        <div class="wl-row">
+                                            <div class="wl-col title">
+                                                <h3>{{ 'Social issues'|trans }}</h3>
+                                            </div>
+                                            <div class="wl-col list">
+                                                {% for issue in acp.socialIssues %}
+                                                    {{ issue|chill_entity_render_box }}
+                                                {% endfor %}
+                                            </div>
+                                        </div>
+                                    {% endif %}
+
+                                    {% if acp.currentParticipations|length > 1 %}
+                                        <div class="wl-row">
+                                            <div class="wl-col title">
+                                                <h3 class="participants">
+                                                    {{ 'Participants'|trans }}
+                                                </h3>
+                                            </div>
+                                            <div class="wl-col list">
+                                                {% set participating = false %}
+                                                {% for part in acp.currentParticipations  %}
+                                                    {% if part.person.id != person.id %}
+                                                        {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                                            targetEntity: { name: 'person', id: part.person.id },
+                                                            action: 'show',
+                                                            displayBadge: true,
+                                                            buttonText: part.person|chill_entity_render_string,
+                                                            isDead: part.person.deathdate is not null
+                                                        } %}
+                                                    {% else %}
+                                                        {% set participating = true %}
+                                                    {% endif %}
+                                                {% endfor %}
+                                                {% if participating %}
+                                                    {{ 'person.and_himself'|trans({'gender': person.gender}) }}
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                    {% endif %}
+
+                                    {% if acp.requestoranonymous == false %}
                                         {% if (acp.requestorPerson is not null and acp.requestorPerson.id != person.id) or acp.requestorThirdParty is not null %}
                                             <div class="wl-row">
                                                 <div class="wl-col title">
-                                                    <div>
+                                                    <h3>
                                                         {% if acp.requestorPerson is not null %}
                                                             {{ 'Requestor'|trans({'gender': acp.requestorPerson.gender}) }}
                                                         {% else %}
                                                             {{ 'Requestor'|trans({'gender': 'other'})}}
                                                         {% endif %}
-                                                    </div>
+                                                    </h3>
                                                 </div>
                                                 <div class="wl-col list">
                                                     {% if acp.requestorThirdParty is not null %}
-                                                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
-                                                        targetEntity: { name: 'thirdparty', id: acp.requestorThirdParty.id },
-                                                        action: 'show',
-                                                        displayBadge: true,
-                                                        buttonText: acp.requestorThirdParty|chill_entity_render_string
-                                                    } %}
+                                                        {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                                            targetEntity: { name: 'thirdparty', id: acp.requestorThirdParty.id },
+                                                            action: 'show',
+                                                            displayBadge: true,
+                                                            buttonText: acp.requestorThirdParty|chill_entity_render_string
+                                                        } %}
                                                     {% else %}
                                                         {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
                                                             targetEntity: { name: 'person', id: acp.requestorPerson.id },
                                                             action: 'show',
                                                             displayBadge: true,
-                                                            buttonText: acp.requestorPerson|chill_entity_render_string
+                                                            buttonText: acp.requestorPerson|chill_entity_render_string,
+                                                            isDead: acp.requestorPerson.deathdate is not null
                                                         } %}
                                                     {% endif %}
                                                 </div>
                                             </div>
                                         {% endif %}
-                                {% endfor %}
+                                    {% endif %}
+
+                                    <ul class="record_actions record_actions_column">
+                                        <li>
+                                            <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': acp.id }) }}"
+                                               class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying period'|trans }}">
+                                                <i class="fa fa-random fa-fw"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+
+                                </div>
                             </div>
-                        </div>
+                        {% endfor %}
                     {% endif %}
 
                 </div>

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

@@ -301,10 +301,8 @@ This view should receive those arguments:
             </div>
         {% endif %}
         {% if person.updatedBy %}
-            <div class="updatedBy">
-            {{ 'Last updated by'|trans}}: <b>{{ person.updatedBy|chill_entity_render_box }}</b>,<br>
-            {{ 'on'|trans ~ person.updatedAt|format_datetime('long', 'short') }}
-            </div>
+            {% import '@ChillPerson/Macro/updatedBy.html.twig' as macro %}
+            {{ macro.updatedBy(person) }}
         {% endif %}
     </div>
 

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

@@ -0,0 +1,15 @@
+<div class="col-md col-xxl">
+    <div id="collapseForm" class="{% if not form.vars.submitted %}collapse{% endif %}">
+        <h3 style="margin-bottom: 2rem;">{{ 'Add a person resource'|trans }}</h3>
+        {% include "@ChillPerson/PersonResource/form.html.twig" %}
+    </div>
+
+    <ul class="record_actions sticky-form-buttons">
+        <li>
+            <button class="btn btn-primary btn-create change-icon" type="button" data-bs-toggle="collapse" data-bs-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
+                {{ 'Add a person resource'|trans }}
+            </button>
+        </li>
+    </ul>
+
+</div>

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

@@ -0,0 +1,17 @@
+{% extends "@ChillPerson/Person/layout.html.twig"  %}
+
+{% set activeRouteKey = 'chill_person_resource_list' %}
+{# {% set person = person %} #}
+
+{% block title  'Remove resource'|trans %}
+
+{% block personcontent %}
+{{ include('@ChillMain/Util/confirmation_template.html.twig',
+    {
+        'title'             : 'Remove resource'|trans,
+        'confirm_question'  : 'Are you sure you want to remove the resource for "%name%" ?'|trans({ '%name%' : person.firstname ~ ' ' ~ person.lastname } ),
+        'cancel_route'      : 'chill_person_resource_list',
+        'cancel_parameters' : { 'person_id' : person.id },
+        'form'              : form
+    } ) }}
+{% endblock %}

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

@@ -0,0 +1,23 @@
+{% extends "@ChillPerson/Person/layout.html.twig"  %}
+
+{% set activeRouteKey = 'chill_person_resource_edit' %}
+
+{% block js %}
+    {{ encore_entry_script_tags('page_person_resource_showhide_input') }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block css %}
+    {{ encore_entry_link_tags('page_person_resource_showhide_input') }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block title %}{{ 'edit resource'|trans|capitalize }}{% endblock %}
+
+{% block personcontent %}
+
+<h1 style="margin-bottom: 2rem;">{{ 'edit resource'|trans }}</h1>
+
+{% include "@ChillPerson/PersonResource/form.html.twig" %}
+
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/PersonResource/form.html.twig

@@ -0,0 +1,77 @@
+{{ form_start(form, {'attr' : {'id' : 'create-form'}}) }}
+{{ form_errors(form) }}
+{{ form_row(form.kind) }}
+    <div id="linked-entity">
+        <fieldset class="mb-3">
+            <div class="row">
+                <legend class="col-sm-4 col-form-label">Associer un</legend>
+                <div class="col-sm-8">
+                    <div id="entity-selector">
+                        <div class="form-check">
+                            {% if resource is defined and resource.person is not null %}
+                                <input checked type="radio" id="chill_personbundle_person_resource_linkedEntity_0" name="linked-entity" class="form-check-input" value="person" {% if form.vars.submitted and app.request.request.get('linked-entity', null) == 'person' %}checked{% endif %}/>
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_0">Usager</label>
+                            {% else %}
+                                <input type="radio" id="chill_personbundle_person_resource_linkedEntity_0" name="linked-entity" class="form-check-input" value="person" />
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_0">Usager</label>
+                            {% endif %}
+                        </div>
+                        <div class="form-check">
+                            {% if resource is defined and resource.thirdparty is not null %}
+                                <input checked type="radio" id="chill_personbundle_person_resource_linkedEntity_1" name="linked-entity" class="form-check-input" value="thirdparty" {% if form.vars.submitted and app.request.request.get('linked-entity', null) == 'thirdparty' %}checked{% endif %}/>
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_1">Tiers</label>
+                            {% else %}
+                                <input type="radio" id="chill_personbundle_person_resource_linkedEntity_1" name="linked-entity" class="form-check-input" value="thirdparty" />
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_1">Tiers</label>
+                            {% endif %}
+                        </div>
+                        <div class="form-check">
+                            {% if resource is defined and resource.freeText is not null %}
+                                <input checked type="radio" id="chill_personbundle_person_resource_linkedEntity_2" name="linked-entity" class="form-check-input" value="freetext" {% if form.vars.submitted and app.request.request.get('linked-entity', null) == 'thirdparty' %}checked{% endif %}/>
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_2">Description libre</label>
+                            {% else %}
+                                <input type="radio" id="chill_personbundle_person_resource_linkedEntity_2" name="linked-entity" class="form-check-input" value="freetext" />
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_2">Description libre</label>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+
+
+    <div id="person-entity">
+        {{ form_row(form.person) }}
+    </div>
+    <div id="thirdparty-entity">
+        {{ form_row(form.thirdparty) }}
+    </div>
+    <div id="freetext-entity">
+        {{ form_row(form.freetext) }}
+    </div>
+
+
+{{ form_row(form.comment) }}
+
+{% if action is defined %}
+    <ul class="record_actions sticky-form-buttons">
+        <li class="edit">
+            <button class="btn btn-edit"
+            type="submit" id="newPersonResource">
+                {{ 'edit resource'|trans|capitalize }}
+            </button>
+        </li>
+    </ul>
+{% else %}
+    <ul class="record_actions">
+        <li>
+            <button class="btn btn-create"
+            type="submit" id="newPersonResource">
+                {{ 'Save'|trans }}
+            </button>
+        </li>
+    </ul>
+{% endif %}
+
+{{ form_end(form) }}

src/Bundle/ChillPersonBundle/Resources/views/PersonResource/list.html.twig

@@ -0,0 +1,100 @@
+{% extends "@ChillPerson/Person/layout.html.twig"  %}
+
+{% set activeRouteKey = 'chill_person_resource_list' %}
+
+{% block title %}{{ 'Person resources'|trans|capitalize ~ ' ' ~ person|chill_entity_render_string }}{% endblock %}
+
+{% block js %}
+    {{ encore_entry_script_tags('page_person_resource_showhide_input') }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block css %}
+    {{ encore_entry_link_tags('page_person_resource_showhide_input') }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block personcontent %}
+
+<h1>{{ 'List of resources'|trans }}</h1>
+
+{% if personResources|length > 0 %}
+    <div class="flex-table">
+        {% for resource in personResources %}
+            <div class="item-bloc">
+                <div class="item-row">
+                    <div class="item-col" style="width: 50%">
+                    {% if resource.person is not null %}
+                        <div class="denomination h3">
+                            <span>
+                                {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                    action: 'show', displayBadge: true,
+                                    targetEntity: { name: 'person', id: resource.person.id },
+                                    buttonText: resource.person|chill_entity_render_string,
+                                    isDead: resource.person.deathdate is not null
+                                } %}
+                            </span>
+                        </div>
+                    {% elseif resource.thirdparty is not null %}
+                        <div class="denomination h3">
+                            <span>
+                                {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                    action: 'show', displayBadge: true,
+                                    targetEntity: { name: 'thirdparty', id: resource.thirdparty.id },
+                                    buttonText: resource.thirdParty|chill_entity_render_string,
+                                    parent: resource.thirdparty.parent
+                                } %}
+                            </span>
+                        </div>
+                    {% else %}
+                        <div class="denomination h3">
+                            <span>{{ resource.freetext }}</span>
+                        </div>
+                    {% endif %}
+                    </div>
+                    <div class="item-col" style="justify-content: flex-end; ">
+                        {% if resource.kind %}
+                        <span>{{ resource.kind.title.fr|capitalize }}</span>
+                        {% endif %}
+                    </div>
+                </div>
+                {% if resource.comment.comment is not empty %}
+                    <div class="item-row separator">
+                        <section class="chill-entity entity-comment-embeddable">
+                            <div>{{ resource.comment|chill_entity_render_box }}<div>
+                        </section>
+                    </div>
+                {% endif %}
+                {% if is_granted('CHILL_PERSON_UPDATE', resource.personOwner) %}
+                    <div class="item-row separator">
+                        <div class="item-col">
+                            <ul class="record_actions">
+                                <li>
+                                    <a href="{{ chill_path_add_return_path('chill_person_resource_edit', {'resource_id': resource.id,
+                                                    'person_id': person.id,}) }}"
+                                                    class="btn btn-sm btn-edit"
+                                                    title="{{ 'Edit'|trans }}"></a>
+                                </li>
+                                <li>
+                                    <a href="{{ chill_path_add_return_path('chill_person_resource_delete', {'person_id': person.id,
+                                                    'resource_id': resource.id}) }}"
+                                        class="btn btn-sm btn-delete"
+                                        title="{{ 'Delete'|trans }}"></a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        {% endfor %}
+    </div>
+
+{% else %}
+    <p class="chill-no-data-statement">{{ 'There are no available resources'|trans }}</p>
+{% endif %}
+
+<h1 style="margin-bottom: 2rem;">{{ 'Add a person resource'|trans }}</h1>
+
+{% include "@ChillPerson/PersonResource/create.html.twig" %}
+
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/_form.html.twig

@@ -0,0 +1,37 @@
+
+
+{{ form_start(form) }}
+
+{{ form_row(form.startDate) }}
+{{ form_row(form.endDate) }}
+
+{% if form.hostPerson is defined %}
+    {{ form_row(form.hostPerson) }}
+{% endif %}
+
+{% if form.hostThirdParty is defined %}
+    {{ form_row(form.hostThirdParty) }}
+{% endif %}
+
+{% if form.address is defined %}
+    {{ form_row(form.address) }}
+
+    {% block js %}
+    {{ encore_entry_script_tags('mod_input_address') }}
+    {% endblock %}
+
+    {% block css %}
+        {{ encore_entry_link_tags('mod_input_address') }}
+    {% endblock %}
+{% endif %}
+
+{{ form_row(form.comment) }}
+
+
+<ul class="record_actions sticky-form-buttons">
+    <li>
+        <button class="btn btn-update" type="submit">{{ 'Save'|trans }}</button>
+    </li>
+</ul>
+
+{{ form_end(form) }}

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

@@ -0,0 +1,58 @@
+{% extends "@ChillPerson/Person/layout.html.twig" %}
+
+{% set activeRouteKey = '' %}
+
+{% block title %}{{ 'Delete residential address'|trans }}{% endblock %}
+
+{% block personcontent %}
+<div class="address-new">
+
+    <h1>{{ block('title') }}</h1>
+    {% set a = residentialAddress %}
+    <ul class="list-content fa-ul">
+        {% if a.hostPerson is not null %}
+        <li>
+            <i class="fa fa-li fa-home"></i>
+            <span class="item-key">{{ "Address of"|trans}} </span>
+            <span class="chill-entity entity-person badge-person">{{ a.hostPerson|chill_entity_render_box }}</span>
+        </li>
+        <li>
+            {% set address_date = date(a.startDate|date("m/d/Y")) %}
+            {% if a.hostPerson.getCurrentHouseholdAddress(a.endDate) is not null %}
+                <i class="fa fa-li fa-map-marker"></i>
+                {{ a.hostPerson.getCurrentHouseholdAddress(a.endDate)|chill_entity_render_box }}
+            {% endif %}
+        </li>
+        {% elseif a.hostThirdParty is not null %}
+        <li>
+            <i class="fa fa-li fa-home"></i>
+            <span class="item-key">{{ "Address of"|trans}}</span>
+            <span class="chill-entity entity-person badge-person">{{ a.hostThirdParty|chill_entity_render_box }}</span>
+        </li>
+        <li>
+            {% if a.hostThirdParty.address is not null %}
+                <i class="fa fa-li fa-map-marker"></i>
+                {{ a.hostThirdParty.address|chill_entity_render_box }}
+            {% endif %}
+        </li>
+        {% else %}
+        <li>
+            {% if a.address is not null %}
+                <i class="fa fa-li fa-map-marker"></i>
+                {{ a.address|chill_entity_render_box }}
+            {% endif %}
+            {% endif %}
+        </li>
+    </ul>
+
+    {{ include('@ChillMain/Util/confirmation_template.html.twig',
+        {
+            'title'             : 'Delete residential address ?'|trans,
+            'confirm_question'  : 'Are you sure you want to remove this residential address for %name% ?'|trans({'%name%': person|chill_entity_render_string }),
+            'cancel_route'      : 'chill_person_residential_address_list',
+            'cancel_parameters' : {'id' : person.Id},
+            'form'              : delete_form
+        } ) }}
+
+</div>
+{% endblock %}

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

@@ -0,0 +1,51 @@
+{% extends "@ChillPerson/Person/layout.html.twig" %}
+
+{% set activeRouteKey = '' %}
+
+{% block title 'Edit a residential address'|trans %}
+
+{% block personcontent %}
+<div class="address-edit">
+
+    {% block content %}
+        <h1>{{ block('title') }}</h1>
+
+        {{ form_start(form) }}
+
+        {{ form_row(form.startDate) }}
+        {{ form_row(form.endDate) }}
+
+        {% if residentialAddress.address is not null %}
+
+            {% if form.address is defined %}
+                {{ form_row(form.address) }}
+
+                {% block js %}
+                {{ encore_entry_script_tags('mod_input_address') }}
+                {% endblock %}
+
+                {% block css %}
+                    {{ encore_entry_link_tags('mod_input_address') }}
+                {% endblock %}
+            {% endif %}
+        {% endif %}
+
+        {{ form_row(form.comment) }}
+
+        <ul class="record_actions sticky-form-buttons">
+            <li class="cancel">
+                <a href="{{ chill_path_add_return_path('chill_person_residential_address_list', {'id': person.id}) }}" class="btn btn-cancel">
+                    {{ 'Cancel'|trans|chill_return_path_label }}
+                </a>
+            </li>
+            <li>
+                <button class="btn btn-update" type="submit">{{ 'Save'|trans }}</button>
+            </li>
+        </ul>
+
+        {{ form_end(form) }}
+
+    {% endblock %}
+
+</div>
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/list.html.twig

@@ -0,0 +1,116 @@
+{% extends "@ChillPerson/Person/layout.html.twig"  %}
+
+{% set activeRouteKey = '' %}
+
+{% block title %}{{ 'Residential addresses history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}{% endblock %}
+
+{% block personcontent %}
+<div class="person-address">
+
+    <h1>{{ 'Residential addresses history'|trans }}</h1>
+
+    {% if is_granted('CHILL_PERSON_SEE', person) %}
+
+        {% if addresses|length == 0 %}
+            <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+
+        {% else %}
+            <div class="flex-table">
+            {% for a in addresses %}
+
+                {% if a.address is not null %}
+                    {% set kind = 'address' %}
+                {% else %}
+                    {% set kind = null %}
+                {% endif %}
+
+                <div class="item-bloc">
+                    <div class="item-row">
+
+                        <div class="item-col" style="width: 33%;">
+                            <ul class="list-unstyled h3">
+                                {% if a.endDate is not null %}
+                                <li><span class="item-key">{{'Since'|trans}} : </span>{{ a.startDate|format_date('long') }}</li>
+                                {% endif %}
+                                <li><span class="item-key">{{'Until'|trans}} : </span><b>{{ a.endDate|format_date('long') }}</b></li>
+                            </ul>
+                        </div>
+                        <div class="item-col flex-column justify-content-start">
+                            <div class="float-button top">
+                                <div class="box">
+                                    <div class="action">
+                                        {% if is_granted('CHILL_PERSON_UPDATE', person) %}
+                                            <a href="{{ path('chill_person_residential_address_edit', { 'id' : a.id, 'kind' : kind } ) }}" class="btn btn-update" title="{{ 'Update'|trans|e('html_attr') }}"></a>
+                                            <a href="{{ path('chill_person_residential_address_delete', { 'id' : a.id, 'kind' : kind } ) }}" class="btn btn-delete" title="{{ 'Delete'|trans|e('html_attr') }}"></a>
+                                        {% endif %}
+                                    </div>
+                                    <ul class="list-content fa-ul">
+                                        {% if a.hostPerson is not null %}
+                                        <li>
+                                            <i class="fa fa-li fa-home"></i>
+                                            <span class="item-key">{{ "Address of"|trans}} </span>
+                                            <span class="chill-entity entity-person badge-person">{{ a.hostPerson|chill_entity_render_box }}</span>
+                                        </li>
+                                        <li>
+                                            {% set address_date = date(a.startDate|date("m/d/Y")) %}
+                                            {% if a.hostPerson.getCurrentHouseholdAddress(a.endDate) is not null %}
+                                                <i class="fa fa-li fa-map-marker"></i>
+                                                {{ a.hostPerson.getCurrentHouseholdAddress(a.endDate)|chill_entity_render_box }}
+                                            {% endif %}
+                                        </li>
+                                        {% elseif a.hostThirdParty is not null %}
+                                        <li>
+                                            <i class="fa fa-li fa-home"></i>
+                                            <span class="item-key">{{ "Address of"|trans}}</span>
+                                            <span class="chill-entity entity-person badge-person">{{ a.hostThirdParty|chill_entity_render_box }}</span>
+                                        </li>
+                                        <li>
+                                            {% if a.hostThirdParty.address is not null %}
+                                            <i class="fa fa-li fa-map-marker"></i>
+                                            {{ a.hostThirdParty.address|chill_entity_render_box }}
+                                            {% endif %}
+                                        </li>
+                                        {% else %}
+                                        <li>
+                                            {% if a.address is not null %}
+                                                <i class="fa fa-li fa-map-marker"></i>
+                                                {{ a.address|chill_entity_render_box }}
+                                            {% endif %}
+                                        {% endif %}
+                                        </li>
+                                    </ul>
+                                    <div class="item-row">
+                                        {% if not a.comment.isEmpty %}
+                                            {{ a.comment|chill_entity_render_box }}
+                                        {% endif %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            {% endfor %}
+            </div>
+        {% endif %}
+
+
+    {% endif %}
+
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ path('chill_person_view', { 'person_id' : person.id } ) }}" class="btn btn-cancel">
+                {{ 'Back to the person details'|trans }}
+            </a>
+        </li>
+        {% if is_granted('CHILL_PERSON_UPDATE', person) %}
+        <li>
+            <a class="btn btn-create"
+                href="{{ path('chill_person_residential_address_new', { 'id' : person.id } ) }}">
+                {{ 'Add a residential address'|trans }}
+            </a>
+        </li>
+        {% endif %}
+    </ul>
+</div>
+{% endblock %}

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

@@ -0,0 +1,29 @@
+{% extends "@ChillPerson/Person/layout.html.twig" %}
+
+{% set activeRouteKey = '' %}
+
+{% block title %}{{ 'New residential address'|trans }}{% endblock %}
+
+{% block personcontent %}
+<div class="address-new">
+
+    {% block content %}
+        <h1>{{ block('title') }}</h1>
+
+        {# TODO #}
+        {% block form %}
+            {% include '@ChillPerson/ResidentialAddress/_form.html.twig' %}
+        {% endblock %}
+
+    {% endblock %}
+
+</div>
+{% endblock %}
+
+{% block js %}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block css %}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/new_pick_kind.html.twig

@@ -0,0 +1,49 @@
+{% extends "@ChillMain/layout.html.twig" %}
+
+{% block title 'Which kind of residential address would you create ?'|trans %}
+
+{% block content %}
+<div class="col-10 centered">
+    <h1>{{ block('title') }}</h1>
+
+    <div class="container" style="margin-top: 2rem;">
+        <div class="row">
+           <div class="col-md-4 mb-4">
+               <a
+                   href="{{ chill_path_forward_return_path('chill_person_residential_address_new', {'id': person.id, 'kind': 'person'}) }}"
+                   class="btn btn-outline-chill-green-dark">
+                   {{ 'The address of another person'|trans }}
+               </a>
+           </div>
+           <div class="col-md-8">
+               <p>{{ 'residential_address_person_explanation'|trans  }}</p>
+           </div>
+        </div>
+        <div class="row">
+            <div class="col-md-4 mb-4">
+                <a
+                    href="{{ chill_path_forward_return_path('chill_person_residential_address_new', {'id': person.id, 'kind': 'thirdparty'}) }}"
+                    class="btn btn-outline-chill-green-dark">
+                    {{ 'The address of a third party'|trans }}
+                </a>
+            </div>
+            <div class="col-md-8">
+                <p>{{ 'residential_address_third_party_explanation'|trans  }}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-4 mb-4">
+                <a
+                    href="{{ chill_path_forward_return_path('chill_person_residential_address_new', {'id': person.id, 'kind': 'address'}) }}"
+                    class="btn btn-outline-chill-green-dark">
+                    {{ 'A new address'|trans }}
+                </a>
+            </div>
+            <div class="col-md-8">
+                <p>{{ 'residential_address_new_address_explanation'|trans  }}</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}

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

@@ -0,0 +1,17 @@
+<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 %}

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

@@ -0,0 +1,19 @@
+{% import '@ChillMain/Workflow/macro_breadcrumb.html.twig' as m %}
+
+<div class="flex-grow-1 {% if add_classes is defined %}{{ add_classes }}{% else %}h2{% endif %}">
+    <div>
+        {% if concerne is defined and concerne == true %}
+            <span class="item-key">{{ 'Concerne'|trans }}: </span>
+        {% endif %}
+        
+        {{ 'workflow.Work (n°%w%)'|trans({'%w%': work.id }) }}
+        
+        {% if description is defined and description == true %}
+            {{ ' — ' ~ work.socialAction|chill_entity_render_string }}
+        {% endif %}
+    </div>
+    
+    {% if breadcrumb is defined and breadcrumb == true %}
+        {{ m.breadcrumb(_context) }}
+    {% endif %}
+</div>

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

@@ -0,0 +1,99 @@
+<div class="flex-table accompanying_course_work-list">
+    <div class="item-bloc evaluation-item bg-chill-llight-gray">
+        <div class="item-row mb-2">
+            <h2 class="badge-title">
+                <span class="title_label"></span>
+                <span class="title_action">
+                    {{ evaluation.accompanyingPeriodWork.socialAction|chill_entity_render_string }}
+                    <ul class="small_in_title columns mt-1">
+                        <li>
+                            <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
+                            <b>{{ evaluation.accompanyingPeriodWork.startDate|format_date('short') }}</b>
+                        </li>
+                        {% if evaluation.accompanyingPeriodWork.endDate %}
+                            <li>
+                                <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
+                                <b>{{ evaluation.accompanyingPeriodWork.endDate|format_date('short') }}</b>
+                            </li>
+                        {% endif %}
+                    </ul>
+                </span>
+            </h2>
+        </div>
+        <div class="item-row column">
+            <table class="obj-res-eval my-3" style="font-size: 110% !important;">
+                <thead>
+                    <tr>
+                        <th class="eval">
+                            <h4 class="title_label">
+                                {{ 'Évaluation'|trans }}
+                            </h4>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="eval">
+                            <ul class="eval_title">
+                                <li class="my-2">
+                                    {{ evaluation.evaluation.title|localize_translatable_string }}
+                                    <ul class="columns pt-2">
+                                        <li>
+                                            <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
+                                            <b>{{ evaluation.startDate|format_date('short') }}</b>
+                                        </li>
+                                        {% if evaluation.endDate %}
+                                            <li>
+                                                <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
+                                                <b>{{ evaluation.endDate|format_date('short') }}</b>
+                                            </li>
+                                        {% endif %}
+                                        {% if evaluation.maxDate %}
+                                            <li>
+                                                <span class="item-key">{{ 'accompanying_course_work.max_date'|trans ~ ' : ' }}</span>
+                                                <b>{{ evaluation.maxDate|format_date('short') }}</b>
+                                            </li>
+                                        {% endif %}
+                                        {% if evaluation.warningInterval and evaluation.warningInterval.d > 0 %}
+                                            <li>
+                                                {% set days = (evaluation.warningInterval.d + evaluation.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>
+                                        {% endif %}
+                                        <li>
+                                            <span class="item-key">créé par</span>
+                                            <b>{{ evaluation.createdBy.username }}</b>
+                                            <span class="item-key">{{ 'le'|trans }}</span>
+                                            <b>{{ evaluation.createdAt|format_date('short') }}</b>
+                                        </li>
+                                    </ul>
+                                    {% if evaluation.comment %}
+                                        <blockquote class="chill-user-quote" style="margin-left: 0;">
+                                            {{ evaluation.comment }}
+                                        </blockquote>
+                                    {% endif %}
+                                </li>
+                            </ul>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="item-row">
+            {% import '@ChillPerson/Macro/updatedBy.html.twig' as macro %}
+            {{ macro.updatedBy(evaluation) }}
+        </div>
+    </div>
+</div>
+
+{% if display_action is defined and display_action == true %}
+    {# TODO add acl #}
+    <ul class="record_actions">
+        <li>
+            <a class="btn btn-show" href="{{ path('chill_person_accompanying_period_work_edit', {'id': evaluation.accompanyingPeriodWork.id}) }}">
+                {{ 'Show'|trans }}
+            </a>
+        </li>
+    </ul>
+{% endif %}

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

@@ -0,0 +1,19 @@
+{% import '@ChillMain/Workflow/macro_breadcrumb.html.twig' as m %}
+
+<div class="flex-grow-1 {% if add_classes is defined %}{{ add_classes }}{% else %}h2{% endif %}">
+    <div>
+        {% if concerne is defined and concerne == true %}
+            <span class="item-key">{{ 'Concerne'|trans }}: </span>
+        {% endif %}
+    
+        {{ 'workflow.Evaluation (n°%eval%)'|trans({'%eval%': evaluation.id}) }}
+    
+        {% if description is defined and description == true %}
+            {{ ' — ' ~ evaluation.evaluation.title|localize_translatable_string }}
+        {% endif %}
+    </div>
+    
+    {% if breadcrumb is defined and breadcrumb == true %}
+        {{ m.breadcrumb(_context) }}
+    {% endif %}
+</div>