fix conflicts when merging master

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

@@ -1,57 +1,56 @@
 /// AccompanyingCourse Work list Page
 div.accompanying_course_work-list {
 
-    div.objective_results {
+    table.obj-res-eval {
+        border-collapse: collapse;
+        border-radius: 5px;
         width: 100%;
-        display: grid;
-        grid-template-areas: "obj res";
-        grid-template-columns: 50%;
-        column-gap: 0.2rem;
-        padding: 0.3rem;
-
-        div.objective {
-            grid-area: obj;
+        &, tr, th, td {
+            border: 1px solid lightgray;
+            padding: 0.3em;
+        }
+        th {
             h4.title_label {
-                border-radius: 0.35rem 0 0 0.35rem;
+                font-weight: 700;
+                font-size: 100%;
+                font-family: 'Open Sans';
+                margin: 0;
             }
         }
-        div.results {
-            grid-area: res;
-            h4.title_label {
-                border-radius: 0 0.35rem 0.35rem 0;
-            }
+        td {
+            font-size: 85%;
+        }
+        td.obj,
+        td.res {
+            width: 50%;
+        }
+        td.eval {
+            width: 100%;
         }
-        //&:nth-child(even) { background-color: $chill-llight-gray; }
-        &.without-objectives {}
-        &.with-objectives {}
     }
 
-    div.objective_results,
-    div.evaluations {
-        h4.title_label {
-            display: block;
-            margin: 0.4em 0;
-            padding: 0.1em 0.5em;
-            font-variant-caps: small-caps;
-            font-size: 95%;
-            background-color: tint-color($chill-orange, 80%);
-            + * {
-                margin-top: 0;
-            }
+    ul {
+        &.goal_title,
+        &.result_list,
+        &.eval_title {
+            padding-left: 1em;
+            margin-bottom: 0;
         }
-        ul {
-            &.goal_title,
-            &.result_list {
-                padding-left: 1em;
-                margin-bottom: 0;
-            }
-            &.goal_title {
-                @include list_marker_triangle($social-issue-color);
-            }
-            &.result_list {
-                @include list_marker_triangle($pink);
-            }
+        &.goal_title {
+            @include list_marker_triangle($social-issue-color);
+        }
+        &.result_list {
+            @include list_marker_triangle($pink);
+        }
+        &.eval_title {
+            @include list_marker_triangle($orange);
         }
     }
 
 }
+
+div.flex-table div.item-bloc:nth-child(2n) table.obj-res-eval {
+    &, tr, th, td {
+        background-color:  $chill-llight-gray;
+    }
+}

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

@@ -120,10 +120,8 @@ ul.columns { // XS:1  SM:2  MD:1  LG:2  XL:2  XXL:2
     }
 }
 
-
-
 /// dashboard_like_badge in AccompanyingCourse Work list Page
-div.accompanying_course_work-list {
+div[class*='accompanying_course_work'] {
     div.dashboard,
     h2.badge-title {
         span.title_label {
@@ -133,6 +131,7 @@ div.accompanying_course_work-list {
         span.title_action {
             @include dashboard_like_badge($social-action-color);
         }
+
     }
 }
 

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

@@ -20,10 +20,10 @@
                tag-name="textarea">
             </ckeditor>
 
-            <div v-if="initialComment" class="metadata">
+            <div v-if="pinnedComment" class="metadata">
                {{ $t('comment.created_by', [
-               initialComment.creator.text,
-               $d(initialComment.createdAt.datetime, 'long')
+               pinnedComment.creator.text,
+               $d(pinnedComment.createdAt.datetime, 'long')
             ]) }}
             </div>
 
@@ -32,7 +32,7 @@
                   <li>
                      <button type="submit" class="btn btn-save">{{ $t('action.save') }}</button>
                   </li>
-                  <li v-if="initialComment !== null">
+                  <li v-if="pinnedComment !== null">
                      <a class="btn btn-delete"
                         @click="removeComment">
                         {{ $t('action.delete') }}
@@ -66,15 +66,15 @@ export default {
       }
    },
    computed: {
-      initialComment() {
-         return this.$store.state.accompanyingCourse.initialComment;
+      pinnedComment() {
+         return this.$store.state.accompanyingCourse.pinnedComment;
       },
       content: {
          set(value) {
             this.formdata.content = value;
          },
          get() {
-            return (this.initialComment)? this.initialComment.content : {};
+            return (this.pinnedComment)? this.pinnedComment.content : {};
          }
       },
       errors() {
@@ -107,7 +107,7 @@ export default {
 /*
 * TODO
 * - [x] delete button in ul record_actions, but not in form
-* - [ ] display updatedAt => initialComment fetch PATCH content changes MUST NOT change object id !!
+* - [ ] display updatedAt => pinnedComment fetch PATCH content changes MUST NOT change object id !!
 */
 </script>
 

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

@@ -22,19 +22,19 @@
    <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>
-          </li>
-        </ul>
+            <span>{{ p.text }}</span>
+         </li>
+      </ul>
    </div>
 
    <div>
       <add-persons
-        buttonTitle="resources.add_resources"
-        modalTitle="resources.add_resources"
-        v-bind:key="addPersons.key"
-        v-bind:options="addPersons.options"
-        @addNewPersons="addNewPersons"
-        ref="addPersons"> <!-- to cast child method -->
+      buttonTitle="resources.add_resources"
+      modalTitle="resources.add_resources"
+      v-bind:key="addPersons.key"
+      v-bind:options="addPersons.options"
+      @addNewPersons="addNewPersons"
+      ref="addPersons"> <!-- to cast child method -->
       </add-persons>
    </div>
 
@@ -87,17 +87,17 @@ export default {
             }
          )
           // filter persons appearing twice in requestor and resources
-          .filter(
-              (e, index, suggested) => {
-                for (let i = 0; i < suggested.length; i = i+1) {
-                  if (i < index && e.id === suggested[i].id) {
-                    return false
-                  }
-                }
+         .filter(
+            (e, index, suggested) => {
+               for (let i = 0; i < suggested.length; i = i+1) {
+               if (i < index && e.id === suggested[i].id) {
+                  return false
+               }
+               }
 
-                return true;
-              }
-          )
+               return true;
+            }
+         )
    }),
    methods: {
       removeResource(item) {

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

@@ -132,10 +132,6 @@ const appMessages = {
          sure_description: "Une fois le changement confirmé, il ne sera plus possible de le remettre à l'état de brouillon !",
          ok: "Confirmer le parcours"
       },
-      action: {
-         choose_other_social_issue: "Veuillez choisir un autre problématique",
-         cancel: "Annuler",
-      },
       // catch errors
       'Error while updating AccompanyingPeriod Course.': "Erreur du serveur lors de la mise à jour du parcours d'accompagnement.",
       'Error while retriving AccompanyingPeriod Course.': "Erreur du serveur lors du chargement du parcours d'accompagnement.",

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

@@ -163,7 +163,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             },
             postFirstComment(state, comment) {
                //console.log('### mutation: postFirstComment', comment);
-               state.accompanyingCourse.initialComment = comment;
+               state.accompanyingCourse.pinnedComment = comment;
             },
             updateSocialIssues(state, value) {
                console.log('updateSocialIssues', value);
@@ -565,11 +565,11 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             },
             postFirstComment({ commit }, payload) {
                const url = `/api/1.0/person/accompanying-course/${id}.json`
-               const body = { type: "accompanying_period", initialComment: payload }
+               const body = { type: "accompanying_period", pinnedComment: payload }
 
                return makeFetch('PATCH', url, body)
                   .then((response) => {
-                     commit('postFirstComment', response.initialComment);
+                     commit('postFirstComment', response.pinnedComment);
                   })
                   .catch((error) => {
                      commit('catchError', error);

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

@@ -8,10 +8,10 @@
       <div id="picking">
           <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
           <div v-for="si in socialIssues">
-            <input type="radio" checked v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
+            <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 class="my-3">
-        <div class="col-8">
+        <div class="col-11">
           <vue-multiselect
               name="otherIssues"
               label="text"
@@ -27,7 +27,7 @@
               :allow-empty="true"
               :show-labels="false"
               :loading="issueIsLoading"
-              :placeholder="$t('action.choose_other_social_issue')"
+              :placeholder="$t('choose_other_social_issue')"
               :options="socialIssuesOther"
               @select="addIssueInList">
           </vue-multiselect>
@@ -35,7 +35,7 @@
       </div>
       <div v-if="hasSocialIssuePicked">
         <h2>{{ $t('pick_an_action') }}</h2>
-        <div class="col-8">
+        <div class="col-11">
           <vue-multiselect
             v-model="socialActionPicked"
             label="text"
@@ -77,7 +77,7 @@
         <p>{{ $t('form_has_errors') }}</p>
 
         <ul>
-          <li v-for="e in errors">
+          <li v-for="e in errors" :key="e.id">
             {{ e }}
           </li>
         </ul>
@@ -120,10 +120,11 @@ const i18n = {
       endDate: "Date de fin",
       form_has_errors: "Le formulaire comporte des erreurs",
       pick_social_issue: "Choisir une problématique sociale",
+      pick_other_social_issue: "Veuillez choisir un autre problématique",
       pick_an_action: "Choisir une action d'accompagnement",
       pick_social_issue_linked_with_action: "Indiquez la problématique sociale liée à l'action d'accompagnement",
       persons_involved: "Usagers concernés",
-
+      choose_other_social_issue: "Veuillez choisir un autre problématique",
     }
   }
 }
@@ -178,12 +179,10 @@ export default {
     personsPicked: {
       get() {
         let s = this.$store.state.personsPicked.map(p => p.id);
-        // console.log('persons picked', s);
 
         return s;
       },
       set(v) {
-        // console.log('persons picked', v);
         this.$store.commit('setPersonsPickedIds', v);
       }
     },
@@ -226,6 +225,11 @@ export default {
         this.$store.commit('setEndDate', ISOToDate(value));
       }
     },
+    setSocialIssue: {
+      set() {
+        this.$store.dispatch('setSocialIssue', socialIssues[socialIssues.length - 1])
+      }
+    }
   }
 }
 
@@ -280,4 +284,4 @@ span.badge {
     grid-area: confirm;
   }
 }
-</style>
+</style>

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

@@ -31,7 +31,6 @@ const store = createStore({
       return null !== state.socialActionPicked;
     },
     hasSocialIssuePicked(state) {
-      console.log(state.socialIssuePicked);
       return null !== state.socialIssuePicked;
     },
     isLoadingSocialActions(state) {
@@ -74,36 +73,27 @@ const store = createStore({
   },
   mutations: {
     setSocialActionsReachables(state, actions) {
-      // console.log('set social action reachables');
-      // console.log(actions);
-
       state.socialActionsReachables = actions;
     },
     setSocialAction(state, socialAction) {
-      // console.log('socialAction', socialAction);
       state.socialActionPicked = socialAction;
     },
     setSocialIssue(state, socialIssueId) {
-      // console.log('set social issue', socialIssueId);
       if (socialIssueId === null) {
         state.socialIssuePicked = null;
       } else {
         let mapped = state.socialIssues
           .find(e => e.id === socialIssueId);
         state.socialIssuePicked = mapped;
-        // console.log('social issue setted', state.socialIssuePicked);
       }
     },
     addIssueInList(state, issue) {
-      //console.log('add issue list', issue.id);
       state.socialIssues.push(issue);
     },
     updateIssuesOther(state, payload) {
-      //console.log('update issues other');
       state.socialIssuesOther = payload;
     },
     removeIssueInOther(state, issue) {
-      //console.log('remove issue other', issue.id);
       state.socialIssuesOther = state.socialIssuesOther.filter(
           (i) => i.id !== issue.id
       );
@@ -124,12 +114,12 @@ const store = createStore({
       state.endDate = date;
     },
     setPersonsPickedIds(state, ids) {
-      console.log('persons ids', ids);
+
       state.personsPicked = state.personsReachables
         .filter(p => ids.includes(p.id))
     },
     addErrors(state, { errors, cancel_posting }) {
-      console.log('add errors', errors);
+
       state.errors = errors;
       if (cancel_posting) {
         state.isPostingWork = false;
@@ -138,8 +128,6 @@ const store = createStore({
   },
   actions: {
     pickSocialIssue({ commit }, socialIssueId) {
-      console.log('pick social issue');
-
       commit('setIsLoadingSocialActions', true);
       commit('setSocialAction', null);
       commit('setSocialActionsReachables', []);

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

@@ -1,23 +1,31 @@
 <template>
-   <div id="workEditor" class="my-4">
-
+   <div id="workEditor" class="accompanying_course_work_edit my-4">
       <div id="title" class="action-row">
-         <label>{{ $t('action_title') }}</label>
-         <p>{{ work.socialAction.text }}</p>
+         <div>
+            <p class="wl-item social-issues">
+               <span class="chill-entity entity-social-issue">
+                  <span class="badge bg-chill-l-gray text-dark">{{ work.socialAction.issue.text }}</span>
+               </span>
+            </p>
+         </div>
+         <h2 class="badge-title">
+            <span class="title_label"></span>
+            <span class="title_action">{{ work.socialAction.text }}</span>
+         </h2>
       </div>
 
       <div id="startDate" class="action-row">
-         <label>{{ $t('startDate') }}</label>
-         <input v-model="startDate" type="date" required="true"/>
+         <label class="col-form-label">{{ $t('startDate') }}</label>
+         <input v-model="startDate" type="date" required="true" class="form-control" v-once/>
       </div>
 
       <div id="endDate" class="action-row">
-         <label>{{ $t('endDate') }}</label>
-         <input v-model="endDate" type="date"/>
+         <label class="col-form-label">{{ $t('endDate') }}</label>
+         <input v-model="endDate" type="date" class="form-control" />
       </div>
 
       <div id="comment" class="action-row">
-         <label>{{ $t('comments') }}</label>
+         <label class="col-form-label">{{ $t('comments') }}</label>
          <ckeditor
             v-model="note"
             :editor="editor"
@@ -42,42 +50,56 @@
          </div>
 
          <!-- results which **are** attached to an objective -->
-         <div v-for="g in goalsPicked">
-            <div>
-               <div class="item-title">
-                  {{ g.goal.title.fr }}
-                  <a @click="removeGoal(g)"></a>
-               </div>
+         <div v-for="g in goalsPicked" :key="g.goal.id">
+            <div class="item-title" @click="removeGoal(g)">
+               <span class="removable">{{ g.goal.title.fr }}</span>
             </div>
             <div>
                <add-result :goal="g.goal" destination="goal"></add-result>
             </div>
          </div>
+         <div class="accordion" id="expandedSuggestions">
+            <div v-if="availableForCheckGoal.length > 0" class="accordion-item">
+               <h2 class="accordion-header" id="heading_expanded_suggestions">
 
-         <!-- box to add goal -->
-         <div class="add_goal">
-            <div>
-               <div v-if="showAddObjective">
+                  <button v-if="isExpanded"
+                     class="accordion-button"
+                     type="button"
+                     data-bs-toggle="collapse"
+                     aria-expanded="true"
+                     @click="toggleSelect">
+                     Masquer
+                  </button>
 
-                  <p>{{ $t('available_goals_text') }}</p>
+                  <button v-else
+                     class="accordion-button collapsed"
+                     type="button"
+                     data-bs-toggle="collapse"
+                     aria-expanded="false"
+                     @click="toggleSelect">
+                     Motifs, objectifs et dispositfs disponibles
+                  </button>
+
+               </h2>
+               <div class="accordion-collapse" id="collapse_expanded_suggestions"
+                  aria-labelledby="heading_expanded_suggestions" data-bs-parent="#expandedSuggestions">
+
+                  <template v-if="isExpanded">
+                     <ul class="list-suggest add-items">
+                        <li v-for="g in availableForCheckGoal" @click="addGoal(g)" :key="g.id">
+                           <span>{{ g.title.fr }}</span>
+                        </li>
+                     </ul>
+                  </template>
 
-                  <ul class="list-suggest add-items">
-                     <li v-for="g in availableForCheckGoal" @click="addGoal(g)">
-                        <span>{{ g.title.fr }}</span>
-                     </li>
-                  </ul>
-               </div>
-               <ul class="record_actions" v-if="availableForCheckGoal.length > 0">
-                  <li>
-                     <button :title="$t('add_an_objective')" class="btn btn-create"
-                             @click="toggleAddObjective"></button>
-                  </li>
-               </ul>
-               <div v-else>
-                 <span class="chill-no-data-statement">{{ $t('no_goals_available') }}</span>
                </div>
+               <p v-if="goalsPicked.length ===0" class="chill-no-data-statement">
+                  Aucun objectif associé
+               </p>
+            </div>
+            <div v-else>
+               <span class="chill-no-data-statement">{{ $t('no_goals_available') }}</span>
             </div>
-            <div><!-- empty for results --></div>
          </div>
       </div>
 
@@ -98,7 +120,7 @@
             <div v-if="showAddEvaluation">
                <p>{{ $t('available_evaluations_text') }}</p>
                <ul class="list-suggest add-items">
-                  <li v-for="e in evaluationsForAction" @click="addEvaluation(e)">
+                  <li v-for="e in evaluationsForAction" @click="addEvaluation(e)" :key="e.id">
                      <span>{{ e.title.fr }}</span>
                   </li>
                </ul>
@@ -108,19 +130,21 @@
                   <button :title="$t('add_an_evaluation')" class="btn btn-create" @click="toggleAddEvaluation"></button>
                </li>
             </ul>
-           <div v-else>
-             <span class="chill-no-data-statement">{{ $t('no_evaluations_available') }}</span>
-           </div>
+            <div v-else>
+               <span class="chill-no-data-statement">{{ $t('no_evaluations_available') }}</span>
+            </div>
          </div>
       </div>
 
       <div id="persons" class="action-row">
-         <h3>{{ $t('persons_involved') }}</h3>
+         <h3 class="mb-3">{{ $t('persons_involved') }}</h3>
 
          <ul class="list-unstyled">
             <li v-for="p in personsReachables" :key="p.id">
-               <input v-model="personsPicked" :value="p.id" type="checkbox" class="me-2">
-               <person-render-box render="badge" :options="{}" :person="p"></person-render-box>
+               <label :for="p.id">
+                  <input v-model="personsPicked" :value="p.id" :id="p.id" type="checkbox" class="me-2">
+                  {{ p.text }}
+               </label>
             </li>
          </ul>
       </div>
@@ -146,14 +170,21 @@
                </li>
             </ul>
          </div>
-         <div v-else>
-            <p>{{ handlingThirdParty.text }}</p>
-            <address-render-box :address="handlingThirdParty.address"></address-render-box>
-
+         <div v-else class="flex-table">
+               <third-party-render-box
+                  :thirdparty="handlingThirdParty"
+                  :options="{
+                     addLink: false,
+                     addId: false,
+                     addEntity: true,
+                     addInfo: false,
+                     hLevel: 3,
+                     isMultiline: true,
+                     isConfidential: false
+                     }"></third-party-render-box>
             <ul class="record_actions">
                <li>
-                  <button :title="$t('remove_handling_thirdparty')" class="btn btn-remove"
-                          @click="removeHandlingThirdParty"></button>
+                  <button :title="$t('remove_handling_thirdparty')" class="btn btn-remove" @click="removeHandlingThirdParty"/>
                </li>
             </ul>
          </div>
@@ -168,17 +199,24 @@
          </div>
 
          <div v-else>
-            <ul>
-               <li v-for="t in thirdParties">
-                  <p>{{ t.text }}</p>
-                  <address-render-box :address="t.address"></address-render-box>
-
-                  <ul class="record_actions">
-                     <button :title="$t('remove_thirdparty')" class="btn btn-remove"
-                             @click="removeThirdParty(t)"></button>
-                  </ul>
-               </li>
-            </ul>
+            <div class="flex-bloc mb-3">
+                  <third-party-render-box
+                     v-for="thirdparty in thirdParties"
+                     :key="thirdparty.id"
+                     :thirdparty="thirdparty"
+                     :options="{ addLink : false, addId : false, addEntity: true, addInfo: false, hLevel: 3 }"
+                     >
+                     <template v-slot:record-actions>
+                        <ul class="record_actions">
+                           <li><on-the-fly :type="thirdparty.type" :id="thirdparty.id" action="show"></on-the-fly></li>
+                           <li><on-the-fly :type="thirdparty.type" :id="thirdparty.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly"></on-the-fly></li>
+                           <li>
+                              <button :title="$t('remove_thirdparty')" class="btn btn-sm btn-remove" @click="removeThirdParty(thirdparty)" />
+                           </li>
+                        </ul>
+                     </template>
+                  </third-party-render-box>
+            </div>
          </div>
 
          <ul class="record_actions">
@@ -195,22 +233,22 @@
          </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>
+      <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>
-            <li v-for="e in errors">{{ e }}</li>
+            <li v-for="e in errors" :key="e.id">{{ e }}</li>
          </ul>
       </div>
 
@@ -239,10 +277,11 @@ import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import AddResult from './components/AddResult.vue';
 import AddEvaluation from './components/AddEvaluation.vue';
-import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+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';
 
 const i18n = {
    messages: {
@@ -287,13 +326,15 @@ export default {
       AddResult,
       AddEvaluation,
       AddPersons,
-      PersonRenderBox,
       AddressRenderBox,
+      ThirdPartyRenderBox,
       PickTemplate,
+      OnTheFly
    },
    i18n,
    data() {
       return {
+         isExpanded: false,
          editor: ClassicEditor,
          showAddObjective: false,
          showAddEvaluation: false,
@@ -341,7 +382,6 @@ export default {
       ]),
       startDate: {
          get() {
-            //console.log('get start date', this.$store.state.startDate);
             return dateToISO(this.$store.state.startDate);
          },
          set(v) {
@@ -350,7 +390,6 @@ export default {
       },
       endDate: {
          get() {
-            //console.log('get end date', this.$store.state.endDate);
             return dateToISO(this.$store.state.endDate);
          },
          set(v) {
@@ -367,8 +406,6 @@ export default {
       },
       availableForCheckGoal() {
          let pickedIds = this.$store.state.goalsPicked.map(g => g.goal.id);
-         //console.log('pickeds goals id', pickedIds);
-         //console.log(this.$store.state.goalsForAction);
 
          return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
       },
@@ -378,26 +415,22 @@ export default {
       personsPicked: {
          get() {
             let s = this.$store.state.personsPicked.map(p => p.id);
-            //console.log('persons picked', s);
 
             return s;
          },
          set(v) {
-            //console.log('persons picked', v);
             this.$store.commit('setPersonsPickedIds', v);
          }
       },
    },
    methods: {
-      toggleAddObjective() {
-         this.showAddObjective = !this.showAddObjective;
+      toggleSelect() {
+         this.isExpanded = !this.isExpanded;
       },
       addGoal(g) {
-         //console.log('add Goal', g);
          this.$store.commit('addGoal', g);
       },
       removeGoal(g) {
-         //console.log('remove goal', g);
          this.$store.commit('removeGoal', g);
       },
       addEvaluation(e) {
@@ -407,31 +440,39 @@ export default {
          this.showAddEvaluation = !this.showAddEvaluation;
       },
       setHandlingThirdParty({selected, modal}) {
-         //console.log('setHandlingThirdParty', selected);
          this.$store.commit('setHandlingThirdParty', selected.shift().result);
          this.$refs.handlingThirdPartyPicker.resetSearch();
          modal.showModal = false;
       },
       removeHandlingThirdParty() {
-         //console.log('removeHandlingThirdParty');
          this.$store.commit('setHandlingThirdParty', null);
       },
       addThirdParties({selected, modal}) {
-         //console.log('addThirdParties', selected);
          this.$store.commit('addThirdParties', selected.map(r => r.result));
          this.$refs.thirdPartyPicker.resetSearch();
          modal.showModal = false;
       },
       removeThirdParty(t) {
-         //console.log('remove third party', t);
          this.$store.commit('removeThirdParty', t);
       },
       submit() {
          this.$store.dispatch('submit');
       },
       beforeGenerateTemplate() {
-          console.log('before generate');
-          return Promise.resolve();
+         console.log('before generate');
+         return Promise.resolve();
+      },
+      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'})
+               }
+            });
       }
    }
 };
@@ -447,15 +488,15 @@ div#workEditor {
    grid-template-columns: 50%;
    column-gap: 0rem;
    grid-template-areas:
-       "title title"
-       "startDate endDate"
-       "comment comment"
-       "objectives objectives"
-       "evaluations evaluations"
-       "persons persons"
-       "handling handling"
-       "tparties tparties"
-       "errors errors";
+      "title title"
+      "startDate endDate"
+      "comment comment"
+      "objectives objectives"
+      "evaluations evaluations"
+      "persons persons"
+      "handling handling"
+      "tparties tparties"
+      "errors errors";
 
    #title {
       grid-area: title; }
@@ -489,7 +530,7 @@ div#workEditor {
          p {
             margin-top: 0;
             font-weight: bold;
-            font-size: 1.5rem;
+            font-size: 1rem;
          }
       }
 
@@ -578,4 +619,16 @@ div#workEditor {
    }
 }
 
+.accordion-item:first-of-type, .accordion-item:last-of-type {
+   border-radius: 0rem;
+   border: 0px;
+   .accordion-button {
+      padding: .25rem;
+      border: 1px solid rgba(17, 17, 17, 0.125);
+      margin-top: 20px;
+      margin-bottom: 20px;
+   }
+}
+
+
 </style>

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

@@ -1,70 +1,39 @@
 <template>
    <div>
       <div class="item-title">
-         {{ evaluation.evaluation.title.fr }}
-         <a @click="removeEvaluation(evaluation)"></a>
+         <span>{{ evaluation.evaluation.title.fr }}</span>
       </div>
 
-      <div v-if="!evaluation.editEvaluation">
-         <dl class="item-details definition-inline">
-
-            <dt v-if="evaluation.startDate">{{ $t('startDate') }} :</dt>
-            <dd v-if="evaluation.startDate">{{ $d(evaluation.startDate, 'short') }}</dd>
-
-            <dt v-if="evaluation.endDate">{{ $t('endDate') }} :</dt>
-            <dd v-if="evaluation.endDate">{{ $d(evaluation.endDate, 'short') }}</dd>
-
-            <dt v-if="evaluation.maxDate">{{ $t('maxDate') }} :</dt>
-            <dd v-if="evaluation.maxDate">{{ $d(evaluation.maxDate, 'short') }}</dd>
-
-            <dt v-if="evaluation.warningInterval">{{ $t('warningInterval') }} :</dt>
-            <dd v-if="evaluation.warningInterval">{{ evaluation.warningInterval }}</dd>
-
-            <template v-if="evaluation.documents.length > 0">
-              <dt>{{ $t('documents') }} :</dt>
-              <dd>
-                <ul>
-                  <li v-for="d in evaluation.documents">
-                    {{ d.template.name.fr }}
-                    <a :href="buildEditLink(d.storedObject)" class="btn btn-action btn-sm">
-                      <i class="fa fa-edit"></i>
-                    </a>
-                  </li>
-                </ul>
-              </dd>
-
-            </template>
-
-         </dl>
-         <dl class="item-details">
-
-            <dt v-if="evaluation.comment">{{ $t('comment') }} :</dt>
-            <dd v-if="evaluation.comment">
-              <blockquote class="chill-user-quote">
-                {{ evaluation.comment }}
-              </blockquote>
-            </dd>
-
-         </dl>
-         <ul class="record_actions">
-            <li>
-               <a class="btn btn-sm btn-update" @click="toggleEditEvaluation(e)">{{ $t('action.edit') }}</a>
-            </li>
-         </ul>
-      </div>
-      <div v-if="evaluation.editEvaluation">
+      <div>
          <form-evaluation ref="FormEvaluation" :key="evaluation.key" :evaluation="evaluation"></form-evaluation>
          <ul class="record_actions">
             <li>
-               <button class="btn btn-sm btn-update" @click="submitForm">{{ $t('action.save') }}</button>
+               <a class="btn btn-delete" @click="modal.showModal = true" :title="$t('action.delete')"></a>
             </li>
          </ul>
       </div>
+
+      <teleport to="body">
+         <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+            <template v-slot:header>
+               <h2 class="modal-title">{{ $t('delete.sure') }}</h2>
+            </template>
+            <template v-slot:body>
+               <p>{{ $t('delete.sure_description') }}</p>
+            </template>
+            <template v-slot:footer>
+               <button class="btn btn-danger" @click="removeEvaluation(evaluation)">
+                  {{ $t('delete.ok') }}
+               </button>
+            </template>
+         </modal>
+      </teleport>
    </div>
 </template>
 
 <script>
 import FormEvaluation from './FormEvaluation.vue';
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 
 const i18n = {
    messages: {
@@ -78,6 +47,11 @@ const i18n = {
          warningInterval: "Rappel (jours)",
          comment: "Note publique",
          documents: "Documents",
+         delete: {
+            sure: "Êtes-vous sûr?",
+            sure_description: "Cette évaluation sera supprimée de cette action d'accompagnement",
+            ok: "Supprimer"
+         }
       }
    }
 };
@@ -85,12 +59,18 @@ const i18n = {
 export default {
    name: "AddEvaluation",
    components: {
-      FormEvaluation
+      FormEvaluation,
+      Modal
    },
    props: ['evaluation'],
    i18n,
    data() {
-      return {};
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-md"
+         }
+      };
    },
    computed: {
       pickedEvaluations() {
@@ -99,7 +79,6 @@ export default {
    },
    methods: {
       removeEvaluation(e) {
-         console.log(e);
          this.$store.commit('removeEvaluation', e);
          return;
       },
@@ -110,9 +89,20 @@ export default {
          this.toggleEditEvaluation();
       },
       buildEditLink(storedObject) {
-        return `/edit/${storedObject.uuid}?returnPath=` + encodeURIComponent(
+         return `/edit/${storedObject.uuid}?returnPath=` + encodeURIComponent(
             window.location.pathname + window.location.search + window.location.hash);
       },
    }
 }
 </script>
+
+<style lang="scss" scoped>
+   div.item-title{
+      .evaluation-title{
+         cursor: default;
+         &::before{
+            content: "";
+         }
+      }
+   }
+</style>

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

@@ -6,10 +6,9 @@
       </p>
 
       <ul class="list-suggest remove-items">
-         <li v-for="r in pickedResults">
+         <li v-for="r in pickedResults" @click="removeResult(r)" :key="r.id">
             <span>
                {{ r.title.fr }}
-               <a @click="removeResult(r)"></a>
             </span>
          </li>
       </ul>
@@ -24,7 +23,7 @@
                   data-bs-toggle="collapse"
                   aria-expanded="true"
                   @click="toggleSelect">
-                  Masquer résultats et orientations disponibles
+                  Masquer
                </button>
 
                <button v-else
@@ -33,16 +32,16 @@
                   data-bs-toggle="collapse"
                   aria-expanded="false"
                   @click="toggleSelect">
-                  Afficher résultats et orientations disponibles
+                  Résultats et orientations disponibles
                </button>
 
             </h2>
             <div class="accordion-collapse" id="collapse_expanded_suggestions"
-                 aria-labelledby="heading_expanded_suggestions" data-bs-parent="#expandedSuggestions">
+               aria-labelledby="heading_expanded_suggestions" data-bs-parent="#expandedSuggestions">
 
                <template v-if="isExpanded">
                   <ul class="list-suggest add-items">
-                     <li v-for="r in availableForCheckResults" @click="addResult(r)">
+                     <li v-for="r in availableForCheckResults" @click="addResult(r)" :key="r.id">
                         <span>{{ r.title.fr }}</span>
                      </li>
                   </ul>
@@ -61,6 +60,7 @@
 </template>
 
 <script>
+
 const i18n = {
    messages: {
       fr: {
@@ -90,9 +90,6 @@ export default {
          throw Error(`this.destination is not implemented: ${this.destination}`);
       },
       pickedResults() {
-         //console.log('get checked');
-         //console.log('this.destination', this.destination);
-         //console.log('this.goal', this.goal);
          if (this.destination === 'action') {
             return this.$store.state.resultsPicked;
          } else if (this.destination === 'goal') {
@@ -102,16 +99,11 @@ export default {
          throw Error(`this.destination is not implemented: ${this.destination}`);
       },
       availableForCheckResults() {
-         //console.log('availableForCheckResults');
-         //console.log('this.destination', this.destination);
-         //console.log('this.goal', this.goal);
          if (this.destination === 'action') {
             let pickedIds = this.$store.state.resultsPicked.map(r => r.id);
-            //console.log('picked ids', pickedIds);
 
             return this.$store.state.resultsForAction.filter(r => !pickedIds.includes(r.id));
          } else if (this.destination === 'goal') {
-            //console.log('results picked for goal', this.$store.getters.resultsPickedForGoal(this.goal));
             let pickedIds = this.$store.getters.resultsPickedForGoal(this.goal).map(r => r.id);
 
             return this.$store.getters.resultsForGoal(this.goal).filter(r => !pickedIds.includes(r.id));
@@ -125,7 +117,7 @@ export default {
          this.isExpanded = !this.isExpanded;
       },
       addResult(r) {
-         //console.log('addResult', r);
+
          if (this.destination === 'action') {
             this.$store.commit('addResultPicked', r);
             return;
@@ -136,7 +128,7 @@ export default {
          throw Error(`this.destination is not implemented: ${this.destination}`);
       },
       removeResult(r) {
-         //console.log('removeresult', r);
+
          if (this.destination === 'action') {
             this.$store.commit('removeResultPicked', r);
             return;
@@ -150,3 +142,12 @@ export default {
 }
 
 </script>
+
+
+<style lang="scss" scoped>
+
+.accordion-button {
+   padding: .25rem;
+}
+
+</style>

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

@@ -50,8 +50,8 @@
       </div>
 
       <div class="row mb-3">
-         <label class="col-sm-4 col-form-label">{{ $t('evaluation_public_comment') }}</label>
-         <div class="col-sm-8">
+         <label class="col-sm-4 col-form-label visually-hidden">{{ $t('evaluation_public_comment') }}</label>
+         <div class="col-sm-12">
             <ckeditor
                :editor="editor"
                :placeholder="$t('evaluation_comment_placeholder')"

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

@@ -164,7 +164,14 @@ const store = createStore({
         note: '',
         results: []
       }
+      const tmpIndex = () => {
+        let ar = state.goalsPicked.map(g => g.id),
+            s = Math.min(...ar);
+        return (s < 0) ? s : 0
+      };
+      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);
@@ -192,7 +199,7 @@ const store = createStore({
         type: "accompanying_period_work_evaluation",
         key: state.evaluationsPicked.length + 1,
         evaluation: evaluation,
-        startDate: null,
+        startDate: new Date(),
         endDate:  null,
         maxDate:  null,
         warningInterval: null,
@@ -372,6 +379,36 @@ const store = createStore({
           commit('setErrors', error.violations);
         });
     },
+    patchOnTheFly({ commit }, payload) {
+      let body = { type: payload.type };
+      const id = payload.data.id;
+      let url = `/api/1.0/person/person/${id}.json`;
+      let mutation = "updatePerson";
+
+      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;
+      } 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 };
+
+        url = `/api/1.0/thirdparty/thirdparty/${id}.json`;
+        mutation = 'updateThirdparty'
+      }
+      makeFetch('PATCH', url, body)
+        .then((response) => {
+            commit(mutation, {target: payload.target, thirdparty: response});
+        })
+        .catch((error) => {
+            throw error;
+        })
+  },
   }
 });
 

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

@@ -3,7 +3,7 @@
 
   <ul class="record_actions">
     <!-- <li v-if="!hasHouseholdAddress && !isHouseholdForceAddress">
-      <button class="btn" @click="markNoAddress">
+      <button class="btn btn-misc" @click="markNoAddress">
         {{ $t('household_members_editor.household_address.mark_no_address') }}
       </button>
     </li> -->

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

@@ -1,7 +1,7 @@
 
-import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
-import { addressMessages } from 'ChillMainAssets/vuejs/Address/i18n'
-import { ontheflyMessages } from 'ChillMainAssets/vuejs/OnTheFly/i18n'
+import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n';
+import { ontheflyMessages } from 'ChillMainAssets/vuejs/OnTheFly/i18n';
+import { addressMessages } from 'ChillMainAssets/vuejs/Address/i18n';
 
 const appMessages = {
    fr: {

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

@@ -9,6 +9,7 @@ const visMessages = {
             both: 'neutre, non binaire',
             woman: 'féminin',
             man: 'masculin',
+            undefined: "genre non précisé",
             years: 'ans',
             click_to_expand: 'cliquez pour étendre',
             add_relationship_link: "Créer un lien de filiation",

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

@@ -153,7 +153,7 @@ const getGender = (gender) => {
         case 'man':
             return visMessages.fr.visgraph.man
         default:
-            throw 'gender undefined'
+            return visMessages.fr.visgraph.undefined
     }
 }
 

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

@@ -3,44 +3,54 @@
 */
 const parametersToString = ({ query, options }) => {
    let types ='';
-   options.type.forEach(function(type) { 
+   options.type.forEach(function(type) {
       types += '&type[]=' + type;
-   }); 
+   });
    return 'q=' + query + types;
 };
 
-/* 
+/*
 * Endpoint chill_person_search
 * method GET, get a list of persons
-* 
+*
 *  @query string - the query to search for
+*  @deprecated
 */
-const searchPersons =  ({ query, options }) => {
+const searchPersons =  ({ query, options }, signal) => {
+  console.err('deprecated');
    let queryStr = parametersToString({ query, options });
    let url = `/fr/search.json?name=person_regular&${queryStr}`;
-   return fetch(url)
+   let fetchOpts = {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json;charset=utf-8'
+      },
+      signal,
+   };
+
+    return fetch(url, fetchOpts)
       .then(response => {
          if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response'); 
+         throw Error('Error with request resource response');
       });
 };
 
-/* 
+/*
 * Endpoint v.2 chill_main_search_global
 * method GET, get a list of persons and thirdparty
-* 
-*  NOTE: this is a temporary WIP endpoint, return inconsistent random results
-*  @query string - the query to search for
+*
+* @param query string - the query to search for
+*
 */
-const searchPersons_2 =  ({ query, options }) => {
+const searchEntities =  ({ query, options }, signal) => {
    let queryStr = parametersToString({ query, options });
    let url = `/api/1.0/search.json?${queryStr}`;
    return fetch(url)
       .then(response => {
          if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response'); 
+         throw Error('Error with request resource response');
       });
 };
 
 
-export { searchPersons, searchPersons_2 };
+export { searchPersons, searchEntities };

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

@@ -10,6 +10,13 @@ const getPerson = (id) => {
       });
 };
 
+const getPersonAltNames = () =>
+   fetch('/api/1.0/person/config/alt_names.json').then(response => {
+      if (response.ok) { return response.json(); }
+      throw Error('Error with request resource response');
+   });;
+
+
 /*
 * POST a new person
 */
@@ -48,6 +55,7 @@ const patchPerson = (id, body) => {
 
 export {
    getPerson,
+   getPersonAltNames,
    postPerson,
    patchPerson
 };

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

@@ -90,7 +90,7 @@
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import PersonSuggestion from './AddPersons/PersonSuggestion';
-import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';
+import { searchEntities } from 'ChillPersonAssets/vuejs/_api/AddPersons';
 import { postPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
 import { postThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
 
@@ -115,6 +115,8 @@ export default {
          },
          search: {
             query: "",
+            previousQuery: "",
+            currentSearchQueryController: null,
             suggested: [],
             selected: [],
             priorSuggestion: {}
@@ -189,16 +191,24 @@ export default {
       },
       setQuery(query) {
          this.search.query = query;
-         if (query.length >= 3) {
-            searchPersons_2({ query, options: this.options })
-               .then(suggested => new Promise((resolve, reject) => {
-                  //console.log('suggested', suggested);
-                  this.loadSuggestions(suggested.results);
-                  resolve();
-            }));
-         } else {
-            this.loadSuggestions([]);
-         }
+
+         setTimeout(function() {
+            if (query === "") {
+              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)
+                  .then(suggested => new Promise((resolve, reject) => {
+                    this.loadSuggestions(suggested.results);
+                    resolve();
+                  }));
+            }
+         }.bind(this), query.length > 3 ? 300 : 700);
       },
       loadSuggestions(suggested) {
          this.search.suggested = suggested;

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

@@ -21,14 +21,19 @@
 
 <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')" />
+      <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')" />
       <label for="firstname">{{ $t('person.firstname') }}</label>
    </div>
 
-   <div class="form-floating mb-3">
-      <input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
-      <label for="lastname">{{ $t('person.lastname') }}</label>
+   <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" />
+      <label :for="a.key">{{ a.labels.fr }}</label>
    </div>
 
    <!--  TODO fix placeholder if undefined
@@ -71,11 +76,20 @@
          aria-describedby="mobilenumber" />
    </div>
 
+   <div class="input-group mb-3">
+      <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')"
+         aria-describedby="email" />
+   </div>
+
 </div>
 </template>
 
 <script>
-import { getPerson } from '../../_api/OnTheFly';
+import { getPerson, getPersonAltNames } from '../../_api/OnTheFly';
 import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 
 export default {
@@ -88,13 +102,19 @@ export default {
    data() {
       return {
          person: {
-            type: 'person'
-         }
+            type: 'person',
+            altNames: []
+         },
+         config: {
+            altNames: []
+         },
       }
    },
    computed: {
       firstName: {
-         set(value) { this.person.firstName = value; },
+         set(value) {
+            this.person.firstName = value;
+         },
          get() { return this.person.firstName; }
       },
       lastName: {
@@ -125,6 +145,10 @@ export default {
          set(value) { this.person.mobilenumber = value; },
          get() { return this.person.mobilenumber; }
       },
+      email: {
+         set(value) { this.person.email = value; },
+         get() { return this.person.email; }
+      },
       genderClass() {
          switch (this.person.gender) {
             case 'woman':
@@ -150,6 +174,10 @@ export default {
       }
    },
    mounted() {
+      getPersonAltNames()
+         .then(altNames => {
+            this.config.altNames = altNames;
+         });
       if (this.action !== 'create') {
          this.loadData();
       }
@@ -162,7 +190,16 @@ export default {
                console.log('get person', this.person);
                resolve();
          }));
-      }
+      },
+      onAltNameInput(event) {
+         const key = event.target.id;
+         const label = event.target.value;
+         let updateAltNames = this.person.altNames.filter((a) => a.key !== key);
+         updateAltNames.push(
+            {'key': key, 'label': label}
+         )
+         this.person.altNames = updateAltNames;
+      },
    }
 }
 </script>

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

@@ -30,6 +30,7 @@ const personMessages = {
          phonenumber: "Téléphone",
          mobilenumber: "Mobile",
          altnames: "Autres noms",
+         email: "Courriel",
          gender: {
             title: "Genre",
             placeholder: "Choisissez le genre de l'usager",
@@ -38,7 +39,6 @@ const personMessages = {
             neuter: "Neutre, non binaire",
             undefined: "Non renseigné"
          }
-
       },
       error_only_one_person: "Une seule personne peut être sélectionnée !"
    }

src/Bundle/ChillPersonBundle/Resources/test/Fixtures/App/web/app_dev.php

@@ -18,7 +18,8 @@ use Symfony\Component\HttpFoundation\Request;
 
 // This check prevents access to debug front controllers that are deployed by accident to production servers.
 // Feel free to remove this, extend it, or make something more sophisticated.
-if (isset($_SERVER['HTTP_CLIENT_IP'])
+if (
+    isset($_SERVER['HTTP_CLIENT_IP'])
     || isset($_SERVER['HTTP_X_FORWARDED_FOR'])
     || !(in_array($_SERVER['REMOTE_ADDR'], ['127.0.0.1', 'fe80::1', '::1'], true) || \PHP_SAPI === 'cli-server')
 ) {

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

@@ -0,0 +1,92 @@
+{% extends '@ChillPerson/AccompanyingCourse/layout.html.twig' %}
+
+{% block title %}
+    {{ 'Accompanying Course Comment list'|trans }}
+{% endblock %}
+
+{% macro show_comment(comment, options) %}
+<div class="item-bloc">
+    <div class="item-row">
+        <div>
+            {% if options.pinned is defined %}
+                <i class="fa fa-flag fa-fw fa-lg" title="{{ 'pinned'|trans }}"></i>
+            {% endif %}
+            <a id="comment{{ comment.id }}" href="{{ '#comment' ~ comment.id }}" class="fa fa-pencil-square-o fa-fw"></a>
+            {{ 'by'|trans }}<b>{{ comment.creator }}</b>{{ ', '  ~ 'on'|trans ~ ' ' ~ comment.createdAt|format_date('long') }}<br>
+            <i>{{ 'Last updated on'|trans ~ ' ' ~ comment.updatedAt|format_datetime('long', 'short') }}</i>
+        </div>
+        <ul class="record_actions">
+            {% if options.pinned is not defined %}
+                <li>
+                    <button class="btn btn-sm btn-misc" type="button">
+                        <i class="fa fa-flag fa-fw"></i>
+                        Épingler
+                    </button>
+                </li>
+            {% endif %}
+            <li>
+                <a class="btn btn-sm btn-edit" title="{{ 'Edit'|trans }}" href="{{ path('chill_person_accompanying_period_comment_list',  {
+                   'accompanying_period_id': comment.accompanyingPeriod.id,
+                   'edit': comment.id
+                   }) ~ '#comment' ~ comment.id }}"></a>
+            </li>
+            <li>
+                <a class="btn btn-sm btn-delete" title="{{ 'Delete'|trans }}" href=""></a>
+            </li>
+        </ul>
+    </div>
+    <div class="item-row separator">
+        <blockquote class="chill-user-quote col">{{ comment.content|chill_markdown_to_html }}</blockquote>
+    </div>
+</div>
+{% endmacro %}
+
+{% macro form_comment(type, form) %}
+    {% if type == 'edit' %}
+    <div class="item-bloc">
+        <div class="item-row row">
+        {% endif %}
+            {{ form_start(form) }}
+            {{ form_errors(form) }}
+            {{ form_widget(form.content) }}
+            <ul class="record_actions">
+                <li>
+                {% if type == 'new' %}
+                    <button class="btn btn-create" type="submit">{{ 'Post a new comment'|trans }}</button>
+                {% elseif type == 'edit' %}
+                    <button class="btn btn-save" type="submit">{{ 'Save'|trans }}</button>
+                {% endif %}
+                </li>
+            </ul>
+            {{ form_end(form) }}
+        {% if type == 'edit' %}
+        </div>
+    </div>
+    {% endif %}
+{% endmacro %}
+
+{% block content %}
+<div class="accompanyingcourse-comment-list">
+    <h1>{{ block('title') }}</h1>
+    <div class="flex-table">
+        {% if accompanyingCourse.pinnedComment %}
+            {% if commentEditId == accompanyingCourse.pinnedComment.id %}
+                {{ _self.form_comment('edit', edit_form) }}
+            {% else %}
+                {{ _self.show_comment(accompanyingCourse.pinnedComment, {'pinned': 'true'}) }}
+            {% endif %}
+        {% endif %}
+        {% for c in accompanyingCourse.comments %}
+            {% if commentEditId == c.id %}
+                {{ _self.form_comment('edit', edit_form) }}
+            {% else %}
+                {{ _self.show_comment(c) }}
+            {% endif %}
+        {% endfor %}
+    </div>
+    <div class="new-comment my-5">
+        <h2 class="chill-blue">{{ 'Write a new comment'|trans }}</h2>
+        {{ _self.form_comment('new', form) }}
+    </div>
+</div>
+{% endblock %}

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

@@ -78,6 +78,25 @@
             </div>
         {% endif %}
 
+        {% if accompanyingCourse.pinnedComment is not empty %}
+            <div class="col col-sm-6 col-lg-4 comment mb-4">
+                <h4 class="item-key">{{ 'Pinned comment'|trans }}</h4>
+                <blockquote class="chill-user-quote">
+                    {{ accompanyingCourse.pinnedComment.content }}
+                    <div class="metadata">
+                        {{ 'Last updated by'| trans }}
+                        <span class="user">
+                            {{ accompanyingCourse.pinnedComment.updatedBy|chill_entity_render_box }}
+                        </span>
+                        {{ 'on'|trans ~ ' ' }}
+                        <span class="date">
+                            {{ accompanyingCourse.pinnedComment.updatedAt|format_datetime("medium", "short") }}
+                        </span>
+                    </div>
+                </blockquote>
+            </div>
+        {% endif %}
+
         {% if accompanyingCourse.scopes is not empty %}
             <div class="col col-sm-6 col-lg-4 scopes mb-4">
                 <h4 class="item-key">{{ 'Scopes'|trans }}</h4>

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

@@ -0,0 +1,102 @@
+
+{% if w.results|length > 0 %}
+    <table class="obj-res-eval my-3">
+        <thead>
+        <th class="obj"><h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4></th>
+        <th class="res"><h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4></th>
+        </thead>
+        <tbody>
+        <tr>
+            <td class="obj">
+                <p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p>
+            </td>
+            <td class="res">
+                <ul class="result_list">
+                    {% for r in w.results %}
+                        <li>{{ r.title|localize_translatable_string }}</li>
+                    {% endfor %}
+                </ul>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+{% endif %}
+
+{% if w.goals|length > 0 %}
+    <table class="obj-res-eval my-3">
+        <thead>
+        <th class="obj"><h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4></th>
+        <th class="res"><h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4></th>
+        </thead>
+        <tbody>
+        {% for g in w.goals %}
+            <tr>
+                <td class="obj">
+                    <ul class="goal_title">
+                        <li>{{ g.goal.title|localize_translatable_string }}</li>
+                    </ul>
+                </td>
+                <td class="res">
+                    {% if g.results|length == 0 %}
+                        <p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
+                    {% else %}
+                        <ul class="result_list">
+                            {% for r in g.results %}
+                                <li>{{ r.title|localize_translatable_string }}</li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+                </td>
+            </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+{% endif %}
+
+{% if w.accompanyingPeriodWorkEvaluations|length > 0 %}
+    <table class="obj-res-eval my-3">
+        <thead>
+        <th class="eval">
+            <h4 class="title_label">{{ 'accompanying_course_work.evaluations'|trans }}</h4>
+        </th>
+        </thead>
+        <tbody>
+        {% for e in w.accompanyingPeriodWorkEvaluations %}
+            <tr>
+                <td class="eval">
+                    <ul class="eval_title">
+                        <li>
+                            {{ e.evaluation.title|localize_translatable_string }}
+                            <ul class="columns">
+                                <li>
+                                    <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
+                                    <b>{{ e.startDate|format_date('short') }}</b>
+                                </li>
+                                {% if e.endDate %}
+                                    <li>
+                                        <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
+                                        <b>{{ e.endDate|format_date('short') }}</b>
+                                    </li>
+                                {% endif %}
+                                {% if e.maxDate %}
+                                    <li>
+                                        <span class="item-key">{{ 'accompanying_course_work.max_date'|trans ~ ' : ' }}</span>
+                                        <b>{{ e.maxDate|format_date('short') }}</b>
+                                    </li>
+                                {% endif %}
+                                {% if e.warningInterval and e.warningInterval.d > 0 %}
+                                    <li>
+                                        {% set days = (e.warningInterval.d + e.warningInterval.m * 30) %}
+                                        <span class="item-key">{{ 'accompanying_course_work.warning_interval'|trans ~ ' : ' }}</span>
+                                        {{ 'accompanying_course_work.%days% days before max_date'|trans({'%days%': days }) }}
+                                    </li>
+                                {% endif %}
+                            </ul>
+                        </li>
+                    </ul>
+                </td>
+            </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+{% endif %}

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

@@ -65,11 +65,12 @@
                                         </div>
                                         <div class="wl-col list">
                                             {% for p in w.persons %}
-                                                <span class="wl-item badge-person">
-                                                    {{ p|chill_entity_render_box({
-                                                        'render': 'raw',
-                                                        'addAltNames': false
-                                                    }) }}
+                                                <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>
@@ -82,11 +83,12 @@
                                             <h3>{{ 'Thirdparty handling'|trans }}</h3>
                                         </div>
                                         <div class="wl-col list">
-                                            <span class="wl-item badge-thirdparty">
-                                                {{ w.handlingThierParty|chill_entity_render_box({
-                                                    'render': 'raw',
-                                                    'addAltNames': false
-                                                }) }}
+                                            <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>
@@ -105,94 +107,11 @@
                                     </div>
                                 {% endif %}
 
-                                {% if w.accompanyingPeriodWorkEvaluations|length > 0 %}
-                                    <div class="wl-row">
-                                        <div class="wl-col title">
-                                            <h3>{{ 'accompanying_course_work.evaluations'|trans }}</h3>
-                                        </div>
-                                        <div class="wl-col list">
-                                            <ul class="small_in_title evaluations mt-1">
-                                                {% for e in w.accompanyingPeriodWorkEvaluations %}
-                                                    <li>
-                                                        {{ e.evaluation.title|localize_translatable_string }}
-
-                                                        <ul class="columns">
-                                                            <li>
-                                                                <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
-                                                                <b>{{ e.startDate|format_date('short') }}</b>
-                                                            </li>
-                                                            {% if e.endDate %}
-                                                                <li>
-                                                                    <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
-                                                                    <b>{{ e.endDate|format_date('short') }}</b>
-                                                                </li>
-                                                            {% endif %}
-                                                            {% if e.maxDate %}
-                                                                <li>
-                                                                    <span class="item-key">{{ 'accompanying_course_work.max_date'|trans ~ ' : ' }}</span>
-                                                                    <b>{{ e.maxDate|format_date('short') }}</b>
-                                                                </li>
-                                                            {% endif %}
-                                                            {% if e.warningInterval and e.warningInterval.d > 0 %}
-                                                                <li>
-                                                                    {% set days = (e.warningInterval.d + e.warningInterval.m * 30) %}
-                                                                    <span class="item-key">{{ 'accompanying_course_work.warning_interval'|trans ~ ' : ' }}</span>
-                                                                    {{ 'accompanying_course_work.%days% days before max_date'|trans({'%days%': days }) }}
-                                                                </li>
-                                                            {% endif %}
-                                                        </ul>
-
-                                                    </li>
-                                                {% endfor %}
-                                            </ul>
-                                        </div>
-                                    </div>
-                                {% endif %}
-
                             </div>
                         </div>
 
                         <div class="item-row column">
-                        {# SEULEMENT SI DÉTAILLÉ
-                            {% if w.results|length > 0 %}
-                                <div class="objective_results without-objectives">
-                                    <div class="objective">
-                                        <h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
-                                        <p class="chill-no-data-statement">{{ 'accompanying_course_work.results without objective'|trans }}</p>
-                                    </div>
-                                    <div class="results">
-                                        <h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
-                                        <ul class="result_list">
-                                            {% for r in w.results %}
-                                                <li>{{ r.title|localize_translatable_string }}</li>
-                                            {% endfor %}
-                                        </ul>
-                                    </div>
-                                </div>
-                            {% endif %}
-                            {% if w.goals|length > 0 %}
-                                {% for g in w.goals %}
-                                    <div class="objective_results with-objectives">
-                                        <div class="objective">
-                                            <h4 class="title_label">{{ 'accompanying_course_work.goal'|trans }}</h4>
-                                            <ul class="goal_title"><li>{{ g.goal.title|localize_translatable_string }}</li></ul>
-                                        </div>
-                                        <div class="results">
-                                            <h4 class="title_label">{{ 'accompanying_course_work.results'|trans }}</h4>
-                                            {% if g.results|length == 0 %}
-                                                <p class="chill-no-data-statement">{{ 'accompanying_course_work.no_results'|trans }}</p>
-                                            {% else %}
-                                                <ul class="result_list">
-                                                    {% for r in g.results %}
-                                                        <li>{{ r.title|localize_translatable_string }}</li>
-                                                    {% endfor %}
-                                                </ul>
-                                            {% endif %}
-                                        </div>
-                                    </div>
-                                {% endfor %}
-                            {% endif %}
-                        #}
+                            {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' with {} %}
                         </div>
 
                         <div class="item-row separator">

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

@@ -42,27 +42,8 @@
                     </li>
                 </ul>
 
-                <ul class="small_in_title evaluations mb-3">
-                    {% for e in w.accompanyingPeriodWorkEvaluations %}
-                        <li>
-                            <span class="item-key">{{ 'accompanying_course_work.social_evaluation'|trans ~ ' : ' }}</span>
-                            {{ e.evaluation.title|localize_translatable_string }}
-                            <ul class="columns">
-                                {% if e.startDate %}
-                                <li>
-                                    <span class="item-key">{{ 'accompanying_course_work.start_date'|trans ~ ' : ' }}</span>
-                                    <b>{{ e.startDate|format_date('short') }}</b>
-                                </li>
-                                {% endif %}
-                                {% if e.endDate %}
-                                    <li>
-                                    <span class="item-key">{{ 'accompanying_course_work.end_date'|trans ~ ' : ' }}</span>
-                                    <b>{{ e.endDate|format_date('short') }}</b>
-                                </li>
-                                {% endif %}
-                            </ul>
-                        </li>
-                    {% endfor %}
+                <ul class="small_in_title mb-3 ps-0">
+                    {% include 'ChillPersonBundle:AccompanyingCourseWork:_objectifs_results_evaluations.html.twig' with {} %}
                 </ul>
 
                 <div class="metadata text-end" style="font-size: 60%">

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

@@ -66,10 +66,22 @@
                                 <div class="wl-col title"><h3>{{ 'Requestor'|trans({'gender': null }) }}</h3></div>
                                 <div class="wl-col list">
                                     {% if accompanying_period.requestorPerson is not null %}
-                                        <span class="wl-item badge-person">{{ accompanying_period.requestorPerson|chill_entity_render_string }}</span>
+                                        <span class="wl-item">
+                                            {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                                action: 'show', displayBadge: true,
+                                                targetEntity: { name: 'person', id: accompanying_period.requestorPerson.id },
+                                                buttonText: accompanying_period.requestorPerson|chill_entity_render_string
+                                            } %}
+                                        </span>
                                     {% endif %}
                                     {% if accompanying_period.requestorThirdParty is not null %}
-                                        <span class="wl-item badge-thirdparty">{{ accompanying_period.requestorThirdParty|chill_entity_render_string }}</span>
+                                        <span class="wl-item">
+                                            {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                                action: 'show', displayBadge: true,
+                                                targetEntity: { name: 'thirdparty', id: accompanying_period.requestorThirdParty.id },
+                                                buttonText: accompanying_period.requestorThirdParty|chill_entity_render_string
+                                            } %}
+                                        </span>
                                     {% endif %}
                                 </div>
                             </div>
@@ -80,13 +92,12 @@
                                 <div class="wl-col title"><h3>{{ 'Participants'|trans }}</h3></div>
                                 <div class="wl-col list">
                                     {% 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>
-                                            {#  or in renderbox mode
-                                                {{ p.person|chill_entity_render_box({'render': 'label', 'addAltNames': false, 'addLink': true, 'hLevel': 5 }) }}
-                                            #}
+                                        <span class="wl-item">
+                                            {% 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
+                                            } %}
                                         </span>
                                     {% endfor %}
                                 </div>

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

@@ -13,6 +13,7 @@
             openPanesInModal: false,
             stickyActions: true,
             useValidFrom: true,
+            useValidTo: true,
         } %}
     </div>
 

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

@@ -22,10 +22,8 @@
                     buttonSize: 'btn-lg',
                     buttonText: 'Move household',
                     modalTitle: 'Move household',
-                } %}
-                {#
                     useValidFrom: true,
-                #}
+                } %}
 
             </li>
         </ul>

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

@@ -38,6 +38,7 @@
                         buttonText: 'Move household',
                         modalTitle: 'Move household',
                         buttonDisplayText: false,
+                        useValidFrom: true,
                     } %}
                 </li>
                 <li class="list-inline-item">
@@ -133,7 +134,7 @@
               {% 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>
+                         class="btn btn-sm btn-misc" title="{{ 'household.person.leave'|trans }}"><i class="fa fa-scissors"></i></a>
                   </li>
                   <li>
                       <a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'persons': [ member.person.id ], 'household': household.id} ) }}"
@@ -146,7 +147,7 @@
                   {% for m in members %}
                       {% include '@ChillPerson/Household/_render_member.html.twig' with {
                           'member': m,
-                          'customButtons': { 'after': _self.customButtons(m, household) }
+                          'customButtons': { 'before': _self.customButtons(m, household) }
                       } %}
                   {% endfor %}
                 </div>

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

@@ -4,176 +4,163 @@
 
 {% block title 'household.Household history for person'|trans %}
 
+{% macro bloc_content(p) %}
+    <div class="item-row">
+        <div class="wrap-header">
+            <div class="wh-row">
+                <div class="wh-col">
+                    <h3>
+                        <i class="fa fa-home"></i>
+                        <a href="{{ chill_path_add_return_path('chill_person_household_summary',{ 'household_id': p.household.id }) }}">
+                            {{ 'household.Household number'|trans({'household_num': p.household.id }) }}
+                        </a>
+                    </h3>
+                </div>
+                <div class="wh-col">
+                    Depuis le {{ p.startDate|format_date('long') }}
+                </div>
+            </div>
+            <div class="wh-row">
+                <div class="wh-col"></div>
+                {% if p.endDate %}
+                    <div class="wh-col">
+                        Jusqu'au {{ p.endDate|format_date('long') }}
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    <div class="item-row separator">
+        <div class="wrap-list">
+            <div class="wl-row">
+                <div class="wl-col title">
+                    <h3>En tant que</h3>
+                </div>
+                <div class="wl-col list">
+                    <p class="item">{{ p.position.label|localize_translatable_string }}
+                        {% if p.holder %}
+                            <span class="holder">{{ 'household.holder'|trans }}</span>
+                        {% endif %}
+                    </p>
+                </div>
+            </div>
+            <div class="wl-row">
+                <div class="wl-col title">
+                    <h3>{{ 'household.Members at same time'|trans }}</h3>
+                </div>
+                <div class="wl-col list">
+                    {% set simultaneous = p.household.getMembersDuringMembership(p) %}
+                    {% if simultaneous|length == 0 %}
+                        <p class="chill-no-data-statement">
+                            {{ 'household.Any simultaneous members'|trans }}
+                        </p>
+                    {% else %}
+                        {% for m in simultaneous -%}
+                            {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                action: 'show', displayBadge: true,
+                                targetEntity: { name: 'person', id: m.person.id },
+                                buttonText: m.person|chill_entity_render_string
+                            } %}
+                        {%- endfor -%}
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endmacro %}
+
 {% block personcontent %}
 <div class="person-household">
+    <h1>{{ 'household.Household history'|trans }}</h1>
 
-            <h1>{{ 'household.Household history'|trans }}</h1>
-            <h2>{{ 'household.Household shared'|trans }}</h2>
+    <div class="household_shared">
+        <h2 class="chill-blue">{{ 'household.Household shared'|trans }}</h2>
+        {% set memberships = person.getHouseholdParticipationsShareHousehold() %}
 
-            {% set memberships = person.getHouseholdParticipationsShareHousehold() %}
+        {% if memberships|length == 0 %}
+            <p class="chill-no-data-statement">{{ 'household.Never in any household'|trans }}</p>
 
-            {% if memberships|length == 0 %}
-                <p class="chill-no-data-statement">{{ 'household.Never in any household'|trans }}</p>
+            <ul class="record_actions">
+                <li>
+                    <a class="btn btn-misc" href="{{chill_path_add_return_path('chill_person_household_members_editor', { 'persons': [ person.id ]}) }}">
+                        <i class="fa fa-sign-in fa-fw"></i>
+                        {{ 'household.Join'|trans }}
+                    </a>
+                </li>
+            </ul>
 
+        {% else %}
+            <div class="flex-table">
+                {% for p in memberships %}
+                    <div class="item-bloc">
+
+                        {{ _self.bloc_content(p) }}
+
+                        <div class="item-row separator">
+                            <ul class="record_actions">
+                                <li>
+                                    <a href="{{ chill_path_add_return_path('chill_person_household_summary',{ 'household_id': p.household.id }) }}"
+                                    class="btn btn-show" title="{{ 'Show'|trans }}"></a>
+                                </li>
+                                <li>
+                                    <a href="{{ chill_path_add_return_path('chill_person_household_member_edit', { id: p.id }) }}"
+                                       class="btn btn-edit" title="{{ 'Edit'|trans }}"></a>
+                                </li>
+                                {% if p.isCurrent() %}
+                                    <li>
+                                        <a class="btn btn-misc" href="{{ chill_path_add_return_path( 'chill_person_household_members_editor', { 'persons': [ person.id ], 'allow_leave_without_household': true }) }}">
+                                            <i class="fa fa-scissors"></i>
+                                            {{ 'household.Leave'|trans }}
+                                        </a>
+                                    </li>
+                                {% endif %}
+                            </ul>
+                        </div>
+
+                    </div>
+                {% endfor %}
+            </div>
+
+            {% 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'}) }}">
-                            <i class="fa fa-sign-out"></i>
+                            <i class="fa fa-sign-in fa-fw"></i>
                             {{ 'household.Join'|trans }}
                         </a>
                     </li>
                 </ul>
-
-            {% else %}
-
-            <div class="household">
-                <div class="household__address">
-
-                    {% if not person.isSharingHousehold() %}
-                        <div class="row">
-                            <div class="household__address--date"></div>
-                            <div class="household__address--content">
-                                <div class="cell">
-                                    <a class="btn btn-misc" href="{{ chill_path_add_return_path('chill_person_household_members_editor', { 'persons': [ person.id ]}) }}">
-                                        <i class="fa fa-sign-out"></i>
-                                        {{ 'household.Join'|trans }}
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    {% endif %}
-
-                    {% for p in memberships %}
-                    <div class="row">
-                        <div class="household__address--date">
-                            <div class="cell">
-                                <div class="pill">
-                                    {{ p.startDate|format_date('long') }}
-                                </div>
-                            </div>
-                        </div>
-                        <div class="household__address--content">
-                            <div class="cell">
-                                <i class="dot"></i>
-                                <div>
-                                    <div>
-                                        <p>
-                                            <i class="fa fa-home"></i>
-                                            <a href="{{ chill_path_add_return_path('chill_person_household_summary',{ 'household_id': p.household.id }) }}">
-                                                {{ 'household.Household number'|trans({'household_num': p.household.id }) }}
-                                            </a>
-                                        </p>
-                                        <p>{{ p.position.label|localize_translatable_string }} {% if p.holder %}<span class="badge bg-primary">{{ 'household.holder'|trans }}</span>{% endif %}
-                                    </div>
-                                    <div>
-                                        {% set simultaneous = p.household.getMembersDuringMembership(p) %}
-                                        {% if simultaneous|length == 0 %}
-                                            <p class="chill-no-data-statement">
-                                                {{ 'household.Any simultaneous members'|trans }}
-                                            </p>
-                                        {% else %}
-                                            {{ 'household.Members at same time'|trans }}:
-                                            {% for p in simultaneous -%}
-                                                {{- p.person|chill_entity_render_box({'addLink': true }) -}}
-                                                {%- if p.holder %} <span class="badge bg-primary">{{'household.holder'|trans }}</span> {% endif %}
-                                                {%- if not loop.last %}, {% endif -%}
-                                            {%- endfor -%}
-                                        {% endif %}
-                                        <ul class="record_actions">
-                                            <li>
-                                                <a href="{{ chill_path_add_return_path('chill_person_household_member_edit', { id: p.id }) }}"
-                                                    class="btn btn-edit"></a>
-                                            </li>
-                                            {% if p.isCurrent() %}
-                                            <li>
-                                                <a class="btn btn-misc" href="{{ chill_path_add_return_path( 'chill_person_household_members_editor', { 'persons': [ person.id ], 'allow_leave_without_household': true }) }}">
-                                                    <i class="fa fa-sign-out"></i>
-                                                    {{ 'household.Leave'|trans }}
-                                                </a>
-                                            </li>
-                                            {% endif %}
-                                        </ul>
-                                    </div>
-                                  </div>
-                              </div>
-                          </div>
-                      </div>
-                      {% endfor %}
-                  </div>
-
-              </div>
             {% endif %}
 
-            <h2>{{ 'household.Household not shared'|trans }}</h2>
+        {% endif %}
 
-            {% set memberships = person.getHouseholdParticipationsNotShareHousehold() %}
+    </div>
+    <div class="household_not_shared">
+        {% set memberships = person.getHouseholdParticipationsNotShareHousehold() %}
+        {% if memberships|length > 0 %}
 
-            {% if memberships|length == 0 %}
-                <p class="chill-no-data-statement">{{ 'household.Never in any household'|trans }}</p>
-            {% else %}
-                <table class="table table-bordered border-dark">
-                    <thead>
-                        <tr>
-                            <th>{{ 'household.from'|trans }}</th>
-                            <th>{{ 'household.to'|trans }}</th>
-                            <th>{{ 'household.Household'|trans }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for p in memberships %}
-                        <tr>
-                            <td>{{ p.startDate|format_date('long') }}</td>
-                            <td>
-                                {% if p.endDate is not empty %}
-                                    {{ p.endDate|format_date('long') }}
-                                {% else %}
-                                    {{ 'household.Membership currently running'|trans }}
-                                {% endif %}
-                            </td>
-                            <td>
-                                <div>
-                                <p>
-                                    <i class="fa fa-home"></i>
-                                    <a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id': p.household.id }) }}">
-                                        {{ 'household.Household number'|trans({'household_num': p.household.id }) }}
-                                    </a>
-                                </p>
-                                <p>
-                                    {{ p.position.label|localize_translatable_string }}
-                                    {% if p.holder %}
-                                        <span class="badge bg-primary">{{ 'household.holder'|trans }}</span>
-                                    {% endif %}
-                                </div>
-                                <div>
-                                {% set simultaneous = p.household.getMembersDuringMembership(p) %}
-                                {% if simultaneous|length == 0 %}
-                                    <p class="chill-no-data-statement">
-                                        {{ 'household.Any simultaneous members'|trans }}
-                                    </p>
-                                {% else %}
-                                    {{ 'household.Members at same time'|trans }}:
-                                    {% for p in simultaneous -%}
-                                        {{- p.person|chill_entity_render_box({'addLink': true }) -}}
-                                        {%- if p.holder %} <span class="badge bg-primary">{{'household.holder'|trans }}</span> {% endif %}
-                                        {%- if not loop.last %}, {% endif -%}
-                                    {%- endfor -%}
-                                {% endif %}
-                              </div>
-                            </td>
-                            <td>
-                                <ul class="record_actions sticky-form-buttons">
-                                    <li>
-                                        <a href="{{ chill_path_add_return_path('chill_person_household_member_edit', { id: p.id }) }}"
-                                            class="btn btn-edit">
-                                        </a>
-                                    </li>
-                                </ul>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            {% endif %}
+            <h2 class="chill-blue">{{ 'household.Household not shared'|trans }}</h2>
+
+            <div class="flex-table">
+                {% for p in memberships %}
+                <div class="item-bloc">
+
+                    {{ _self.bloc_content(p) }}
+
+                    <div class="item-row separator">
+                        <ul class="record_actions">
+                            <li>
+                                <a href="{{ chill_path_add_return_path('chill_person_household_member_edit', { id: p.id }) }}"
+                                   class="btn btn-edit" title="{{ 'Edit'|trans }}"></a>
+                            </li>
+                        </ul>
+                    </div>
+
+                </div>
+                {% endfor %}
+            </div>
+        {% endif %}
+    </div>
 
 </div>
 {% endblock %}