Merge branch 'master' into household_filiation

2025-08-20 14:43:49 +00:00 · 2021-11-12 17:20:46 +01:00
parent fa7409bdf8 dcf5f1ed66
commit 52dc89c06f
298 changed files with 8036 additions and 3185 deletions
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
@@ -37,6 +37,9 @@ div.accompanying_course_work-list {
                            border-radius: 12px;
                            border: 2px solid $chill-green;
                        }
+                        &.no-label:before {
+                            display: none;
+                        }
                    }
                }
            }
--- a/src/Bundle/ChillPersonBundle/Resources/public/page/person/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/page/person/index.js
@@ -7,7 +7,6 @@ const personAcceptEmail = document.getElementById("personAcceptEmail");
 const personPhoneNumber = document.getElementById("personPhoneNumber");
 const personAcceptSMS = document.getElementById("personAcceptSMS");

-
 new ShowHide({
    froms: [maritalStatus],
    container: [maritalStatusDate],
@@ -24,21 +23,24 @@ new ShowHide({
    event_name: 'change'
 });

-new ShowHide({
-    froms: [personEmail],
-    container: [personAcceptEmail],
-    test: function(froms) {
-        for (let f of froms.values()) {
-            for (let input of f.querySelectorAll('input').values()) {
-                if (input.value) {
-                    return true
+if (personAcceptEmail) {
+    new ShowHide({
+        froms: [personEmail],
+        container: [personAcceptEmail],
+        test: function(froms) {
+            for (let f of froms.values()) {
+                for (let input of f.querySelectorAll('input').values()) {
+                    if (input.value) {
+                        return true
+                    }
                }
            }
-        }
-        return false;
-    },
-    event_name: 'input'
-});
+            return false;
+        },
+        event_name: 'input'
+    });
+}
+

 new ShowHide({
    froms: [personPhoneNumber],
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -8,7 +8,7 @@
   <persons-associated></persons-associated>
   <course-location></course-location>
   <origin-demand></origin-demand>
-   <requestor></requestor>
+   <requestor v-bind:isAnonymous="accompanyingCourse.requestorAnonymous"></requestor>
   <social-issue></social-issue>
   <scopes></scopes>
   <referrer></referrer>
@@ -16,15 +16,15 @@
   <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
   <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>

-    <div v-for="error in errorMsg" class="vue-component errors alert alert-danger">
+    <!-- <div v-for="error in errorMsg" v-bind:key="error.id" class="vue-component errors alert alert-danger">
       <p>
          <span>{{ error.sta }} {{ error.txt }}</span><br>
          <span>{{ $t(error.msg) }}</span>
       </p>
-    </div>
+    </div> -->
 </template>
 <script>
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import Banner from './components/Banner.vue';
 import StickyNav from './components/StickyNav.vue';
 import OriginDemand from './components/OriginDemand.vue';
@@ -54,11 +54,12 @@ export default {
      Comment,
      Confirm,
   },
-   computed: mapState([
-      'accompanyingCourse',
-      'addressContext',
-      'errorMsg'
-   ])
+   computed: {
+      ...mapState([
+         'accompanyingCourse',
+         'addressContext'
+      ]),
+   },
 };
 </script>

--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
@@ -1,3 +1,5 @@
+import { fetchResults } from 'ChillMainAssets/lib/api/download.js';
+
 /*
 * Endpoint v.2 chill_api_single_accompanying_course__entity
 * method GET/HEAD, get AccompanyingCourse Instance
@@ -84,7 +86,8 @@ const postParticipation = (id, payload, method) => {
      })
      .then(response => {
         if (response.ok) { return response.json(); }
-         throw { msg: 'Error while sending AccompanyingPeriod Course participation.', sta: response.status, txt: response.statusText, err: new Error(), body: response.body };
+         // TODO: adjust message according to status code? Or how to access the message from the violation array?
+         throw { msg: 'Error while sending AccompanyingPeriod Course participation', sta: response.status, txt: response.statusText, err: new Error(), body: response.body };
      });
 };

@@ -168,11 +171,8 @@ const postSocialIssue = (id, body, method) => {

 const getUsers = () => {
   const url = `/api/1.0/main/user.json`;
-   return fetch(url)
-      .then(response => {
-         if (response.ok) { return response.json(); }
-         throw { msg: 'Error while retriving users.', sta: response.status, txt: response.statusText, err: new Error(), body: response.body };
-      });
+
+   return fetchResults(url);
 };

 const whoami = () => {
@@ -216,8 +216,6 @@ const addScope = (id, scope) => {

 const removeScope = (id, scope) => {
  const url = `/api/1.0/person/accompanying-course/${id}/scope.json`;
-  console.log(url);
-  console.log(scope);

  return fetch(url, {
    method: 'DELETE',
@@ -235,6 +233,12 @@ const removeScope = (id, scope) => {
    });
 };

+const getReferrersSuggested = (course) => {
+  const url = `/api/1.0/person/accompanying-course/${course.id}/referrers-suggested.json`;
+
+  return fetchResults(url);
+}
+
 export {
   getAccompanyingCourse,
   patchAccompanyingCourse,
@@ -249,4 +253,5 @@ export {
   postSocialIssue,
   addScope,
   removeScope,
+   getReferrersSuggested,
 };
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
@@ -10,13 +10,13 @@
         <VueMultiselect
            name="selectOrigin"
            label="text"
-            v-bind:custom-label="transText"
+            :custom-label="transText"
            track-by="id"
-            v-bind:multiple="false"
-            v-bind:searchable="true"
-            v-bind:placeholder="$t('origin.placeholder')"
+            :multiple="false"
+            :searchable="true"
+            :placeholder="$t('origin.placeholder')"
            v-model="value"
-            v-bind:options="options"
+            :options="options"
            @select="updateOrigin">
         </VueMultiselect>

@@ -47,18 +47,18 @@ export default {
   },
   methods: {
      getOptions() {
-         //console.log('loading origins list');
         getListOrigins().then(response => new Promise((resolve, reject) => {
            this.options = response.results;
            resolve();
         }));
      },
      updateOrigin(value) {
-         //console.log('value', value);
+         console.log('value', value);
         this.$store.dispatch('updateOrigin', value);
      },
      transText ({ text }) {
-         return text.fr //TODO multilang
+         const parsedText = JSON.parse(text);
+         return parsedText.fr;
      },
   }
 }
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
@@ -9,6 +9,7 @@
               addAltNames: true,
               addAge : true,
               hLevel : 3,
+               isConfidential :  false,
            }"
      :person="participation.person"
      :returnPath="getAccompanyingCourseReturnPath">
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
@@ -15,9 +15,20 @@
         v-bind:searchable="true"
         v-bind:placeholder="$t('referrer.placeholder')"
         v-model="value"
-         v-bind:options="options"
+         v-bind:options="users"
         @select="updateReferrer">
      </VueMultiselect>
+
+
+      <template v-if="referrersSuggested.length > 0">
+        <ul>
+          <li v-for="u in referrersSuggested" @click="updateReferrer(u)">
+            <user-render-box-badge :user="u"></user-render-box-badge>
+          </li>
+        </ul>
+      </template>
+
+
   </div>

   <div>
@@ -41,30 +52,29 @@
 import VueMultiselect from 'vue-multiselect';
 import { getUsers, whoami } from '../api';
 import { mapState } from 'vuex';
+import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";

 export default {
   name: "Referrer",
-   components: { VueMultiselect },
-   data() {
-      return {
-         options: []
-      }
+   components: {
+     UserRenderBoxBadge,
+     VueMultiselect,
   },
   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;
+           })
+         },
      }),
   },
-   mounted() {
-      this.getOptions();
-   },
   methods: {
-      getOptions() {
-         getUsers().then(response => new Promise((resolve, reject) => {
-            this.options = response.results;
-            resolve();
-         }));
-      },
      updateReferrer(value) {
         //console.log('value', value);
         this.$store.dispatch('updateReferrer', value);
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -3,51 +3,60 @@

   <h2><a id="section-40"></a>{{ $t('requestor.title') }}</h2>

-   <div v-if="accompanyingCourse.requestor" class="flex-table">
+   <div v-if="accompanyingCourse.requestor && isAnonymous" class="flex-table">

      <label>
         <input type="checkbox" v-model="isAnonymous" class="me-2" />
         {{ $t('requestor.is_anonymous') }}
      </label>
-
-      <third-party-render-box v-if="accompanyingCourse.requestor.type === 'thirdparty'"
-         :thirdparty="accompanyingCourse.requestor"
-         :options="{
-            addLink: false,
-            addId: false,
-            addEntity: true,
-            addInfo: false,
-            hLevel: 3,
-            isMultiline: true
-            }"
-      >
-      <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>
-         </ul>
-      </template>
-      </third-party-render-box>
-
-      <person-render-box render="bloc" v-else-if="accompanyingCourse.requestor.type === 'person'"
-         :person="accompanyingCourse.requestor"
-         :options="{
-            addLink: false,
-            addId: false,
-            addAltNames: false,
-            addEntity: true,
-            addInfo: true,
-            hLevel: 3,
-            isMultiline: true
-            }"
-      >
-      <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>
-         </ul>
-      </template>
-      </person-render-box>
+      <confidential v-if="accompanyingCourse.requestor.type === 'thirdparty'">
+         <template v-slot:confidential-content>
+            <third-party-render-box
+               :thirdparty="accompanyingCourse.requestor"
+               :options="{
+                  addLink: false,
+                  addId: false,
+                  addEntity: true,
+                  addInfo: false,
+                  hLevel: 3,
+                  isMultiline: true,
+                  isConfidential: true
+                  }"
+            >
+            <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>
+               </ul>
+            </template>
+            </third-party-render-box>
+         </template>
+      </confidential>
+      
+      <confidential v-else-if="accompanyingCourse.requestor.type === 'person'">
+         <template v-slot:confidential-content>
+            <person-render-box render="bloc"
+               :person="accompanyingCourse.requestor"
+               :options="{
+                  addLink: false,
+                  addId: false,
+                  addAltNames: false,
+                  addEntity: true,
+                  addInfo: true,
+                  hLevel: 3,
+                  isMultiline: true,
+                  isConfidential: false
+                  }"
+            >
+               <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>
+                  </ul>
+               </template>
+            </person-render-box>
+         </template>
+      </confidential>

      <ul class="record_actions">
         <li>
@@ -59,6 +68,57 @@
         </li>
      </ul>
   </div>
+
+   <div v-else-if="accompanyingCourse.requestor && !isAnonymous" class="flex-table">
+      <label>
+         <input type="checkbox" v-model="isAnonymous" class="me-2" />
+         {{ $t('requestor.is_anonymous') }}
+      </label>
+
+      <third-party-render-box
+            v-if="accompanyingCourse.requestor.type === 'thirdparty'"
+            :thirdparty="accompanyingCourse.requestor"
+            :options="{
+               addLink: false,
+               addId: false,
+               addEntity: true,
+               addInfo: false,
+               hLevel: 3,
+               isMultiline: true,
+               isConfidential: true
+               }"
+         >
+         <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>
+            </ul>
+         </template>
+      </third-party-render-box>
+
+      <person-render-box render="bloc"
+         v-if="accompanyingCourse.requestor.type === 'person'"
+         :person="accompanyingCourse.requestor"
+         :options="{
+            addLink: false,
+            addId: false,
+            addAltNames: false,
+            addEntity: true,
+            addInfo: true,
+            hLevel: 3,
+            isMultiline: true,
+            isConfidential: false
+            }"
+      >
+         <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>
+            </ul>
+         </template>
+      </person-render-box>
+   </div>
+
   <div v-else>
      <label class="chill-no-data-statement">{{ $t('requestor.counter') }}</label>
   </div>
@@ -82,6 +142,7 @@ import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import PersonRenderBox from '../../_components/Entity/PersonRenderBox.vue';
 import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
+import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';

 export default {
   name: 'Requestor',
@@ -90,7 +151,9 @@ export default {
      OnTheFly,
      PersonRenderBox,
      ThirdPartyRenderBox,
+      Confidential
   },
+   props: ['isAnonymous'],
   data() {
      return {
         addPersons: {
@@ -149,4 +212,8 @@ div.flex-table {
      margin-top: 1em;
   }
 }
+
+.confidential {
+   display: block;
+}
 </style>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
@@ -2,7 +2,7 @@
   <person-render-box render="bloc"
      v-if="resource.resource.type === 'person'"
      :person="resource.resource"
-      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3 }"
+      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3, isConfidential : true }"
      >
      <template v-slot:record-actions>
         <ul class="record_actions">
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js
@@ -2,6 +2,8 @@ import { createApp } from 'vue'
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
 import { appMessages } from './js/i18n'
 import { initPromise } from './store'
+import VueToast from 'vue-toast-notification';
+import 'vue-toast-notification/dist/theme-sugar.css';

 import App from './App.vue';
 import Banner from './components/Banner.vue';
@@ -21,6 +23,7 @@ if (root === 'app') {
      })
      .use(store)
      .use(i18n)
+      .use(VueToast)
      .component('app', App)
      .mount('#accompanying-course');
   });
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -10,6 +10,8 @@ import { getAccompanyingCourse,
   postSocialIssue,
   addScope,
   removeScope,
+   getReferrersSuggested,
+   getUsers,
 } from '../api';
 import { patchPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
 import { patchThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
@@ -38,6 +40,10 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
            scopesAtStart: accompanyingCourse.scopes.map(scope => scope),
            // the scope states at server side
            scopesAtBackend: accompanyingCourse.scopes.map(scope => scope),
+            // the users which are available for referrer
+            referrersSuggested: [],
+            // all the users available
+            users: [],
         },
         getters: {
            isParticipationValid(state) {
@@ -71,7 +77,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
         },
         mutations: {
            catchError(state, error) {
-               console.log('### mutation: a new error have been catched and pushed in store !', error);
+               // console.log('### mutation: a new error have been catched and pushed in store !', error);
               state.errorMsg.push(error);
            },
            removeParticipation(state, participation) {
@@ -170,6 +176,16 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
               //console.log('value', value);
               state.accompanyingCourse.user = value;
            },
+            setReferrersSuggested(state, users) {
+               state.referrersSuggested = users.map(u => {
+                  if (state.accompanyingCourse.user !== null) {
+                     if (state.accompanyingCourse.user.id === u.id) {
+                        return state.accompanyingCourse.user;
+                     }
+                  }
+                  return u;
+               });
+            },
            confirmAccompanyingCourse(state, response) {
               //console.log('### mutation: confirmAccompanyingCourse: response', response);
               state.accompanyingCourse.step = response.step;
@@ -178,6 +194,16 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
               //console.log('define location context');
               state.addressContext = context;
            },
+            setUsers(state, users) {
+               state.users = users.map(u => {
+                  if (state.accompanyingCourse.user !== null) {
+                     if (state.accompanyingCourse.user.id === u.id) {
+                        return state.accompanyingCourse.user;
+                     }
+                  }
+                  return u;
+               });
+            },
            updateLocation(state, r) {
               //console.log('### mutation: set location attributes', r);
               state.accompanyingCourse.locationStatus = r.locationStatus;
@@ -272,6 +298,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
               })).catch((error) => { commit('catchError', error) });
            },
            patchOnTheFly({ commit }, payload) {
+               // TODO should be into the dedicated component, no ? JF
               console.log('## action: patch OnTheFly', payload);
               let body = { type: payload.type };
               if (payload.type === 'person') {
@@ -313,10 +340,12 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
            },
            toggleEmergency({ commit }, payload) {
               patchAccompanyingCourse(id, { type: "accompanying_period", emergency: payload })
-               .then(course => new Promise((resolve, reject) => {
-                  commit('toggleEmergency', course.emergency);
-                  resolve();
-               })).catch((error) => { commit('catchError', error) });
+                  .then(course => new Promise((resolve, reject) => {
+                     commit('toggleEmergency', course.emergency);
+                     return dispatch('setRefererresAvailable');
+                  }))
+                 .then(() => Promise.resolve())
+                 .catch((error) => { commit('catchError', error) });
            },
            toggleConfidential({ commit }, payload) {
               patchAccompanyingCourse(id, { type: "accompanying_period", confidential: payload })
@@ -387,11 +416,15 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                     // check/uncheck in the UI. I do not know of to avoid it.
                     commit('setScopes', scopes);
                     return Promise.resolve();
+                  }).then(() => {
+                     return dispatch('fetchReferrersSuggested');
                  });
               } else {
                  return dispatch('setScopes', state.scopesAtStart).then(() => {
                     commit('setScopes', scopes);
                     return Promise.resolve();
+                  }).then(() => {
+                     return dispatch('fetchReferrersSuggested');
                  });
               }
            },
@@ -434,7 +467,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                  resolve();
               })).catch((error) => { commit('catchError', error) });
            },
-            updateSocialIssues({ state, commit }, { payload, body, method }) {
+            updateSocialIssues({ state, commit, dispatch }, { payload, body, method }) {
               //console.log('## action: payload', { payload, body, method });
               postSocialIssue(id, body, method)
               .then(response => new Promise((resolve, reject) => {
@@ -445,6 +478,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                  return getAccompanyingCourse(state.accompanyingCourse.id);
               }).then(accompanying_course => {
                  commit('refreshSocialIssues', accompanying_course.socialIssues);
+                  dispatch('fetchReferrersSuggested');
               })
                   .catch((error) => { commit('catchError', error) });
            },
@@ -462,7 +496,24 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                  resolve();
               })).catch((error) => { commit('catchError', error) });
            },
-            updateLocation({ commit }, payload) {
+            async fetchReferrersSuggested({ state, commit}) {
+               let users = await getReferrersSuggested(state.accompanyingCourse);
+               commit('setReferrersSuggested', users);
+               if (
+                 null === state.accompanyingCourse.user
+                 && !state.accompanyingCourse.confidential
+                 && !state.accompanyingCourse.step === 'DRAFT'
+                 && users.length === 1
+               ) {
+                  // set the user if unique
+                  commit('updateReferrer', users[0]);
+               }
+            },
+            async fetchUsers({commit}) {
+               let users = await getUsers();
+               commit('setUsers', users);
+            },
+            updateLocation({ commit, dispatch }, payload) {
               //console.log('## action: updateLocation', payload.locationStatusTo);
               let body = { 'type': payload.target, 'id': payload.targetId };
               let location = {};
@@ -484,6 +535,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                        personLocation: accompanyingCourse.personLocation
                     });
                     resolve();
+                     dispatch('fetchReferrersSuggested');
                  })).catch((error) => { commit('catchError', error) });
            },
            confirmAccompanyingCourse({ commit }) {
@@ -498,6 +550,9 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
            }
         }
      });
+
+      store.dispatch('fetchReferrersSuggested');
+      store.dispatch('fetchUsers');
      resolve(store);
   }));

--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
@@ -9,7 +9,7 @@
      <p>{{ $t('pick_social_issue_linked_with_action') }}</p>

      <div v-for="si in socialIssues">
-        <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"> {{ si.title.fr }}
+        <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>
      </div>

      <div v-if="hasSocialIssuePicked">
@@ -26,7 +26,7 @@
      </div>

      <div v-if="isLoadingSocialActions">
-        <p>spinner</p>
+        <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
      </div>

      <div v-if="hasSocialActionPicked" id="persons">
@@ -72,7 +72,7 @@
              {{ $t('action.save') }}
            </button>
            <button class="btn btn-save" v-show="isPostingWork" disabled>
-              {{ $t('Save') }}
+              {{ $t('action.save') }}
            </button>
          </li>
        </ul>
@@ -222,3 +222,16 @@ export default {
 }

 </script>
+
+<style lang="scss" scoped>
+@import 'ChillMainAssets/module/bootstrap/shared';
+@import 'ChillPersonAssets/chill/scss/mixins';
+@import 'ChillMainAssets/chill/scss/chill_variables';
+span.badge {
+   @include badge_social($social-issue-color);
+   font-size: 95%;
+   margin-bottom: 5px;
+   margin-right: 1em;
+   margin-left: 1em;
+}
+</style>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -84,7 +84,7 @@

      <div id="evaluations" class="action-row">
         <div aria="hidden" class="title">
-            <div><h3>{{ $t('Evaluations') }}</h3></div>
+            <div><h3>{{ $t('Evaluations') }} - {{ $t('Forms') }} - {{ $t('Post') }}</h3></div>
         </div>

         <!-- list evaluations -->
@@ -247,6 +247,8 @@ const i18n = {
         add_objectif: "Ajouter un motif - objectif - dispositif",
         add_an_objective: "Ajouter un objectif",
         Evaluations: "Évaluations",
+         Forms: "Formulaires",
+         Post: "Courriers",
         add_an_evaluation: "Ajouter une évaluation",
         persons_involved: "Usagers concernés",
         handling_thirdparty: "Tiers traitant",
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
@@ -20,18 +20,25 @@
            v-bind:item="item">
         </suggestion-third-party>

+         <suggestion-user
+            v-if="item.result.type === 'user'"
+            v-bind:item="item">
+         </suggestion-user>
+
   </div>
 </template>

 <script>
 import SuggestionPerson from './TypePerson';
 import SuggestionThirdParty from './TypeThirdParty';
+import SuggestionUser from './TypeUser';

 export default {
   name: 'PersonSuggestion',
   components: {
      SuggestionPerson,
      SuggestionThirdParty,
+      SuggestionUser,
   },
   props: [
      'item', 
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUser.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUser.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="container usercontainer">
+      <div class="user-identification">
+        <span class="name">
+           {{ item.result.text }}
+        </span>
+      </div>
+    </div>
+    <div class="right_actions">
+      <span class="badge rounded-pill bg-secondary">
+        {{ $t('user')}}
+      </span>
+    </div>
+</template>
+
+<script>
+
+const i18n = {
+  messages: {
+    fr: {
+      user: 'Utilisateur' // TODO how to define other translations?
+    }
+  }
+};
+
+export default {
+   name: 'SuggestionUser',
+   props: ['item'],
+   i18n,
+   computed: {
+     hasParent() {
+       return this.$props.item.result.parent !== null;
+     },
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+.usercontainer {
+ .userparent {
+    .name {
+      font-weight: bold;
+      font-variant: all-small-caps;
+    }
+ }
+}
+</style>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -35,7 +35,7 @@
                    </time>

                    <time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
-                        {{ birthdate }} - {{ deathdate }}
+                        {{ $d(birthdate) }} - {{ $d(deathdate) }}
                    </time>

                    <time v-else-if="person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
@@ -97,8 +97,13 @@
                    </li>

                    <li v-if="person.center && options.addCenter">
-                       <i class="fa fa-li fa-long-arrow-right"></i>
-                       {{ person.center.name }}
+                      <i class="fa fa-li fa-long-arrow-right"></i>
+                      <template v-if="person.center.type !== undefined">
+                        {{ person.center.name }}
+                      </template>
+                      <template v-else>
+                        <template v-for="c in person.center">{{ c.name }}</template>
+                      </template>
                    </li>
                    <li v-else-if="options.addNoData">
                       <i class="fa fa-li fa-long-arrow-right"></i>
@@ -138,11 +143,13 @@
 <script>
 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';

 export default {
    name: "PersonRenderBox",
    components: {
-        AddressRenderBox
+        AddressRenderBox,
+        Confidential
    },
    props: ['person', 'options', 'render', 'returnPath'],
    computed: {
@@ -154,31 +161,24 @@ export default {
            }
        },
        getGenderIcon: function() {
-            return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : 'fa-neuter';
+            return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
        },
        getGenderTranslation: function() {
           return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
        },
        getGender() {
-            return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : 'person.gender.neuter';
+            return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined';
        },
        birthdate: function(){
-            if(this.person.birthdate !== null){
-            const date = new Date(this.person.birthdate.datetime);
-            return dateToISO(date)
+            if(this.person.birthdate !== null || this.person.birthdate === "undefined"){
+            return new Date(this.person.birthdate.datetime);
            } else {
                return "";
            }
        },
        deathdate: function(){
-           // TODO FIX edition conflict:  if null or undefined ?
-           // if (typeof this.person.deathdate !== 'undefined') {
-           //   var date = new Date(this.person.deathdate.datetime);
-           //   return dateToISO(date);
-           //}
-            if(this.person.deathdate !== null){
-               const date = new Date(this.person.deathdate.datetime);
-               return date.toLocaleDateString("fr-FR");
+            if(this.person.deathdate !== null || this.person.birthdate === "undefined"){
+               return new Date(this.person.deathdate.datetime);
            } else {
                return "";
            }
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
@@ -36,6 +36,7 @@ const personMessages = {
            woman: "Féminin",
            man: "Masculin",
            neuter: "Neutre, non binaire",
+            undefined: "Non renseigné"
         }

      },
--- a/src/Bundle/ChillPersonBundle/Resources/test/Fixtures/App/app/config/config_test_with_hidden_fields.yml
+++ b/src/Bundle/ChillPersonBundle/Resources/test/Fixtures/App/app/config/config_test_with_hidden_fields.yml
@@ -15,4 +15,5 @@ chill_person:
        phonenumber: hidden
        country_of_birth: hidden
        marital_status: hidden
-        spoken_languages: hidden
+        spoken_languages: hidden
+        civility: hidden
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/create.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/create.html.twig
@@ -18,6 +18,7 @@
    window.accompanyingCourse = {{ json|json_encode|raw }};
  </script>

+  {{ parent() }}
  {{ encore_entry_script_tags('vue_accourse_work_create') }}
 {% endblock %}

--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/delete.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/delete.html.twig
@@ -0,0 +1,34 @@
+{% extends "@ChillPerson/AccompanyingCourse/layout.html.twig" %}
+
+{% set activeRouteKey = 'chill_person_accompanying_period_work_list' %}
+
+{% block title 'accompanying_course_work.remove'|trans %}
+
+{% block content %}
+
+    <div class="accompanying_course_work-list">
+        <h2 class="badge-title">
+            <span class="title_label">{{ 'accompanying_course_work.action'|trans }}</span>
+            <span class="title_action">{{ work.socialAction|chill_entity_render_string }}</span>
+        </h2>
+
+        <div>
+            <h3>{{ "Associated peoples"|trans }}</h3>
+            <ul>
+            {% for p in work.persons %}
+               {{ p|chill_entity_render_box }}
+            {% endfor %}
+            </ul>
+        </div>
+    </div>
+
+
+    {{ include('@ChillMain/Util/confirmation_template.html.twig',
+        {
+            'title'             : 'accompanying_course_work.remove'|trans,
+            'confirm_question'  : 'Are you sure you want to remove this work of the accompanying period %name% ?'|trans({ '%name%' : accompanyingCourse.id } ),
+            'cancel_route'      : 'chill_person_accompanying_period_work_list',
+            'cancel_parameters' : {'id' : accompanyingCourse.id},
+            'form'              : delete_form
+        } ) }}
+{% endblock %}
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_by_accompanying_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_by_accompanying_period.html.twig
@@ -20,14 +20,6 @@

          <div class="timeline">
            <ul>
-              <li class="completed">
-                <div class="date">
-                  <span>{{ w.createdAt|format_date('long') }}</span>
-                </div>
-                <div class="label">
-                  <span>{{ 'accompanying_course_work.create_date'|trans }}</span>
-                </div>
-              </li>
              <li class="completed">
                <div class="date">
                  <span>{{ w.startDate|format_date('long') }}</span>
@@ -36,6 +28,11 @@
                  <span>{{ 'accompanying_course_work.start_date'|trans }}</span>
                </div>
              </li>
+              {% if w.endDate == null %}
+              <li>
+                <div class="label no-label"></div>
+              </li>
+              {% else %}
              <li class="{%if date(w.endDate) < date('now') %}completed{% endif %}">
                <div class="date">
                  <span>{{ w.endDate|format_date('long') }}</span>
@@ -44,6 +41,7 @@
                  <span>{{ 'accompanying_course_work.end_date'|trans }}</span>
                </div>
              </li>
+              {% endif %}
            </ul>
          </div>

@@ -105,6 +103,11 @@
                href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}"
              >{% if buttonText is not defined or buttonText == true %}{{ 'Edit'|trans }}{% endif %}</a>
            </li>
+            <li>
+              <a class="btn btn-delete" title="{{ 'Delete'|trans }}"
+                href="{{ path('chill_person_accompanying_period_work_delete', { 'id': w.id } ) }}"
+              >{% if buttonText is not defined or buttonText == true %}{{ 'Delete'|trans }}{% endif %}</a>
+            </li>
          </ul>

        </div>
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
@@ -77,7 +77,7 @@
                            <div class="wl-row">
                                <div class="wl-col title"><h3>{{ 'Participants'|trans }}</h3></div>
                                <div class="wl-col list">
-                                    {% for p in accompanying_period.participations %}
+                                    {% for p in accompanying_period.getCurrentParticipations %}
                                        <span class="wl-item badge-person">
                                            <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
                                                {{ p.person|chill_entity_render_string }}
--- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
@@ -62,15 +62,15 @@
            {%- endif -%}
            {%- if options['addId'] -%}
                <span class="id-number" title="{{ 'Person'|trans ~ ' n° ' ~ person.id }}">
-                    {{ person.id|upper }}
+                    {{ person.id|upper -}}
                </span>
            {%- endif -%}
        </div>
        {%- if options['addInfo'] -%}
            {% set gender = (person.gender == 'woman') ? 'fa-venus' :
-                (person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
+                (person.gender == 'man') ? 'fa-mars' : (person.gender == 'neuter') ? 'fa-neuter' : 'fa-genderless' %}
            {% set genderTitle = (person.gender == 'woman') ? 'woman' :
-                (person.gender == 'man') ? 'man' : 'neuter' %}
+                (person.gender == 'man') ? 'man' : (person.gender == 'neuter') ? 'neuter' : 'Not given'|trans %}
            <p class="moreinfo">
                <i class="fa fa-fw {{ gender }}" title="{{ genderTitle|trans }}"></i>

@@ -95,7 +95,7 @@
                </time>
                {%- if options['addAge'] -%}
                    <span class="age">
-                        ({{ 'years_old'|trans({ 'age': person.age }) }})
+                        {{- 'years_old'|trans({ 'age': person.age }) -}}
                    </span>
                {%- endif -%}
            {%- endif -%}
@@ -123,13 +123,15 @@
    </div>
    <div class="item-col">
        <ul class="list-content fa-ul">
-            {% set multiline = (options['address_multiline']) ? true : false %}
-            {{ person.getLastAddress|chill_entity_render_box({
-                'render': 'list',
-                'with_picto': true,
-                'multiline': multiline,
-                'with_valid_from': false
-            }) }}
+            {% if person.getCurrentPersonAddress is not null %}
+                {% set multiline = (options['address_multiline']) ? true : false %}
+                {{ person.getCurrentPersonAddress|chill_entity_render_box({
+                    'render': 'list',
+                    'with_picto': true,
+                    'multiline': multiline,
+                    'with_valid_from': false
+                }) }}
+            {% endif %}
            <li>
                {% if person.mobilenumber %}
                    <i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ person.mobilenumber }}">
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/accompanying_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/accompanying_period.html.twig
@@ -9,6 +9,37 @@

    {% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' %}

+    {% if accompanying_periods_old|length > 0 %}
+        <style>
+                button[aria-expanded="true"] > span.folded,
+                button[aria-expanded="false"] > span.unfolded { display: none; }
+                button[aria-expanded="false"] > span.folded,
+                button[aria-expanded="true"] > span.unfolded { display: inline; }
+            </style>
+            <div class="accordion" id="nonCurrent">
+                <div class="accordion-item">
+                    <h2 class="accordion-header" id="heading_{{ household.id }}">
+                        <button
+                            class="accordion-button collapsed"
+                            type="button"
+                            data-bs-toggle="collapse"
+                            data-bs-target="#collapse_{{ household.id }}"
+                            aria-expanded="false"
+                            aria-controls="collapse_{{ household.id }}">
+                            <span class="folded">{{ 'household.Show accompanying periods of past or future memberships'|trans({'length': accompanying_periods_old|length}) }}</span>
+                            <span class="unfolded text-secondary">{{ 'household.Hide memberships'|trans }}</span>
+                        </button>
+                    </h2>
+                    <div id="collapse_{{ household.id }}"
+                        class="accordion-collapse collapse"
+                        aria-labelledby="heading_{{ household.id }}"
+                        data-bs-parent="#nonCurrent">
+                        {% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' with {'accompanying_periods' : accompanying_periods_old} %}
+                    </div>
+                </div>
+            </div>
+    {% endif %}
+
    <ul class="record_actions sticky-form-buttons">
        <li class="cancel">
            <a href="{{ path ('chill_person_household_summary', {'household_id' : household.id } ) }}" class="btn btn-cancel">
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
@@ -22,8 +22,11 @@

                            {%- for m in members -%}
                                <span
-                                    class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}"
-                                    title="{{ m.position.label.fr }}">
+                                    class="badge-member{%- if m.holder %} holder{% endif -%}"
+                                    {% if m.position is not null %}
+                                        title="{{ m.position.label.fr }}"
+                                    {% endif %}
+                                >
                                    <a href="{{ path('chill_person_view', { person_id: m.person.id}) }}">
                                        {%- if m.holder %}
                                            <span class="fa-stack fa-holder" title="{{ 'household.holder'|trans }}">
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig
@@ -106,81 +106,95 @@

    <h2 class="my-5">{{ 'household.Household members'|trans }}</h2>

-    {% for p in positions %}
-    <div class="mb-5">
-      <h3>{{ p.label|localize_translatable_string }}
-          {% if false == p.shareHousehold %}
-              <i class="chill-help-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true"
-                 title="{{ 'household.Those members does not share address'|trans }}"></i>
-          {% endif %}
-      </h3>
+    {% for p in positions|merge([ '_none' ]) %}

-      {%- set members = household.currentMembersByPosition(p) %}
+        {% if p == '_none' %}
+            {% set members = household.currentMembersWithoutPosition %}
+            {% set old_members = household.nonCurrentMembersWithoutPosition %}
+        {% else %}
+            {%- set members = household.currentMembersByPosition(p) %}
+            {% set old_members = household.nonCurrentMembersByPosition(p) %}
+        {% endif %}

-      {% macro customButtons(member, household) %}
-          <li>
-              <a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'persons': [ member.person.id ], 'allow_leave_without_household': true } ) }}"
-                 class="btn btn-sm btn-unlink" title="{{ 'household.person.leave'|trans }}"></a>
-          </li>
-          <li>
-              <a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'persons': [ member.person.id ], 'household': household.id} ) }}"
-                 class="btn btn-sm btn-misc" title="{{ 'household.Change position'|trans }}"><i class="fa fa-arrows-h"></i></a>
-          </li>
-      {% endmacro %}
+        {% if not (p == '_none' and members|length == 0 and old_members|length == 0) %}
+            <div class="mb-5">
+                {% if p != '_none' %}
+                  <h3>{{ p.label|localize_translatable_string }}
+                      {% if false == p.shareHousehold %}
+                          <i class="chill-help-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true"
+                             title="{{ 'household.Those members does not share address'|trans }}"></i>
+                      {% endif %}
+                  </h3>
+                {% else %}
+                    <h3 class="chill-entity">{{ 'household.Members without position'|trans }}</h3>
+                {% endif %}

-      {% if members|length > 0 %}
-        <div class="flex-table list-household-members">
-          {% for m in members %}
-              {% include '@ChillPerson/Household/_render_member.html.twig' with {
-                  'member': m,
-                  'customButtons': { 'after': _self.customButtons(m, household) }
-              } %}
-          {% endfor %}
-        </div>
-      {% else %}
-        <p class="chill-no-data-statement">{{ 'household.Any persons into this position'|trans }}</p>
-      {% endif %}

-      {% set members = household.nonCurrentMembersByPosition(p) %}
-      {% if members|length > 0 %}
+              {% macro customButtons(member, household) %}
+                  <li>
+                      <a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'persons': [ member.person.id ], 'allow_leave_without_household': true } ) }}"
+                         class="btn btn-sm btn-unlink" title="{{ 'household.person.leave'|trans }}"></a>
+                  </li>
+                  <li>
+                      <a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'persons': [ member.person.id ], 'household': household.id} ) }}"
+                         class="btn btn-sm btn-misc" title="{{ 'household.Change position'|trans }}"><i class="fa fa-arrows-h"></i></a>
+                  </li>
+              {% endmacro %}

-        <style>
-            button[aria-expanded="true"] > span.folded,
-            button[aria-expanded="false"] > span.unfolded { display: none; }
-            button[aria-expanded="false"] > span.folded,
-            button[aria-expanded="true"] > span.unfolded { display: inline; }
-        </style>
-        <div class="accordion" id="nonCurrent">
-            <div class="accordion-item">
-                <h2 class="accordion-header" id="heading_{{ p.id }}">
-                    <button
-                        class="accordion-button collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        data-bs-target="#collapse_{{ p.id }}"
-                        aria-expanded="false"
-                        aria-controls="collapse_{{ p.id }}">
-                        <span class="folded">{{ 'household.Show future or past memberships'|trans({'length': members|length}) }}</span>
-                        <span class="unfolded text-secondary">{{ 'household.Hide memberships'|trans }}</span>
-                    </button>
-                </h2>
-                <div id="collapse_{{ p.id }}"
-                    class="accordion-collapse collapse"
-                    aria-labelledby="heading_{{ p.id }}"
-                    data-bs-parent="#nonCurrent">
-                    <div class="flex-table my-0 list-household-members">
-                        {% for m in members %}
-                            {% include '@ChillPerson/Household/_render_member.html.twig' with { 'member': m } %}
-                        {% endfor %}
+              {% if members|length > 0 %}
+                <div class="flex-table list-household-members">
+                  {% for m in members %}
+                      {% include '@ChillPerson/Household/_render_member.html.twig' with {
+                          'member': m,
+                          'customButtons': { 'after': _self.customButtons(m, household) }
+                      } %}
+                  {% endfor %}
+                </div>
+              {% else %}
+                <p class="chill-no-data-statement">{{ 'household.Any persons into this position'|trans }}</p>
+              {% endif %}
+
+              {% if old_members|length > 0 %}
+                <style>
+                    button[aria-expanded="true"] > span.folded,
+                    button[aria-expanded="false"] > span.unfolded { display: none; }
+                    button[aria-expanded="false"] > span.folded,
+                    button[aria-expanded="true"] > span.unfolded { display: inline; }
+                </style>
+                <div class="accordion" id="nonCurrent">
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="heading_{{ p == '_none' ? '_none' : p.id }}">
+                            <button
+                                class="accordion-button collapsed"
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse_{{ p == '_none' ? '_none' : p.id }}"
+                                aria-expanded="false"
+                                aria-controls="collapse_{{ p == '_none' ? '_none' : p.id }}">
+                                <span class="folded">{{ 'household.Show future or past memberships'|trans({'length': old_members|length}) }}</span>
+                                <span class="unfolded text-secondary">{{ 'household.Hide memberships'|trans }}</span>
+                            </button>
+                        </h2>
+                        <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 } %}
+                                {% endfor %}
+                            </div>
+                        </div>
                    </div>
                </div>
-            </div>
-        </div>
-      {% endif %}
+              {% endif %}

-    </div>
+            </div>
+        {% endif %}
    {% endfor %}

+
+
    <ul class="record_actions">
      <li>
        <a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'household': household.id }) }}"
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/edit.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/edit.html.twig
@@ -37,6 +37,9 @@

    <fieldset>
        <legend><h2>{{ 'General information'|trans }}</h2></legend>
+        {%- if form.civility is defined -%}
+        {{ form_row(form.civility, {'label' : 'Civility'}) }}
+        {% endif %}
        {{ form_row(form.firstName, {'label' : 'First name'}) }}
        {{ form_row(form.lastName, {'label' : 'Last name'}) }}
        {% if form.altNames is defined %}
@@ -95,6 +98,8 @@
            <div id="personEmail">
                {{ form_row(form.email, {'label': 'Email'}) }}
            </div>
+        {% endif %}
+        {%- if form.acceptEmail is defined -%}
            <div id="personAcceptEmail">
                {{ form_row(form.acceptEmail, {'label' : 'Accept emails ?'}) }}
            </div>
@@ -135,12 +140,11 @@
            </button>
        </li>
    </ul>
-
    {{ form_end(form) }}

 </div>
 {% endblock %}

 {% block js %}
-    {{ encore_entry_link_tags('page_person') }}
+    {{ encore_entry_script_tags('page_person') }}
 {% endblock %}
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
@@ -53,7 +53,7 @@
                        'addLink': true,
                        'addInfo': true,
                        'addAge': true,
-                        'addAltNames': false,
+                        'addAltNames': true,
                        'addCenter': true,
                        'address_multiline': false,
                        'customButtons': { 'after': _self.button_person(person) }
@@ -120,39 +120,6 @@
                </div>
            {% endfor %}
        </div>
-
-        <ul class="record_actions">
-            {% if is_granted('CHILL_PERSON_CREATE') %}
-            <li>
-                <a href="{{ path('chill_person_new') }}" class="btn btn-create">
-                    {{ 'Add a person'|trans }}
-                </a>
-            </li>
-            {% endif %}
-            {% if search_name != "person_similarity" %}
-            <li>
-                <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
-                    <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
-                </a>
-            </li>
-            {% endif %}
-            {% if preview == true and persons|length < total %}
-            <li>
-                <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="btn btn-misc">
-                    {{ 'See all results'|trans }}
-                </a>
-            </li>
-            {% endif %}
-        </ul>
-    {% else %}
-
-        <ul class="record_actions">
-            <li>
-                <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
-                    <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
-                </a>
-            </li>
-        </ul>
    {% endif %}

    {% if preview == false %}
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
@@ -51,6 +51,15 @@ This view should receive those arguments:
            <figure class="person-details">
                <h2 class="chill-red">{{ 'General information'|trans }}</h2>
                <dl>
+                    {% if person.civility is not null %}
+                        <dt>{{ 'Civility'|trans }}&nbsp;:</dt>
+                        <dd>
+                        {% if person.civility.name|length > 0 %}
+                        {{ person.civility.name|first }}
+                        {% endif %}
+                        </dd>
+                    {% endif %}
+
                    <dt>{{ 'First name'|trans }}&nbsp;:</dt>
                    <dd>{{ person.firstName }}</dd>

@@ -93,14 +102,14 @@ This view should receive those arguments:
                    {%- endif -%}

                    {%- if chill_person.fields.country_of_birth == 'visible' -%}
-                    <dt>{{ 'Country of birth'|trans }}&nbsp;:</dt>
-                    <dd>{% apply spaceless %}
-                        {% if person.countryOfBirth is not null %}
-                            {{ person.countryOfBirth.name|localize_translatable_string }}
-                        {% else %}
-                            <span class="chill-no-data-statement">{{ 'Unknown country of birth'|trans }}</span>
-                        {% endif %}
-                    {% endapply %}</dd>
+                            <dt>{{ 'Country of birth'|trans }}&nbsp;:</dt>
+                            <dd>{% apply spaceless %}
+                                {% if person.countryOfBirth is not null %}
+                                    {{ person.countryOfBirth.name|localize_translatable_string }}
+                                {% else %}
+                                    <span class="chill-no-data-statement">{{ 'Unknown country of birth'|trans }}</span>
+                                {% endif %}
+                            {% endapply %}</dd>
                    {%- endif -%}
                </dl>
            </figure>
@@ -198,10 +207,10 @@ This view should receive those arguments:
                {%- endif -%}

                {%- if chill_person.fields.phonenumber == 'visible' -%}
-                <dl>
-                    <dt>{{ 'Phonenumber'|trans }}&nbsp;:</dt>
-                    <dd>{% if person.phonenumber is not empty %}<a href="tel:{{ person.phonenumber }}"><pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
-                </dl>
+                        <dl>
+                            <dt>{{ 'Phonenumber'|trans }}&nbsp;:</dt>
+                            <dd>{% if person.phonenumber is not empty %}<a href="tel:{{ person.phonenumber }}"><pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
+                        </dl>
                {% endif %}

                {%- if chill_person.fields.mobilenumber == 'visible' -%}
@@ -261,4 +270,4 @@ This view should receive those arguments:
    {% endif %}

 </div>
-{% endblock %}
+{% endblock %}