Merge branch 'master' into 110_extend_thirdparty

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

@@ -4,29 +4,24 @@
 /*
 *  PERSON CONTEXT
 */
-
-div#header-person-name {
-   background: none repeat scroll 0 0 $chill-green-dark;
-   color: #FFF;
-   padding-top: 1em;
-   padding-bottom: 1em;
-}
-
-div#header-person-details {
-   background: none repeat scroll 0 0 $chill-green;
-   color: #FFF;
-   padding-top: 1em;
-   padding-bottom: 1em;
-   div.contact {
-      & > * {
-         margin-right: 1em;
-      }
-   }
-}
-
-div#person_details_container {
-   padding-top: 20px;
-   padding-bottom: 20px;
+div.banner {
+    div#header-person-name {
+        background: none repeat scroll 0 0 $chill-green-dark;
+        color: $white;
+        padding-top: 1em;
+        padding-bottom: 1em;
+    }
+    div#header-person-details {
+        background: none repeat scroll 0 0 $chill-green;
+        color: $white;
+        padding-top: 1em;
+        padding-bottom: 1em;
+        div.contact {
+            & > * {
+                margin-right: 1em;
+            }
+        }
+    }
 }
 
 div.person-view {
@@ -83,80 +78,77 @@ div.person-view {
  *  ACCOMPANYING_COURSE CONTEXT
  *  Header custom for Accompanying Course
  */
+$chill-accourse-context: #718596;
 
-div#header-accompanying_course-name {
-  background: none repeat scroll 0 0 #718596;
-  color: #FFF;
-  h1 {
-    margin: 0.4em 0;
-  }
-  span {
-    a {
-      color: white;
+div.banner {
+    div#header-accompanying_course-name {
+        background: none repeat scroll 0 0 $chill-accourse-context;
+        color: $white;
+        h1 {
+            margin: 0.4em 0;
+        }
+        span {
+            a {
+                color: $white;
+            }
+            a:hover {
+                text-decoration: underline;
+            }
+        }
     }
-    a:hover {
-      text-decoration: underline;
+    div#header-accompanying_course-details {
+        background: none repeat scroll 0 0 tint-color($chill-accourse-context, 20%);
+        color: $white;
+        padding-top: 1em;
+        padding-bottom: 1em;
     }
-  }
-}
-div#header-accompanying_course-details {
-  background: none repeat scroll 0 0 #718596ab;
-  color: #FFF;
-  padding-top: 1em;
-  padding-bottom: 1em;
 }
 
 /*
  *  HOUSEHOLD CONTEXT
  *  Header custom for Household
  */
+$chill-household-context: #929d69;
 
-div#header-household-name {
-   background: none repeat scroll 0 0 #929d69; //#b97a7a;
-   color: #FFF;
-
-   h1 {
-     margin: 0.4em 0;
-   }
-   span {
-     a {
-       color: white;
-     }
-     a:hover {
-       text-decoration: underline;
-     }
-   }
+div.banner {
+    div#header-household-name {
+        background: none repeat scroll 0 0 $chill-household-context;
+        color: $white;
+        h1 {
+            margin: 0.4em 0;
+        }
+        span {
+            a {
+                color: $white;
+            }
+            a:hover {
+                text-decoration: underline;
+            }
+        }
+        div.household-members {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            span.badge-member {
+                flex-shrink: 0; flex-grow: 0; flex-basis: auto;
+                color: $white;
+                border: 1px solid #ffffff3b;
+                border-radius: 8px;
+                padding: 0.4em 0.8em;
+                margin-bottom: 0.2em;
+                margin-right: 0.3em;
+                &.holder { order: -1; }
+                &.child { order: 2; }
+            }
+        }
+    }
+    div#header-household-details {
+        background: none repeat scroll 0 0 tint-color($chill-household-context, 15%);
+        color: $white;
+        padding-top: 1em;
+        padding-bottom: 1em;
+        span.current-members-explain {
+            font-weight: bold;
+        }
+    }
 }
-div#header-household-details {
-   background: none repeat scroll 0 0 #b0b984; //#d29791;
-   color: #FFF;
-   padding-top: 1em;
-   padding-bottom: 1em;
-   span.current-members-explain {
-      font-weight: bold;
-   }
-}
-
-div.household-members {
-   display: flex;
-   flex-direction: row;
-   flex-wrap: wrap;
-   //justify-content: flex-end;
-   span.badge-member {
-      flex-shrink: 0; flex-grow: 0; flex-basis: auto;
-      border: 1px solid #ffffff3b;
-      color: #ffffff;
-      padding: 0.4em 0.8em;
-      margin-bottom: 0.2em;
-      margin-right: 0.3em;
-      border-radius: 8px;
-      &.holder {
-         order: -1;
-      }
-      &.child {
-         order: 2;
-      }
-   }
-}
-
-

src/Bundle/ChillPersonBundle/Resources/public/chill/index.js

@@ -8,6 +8,7 @@ require('./scss/household_banner.scss');
 require('./scss/accompanying_period_work.scss');
 require('./scss/person_by_phonenumber.scss');
 require('./scss/render_box.scss');
+require('./scss/flex_table.scss');
 require('./scss/address_history.scss');
 
 require('./svg/phone-alt-solid.svg');

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

@@ -0,0 +1,31 @@
+/*
+ *  flex-table overwrite: precision and exceptions
+ */
+
+///
+div.accompanyingcourse-resume {
+    div.associated-persons {
+        .flex-table .item-row .item-col:first-child {
+            flex-basis: 33%;
+        }
+    }
+}
+
+///
+div.accompanyingcourse-list, div.household-members {
+    .flex-table .item-bloc .item-row {
+        &:nth-child(2) {
+            flex-direction: row;
+        }
+        &:last-child {
+            flex-direction: column;
+        }
+    }
+}
+
+///
+div.list-with-period {
+    div.flex-table div.item-row div.item-col:first-child {
+        flex-basis: 33%;
+    }
+}

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

@@ -1,10 +1,7 @@
-/// complete and overwrite flex-table in chillmain.scss
-div.list-with-period,
-div.list-household-members {
 
-   div.comment {
-      // for the comment for household-members
-   }
+///
+div.list-with-period, div.list-household-members {
+
    div.periods {
       div.header,
       div.list-content {
@@ -13,7 +10,7 @@ div.list-household-members {
       }
       div.header {
          position: relative;
-         a.sc-button {
+         a.btn {
             position: absolute;
             width: 30px;
             height: 30px;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/<

@@ -0,0 +1,374 @@
+import { createStore } from 'vuex';
+import { householdMove, fetchHouseholdSuggestionByAccompanyingPeriod, fetchAddressSuggestionByPerson} from './../api.js';
+import { datetimeToISO } from 'ChillMainAssets/chill/js/date.js';
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const concerned = window.household_members_editor_data.persons.map(p => {
+  return {
+    person: p,
+    position: null,
+    allowRemove: false,
+    holder: false,
+    comment: "",
+  };
+});
+
+console.log('expand suggestions', window.household_members_editor_expand_suggestions === 1);
+
+const store = createStore({
+  strict: debug,
+  state: {
+    concerned,
+    household: window.household_members_editor_data.household,
+    positions: window.household_members_editor_data.positions.sort((a, b) => {
+        if (a.ordering < b.ordering) {
+          return -1;
+        }
+        if (a.ordering > b.ordering) {
+          return 1;
+        }
+        return 0;
+      }),
+    startDate: new Date(),
+    allowHouseholdCreate: window.household_members_editor_data.allowHouseholdCreate,
+    allowHouseholdSearch: window.household_members_editor_data.allowHouseholdSearch,
+    allowLeaveWithoutHousehold: window.household_members_editor_data.allowLeaveWithoutHousehold,
+    forceLeaveWithoutHousehold: false,
+    householdSuggestionByAccompanyingPeriod: [],
+    showHouseholdSuggestion: window.household_members_editor_expand_suggestions === 1,
+    addressesSuggestion: [],
+    warnings: [],
+    errors: []
+  },
+  getters: {
+    isHouseholdNew(state) {
+      if (state.household === null) {
+        return false;
+      }
+      return !Number.isInteger(state.household.id);
+    },
+    hasHousehold(state) {
+      return state.household !== null;
+    },
+    hasHouseholdOrLeave(state) {
+      return state.household !== null || state.forceLeaveWithoutHousehold;
+    },
+    hasHouseholdSuggestion(state, getters) {
+      return getters.filterHouseholdSuggestionByAccompanyingPeriod.length > 0;
+    },
+    countHouseholdSuggestion(state, getters) {
+      return getters.filterHouseholdSuggestionByAccompanyingPeriod.length;
+    },
+    filterHouseholdSuggestionByAccompanyingPeriod(state) {
+      if (state.household === null) {
+        return state.householdSuggestionByAccompanyingPeriod;
+      }
+
+      return state.householdSuggestionByAccompanyingPeriod
+        .filter(h => h.id !== state.household.id)
+        ;
+    },
+    hasPersonsWellPositionnated(state, getters) {
+      return getters.needsPositionning === false
+        || (getters.persons.length > 0 && getters.concUnpositionned.length === 0);
+    },
+    persons(state) {
+      return state.concerned.map(conc => conc.person);
+    },
+    concUnpositionned(state) {
+      return state.concerned
+        .filter(conc => conc.position === null)
+      ;
+    },
+    positions(state) {
+      return state.positions;
+    },
+    personByPosition: (state) => (position_id) => {
+      return state.concerned
+        .filter(conc =>
+          conc.position !== null ? conc.position.id === position_id : false
+        )
+        .map(conc => conc.person)
+      ;
+    },
+    concByPosition: (state) => (position_id) => {
+      return state.concerned
+        .filter(conc =>
+          conc.position !== null ? conc.position.id === position_id : false
+        )
+      ;
+    },
+    concByPersonId: (state) => (person_id) => {
+      return state.concerned
+        .find(conc => conc.person.id === person_id)
+      ;
+    },
+    needsPositionning(state) {
+      return state.forceLeaveWithoutHousehold === false;
+    },
+    buildPayload: (state) => {
+      let
+        conc,
+        payload_conc,
+        payload = {
+          concerned: [],
+          destination: null
+        }
+      ;
+
+      if (state.forceLeaveWithoutHousehold === false) {
+        payload.destination = {
+            id: state.household.id,
+            type: state.household.type
+          };
+      }
+
+      for (let i in state.concerned) {
+        conc = state.concerned[i];
+        payload_conc = {
+          person: {
+            id: conc.person.id,
+            type: conc.person.type
+          },
+          start_date: {
+            datetime: datetimeToISO(state.startDate)
+          }
+        };
+
+        if (state.forceLeaveWithoutHousehold === false) {
+          payload_conc.position = {
+            id: conc.position.id,
+            type: conc.position.type
+          };
+          payload_conc.holder = conc.holder;
+          payload_conc.comment = conc.comment;
+        }
+
+        payload.concerned.push(payload_conc);
+      }
+
+      return payload;
+    },
+  },
+  mutations: {
+    addConcerned(state, person) {
+      let persons = state.concerned.map(conc => conc.person.id);
+      if (!persons.includes(person.id)) {
+        state.concerned.push({
+          person,
+          position: null,
+          allowRemove: true,
+          holder: false,
+          comment: "",
+        });
+      } else {
+        console.err("person already included");
+      }
+    },
+    markPosition(state, { person_id, position_id}) {
+      let
+        position = state.positions.find(pos => pos.id === position_id),
+        conc = state.concerned.find(c => c.person.id === person_id);
+      conc.position = position;
+    },
+    setComment(state, {conc, comment}) {
+      conc.comment = comment;
+    },
+    toggleHolder(state, conc) {
+      conc.holder = !conc.holder;
+    },
+    removePosition(state, conc) {
+      conc.holder = false;
+      conc.position = null;
+    },
+    removeConcerned(state, conc) {
+      state.concerned = state.concerned.filter(c =>
+        c.person.id !== conc.person.id
+      )
+    },
+    createHousehold(state) {
+      state.household = { type: 'household', members: [], current_address: null, 
+        current_members_id: [] };
+      state.forceLeaveWithoutHousehold = false;
+    },
+    removeHousehold(state) {
+      state.household = null;
+      state.forceLeaveWithoutHousehold = false;
+    },
+    setHouseholdAddress(state, address) {
+      if (null === state.household) {
+        console.error("no household");
+        throw new Error("No household");
+      }
+
+      state.household.current_address = address;
+      state.household.force_new_address = address;
+    },
+    forceLeaveWithoutHousehold(state) {
+      state.household = null;
+      state.forceLeaveWithoutHousehold = true;
+    },
+    selectHousehold(state, household) {
+      state.household = household;
+      state.forceLeaveWithoutHousehold = false;
+    },
+    setHouseholdSuggestionByAccompanyingPeriod(state, households) {
+      let existingIds = state.householdSuggestionByAccompanyingPeriod
+        .map(h => h.id);
+      for (let i in households) {
+        if (!existingIds.includes(households[i].id)) {
+          state.householdSuggestionByAccompanyingPeriod.push(households[i]);
+        }
+      }
+    },
+    setStartDate(state, dateI) {
+      state.startDate = dateI;
+    },
+    toggleHouseholdSuggestion(state) {
+      state.showHouseholdSuggestion = !state.showHouseholdSuggestion;
+    },
+    setWarnings(state, warnings) {
+      state.warnings = warnings;
+      // reset errors, which should come from servers
+      state.errors.splice(0, state.errors.length);
+    },
+    setErrors(state, errors) {
+      state.errors = errors;
+    },
+    addAddressesSuggestion(state, addresses) {
+      let existingIds = state.addressesSuggestion
+        .map(a => a.id);
+
+      for (let i in addresses) {
+        if (!existingIds.includes(addresses[i].id)) {
+          state.addressesSuggestion.push(addresses[i]);
+        }
+      }
+    }
+  },
+  actions: {
+    addConcerned({ commit, dispatch }, person) {
+      commit('addConcerned', person);
+      dispatch('computeWarnings');
+      dispatch('fetchAddressSuggestions');
+    },
+    markPosition({ commit, state, dispatch }, { person_id, position_id }) {
+      commit('markPosition', { person_id, position_id });
+      dispatch('computeWarnings');
+    },
+    toggleHolder({ commit, dispatch }, conc) {
+      commit('toggleHolder', conc);
+      dispatch('computeWarnings');
+    },
+    removePosition({ commit, dispatch }, conc) {
+      commit('removePosition', conc);
+      dispatch('computeWarnings');
+    },
+    removeConcerned({ commit, dispatch }, conc) {
+      commit('removeConcerned', conc);
+      dispatch('computeWarnings');
+      dispatch('fetchAddressSuggestions');
+    },
+    removeHousehold({ commit, dispatch }) {
+      commit('removeHousehold');
+      dispatch('computeWarnings');
+    },
+    createHousehold({ commit, dispatch }) {
+      commit('createHousehold');
+      dispatch('computeWarnings');
+    },
+    forceLeaveWithoutHousehold({ commit, dispatch }) {
+      commit('forceLeaveWithoutHousehold');
+      dispatch('computeWarnings');
+    },
+    selectHousehold({ commit }, h) {
+      commit('selectHousehold', h);
+      dispatch('computeWarnings');
+    },
+    setStartDate({ commit, dispatch }, date) {
+      commit('setStartDate', date);
+      dispatch('computeWarnings');
+    },
+    setComment({ commit }, payload) {
+      commit('setComment', payload);
+    },
+    fetchHouseholdSuggestionForConcerned({ commit, state }, person) {
+      fetchHouseholdSuggestionByAccompanyingPeriod(person.id)
+        .then(households => {
+          commit('setHouseholdSuggestionByAccompanyingPeriod', households);
+        });
+    },
+    fetchAddressSuggestions({ commit, state }) {
+      for (let i in state.concerned) {
+        fetchAddressSuggestionByPerson(state.concerned[i].person.id)
+          .then(addresses => {
+            commit('addAddressesSuggestion', addresses);
+          })
+          .catch(e => {
+            console.log(e);
+          });
+      }
+    },
+    computeWarnings({ commit, state, getters }) {
+      let warnings = [],
+        payload;
+
+      if (!getters.hasHousehold && !state.forceLeaveWithoutHousehold) {
+        warnings.push({ m: 'household_members_editor.add_destination', a: {} });
+      }
+
+      if (state.concerned.length === 0) {
+        warnings.push({ m: 'household_members_editor.add_at_least_onePerson', a: {} });
+      }
+
+      if (getters.concUnpositionned.length > 0
+        && !state.forceLeaveWithoutHousehold) {
+        warnings.push({ m: 'household_members_editor.give_a_position_to_every_person', a: {} })
+      }
+
+      commit('setWarnings', warnings);
+    },
+    confirm({ getters, state, commit }) {
+      let payload = getters.buildPayload,
+        errors = [],
+        person_id,
+        household_id,
+        error
+      ;
+
+        householdMove(payload).then(household => {
+          if (household === null) {
+            person_id = getters.persons[0].id;
+            window.location.replace(`/fr/person/${person_id}/general`);
+          } else {
+            if (household.type === 'household') {
+              household_id = household.id;
+              // nothing to do anymore here, bye-bye !
+              window.location.replace(`/fr/person/household/${household_id}/summary`);
+            } else {
+              // we assume the answer was 422...
+              error = household;
+              for (let i in error.violations) {
+                let e = error.violations[i];
+                errors.push(e.title);
+              }
+
+              commit('setErrors', errors);
+            }
+          }
+      });
+    },
+  }
+});
+
+store.dispatch('computeWarnings');
+store.dispatch('fetchAddressSuggestions');
+
+if (concerned.length > 0) {
+  concerned.forEach(c => {
+    store.dispatch('fetchHouseholdSuggestionForConcerned', c.person);
+  });
+}
+
+export { store };

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

@@ -9,6 +9,7 @@
    <origin-demand></origin-demand>
    <requestor></requestor>
    <social-issue></social-issue>
+   <course-location></course-location>
    <referrer></referrer>
    <resources></resources>
    <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
@@ -24,6 +25,7 @@ import OriginDemand from './components/OriginDemand.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
 import SocialIssue from './components/SocialIssue.vue';
+import CourseLocation from './components/CourseLocation.vue';
 import Referrer from './components/Referrer.vue';
 import Resources from './components/Resources.vue';
 import Comment from './components/Comment.vue';
@@ -38,18 +40,23 @@ export default {
       PersonsAssociated,
       Requestor,
       SocialIssue,
+      CourseLocation,
       Referrer,
       Resources,
       Comment,
       Confirm,
    },
    computed: mapState([
-      'accompanyingCourse'
+      'accompanyingCourse',
+      'addressContext'
    ])
 };
 </script>
 
 <style lang="scss">
+   @import 'ChillMainAssets/module/bootstrap/shared';
+   $chill-accourse-context: #718596;
+
    div#accompanying-course {
       div.vue-component {
          h2 {
@@ -59,7 +66,7 @@ export default {
                position: absolute;
                content: "\f142";  //ellipsis-v
                font-family: "ForkAwesome";
-               color: #718596ab;
+               color: tint-color($chill-accourse-context, 10%);
                left: -22px;
                top: 4px;
             }
@@ -70,10 +77,10 @@ export default {
          }
          padding: 0em 0em;
          margin: 1em 0;
-         border: 1px dotted #718596ab;
+         border: 1px dotted tint-color($chill-accourse-context, 10%);
          border-radius: 5px;
-         border-left: 1px dotted #718596ab;
-         border-right: 1px dotted #718596ab;
+         border-left: 1px dotted tint-color($chill-accourse-context, 10%);
+         border-right: 1px dotted tint-color($chill-accourse-context, 10%);
          dd {
             margin-left: 1em;
          }
@@ -83,6 +90,5 @@ export default {
          table {
          }
       }
-
-}
+   }
 </style>

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

@@ -4,12 +4,12 @@
 *
 *  @id   integer - id of accompanyingCourse
 */
-const getAccompanyingCourse = (id) => { 
+const getAccompanyingCourse = (id) => {
    const url = `/api/1.0/person/accompanying-course/${id}.json`;
    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');
       });
 };
 
@@ -20,8 +20,8 @@ const getAccompanyingCourse = (id) => {
 *  @id     integer - id of accompanyingCourse
 *  @body   Object - dictionary with changes to post
 */
-const patchAccompanyingCourse = (id, body) => { 
-   console.log('body', body);
+const patchAccompanyingCourse = (id, body) => {
+   //console.log('body', body);
    const url = `/api/1.0/person/accompanying-course/${id}.json`;
    return fetch(url, {
          method: 'PATCH',
@@ -32,7 +32,7 @@ const patchAccompanyingCourse = (id, body) => {
       })
       .then(response => {
          if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response'); 
+         throw Error('Error with request resource response');
       });
 };
 
@@ -47,24 +47,24 @@ const confirmAccompanyingCourse = (id) => {
       })
       .then(response => {
          if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response'); 
+         throw Error('Error with request resource response');
       });
 };
 
 /*
-* Endpoint 
+* Endpoint
 */
 const getSocialIssues = () => {
    const url = `/api/1.0/person/social-work/social-issue.json`;
    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');
       });
 };
 
 /*
-* Endpoint v.2 chill_api_single_accompanying_course_participation, 
+* Endpoint v.2 chill_api_single_accompanying_course_participation,
 * method POST/DELETE, add/close a participation to the accompanyingCourse
 *
 *  @id               integer - id of accompanyingCourse
@@ -83,12 +83,12 @@ const postParticipation = (id, payload, method) => {
       })
       .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_api_single_accompanying_course_requestor, 
+* Endpoint v.2 chill_api_single_accompanying_course_requestor,
 * method POST/DELETE, add/close a requestor to the accompanyingCourse
 *
 *  @id               integer - id of accompanyingCourse
@@ -109,12 +109,12 @@ const postRequestor = (id, payload, method) => {
       })
       .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_api_single_accompanying_course_resource, 
+* Endpoint v.2 chill_api_single_accompanying_course_resource,
 * method POST/DELETE, add/remove a resource to the accompanyingCourse
 *
 *  @id               integer - id of accompanyingCourse
@@ -126,11 +126,11 @@ const postResource = (id, payload, method) => {
    const body = { type: "accompanying_period_resource" };
    switch (method) {
       case 'DELETE':
-         body['id'] = payload.id; 
+         body['id'] = payload.id;
          break;
       default:
          body['resource'] = { type: payload.type, id: payload.id };
-   }   
+   }
    //console.log('body', body);
    const url = `/api/1.0/person/accompanying-course/${id}/resource.json`;
    return fetch(url, {
@@ -142,7 +142,7 @@ const postResource = (id, payload, method) => {
       })
       .then(response => {
          if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response'); 
+         throw Error('Error with request resource response');
       });
 };
 
@@ -150,7 +150,7 @@ const postResource = (id, payload, method) => {
 * Endpoint to Add/remove SocialIssue
 */
 const postSocialIssue = (id, body, method) => {
-   //console.log('api body and method', body, method); 
+   //console.log('api body and method', body, method);
    const url = `/api/1.0/person/accompanying-course/${id}/socialissue.json`;
    return fetch(url, {
          method: method,
@@ -161,7 +161,7 @@ const postSocialIssue = (id, body, method) => {
       })
       .then(response => {
          if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response'); 
+         throw Error('Error with request resource response');
       });
 };
 
@@ -170,7 +170,7 @@ const getUsers = () => {
    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');
       });
 };
 
@@ -179,7 +179,7 @@ const whoami = () => {
    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');
       });
 };
 
@@ -188,11 +188,11 @@ const getListOrigins = () => {
    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 { 
+export {
    getAccompanyingCourse,
    patchAccompanyingCourse,
    confirmAccompanyingCourse,

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

@@ -5,7 +5,8 @@
    </teleport>
 
    <teleport to="#header-accompanying_course-name #banner-status">
-      <span v-if="accompanyingCourse.step === 'DRAFT'" class="d-md-block">
+      <span v-if="accompanyingCourse.step === 'DRAFT'"
+         class="text-md-end d-md-block">
          <span class="badge bg-secondary">
             {{ $t('course.step.draft') }}
          </span>

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

@@ -0,0 +1,68 @@
+<template>
+   <li>
+      <button class="btn btn-sm btn-secondary"
+         @click="modal.showModal = true"
+         :title="$t('courselocation.assign_course_address')">
+         <i class="fa fa-map-marker"></i>
+      </button>
+   </li>
+
+   <teleport to="body">
+      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+         <template v-slot:header>
+            <h2 class="modal-title">{{ $t('courselocation.sure') }}</h2>
+         </template>
+         <template v-slot:body>
+            <show-address :address="person.current_household_address"></show-address>
+            <p>{{ $t('courselocation.sure_description') }}</p>
+         </template>
+         <template v-slot:footer>
+            <button class="btn btn-danger" @click="assignAddress">
+               {{ $t('courselocation.ok') }}
+            </button>
+         </template>
+      </modal>
+   </teleport>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import ShowAddress from "ChillMainAssets/vuejs/Address/components/ShowAddress";
+
+export default {
+   name: "ButtonLocation",
+   components: {
+      ShowAddress,
+      Modal,
+   },
+   props: ['person'],
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-md"
+         }
+      }
+   },
+   computed: {
+      ...mapState({
+         context: state => state.addressContext
+      }),
+   },
+   methods: {
+      assignAddress() {
+        //console.log('assignAddress id', this.person.current_household_address);
+         let payload = {
+            entity: this.context.entity.type,
+            entityId: this.context.entity.id,
+            locationStatusTo: 'person',
+            personId: this.person.id
+         };
+         this.$store.dispatch('updateLocation', payload);
+         window.location.assign('#section-50');
+         this.modal.showModal = false;
+      }
+   }
+}
+</script>

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

@@ -1,57 +1,63 @@
 <template>
    <div class="vue-component">
-      <h2><a name="section-60"></a>{{ $t('comment.title') }}</h2>
-      
+      <h2><a name="section-80"></a>{{ $t('comment.title') }}</h2>
+
       <!--div class="error flash_message" v-if="errors.length > 0">
          {{ errors[0] }}
          TODO fix errors flashbag for app component
       </div-->
-      
+
       <div>
          <form @submit.prevent="submitform">
-            
-            <label for="content">{{ $t('comment.label') }}</label>
-            
-            <div v-if="initialComment">
-               {{ $t('comment.created_by', [
-                  initialComment.creator.text, 
-                  $d(initialComment.createdAt.datetime, 'long')
-               ]) }}
-            </div>
-            
-            <textarea 
-               name="content" 
+
+            <label class="col-form-label" for="content">{{ $t('comment.label') }}</label>
+
+            <ckeditor
+               name="content"
                v-bind:placeholder="$t('comment.content')"
-               rows="8" 
-               cols="80"
-               ckeditor="ckeditor"
-               v-model="content">
-            </textarea>
-            
+               :editor="editor"
+               v-model="content"
+               tag-name="textarea">
+            </ckeditor>
+
+            <div v-if="initialComment" class="metadata">
+               {{ $t('comment.created_by', [
+               initialComment.creator.text,
+               $d(initialComment.createdAt.datetime, 'long')
+            ]) }}
+            </div>
+
             <ul class="record_actions">
                <li>
                   <button type="submit" class="btn btn-save">{{ $t('action.save') }}</button>
                </li>
                <li v-if="initialComment !== null">
-                  <a class="btn btn-delete" 
+                  <a class="btn btn-delete"
                      @click="removeComment">
                      {{ $t('action.delete') }}
                   </a>
                </li>
             </ul>
-            
+
          </form>
       </div>
-      
+
    </div>
 </template>
 
 <script>
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import ClassicEditor from "ChillMainAssets/module/ckeditor5";
+
 export default {
    name: "Comment",
+   components: {
+      ckeditor: CKEditor.component,
+   },
    data() {
       return {
-         formdata: { 
+         editor: ClassicEditor,
+         formdata: {
             type: "accompanying_period_comment",
             content: ''
          }
@@ -66,7 +72,7 @@ export default {
             this.formdata.content = value;
          },
          get() {
-            return (this.initialComment)? this.initialComment.content : null;
+            return (this.initialComment)? this.initialComment.content : {};
          }
       },
       errors() {
@@ -75,12 +81,12 @@ export default {
    },
    methods: {
       submitform() {
-         console.log('submit');
+        //console.log('submit');
          this.$store.dispatch('postFirstComment', this.formdata);
       },
       removeComment() {
-         console.log('remove');
-         this.$store.dispatch('postFirstComment', null);
+        //console.log('remove');
+         this.$store.dispatch('postFirstComment', {});
       }
    }
 }
@@ -88,12 +94,11 @@ 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 !!
-* - [ ] ckeditor integration
 */
 </script>
 
-<style lang="scss" scoped>
-   div.vue-component > div {
-      //margin: 1em;
-   }
+<style lang="scss">
+div.ck-editor.ck-reset {
+   margin: 0.6em 0;
+}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-component">
-   <h2><a name="section-70"></a>
+   <h2><a name="section-90"></a>
       {{ $t('confirm.title') }}
    </h2>
 
@@ -13,7 +13,7 @@
          {{ $t('confirm.text_active') }}
          <span class="badge bg-primary">{{ $t('course.step.active') }}</span>
       </p>
-      
+
       <ul class="record_actions">
          <li>
             <button class="btn btn-save" @click="modal.showModal = true">
@@ -65,9 +65,9 @@ export default {
    },
    methods: {
       confirmCourse() {
-         console.log('@@ CLICK confirmCourse');
+        //console.log('@@ CLICK confirmCourse');
          this.$store.dispatch('confirmAccompanyingCourse');
-         console.log('confirm last');
+        //console.log('confirm last');
       }
    }
 }

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

@@ -0,0 +1,147 @@
+<template>
+   <div class="vue-component">
+      <h2><a name="section-50"></a>
+         {{ $t('courselocation.title') }}
+      </h2>
+      <div class="my-4">
+
+         <!-- {# include vue_address component #} -->
+         <div v-for="error in displayErrors" class="alert alert-danger my-2">
+            {{ error }}
+         </div>
+
+         <show-address
+            v-if="accompanyingCourse.location"
+            :address="accompanyingCourse.location">
+         </show-address>
+
+         <div v-if="isPersonLocation" class="alert alert-success">
+            {{ $t('courselocation.person_locator', [ accompanyingCourse.personLocation.text ]) }}
+         </div>
+
+         <div v-if="isTemporaryAddress" class="alert alert-warning">
+            <p>{{ $t('courselocation.temporary_address_must_be_changed') }}</p>
+         </div>
+
+         <ul class="record_actions">
+            <li>
+               <add-address
+                  v-if="!isPersonLocation"
+                  :context="context"
+                  :key="addAddress.type"
+                  :options="addAddress.options"
+                  :result="addAddress.result"
+                  @submitAddress="submitTemporaryAddress"
+                  ref="addAddress">
+               </add-address>
+            </li>
+            <li v-if="isPersonLocation">
+               <button
+                  class="btn btn-remove"
+                  @click="removeAddress"
+                  :title="$t('courselocation.remove_button')">
+               </button>
+            </li>
+         </ul>
+
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
+import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
+
+export default {
+   name: "CourseLocation",
+   components: {
+      AddAddress,
+      ShowAddress
+   },
+   data() {
+      return {
+         addAddress: {
+            type: 'accompanying_course_location',
+            options: {
+               /// Options override default.
+               /// null value take default component value
+               button: {
+                  text:  {
+                     create: 'courselocation.add_temporary_address',
+                     edit: 'courselocation.edit_temporary_address'
+                  }
+               },
+               title: {
+                  create: 'courselocation.add_temporary_address',
+                  edit: 'courselocation.edit_temporary_address'
+               },
+               /// Display each step in page or Modal
+               bindModal: {
+                  //step1: false, step2: false
+               },
+               hideDateFrom: true
+            }
+         }
+      }
+   },
+   computed: {
+      ...mapState({
+         accompanyingCourse: state => state.accompanyingCourse,
+         context: state => state.addressContext
+      }),
+      isTemporaryAddress() {
+         return this.accompanyingCourse.locationStatus === 'address';
+      },
+      isPersonLocation() {
+         return this.accompanyingCourse.locationStatus === 'person';
+      },
+      isContextEdit() {
+         return this.context.edit;
+      }
+   },
+   methods: {
+      initAddressContext() {
+         let context = {
+            entity: {
+               type: this.accompanyingCourse.type,
+               id: this.accompanyingCourse.id
+            },
+            edit: false,
+            addressId: null
+         }
+         if (this.accompanyingCourse.location) {
+            context['edit'] = true;
+            context['addressId'] = this.accompanyingCourse.location.address_id
+         }
+         this.$store.commit('setAddressContext', context);
+      },
+      removeAddress() {
+        //console.log('remove address');
+         let payload = {
+            entity: this.context.entity.type,
+            entityId: this.context.entity.id,
+            locationStatusTo: 'none'
+         };
+         this.$store.dispatch('updateLocation', payload);
+      },
+      displayErrors() {
+         return this.$refs.addAddress.errorMsg;
+      },
+      submitTemporaryAddress() {
+        //console.log('@@@ click on Submit Temporary Address Button');
+         let payload = this.$refs.addAddress.submitNewAddress();
+         payload['locationStatusTo'] = 'address'; // <== temporary, not none, not person
+         this.$store.dispatch('updateLocation', payload);
+         this.$store.commit('setEditContextTrue');
+      }
+   },
+   mounted() {
+      this.initAddressContext();
+
+     //console.log('ac.locationStatus', this.accompanyingCourse.locationStatus);
+     //console.log('ac.location (temporary location)', this.accompanyingCourse.location);
+     //console.log('ac.personLocation', this.accompanyingCourse.personLocation);
+   }
+}
+</script>

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

@@ -1,7 +1,7 @@
 <template>
    <div class="vue-component">
-      <h2><a name="section-15"></a>{{ $t('origin.title') }}</h2>
-     
+      <h2><a name="section-20"></a>{{ $t('origin.title') }}</h2>
+
       <div class="my-4">
          <label for="selectOrigin">
             {{ $t('origin.label') }}

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

@@ -1,11 +1,11 @@
 <template>
 <div class="vue-component">
    <h2><a name="section-10"></a>{{ $t('persons_associated.title')}}</h2>
-   
+
    <div>
       <label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
-   
+
    <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
       <thead>
          <tr>
@@ -27,7 +27,7 @@
    </table>
 
    <div>
-      <add-persons 
+      <add-persons
          buttonTitle="persons_associated.add_persons"
          modalTitle="add_persons.title"
          v-bind:key="addPersons.key"
@@ -69,15 +69,15 @@ export default {
    }),
    methods: {
       removeParticipation(item) {
-         console.log('@@ CLICK remove participation: item', item);
+        //console.log('@@ CLICK remove participation: item', item);
          this.$store.dispatch('removeParticipation', item);
       },
       closeParticipation(item) {
-         console.log('@@ CLICK close participation: item', item);
+        //console.log('@@ CLICK close participation: item', item);
          this.$store.dispatch('closeParticipation', item);
       },
       addNewPersons({ selected, modal }) {
-         console.log('@@@ CLICK button addNewPersons', selected);
+        //console.log('@@@ CLICK button addNewPersons', selected);
          selected.forEach(function(item) {
                this.$store.dispatch('addParticipation', item);
             }, this

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

@@ -12,6 +12,10 @@
    </td>
    <td>
       <ul class="record_actions">
+         <button-location
+            v-if="hasCurrentHouseholdAddress"
+            v-bind:person="participation.person">
+         </button-location>
          <li>
             <on-the-fly
                v-bind:type="participation.person.type"
@@ -28,17 +32,17 @@
          </li>
          <!--li>
             <button class="btn btn-delete"
-               :title="$t('action.delete')" 
+               :title="$t('action.delete')"
                @click.prevent="$emit('remove', participation)">
             </button>
          </li-->
          <li>
             <button v-if="!participation.endDate"
-               class="btn btn-remove"
-               v-bind:title="$t('action.remove')" 
+               class="btn btn-sm btn-remove"
+               v-bind:title="$t('action.remove')"
                @click.prevent="$emit('close', participation)">
             </button>
-            <button v-else class="btn btn-remove disabled"></button>
+            <button v-else class="btn btn-sm btn-remove" disabled></button>
          </li>
       </ul>
    </td>
@@ -47,13 +51,24 @@
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import ButtonLocation from '../ButtonLocation.vue';
 
 export default {
    name: 'PersonItem',
    components: {
-      OnTheFly
+      OnTheFly,
+      ButtonLocation
    },
    props: ['participation'],
    emits: ['remove', 'close'],
+   computed: {
+      hasCurrentHouseholdAddress() {
+         if ( !this.participation.endDate
+            && this.participation.person.current_household_address !== null ) {
+            return true;
+         }
+         return false;
+      }
+   }
 }
 </script>

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

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-component">
-   <h2><a name="section-40"></a>{{ $t('referrer.title') }}</h2>
+   <h2><a name="section-60"></a>{{ $t('referrer.title') }}</h2>
 
    <div class="my-4">
       <label class="col-form-label" for="selectReferrer">
@@ -21,7 +21,7 @@
 
       <ul class="record_actions">
          <li>
-            <button 
+            <button
                class="btn btn-create"
                type="button"
                name="button"

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

@@ -1,40 +1,40 @@
 <template>
 <div class="vue-component">
-   
-   <h2><a name="section-20"></a>{{ $t('requestor.title') }}</h2>
-   
+
+   <h2><a name="section-30"></a>{{ $t('requestor.title') }}</h2>
+
    <div v-if="accompanyingCourse.requestor" class="flex-table">
-      
+
       <label>
          <input type="checkbox" v-model="isAnonymous" class="me-2" /><!--  :value="value" -->
          {{ $t('requestor.is_anonymous') }}
       </label>
-      
+
       <div class="item-bloc">
          <h4>
             <span class="badge rounded-pill bg-secondary">{{ accompanyingCourse.requestor.type }}</span>
             {{ accompanyingCourse.requestor.text }}
-         </h4>   
-         
+         </h4>
+
          <dl class="content-bloc" v-if="accompanyingCourse.requestor.type === 'person'">
-            
-            <dt>{{ $t('requestor.birthdate') }}</dt>   
+
+            <dt>{{ $t('requestor.birthdate') }}</dt>
             <dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
-            
-            <dt>{{ $t('requestor.center') }}</dt>   
+
+            <dt>{{ $t('requestor.center') }}</dt>
             <dd>{{ accompanyingCourse.requestor.center.name }}</dd>
-            
-            <dt>{{ $t('requestor.phonenumber') }}</dt>   
+
+            <dt>{{ $t('requestor.phonenumber') }}</dt>
             <dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
-            <dt>{{ $t('requestor.mobilenumber') }}</dt>   
+            <dt>{{ $t('requestor.mobilenumber') }}</dt>
             <dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
          </dl>
-         
+
          <dl class="content-bloc" v-if="accompanyingCourse.requestor.type === 'thirdparty'">
-            
+
             <dt>{{ $t('requestor.address') }}</dt>
             <dd>{{ accompanyingCourse.requestor.address.text }}</dd>
-            
+
             <dt>{{ $t('requestor.location') }}</dt>
             <dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
          </dl>
@@ -59,17 +59,17 @@
       <ul class="record_actions">
          <li>
             <button class="btn btn-remove"
-               :title="$t('action.remove')" 
+               :title="$t('action.remove')"
                @click="removeRequestor">
                {{ $t('action.remove') }}
             </button>
          </li>
       </ul>
-   </div> 
+   </div>
    <div v-else>
       <label>{{ $t('requestor.counter') }}</label>
-   </div>  
-   
+   </div>
+
    <div>
       <add-persons v-if="accompanyingCourse.requestor === null"
          buttonTitle="requestor.add_requestor"
@@ -139,7 +139,7 @@ export default {
 
 div.flex-table {
    margin: 1em 0 0 !important;
-   & > label, 
+   & > label,
    & > ul.record_actions {
       margin: 1em 3em 0 !important;
    }

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

@@ -1,12 +1,12 @@
 <template>
 <div class="vue-component">
-  
-   <h2><a name="section-50"></a>{{ $t('resources.title')}}</h2>
-   
+
+   <h2><a name="section-70"></a>{{ $t('resources.title')}}</h2>
+
    <div>
       <label class="col-form-label">{{ $tc('resources.counter', counter) }}</label>
    </div>
-   
+
    <table class="table table-bordered table-striped border-dark align-middle" v-if="resources.length > 0">
       <thead>
          <tr>
@@ -24,9 +24,9 @@
          </resource-item>
       </tbody>
    </table>
-   
+
    <div>
-      <add-persons 
+      <add-persons
         buttonTitle="resources.add_resources"
         modalTitle="resources.add_resources"
         v-bind:key="addPersons.key"
@@ -68,11 +68,11 @@ export default {
    }),
    methods: {
       removeResource(item) {
-         console.log('@@ CLICK remove resource: item', item);
+        //console.log('@@ CLICK remove resource: item', item);
          this.$store.dispatch('removeResource', item);
       },
       addNewPersons({ selected, modal }) {
-         console.log('@@@ CLICK button addNewPersons', selected);
+        //console.log('@@@ CLICK button addNewPersons', selected);
          selected.forEach(function(item) {
                this.$store.dispatch('addResource', item);
             }, this

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

@@ -1,15 +1,15 @@
 <template>
 <tr>
-   
+
    <td>
-      <span class="badge rounded-pill bg-secondary" 
+      <span class="badge rounded-pill bg-secondary"
          v-bind:title="resource.resource.id">
          <span v-if="resource.resource.type === 'person'" >{{ $t('item.type_person') }}</span>
          <span v-if="resource.resource.type === 'thirdparty'" >{{ $t('item.type_thirdparty') }}</span>
       </span>
       {{ resource.resource.text }}
    </td>
-      
+
    <td v-if="resource.resource.type === 'person'">
       {{ $tc('person.born') }}{{ $d(resource.resource.birthdate.datetime, 'short') }}
    </td>
@@ -17,9 +17,13 @@
       {{ resource.resource.address.text }}<br>
       {{ resource.resource.address.postcode.name }}
    </td>
-   
+
    <td>
       <ul class="record_actions">
+         <button-location
+            v-if="hasCurrentHouseholdAddress"
+            v-bind:person="resource.resource">
+         </button-location>
          <li>
             <on-the-fly
                v-bind:type="resource.resource.type"
@@ -36,8 +40,8 @@
          </li>
          <li>
             <button
-               class="btn btn-remove"
-               v-bind:title="$t('action.remove')" 
+               class="btn btn-sm btn-remove"
+               v-bind:title="$t('action.remove')"
                @click.prevent="$emit('remove', resource)">
             </button>
          </li>
@@ -48,13 +52,24 @@
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import ButtonLocation from '../ButtonLocation.vue';
 
 export default {
    name: 'ResourceItem',
    components: {
-      OnTheFly
+      OnTheFly,
+      ButtonLocation
    },
    props: ['resource'],
-   emits: ['remove']
+   emits: ['remove'],
+   computed: {
+      hasCurrentHouseholdAddress() {
+         if ( !this.resource.resource.type === 'person'
+            && this.resource.resource.current_household_address !== null ) {
+            return true;
+         }
+         return false;
+      }
+   }
 }
 </script>

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

@@ -1,15 +1,15 @@
 <template>
   <div class="vue-component">
-     <h2><a name="section-30"></a>{{ $t('social_issue.title') }}</h2>
-     
+     <h2><a name="section-40"></a>{{ $t('social_issue.title') }}</h2>
+
      <div class="my-4">
         <!--label for="field">{{ $t('social_issue.label') }}</label
         -->
         <VueMultiselect
            name="field"
            :close-on-select="false"
-           :allow-empty="true" 
-           :show-labels="false" 
+           :allow-empty="true"
+           :show-labels="false"
            track-by="id"
            label="text"
            :multiple="true"
@@ -20,7 +20,7 @@
            :options="options">
         </VueMultiselect>
      </div>
-     
+
   </div>
 </template>
 
@@ -51,7 +51,7 @@ export default {
             //console.log('get socialIssues', response.results);
             this.options = response.results;
             resolve();
-         })).catch(error => this.$store.commit('catchError', error));        
+         })).catch(error => this.$store.commit('catchError', error));
       },
       updateSocialIssues(value) {
          this.$store.dispatch('updateSocialIssues', this.transformValue(value));
@@ -60,7 +60,7 @@ export default {
          let stored = this.value;
          let added = updated.filter(x => stored.indexOf(x) === -1).shift();
          let removed = stored.filter(x => updated.indexOf(x) === -1).shift();
-         let method = (typeof removed === 'undefined') ? 'POST' : 'DELETE';         
+         let method = (typeof removed === 'undefined') ? 'POST' : 'DELETE';
          let changed = (typeof removed === 'undefined') ? added : removed;
          let body = { type: "social_issue", id: changed.id };
          //console.log('body', body);

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

@@ -1,15 +1,15 @@
 <template>
-   <a 
-      v-if="item.key <= 5"
-      :href="item.name" 
+   <a
+      v-if="item.key <= 7"
+      :href="item.name"
       :class="{ 'active': isActive }"
       >
       <i class="fa fa-fw fa-square"></i>
       <span>{{ item.key }}</span>
    </a>
-   <a 
+   <a
       v-else-if="step === 'DRAFT'"
-      :href="item.name" 
+      :href="item.name"
       :class="{ 'active': isActive }"
       >
       <i class="fa fa-fw fa-square"></i>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/composer.json

@@ -0,0 +1,14 @@
+{
+  "name": "vendor_name/AccompanyingCourse",
+  "description": "description",
+  "minimum-stability": "stable",
+  "license": "proprietary",
+  "authors": [
+    {
+      "name": "mat",
+      "email": "email@example.com"
+    }
+  ],
+  "require": {
+  }
+}

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

@@ -12,11 +12,10 @@ const root = window.vueRootComponent;
 *  Load all App component, for AccompanyingCourse edition page
 */
 if (root === 'app') {
-   
    initPromise.then(store => {
-      
+
       const i18n = _createI18n(appMessages);
-      
+
       const app = createApp({
          template: `<app></app>`,
       })
@@ -31,11 +30,10 @@ if (root === 'app') {
 *  Load only Banner sub-component, for all others AccompanyingCourse page
 */
 if (root === 'banner') {
-
    initPromise.then(store => {
-      
+
       const i18n = _createI18n(appMessages);
-      
+
       const app = createApp({
          template: `<banner></banner>`,
       })
@@ -44,5 +42,5 @@ if (root === 'banner') {
       .component('banner', Banner)
       .mount('#banner-accompanying-course');
    });
-   
+
 }

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

@@ -1,4 +1,5 @@
 import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
+import { addressMessages } from 'ChillMainAssets/vuejs/Address/i18n';
 
 const appMessages = {
    fr: {
@@ -20,7 +21,7 @@ const appMessages = {
             active: "En file active"
          },
          open_at: "ouvert le ",
-         by: "par ", 
+         by: "par ",
          emergency: "urgent",
          confidential: "confidentiel",
          regular: "régulier",
@@ -63,6 +64,18 @@ const appMessages = {
          title: "Problématiques sociales",
          label: "Choisir les problématiques sociales",
       },
+      courselocation: {
+         title: "Localisation du parcours",
+         add_temporary_address: "Ajouter une adresse temporaire",
+         edit_temporary_address: "Modifier l'adresse temporaire",
+         assign_course_address: "Désigner comme l'adresse du parcours",
+         remove_button: "Enlever l'adresse",
+         temporary_address_must_be_changed: "Cette addresse est temporaire et doit être remplacée par celle d'un usager de référence.",
+         sure: "Êtes-vous sûr ?",
+         sure_description: "Voulez-vous faire de cette adresse l'adresse du parcours ?",
+         ok: "Désigner comme adresse du parcours",
+         person_locator: "Parcours localisé auprès de {0}",
+      },
       referrer: {
          title: "Référent du parcours",
          label: "Vous pouvez choisir un TMS ou vous assigner directement comme référent",
@@ -80,7 +93,7 @@ const appMessages = {
          title: "Observations",
          label: "Ajout d'une note",
          content: "Rédigez une première note…",
-         created_by: "créé par {0}, le {1}" 
+         created_by: "créé par {0}, le {1}"
       },
       confirm: {
          title: "Confirmation",
@@ -94,7 +107,7 @@ const appMessages = {
    }
 };
 
-Object.assign(appMessages.fr, personMessages.fr);
+Object.assign(appMessages.fr, personMessages.fr, addressMessages.fr);
 
 export {
    appMessages

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

@@ -1,32 +1,34 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import { getAccompanyingCourse, 
+import { getAccompanyingCourse,
    patchAccompanyingCourse,
    confirmAccompanyingCourse,
-   postParticipation, 
+   postParticipation,
    postRequestor,
    postResource,
    postSocialIssue } from '../api';
 
+
 const debug = process.env.NODE_ENV !== 'production';
 const id = window.accompanyingCourseId;
 
 let initPromise = getAccompanyingCourse(id)
    .then(accompanying_course => new Promise((resolve, reject) => {
-            
+
       const store = createStore({
          strict: debug,
          modules: {
          },
          state: {
             accompanyingCourse: accompanying_course,
+            addressContext: {},
             errorMsg: []
          },
          getters: {
          },
          mutations: {
             catchError(state, error) {
-               state.errorMsg.push(error); 
+               state.errorMsg.push(error);
             },
             removeParticipation(state, participation) {
                //console.log('### mutation: remove participation', participation.id);
@@ -77,7 +79,7 @@ let initPromise = getAccompanyingCourse(id)
             postFirstComment(state, comment) {
                //console.log('### mutation: postFirstComment', comment);
                state.accompanyingCourse.initialComment = comment;
-            }, 
+            },
             updateSocialIssues(state, value) {
                state.accompanyingCourse.socialIssues = value;
             },
@@ -92,6 +94,20 @@ let initPromise = getAccompanyingCourse(id)
             confirmAccompanyingCourse(state, response) {
                //console.log('### mutation: confirmAccompanyingCourse: response', response);
                state.accompanyingCourse.step = response.step;
+            },
+            setAddressContext(state, context) {
+               //console.log('define location context');
+               state.addressContext = context;
+            },
+            updateLocation(state, r) {
+              //console.log('### mutation: set location attributes', r);
+               state.accompanyingCourse.location = r.location;
+               state.accompanyingCourse.locationStatus = r.locationStatus;
+               state.accompanyingCourse.personLocation = r.personLocation;
+            },
+            setEditContextTrue(state) {
+              //console.log('### mutation: set edit context = true');
+               state.addressContext.edit = true;
             }
          },
          actions: {
@@ -105,7 +121,7 @@ let initPromise = getAccompanyingCourse(id)
                .then(participation => new Promise((resolve, reject) => {
                   commit('closeParticipation', { participation, payload });
                   resolve();
-               })).catch((error) => { commit('catchError', error) }); 
+               })).catch((error) => { commit('catchError', error) });
             },
             addParticipation({ commit }, payload) {
                //console.log('## action: fetch post participation (select item): payload', payload);
@@ -113,7 +129,7 @@ let initPromise = getAccompanyingCourse(id)
                .then(participation => new Promise((resolve, reject) => {
                   commit('addParticipation', participation);
                   resolve();
-               })).catch((error) => { commit('catchError', error) }); 
+               })).catch((error) => { commit('catchError', error) });
             },
             removeRequestor({ commit, dispatch }) {
                //console.log('## action: fetch delete requestor');
@@ -122,7 +138,7 @@ let initPromise = getAccompanyingCourse(id)
                   commit('removeRequestor');
                   dispatch('requestorIsAnonymous', false);
                   resolve();
-               })).catch((error) => { commit('catchError', error) }); 
+               })).catch((error) => { commit('catchError', error) });
             },
             addRequestor({ commit }, payload) {
                //console.log('## action: fetch post requestor: payload', payload);
@@ -130,7 +146,7 @@ let initPromise = getAccompanyingCourse(id)
                .then(requestor => new Promise((resolve, reject) => {
                   commit('addRequestor', requestor);
                   resolve();
-               })).catch((error) => { commit('catchError', error) }); 
+               })).catch((error) => { commit('catchError', error) });
             },
             requestorIsAnonymous({ commit }, payload) {
                //console.log('## action: fetch patch AccompanyingCourse: payload', payload);
@@ -209,6 +225,30 @@ let initPromise = getAccompanyingCourse(id)
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
+            updateLocation({ commit }, payload) {
+              //console.log('## action: updateLocation', payload.locationStatusTo);
+               let body = { 'type': payload.entity, 'id': payload.entityId };
+               let location = {};
+               if (payload.locationStatusTo === 'person') { // patch for person address (don't remove addressLocation)
+                  location = { 'personLocation': { 'type': 'person', 'id': payload.personId }};
+               }
+               else if (payload.locationStatusTo === 'address') { // patch for temporary address
+                  location = { 'personLocation': null, 'addressLocation': { 'id': payload.addressId }};
+               }
+               else { // patch to remove person address
+                  location = { 'personLocation': null };
+               }
+               Object.assign(body, location);
+               patchAccompanyingCourse(payload.entityId, body)
+                  .then(accompanyingCourse => new Promise((resolve, reject) => {
+                     commit('updateLocation', {
+                        location: accompanyingCourse.location,
+                        locationStatus: accompanyingCourse.locationStatus,
+                        personLocation: accompanyingCourse.personLocation
+                     });
+                     resolve();
+                  })).catch((error) => { commit('catchError', error) });
+            },
             confirmAccompanyingCourse({ commit }) {
                //console.log('## action: confirmAccompanyingCourse');
                confirmAccompanyingCourse(id)

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

@@ -0,0 +1,99 @@
+<template>
+   <div>
+      <div class="item-title" @click="removeEvaluation(e)">
+         <i class="fa fa-fw fa-times"></i>
+         {{ evaluation.evaluation.title.fr }}
+      </div>
+      <div v-if="!editEvaluation">
+         <dl class="item-details definition-inline">
+
+            <dt v-if="evaluation.startDate">{{ $t('startDate') }} :</dt>
+            <dd v-if="evaluation.startDate">{{ $d(evaluation.startDate.datetime, 'short') }}</dd>
+
+            <dt v-if="evaluation.endDate">{{ $t('endDate') }} :</dt>
+            <dd v-if="evaluation.endDate">{{ $d(evaluation.endDate.datetime, 'short') }}</dd>
+
+            <dt v-if="evaluation.maxDate">{{ $t('maxDate') }} :</dt>
+            <dd v-if="evaluation.maxDate">{{ $d(evaluation.maxDate.datetime, 'short') }}</dd>
+
+            <dt v-if="evaluation.warningInterval">{{ $t('warningInterval') }} :</dt>
+            <dd v-if="evaluation.warningInterval">{{ evaluation.warningInterval }}</dd>
+
+            <dt v-if="evaluation.documents && evaluation.documents.length > 0">{{ $t('documents') }} :</dt>
+            <dd v-if="evaluation.documents && evaluation.documents.length > 0">{{ evaluation.documents.length }}</dd>
+
+         </dl>
+         <dl class="item-details">
+
+            <dt v-if="evaluation.comment">{{ $t('comment') }} :</dt>
+            <dd v-if="evaluation.comment">{{ evaluation.comment }}</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="editEvaluation">
+         <form-evaluation ref="FormEvaluation" :key="evaluation.id" :evaluation="evaluation"></form-evaluation>
+         <ul class="record_actions">
+            <li>
+               <button class="btn btn-sm btn-update" @click="submitForm">{{ $t('action.save') }}</button>
+            </li>
+         </ul>
+      </div>
+   </div>
+</template>
+
+<script>
+import FormEvaluation from './FormEvaluation.vue';
+
+const i18n = {
+   messages: {
+      fr: {
+         no_evaluation_associated: "Aucune évaluation associée",
+         add_an_evaluation: "Évaluations disponibles",
+         evaluation_has_no_evaluation: "Aucune évaluation disponible",
+         startDate: "Date d'ouverture",
+         endDate: "Date de fin",
+         maxDate: "Date d'échéance",
+         warningInterval: "Rappel (jours)",
+         comment: "Note publique",
+         documents: "Documents",
+      }
+   }
+};
+
+export default {
+   name: "AddEvaluation",
+   components: {
+      FormEvaluation
+   },
+   props: ['evaluation'],
+   i18n,
+   data() {
+      return {
+         editEvaluation: false,
+      };
+   },
+   computed: {
+      pickedEvaluations() {
+         return this.$store.state.evaluationsPicked;
+      }
+   },
+   methods: {
+      removeEvaluation(e) {
+         this.$store.commit('removeEvaluation', e);
+         return;
+      },
+      toggleEditEvaluation(e) {
+         this.editEvaluation = !this.editEvaluation;
+      },
+      submitForm() {
+         this.$refs.FormEvaluation.saveEvaluation();
+         this.toggleEditEvaluation();
+      }
+   }
+}
+</script>

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

@@ -1,166 +1,128 @@
 <template>
-  <div class="addResult" v-if="hasResult">
-    <p class="chill-no-data-statement" v-if="pickedResults.length ===0">
-      Aucun résultat associé
-    </p>
-    <ul class="list-results">
-      <li v-for="r in pickedResults" @click="removeResult(r)" class="badge bg-primary">
-        <i class="fa fa-times"></i>
-        {{ r.title.fr }}
-      </li>
-      <template v-if="isExpanded">
-        <li v-for="r in availableForCheckResults" @click="addResult(r)" class="badge bg-primary">
-          <i class="fa fa-plus"></i>
-          {{ r.title.fr }}
-        </li>
-      </template>
-    </ul>
-    <ul class="record_actions">
-      <li v-if="isExpanded">
-        <button @click="toggleSelect" class="btn btn-hide" >
-          <i class="fa fa-eye-slash"></i>
-          Masquer résultats et orientations disponibles
-        </button>
-      </li>
-      <li v-else>
-        <button @click="toggleSelect" class="btn btn-show">
-          Afficher résultats et orientations disponibles
-        </button>
-      </li>
-    </ul>
-  </div>
-  <div class="noResult" v-if="!hasResult">
-    <div class="chill-no-data-statement">
-      {{ $t('goal_has_no_result') }}
-    </div>
-  </div>
+   <div v-if="hasResult" class="addResult">
+      <p v-if="pickedResults.length ===0" class="chill-no-data-statement">
+         Aucun résultat associé
+      </p>
+      <ul class="list-results">
+         <li v-for="r in pickedResults" class="badge bg-primary" @click="removeResult(r)">
+            <i class="fa fa-times"></i>
+            {{ r.title.fr }}
+         </li>
+         <template v-if="isExpanded">
+            <li v-for="r in availableForCheckResults" class="badge bg-primary" @click="addResult(r)">
+               <i class="fa fa-plus"></i>
+               {{ r.title.fr }}
+            </li>
+         </template>
+      </ul>
+      <ul class="record_actions">
+         <li v-if="isExpanded">
+            <button class="btn btn-hide" @click="toggleSelect">
+               <i class="fa fa-eye-slash"></i>
+               Masquer résultats et orientations disponibles
+            </button>
+         </li>
+         <li v-else>
+            <button class="btn btn-show" @click="toggleSelect">
+               Afficher résultats et orientations disponibles
+            </button>
+         </li>
+      </ul>
+   </div>
+   <div v-if="!hasResult" class="noResult">
+      <div class="chill-no-data-statement">
+         {{ $t('goal_has_no_result') }}
+      </div>
+   </div>
 </template>
 
-<style lang="scss">
-
-button.hide {
-  background-color: rgb(51, 77, 92);
-}
-
-ul.list-results {
-  list-style-type: none;
-  padding: 0;
-
-  li {
-    margin: 0.5rem;
-  }
-
-  li.badge {
-    padding-bottom: 0;
-    padding-top: 0;
-    padding-left: 0;
-
-    i.fa {
-      /*border-radius: 0.25rem; */
-      padding: 0.25rem;
-    }
-
-    i.fa-plus {
-      background-color: green;
-    }
-
-    i.fa-times {
-      background-color: red;
-      color: white;
-    }
-  }
-}
-
-</style>
-
 <script>
-
 const i18n = {
-  messages: {
-    fr: {
-      add_a_result: "Résultat - orientation disponibles",
-      goal_has_no_result: "Aucun résultat - orientation disponible",
-    }
-  }
+   messages: {
+      fr: {
+         add_a_result: "Résultat - orientation disponibles",
+         goal_has_no_result: "Aucun résultat - orientation disponible",
+      }
+   }
 };
 
 export default {
-  name: "AddResult",
-  props: [ 'destination', 'goal' ],
-  i18n,
-  data() {
-    return {
-      isExpanded: false,
-    };
-  },
-  computed: {
-    hasResult() {
-      if (this.destination === 'action') {
-        return this.$store.state.resultsForAction.length > 0;
-      } else if (this.destination === 'goal') {
-        return this.$store.getters.resultsForGoal(this.goal).length > 0;
-      }
+   name: "AddResult",
+   props: ['destination', 'goal', 'availableResults'],
+   i18n,
+   data() {
+      return {
+         isExpanded: false,
+      };
+   },
+   computed: {
+      hasResult() {
+         if (this.destination === 'action') {
+            return this.$store.state.resultsForAction.length > 0;
+         } else if (this.destination === 'goal') {
+            return this.$store.getters.resultsForGoal(this.goal).length > 0;
+         }
 
-      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') {
-        return this.$store.getters.resultsPickedForGoal(this.goal);
-      }
+         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') {
+            return this.$store.getters.resultsPickedForGoal(this.goal);
+         }
 
-      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);
+         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.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));
-      }
+            return this.$store.getters.resultsForGoal(this.goal).filter(r => !pickedIds.includes(r.id));
+         }
 
-      throw Error(`this.destination is not implemented: ${this.destination}`);
-    }
-  },
-  methods: {
-    toggleSelect() {
-      this.isExpanded = !this.isExpanded; 
-    },
-    addResult(r) {
-      console.log('addResult', r);
-      if (this.destination === 'action') {
-        this.$store.commit('addResultPicked', r);
-        return;
-      } else if (this.destination === 'goal') {
-        this.$store.commit('addResultForGoalPicked', { goal: this.goal, result: r });
-        return;
+         throw Error(`this.destination is not implemented: ${this.destination}`);
       }
-      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;
-      } else if (this.destination === 'goal') {
-        this.$store.commit('removeResultForGoalPicked', { goal: this.goal, result: r });
-        return;
+   },
+   methods: {
+      toggleSelect() {
+         this.isExpanded = !this.isExpanded;
+      },
+      addResult(r) {
+         //console.log('addResult', r);
+         if (this.destination === 'action') {
+            this.$store.commit('addResultPicked', r);
+            return;
+         } else if (this.destination === 'goal') {
+            this.$store.commit('addResultForGoalPicked', {goal: this.goal, result: r});
+            return;
+         }
+         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;
+         } else if (this.destination === 'goal') {
+            this.$store.commit('removeResultForGoalPicked', {goal: this.goal, result: r});
+            return;
+         }
+         throw Error(`this.destination is not implemented: ${this.destination}`);
       }
-      throw Error(`this.destination is not implemented: ${this.destination}`);
-    }
-  }
+   }
 }
 
 </script>

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

@@ -0,0 +1,217 @@
+<template>
+<div>
+   <!--h2>
+      {{ $t('evaluation_title') }}
+   </h2-->
+
+   <div class="m-md-3">
+      <!--div class="row mb-3">
+         <label class="col-sm-4 col-form-label">{{ $t('evaluation_status') }}</label>
+         <div class="col-sm-8">
+            <select class="form-select form-select-sm" v-model="status">
+               <option disabled value="">{{ $t('evaluation_choose_a_status') }}</option>
+               <option v-for="s in listAllStatus" :value="s.id">
+                  {{ s.id }}
+               </option>
+            </select>
+         </div>
+      </div-->
+
+      <div class="row mb-3">
+         <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+            {{ $t('evaluation_startdate') }}
+         </label>
+         <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+            <input class="form-control form-control-sm" type="date" v-model="startDate"/>
+         </div>
+
+         <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+            {{ $t('evaluation_enddate') }}
+         </label>
+         <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+            <input class="form-control form-control-sm" type="date" v-model="endDate"/>
+         </div>
+      </div>
+
+      <div class="row mb-3">
+         <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+            {{ $t('evaluation_maxdate') }}
+         </label>
+         <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+            <input class="form-control form-control-sm" type="date" v-model="maxDate"/>
+         </div>
+
+         <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+            {{ $t('evaluation_warning_interval') }}
+         </label>
+         <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+            <input class="form-control form-control-sm" type="number" v-model.number="warningInterval"/>
+         </div>
+      </div>
+
+      <div class="row mb-3">
+         <label class="col-sm-4 col-form-label">{{ $t('evaluation_public_comment') }}</label>
+         <div class="col-sm-8">
+            <ckeditor
+               :editor="editor"
+               :placeholder="$t('evaluation_comment_placeholder')"
+               v-model="comment"
+               tag-name="textarea"
+            ></ckeditor>
+         </div>
+      </div>
+
+      <div class="row mb-3">
+         <label class="col-sm-4 col-form-label">{{ $t('evaluation_generate_a_document') }}</label>
+         <div class="col-sm-8">
+            <div class="input-group">
+               <select class="form-select form-select-sm" v-model="template">
+                  <option disabled value="">{{ $t('evaluation_choose_a_template') }}</option>
+                  <option>A</option>
+               </select>
+               <button class="btn btn-update btn-sm change-icon" type="button"><i class="fa fa-fw fa-cog"></i></button>
+            </div>
+         </div>
+      </div>
+
+      <!--div class="row mb-3">
+         <label class="col-sm-4 col-form-label">{{ $t('evaluation_add_a_document') }}</label>
+         <div class="col-sm-8">
+            <button class="btn btn-create btn-sm" @click="documents"></button>
+         </div>
+      </div-->
+   </div>
+</div>
+</template>
+
+<script>
+import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
+
+const i18n = {
+   messages: {
+      fr: {
+         evaluation_title: "Ecrire une évaluation",
+         evaluation_status: "Statut",
+         evaluation_choose_a_status: "Choisir un statut",
+         evaluation_startdate: "Date d'ouverture",
+         evaluation_enddate: "Date de fin",
+         evaluation_maxdate: "Date d'échéance",
+         evaluation_warning_interval: "Rappel (jours)",
+         evaluation_public_comment: "Note publique",
+         evaluation_comment_placeholder: "Commencez à écrire ...",
+         evaluation_generate_a_document: "Générer un document",
+         evaluation_choose_a_template: "Choisir un gabarit",
+         evaluation_add_a_document: "Ajouter un document",
+         evaluation_add: "Ajouter une évaluation"
+      }
+   }
+};
+
+export default {
+   name: "FormEvaluation",
+   props: ['evaluation'],
+   components: {
+      ckeditor: CKEditor.component,
+   },
+   i18n,
+   data() {
+      return {
+         editor: ClassicEditor,
+         //evaluation: {
+         //   status: null,
+         //   startDate: null,
+         //   endDate: null,
+         //   maxDate: null,
+         //   warningInterval: null,
+         //   comment: null,
+         //   template: null,
+         //   //documents: null
+         //}
+      }
+   },
+   computed: {
+      /*
+      status: {
+         get() { return this.evaluation.status; },
+         set(v) { this.evaluation.status = v; }
+      },
+      */
+      startDate: {
+         get() {
+            if (this.evaluation.startDate) {
+               return this.evaluation.startDate.datetime.split('T')[0];
+            }
+            return null;
+         },
+         set(v) {
+            this.evaluation.startDate.datetime = `${v}T00:00:00+0100`;
+         }
+      },
+      endDate: {
+         get() {
+            if (this.evaluation.endDate) {
+               return this.evaluation.endDate.datetime.split('T')[0];
+            }
+            return null;
+         },
+         set(v) {
+            this.evaluation.endDate.datetime = `${v}T00:00:00+0100`;
+         }
+      },
+      maxDate: {
+         get() {
+            if (this.evaluation.maxDate) {
+               return this.evaluation.maxDate.datetime.split('T')[0];
+            }
+            return null;
+         },
+         set(v) {
+            this.evaluation.maxDate.datetime = `${v}T00:00:00+0100`;
+         }
+      },
+      warningInterval: {
+         get() { return this.evaluation.warningInterval; },
+         set(v) { this.evaluation.warningInterval = v; }
+      },
+      comment: {
+         get() { return this.evaluation.comment; },
+         set(v) { this.evaluation.comment = v; }
+      },
+      template: {
+         get() { return this.evaluation.template; },
+         set(v) { this.evaluation.template = v; }
+      },
+      /*
+      documents: {
+         get() { return this.evaluation.documents; },
+         set(v) { this.evaluation.documents = v; }
+      }
+      */
+   },
+   methods: {
+      listAllStatus() {
+         console.log('load all status');
+         let url = `/api/`;
+         fetch(url)
+         .then(response => {
+            if (response.ok) {
+               return response.json();
+            }
+            throw { m: 'yeeah', s: response.status, b: response.body };
+         })
+         ;
+      },
+      saveEvaluation() {
+         console.log('save evaluation');
+
+         console.log('dispatch action: post/patch/put evaluation');
+         console.log('commit mutation: update state.mutation');
+      }
+   },
+   mounted() {
+      //this.listAllStatus();
+   }
+}
+</script>

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

@@ -5,7 +5,7 @@ import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
 
 const debug = process.env.NODE_ENV !== 'production';
 
-console.log(window.accompanyingCourseWork);
+console.log('acw', window.accompanyingCourseWork);
 
 const store = createStore({
   strict: debug,
@@ -16,10 +16,12 @@ const store = createStore({
       ISOToDatetime(window.accompanyingCourseWork.endDate.datetime) : null),
     note: window.accompanyingCourseWork.note,
     goalsPicked: window.accompanyingCourseWork.goals,
+    goalsForAction: [],
     resultsPicked: window.accompanyingCourseWork.results,
     resultsForAction: [],
-    goalsForAction: [],
     resultsForGoal: [],
+    evaluationsPicked: window.accompanyingCourseWork.accompanyingPeriodWorkEvaluations,
+    evaluationsForAction: [],
     personsPicked: window.accompanyingCourseWork.persons,
     personsReachables: window.accompanyingCourseWork.accompanyingPeriod.participations.filter(p => p.endDate == null)
       .map(p => p.person),
@@ -79,11 +81,28 @@ const store = createStore({
             },
             results: g.results.map(r => ({id: r.id, type: r.type})),
           };
-
           if (g.id !== undefined) {
             o.id = g.id;
           }
-
+          return o;
+        }),
+        accompanyingPeriodWorkEvaluations: state.evaluationsPicked.map(e => {
+          let o = {
+            type: e.type,
+            evaluation: {
+              id: e.evaluation.id,
+              type: e.evaluation.type
+            },
+            startDate: e.startDate,
+            endDate: e.endDate,
+            maxDate: e.maxDate,
+            warningInterval: e.warningInterval,
+            comment: e.comment,
+            documents: e.documents
+          };
+          if (e.id !== undefined) {
+            o.id = e.id;
+          }
           return o;
         })
       };
@@ -97,19 +116,24 @@ const store = createStore({
       state.endDate = date;
     },
     setResultsForAction(state, results) {
-      console.log('set results for action', results);
+      //console.log('set results for action', results);
       state.resultsForAction = results;
     },
     setResultsForGoal(state, { goal, results }) {
-      console.log('set results for goal', results);
+      //console.log('set results for goal', results);
       state.goalsForAction.push(goal);
       for (let i in results) {
         let r = results[i];
         r.goalId = goal.id;
-        console.log('adding result', r);
+        //console.log('adding result', r);
         state.resultsForGoal.push(r);
       }
     },
+    setEvaluationsForAction(state, results) {
+      //console.log('set evaluations for action', results);
+      state.evaluationsForAction = results;
+      console.log('e4a', state.evaluationsForAction);
+    },
     addResultPicked(state, result) {
       state.resultsPicked.push(result);
     },
@@ -130,10 +154,10 @@ const store = createStore({
     },
     addResultForGoalPicked(state, { goal, result}) {
       let found = state.goalsPicked.find(g => g.goal.id === goal.id);
-      console.log('adResultForGoalPicked');
-      console.log('found', found);
-      console.log('goal', goal);
-      console.log('result', result);
+      //console.log('adResultForGoalPicked');
+      //console.log('found', found);
+      //console.log('goal', goal);
+      //console.log('result', result);
 
       if (found === undefined) {
         return;
@@ -150,8 +174,26 @@ const store = createStore({
 
       found.results = found.results.filter(r => r.id !== result.id);
     },
+    addEvaluation(state, evaluation) {
+      let e = {
+        type: "accompanying_period_work_evaluation",
+        evaluation: evaluation,
+        //startDate,
+        //endDate,
+        //maxDate,
+        //warningInterval
+        //comment,
+        //documents,
+      }
+      state.evaluationsPicked.push(e);
+      console.log('ep', state.evaluationsPicked);
+    },
+    removeEvaluation(state, evaluation) {
+      state.evaluationsPicked = state.evaluationsPicked.filter(e => e.id !== evaluation.id);
+      console.log('ep', state.evaluationsPicked);
+    },
     setPersonsPickedIds(state, ids) {
-      console.log('persons ids', ids);
+      //console.log('persons ids', ids);
       state.personsPicked = state.personsReachables
         .filter(p => ids.includes(p.id))
     },
@@ -162,11 +204,11 @@ const store = createStore({
       state.handlingThirdParty = thirdParty;
     },
     addThirdParties(state, thirdParties) {
-      console.log('addThirdParties', thirdParties);
+      //console.log('addThirdParties', thirdParties);
       // filter to remove existing thirdparties
       let ids = state.thirdParties.map(t => t.id);
       let unexistings = thirdParties.filter(t => !ids.includes(t.id));
-      console.log('unexisting third parties', unexistings);
+      //console.log('unexisting third parties', unexistings);
       for (let i in unexistings) {
         state.thirdParties.push(unexistings[i]);
       }
@@ -176,7 +218,7 @@ const store = createStore({
         .filter(t => t.id !== thirdParty.id);
     },
     setErrors(state, errors) {
-      console.log('handling errors', errors);
+      //console.log('handling errors', errors);
       state.errors = errors;
     },
     setIsPosting(state, st) {
@@ -185,14 +227,12 @@ const store = createStore({
   },
   actions: {
     getReachablesGoalsForAction({ getters, commit, dispatch }) {
-      console.log('getReachablesGoalsForAction');
+      //console.log('getReachablesGoalsForAction');
       let
         socialActionId = getters.socialAction.id,
         url = `/api/1.0/person/social-work/goal/by-social-action/${socialActionId}.json`
       ;
-
-      console.log(url);
-
+      //console.log(url);
       window
         .fetch(
           url
@@ -210,13 +250,11 @@ const store = createStore({
         });
     },
     getReachablesResultsForGoal({ commit }, goal) {
-      console.log('getReachablesResultsForGoal');
+      //console.log('getReachablesResultsForGoal');
       let
         url = `/api/1.0/person/social-work/result/by-goal/${goal.id}.json`
       ;
-
-      console.log(url);
-
+      //console.log(url);
       window.fetch(url)
         .then(response => {
           if (response.ok) {
@@ -226,19 +264,17 @@ const store = createStore({
           throw { m: 'Error while retriving results for goal', s: response.status, b: response.body };
         })
         .then(data => {
-          console.log('data');
+          //console.log('data');
           commit('setResultsForGoal', { goal, results: data.results });
         });
     },
     getReachablesResultsForAction({ getters, commit }) {
-      console.log('getReachablesResultsForAction');
+      //console.log('getReachablesResultsForAction');
       let
         socialActionId = getters.socialAction.id,
         url = `/api/1.0/person/social-work/result/by-social-action/${socialActionId}.json`
       ;
-
-      console.log(url);
-
+      //console.log(url);
       window.fetch(url)
         .then(response => {
           if (response.ok) {
@@ -248,20 +284,35 @@ const store = createStore({
           throw { m: 'Error while retriving results for social action', s: response.status, b: response.body };
         })
         .then(data => {
-          console.log('data retrived', data);
+          //console.log('data retrived', data);
           commit('setResultsForAction', data.results);
         });
     },
+    getReachablesEvaluationsForAction({ getters, commit }) {
+      //console.log('getReachablesEvaluationsForAction');
+      let
+        socialActionId = getters.socialAction.id,
+        url = `/api/1.0/person/social-work/evaluation/by-social-action/${socialActionId}.json`
+      ;
+      window.fetch(url)
+        .then(response => {
+          if (response.ok) {
+            return response.json();
+          }
+          throw { m: 'Error while retriving evaluations for social action', s: response.status, b: response.body };
+        })
+        .then(data => {
+          commit('setEvaluationsForAction', data.results);
+        });
+    },
     submit({ getters, state, commit }) {
       let
         payload = getters.buildPayload,
         url = `/api/1.0/person/accompanying-course/work/${state.work.id}.json`,
         errors = []
       ;
-
-      console.log('action subitting', payload, url);
+      //console.log('action submitting', payload, url);
       commit('setIsPosting', true);
-
       window.fetch(url, {
         method: 'PUT',
         headers: {
@@ -295,6 +346,9 @@ const store = createStore({
     initAsync({ dispatch }) {
       dispatch('getReachablesResultsForAction');
       dispatch('getReachablesGoalsForAction');
+      dispatch('getReachablesEvaluationsForAction');
+
+      console.log('ep', this.state.evaluationsPicked);
     },
   }
 });

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

@@ -1,155 +0,0 @@
-<template>
-   <div class='household__address-move'>
-      <div class='household__address-move__create'>
-         <div>
-            <h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
-            <h2 v-else>{{ $t('edit_a_new_address') }}</h2>
-            <add-address
-               @addNewAddress="addNewAddress">
-            </add-address>
-         </div>
-         <div>
-            <show-address
-               v-if="newAddress"
-               v-bind:address="newAddress">
-            </show-address>
-         </div>
-      </div>
-      <div v-if="!edit" class='household__address-move__valid'>
-         <h2>{{ $t('move_date') }}</h2>
-         
-         <div class="input-group mb-3">
-            <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
-            <input type="date" class="form-control form-control-lg" name="validFrom"
-               v-bind:placeholder="$t('validFrom')"
-               v-model="validFrom"
-               aria-describedby="validFrom" />
-         </div>
-         
-         <div v-if="errors.length > 0">
-            {{ errors }}
-         </div>
-         <div v-if="loading">
-            {{ $t('loading') }}
-         </div>
-         <div v-if="success && !edit">
-            {{ $t('household_address_move_success') }}
-         </div>
-      </div>
-      <div v-if="success && edit">
-         {{ $t('household_address_edit_success') }}
-      </div>
-      <div>
-         <ul class="record_actions sticky-form-buttons">
-            <li class="cancel">
-               <a :href="backUrl" class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
-            </li>
-            <li v-if="!edit">
-               <button type="submit" class="btn btn-update" @click="addToHousehold">
-                  {{ $t('add_an_address_to_household') }}
-               </button>
-            </li>
-         </ul>
-      </div>
-   </div>
-</template>
-
-<script>
-
-import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
-import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
-
-export default {
-   name: 'App',
-   components: {
-      AddAddress,
-      ShowAddress
-   },
-   data() {
-      return {
-         edit: window.mode === 'edit',
-         householdId: window.householdId,
-         addressId: window.addressId,
-         backUrl: `/fr/person/household/${householdId}/addresses`, //TODO better way to pass this
-         validFrom: new Date().toISOString().split('T')[0]
-      }
-   },
-   computed: {
-      newAddress() {
-         return this.$store.state.newAddress;
-      },
-      errors() {
-         return this.$store.state.errorMsg;
-      },
-      loading() {
-         return this.$store.state.loading;
-      },
-      success() {
-         return this.$store.state.success;
-      }
-   },
-   methods: {
-      addNewAddress({ address, modal }) {
-         console.log('@@@ CLICK button addNewAdress', address);
-
-         let createdAddress = {
-            'isNoAddress': address.isNoAddress,
-            'street': address.isNoAddress ? '' : address.street,
-            'streetNumber': address.isNoAddress ? '' : address.streetNumber,
-            'postcode': {'id': address.selected.city.id},
-            'floor': address.floor,
-            'corridor': address.corridor,
-            'steps': address.steps,
-            'flat': address.flat,
-            'buildingName': address.buildingName,
-            'distribution': address.distribution,
-            'extra': address.extra
-         };
-
-         if (address.selected.address.point !== undefined){
-            createdAddress = Object.assign(createdAddress, {
-               'point': address.selected.address.point.coordinates
-            });
-         }
-
-         if(address.writeNewPostalCode){
-            let newPostalCode = address.newPostalCode;
-            newPostalCode = Object.assign(newPostalCode, {
-                'country': {'id': address.selected.country.id },
-            });
-            createdAddress = Object.assign(createdAddress, {
-               'newPostalCode': newPostalCode
-            });
-         }
-
-         if (this.edit){
-            this.$store.dispatch('updateAddress', {
-               addressId: this.addressId,
-               newAddress: createdAddress
-            });
-         } else {
-            this.$store.dispatch('addAddress', createdAddress);
-         }
-
-         modal.showModal = false;
-      },
-      addToHousehold() {
-         this.$store.dispatch('addDateToAddressAndAddressToHousehold', {
-            householdId: this.householdId,
-            addressId: this.$store.state.newAddress.address_id,
-            body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}},
-            backUrl: this.backUrl
-         })
-      },
-      getEditAddress() {
-         this.$store.dispatch('getEditAddress', this.addressId);
-      }
-   },
-   mounted() {
-      if (this.edit) {
-         this.getEditAddress();
-      }
-   },
-};
-
-</script>

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

@@ -1,23 +0,0 @@
-/*
-* Endpoint household
-* method POST, post Household instance
-*
-*  @id     integer - id of household
-*  @body   Object - dictionary with changes to post
-*/
-export const postAddressToHousehold = (householdId, addressId) => {
-   const body = {
-      'id': addressId
-   };
-   const url = `/api/1.0/person/household/${householdId}/address.json`
-   return fetch(url, {
-         method: 'POST',
-         headers: {'Content-Type': 'application/json;charset=utf-8'},
-         body: JSON.stringify(body)
-      })
-      .then(response => {
-         if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response');
-      });
-};
-

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

@@ -1,47 +0,0 @@
-<template>
-   <div class="container">
-      <VueMultiselect
-         v-model="value"
-         @select="selectAddress"
-         name="field"
-         track-by="id"
-         label="value"
-         :custom-label="transName"
-         :multiple="false"
-         :placeholder="$t('select_address')"
-         :options="addresses">
-      </VueMultiselect>
-   </div>
-</template>
-
-<script>
-import VueMultiselect from 'vue-multiselect';
-
-export default {
-   name: 'SelectHouseholdAddress',
-   components: { VueMultiselect },
-   props: ['address'],
-   data() {
-      return {
-         value: null
-      }
-   },
-   computed: {
-      addresses() {
-         return this.address.loaded.addresses;
-      }
-   },
-   methods: {
-      transName(value) {
-         return `${value.text} ${value.postcode.name}`
-      },
-      selectAddress(value) {
-         this.address.selected.address = value;
-      }
-   }
-};
-</script>
-
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>
-
-

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

@@ -1,25 +0,0 @@
-import { createApp } from 'vue'
-import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
-import { appMessages } from './js/i18n'
-import { store } from './store'
-
-import App from './App.vue';
-
-const root = window.vueRootComponent;
-
-/*
-*  Load all App component, for Household edition page
-*/
-
-const i18n = _createI18n(appMessages);
-
-const app = createApp({
-   template: `<app></app>`,
-})
-.use(store)
-.use(i18n)
-.component('app', App)
-.mount('#household-address');
-
-
-

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

@@ -1,4 +1,4 @@
-import { addressMessages } from 'ChillMainAssets/vuejs/Address/js/i18n'
+import { addressMessages } from 'ChillMainAssets/vuejs/Address/i18n'
 
 const appMessages = {
    fr: {

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

@@ -1,160 +0,0 @@
-import 'es6-promise/auto';
-import { createStore } from 'vuex';
-
-import { postAddress, postPostalCode, patchAddress, getAddress } from 'ChillMainAssets/vuejs/Address/api';
-import { postAddressToHousehold } from '../api';
-
-const debug = process.env.NODE_ENV !== 'production';
-
-const store = createStore({
-   strict: debug,
-   state: {
-      newAddress: {},
-      editAddress: {}, //TODO or should be newAddress?
-      household: {},
-      validFrom: {},
-      errorMsg: [],
-      loading: false,
-      success: false
-   },
-   getters: {
-   },
-   mutations: {
-      catchError(state, error) {
-         state.errorMsg.push(error);
-      },
-      addAddress(state, address) {
-         console.log('@M addAddress address', address);
-         state.newAddress = address;
-      },
-      updateAddress(state, address) {
-         console.log('@M updateAddress address', address);
-         state.newAddress = address;
-      },
-      addAddressToHousehold(state, household) {
-         console.log('@M addAddressToHousehold household', household);
-         state.household = household;
-      },
-      addDateToAddress(state, validFrom) {
-         console.log('@M addDateToAddress address.validFrom', validFrom);
-         state.validFrom = validFrom;
-      },
-      getEditAddress(state, address) {
-         console.log('@M getEditAddress address', address);
-         state.editAddress = address;
-      },
-      setLoading(state, b) {
-         state.loading = b;
-      },
-      setSuccess(state, b) {
-         state.success = b;
-      }
-   },
-   actions: {
-      addAddress({ commit }, payload) {
-         console.log('@A addAddress payload', payload);
-         commit('setLoading', true);
-         if('newPostalCode' in payload){
-            postPostalCode(payload.newPostalCode)
-               .then(postalCode => {
-                  let body = payload;
-                  body.postcode = {'id': postalCode.id },
-                  postAddress(body)
-                     .then(address => new Promise((resolve, reject) => {
-                        commit('addAddress', address);
-                        resolve();
-                        commit('setLoading', false);
-                     }))
-                     .catch((error) => {
-                        commit('catchError', error);
-                        commit('setLoading', false);
-                     });
-               })
-
-         } else {
-            postAddress(payload)
-               .then(address => new Promise((resolve, reject) => {
-                  commit('addAddress', address);
-                  resolve();
-                  commit('setLoading', false);
-               }))
-               .catch((error) => {
-                  commit('catchError', error);
-                  commit('setLoading', false);
-               });
-         }
-      },
-      addDateToAddressAndAddressToHousehold({ commit }, payload) {
-         console.log('@A addDateToAddressAndAddressToHousehold payload', payload);
-         commit('setLoading', true);
-         patchAddress(payload.addressId, payload.body)
-            .then(address => new Promise((resolve, reject) => {
-               commit('addDateToAddress', address.validFrom);
-               resolve();
-            }).then(
-               postAddressToHousehold(payload.householdId, payload.addressId)
-                  .then(household => new Promise((resolve, reject) => {
-                     commit('addAddressToHousehold', household);
-                     commit('setSuccess', true);
-                     commit('setLoading', false);
-                     window.location.assign(payload.backUrl);
-                     resolve();
-               }))
-               .catch((error) => {
-                  commit('catchError', error);
-                  commit('setLoading', false);
-               })
-            ))
-            .catch((error) => {
-               commit('catchError', error);
-               commit('setLoading', false);
-            });
-      },
-      updateAddress({ commit }, payload) {
-         console.log('@A updateAddress payload', payload);
-
-         if('newPostalCode' in payload.newAddress){ // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
-            let postalCodeBody = payload.newAddress.newPostalCode;
-            postalCodeBody = Object.assign(postalCodeBody, {'origin': 3});
-            postPostalCode(postalCodeBody)
-               .then(postalCode => {
-                  let body = payload.newAddress;
-                  body.postcode = {'id': postalCode.id },
-                  patchAddress(payload.addressId, body)
-                     .then(address => new Promise((resolve, reject) => {
-                        commit('updateAddress', address);
-                        commit('setSuccess', true);
-                        resolve();
-                     }))
-                     .catch((error) => {
-                        commit('catchError', error);
-                     });
-               })
-
-         } else {
-            patchAddress(payload.addressId, payload.newAddress)
-               .then(address => new Promise((resolve, reject) => {
-                  commit('updateAddress', address);
-                  commit('setSuccess', true);
-                  resolve();
-               }))
-               .catch((error) => {
-                  commit('catchError', error);
-               });
-         }
-      },
-      getEditAddress({ commit }, payload) {
-         console.log('@A getEditAddress payload', payload);
-
-         getAddress(payload).then(address => new Promise((resolve, reject) => {
-            commit('getEditAddress', address);
-            resolve();
-         }))
-         .catch((error) => {
-            commit('catchError', error);
-         });
-      },
-   }
-});
-
-export { store };

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

@@ -37,7 +37,20 @@ const fetchHouseholdSuggestionByAccompanyingPeriod = (personId) => {
   ;
 };
 
+const fetchAddressSuggestionByPerson = (personId) => {
+  const url = `/api/1.0/person/address/suggest/by-person/${personId}.json`;
+  return window.fetch(url)
+    .then(response => {
+      if (response.ok) {
+        return response.json();
+      }
+
+      throw Error({m: 'Error while fetch address suggestion', status: response.status});
+    });
+}
+
 export { 
   householdMove,
   fetchHouseholdSuggestionByAccompanyingPeriod,
+  fetchAddressSuggestionByPerson,
 };

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

@@ -22,8 +22,8 @@
         class="item-bloc"
         v-bind:key="conc.person.id"
       >
-        <div class="item-row person">
-          <div class="item-col box-person">
+        <div class="item-row">
+          <div class="item-col">
             <div>
               <person :person="conc.person"></person>
             </div>
@@ -33,7 +33,7 @@
             </div>
 
           </div>
-          <div class="item-col box-where">
+          <div class="item-col">
             <ul class="list-content fa-ul">
               <li>
                 <i class="fa fa-li fa-map-marker"></i>

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

@@ -5,6 +5,38 @@
     <div>
       <household-viewer :household="household"></household-viewer>
     </div>
+    <div v-if="isHouseholdNew && !hasHouseholdAddress">
+
+      <h3>À quelle adresse habite ce ménage ?</h3>
+
+      <ul v-if="filterAddressesSuggestion.length > 0">
+        <li v-for="a in filterAddressesSuggestion">
+          <show-address :address="a"></show-address> 
+          <button class="btn" @click="setHouseholdAddress(a)">
+            Le ménage habite cette adresse
+          </button>
+        </li>
+      </ul>
+
+      <ul class="record_actions">
+        <li >
+          <button class="btn">
+            Créer une adresse
+          </button>
+        </li>
+      </ul>
+      
+    </div>
+    <div v-if="isHouseholdNew && hasHouseholdAddress">
+      <ul class="record_actions">
+        <li >
+          <button class="btn" @click="removeHouseholdAddress">
+            Supprimer cette adresse
+          </button>
+        </li>
+      </ul>
+      
+    </div>
   </div>
   <div v-else-if="isForceLeaveWithoutHousehold">
       {{ $t('household_members_editor.household.will_leave_any_household') }}
@@ -23,7 +55,7 @@
           countHouseholdSuggestion) }}
       </button>
     </li>
-    <li v-if="showHouseholdSuggestion">
+    <li v-if="showHouseholdSuggestion && hasHouseholdSuggestion">
       <button
         class="btn btn-misc"
         @click="toggleHouseholdSuggestion"
@@ -46,10 +78,15 @@
         <i class="fa fa-sign-out"></i>{{ $t('household_members_editor.household.leave_without_household') }}
       </button>
     </li>
+    <li v-if="allowRemoveHousehold">
+      <button @click="removeHousehold" class="btn">
+        {{ $t('household_members_editor.household.change') }}
+      </button>
+    </li>
   </ul>
 
   <div class="householdSuggestions">
-    <div v-if="showHouseholdSuggestion">
+    <div v-if="showHouseholdSuggestion && hasHouseholdSuggestion">
       <p>{{ $t('household_members_editor.household_for_participants_accompanying_period') }}:</p>
       <div class="householdSuggestionList">
         <div
@@ -98,11 +135,13 @@
 
 import { mapGetters, mapState } from 'vuex';
 import HouseholdViewer from 'ChillPersonAssets/vuejs/_components/Household/Household.vue';
+import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
 
 export default {
   name: 'Household',
   components: {
     HouseholdViewer,
+    ShowAddress,
   },
   computed: {
     ...mapGetters([
@@ -111,6 +150,8 @@ export default {
       'hasHouseholdSuggestion',
       'countHouseholdSuggestion',
       'filterHouseholdSuggestionByAccompanyingPeriod',
+      'filterAddressesSuggestion',
+      'hasHouseholdAddress',
     ]),
     ...mapState([
       'showHouseholdSuggestion',
@@ -119,14 +160,22 @@ export default {
       return this.$store.state.household;
     },
     allowHouseholdCreate() {
-      return this.$store.state.allowHouseholdCreate;
+      return this.$store.state.allowHouseholdCreate && !this.$store.getters.hasHousehold;
     },
     allowHouseholdSearch() {
       return false;
-      return this.$store.state.allowHouseholdSearch;
+      return this.$store.state.allowHouseholdSearch && !this.$store.getters.hasHousehold;
     },
     allowLeaveWithoutHousehold() {
-      return this.$store.state.allowLeaveWithoutHousehold;
+      return this.$store.state.allowLeaveWithoutHousehold && !this.$store.getters.hasHousehold;
+    },
+    allowRemoveHousehold() {
+      return this.$store.getters.hasHousehold &&
+        (
+          this.allowHouseholdCreate || this.allowHouseholdSearch || 
+            this.allowLeaveWithoutHousehold
+        )
+      ;
     },
     allowChangeHousehold() {
       return this.allowHouseholdCreate || this.allowHouseholdSearch || 
@@ -148,6 +197,15 @@ export default {
     },
     selectHousehold(h) {
       this.$store.dispatch('selectHousehold', h);
+    },
+    removeHousehold() {
+      this.$store.dispatch('removeHousehold');
+    },
+    setHouseholdAddress(a) {
+      this.$store.commit('setHouseholdAddress', a);
+    },
+    removeHouseholdAddress() {
+      this.$store.commit('removeHouseholdAddress');
     }
   },
 };

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

@@ -1,7 +1,7 @@
 <template>
   <div class="item-bloc">
-    <div class="item-row person">
-      <div class="item-col box-person">
+    <div class="item-row">
+      <div class="item-col">
         <div>
           <person :person="conc.person"></person>
           <span v-if="isHolder" class="badge bg-primary holder">
@@ -10,7 +10,7 @@
         </div>
         <div v-if="conc.person.birthdate !== null">{{ $t('person.born', {'gender': conc.person.gender} ) }}</div>
       </div>
-      <div class="item-col box-where">
+      <div class="item-col">
         <ul class="list-content fa-ul">
           <li>
             <i class="fa fa-li fa-map-marker"></i>

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

@@ -1,5 +1,5 @@
 import { createStore } from 'vuex';
-import { householdMove, fetchHouseholdSuggestionByAccompanyingPeriod } from './../api.js';
+import { householdMove, fetchHouseholdSuggestionByAccompanyingPeriod, fetchAddressSuggestionByPerson} from './../api.js';
 import { datetimeToISO } from 'ChillMainAssets/chill/js/date.js';
 
 const debug = process.env.NODE_ENV !== 'production';
@@ -37,6 +37,7 @@ const store = createStore({
     forceLeaveWithoutHousehold: false,
     householdSuggestionByAccompanyingPeriod: [],
     showHouseholdSuggestion: window.household_members_editor_expand_suggestions === 1,
+    addressesSuggestion: [],
     warnings: [],
     errors: []
   },
@@ -47,6 +48,12 @@ const store = createStore({
       }
       return !Number.isInteger(state.household.id);
     },
+    hasHouseholdAddress(state) {
+      if (null === state.household) {
+        return false;
+      }
+      return state.household.current_address !== null;
+    },
     hasHousehold(state) {
       return state.household !== null;
     },
@@ -68,6 +75,18 @@ const store = createStore({
         .filter(h => h.id !== state.household.id)
         ;
     },
+    filterAddressesSuggestion(state) {
+      if (state.household === null) {
+        return state.addressesSuggestion;
+      }
+
+      if (state.household.current_address === null) {
+        return state.addressesSuggestion;
+      }
+
+      return state.addressesSuggestion
+        .filter(a => a.address_id !== state.household.current_address.address_id);
+    },
     hasPersonsWellPositionnated(state, getters) {
       return getters.needsPositionning === false
         || (getters.persons.length > 0 && getters.concUnpositionned.length === 0);
@@ -106,7 +125,7 @@ const store = createStore({
     needsPositionning(state) {
       return state.forceLeaveWithoutHousehold === false;
     },
-    buildPayload: (state) => {
+    buildPayload: (state, getters) => {
       let
         conc,
         payload_conc,
@@ -119,8 +138,13 @@ const store = createStore({
       if (state.forceLeaveWithoutHousehold === false) {
         payload.destination = {
             id: state.household.id,
-            type: state.household.type
+            type: state.household.type,
           };
+
+        if (getters.isHouseholdNew && state.household.current_address !== null) {
+          console.log(state.household);
+          payload.destination.forceAddress = { id: state.household.current_address.address_id };
+        }
       }
 
       for (let i in state.concerned) {
@@ -187,9 +211,29 @@ const store = createStore({
       )
     },
     createHousehold(state) {
-      state.household = { type: 'household', members: [], current_address: null }
+      state.household = { type: 'household', members: [], current_address: null, current_members_id: [] }
       state.forceLeaveWithoutHousehold = false;
     },
+    removeHousehold(state) {
+      state.household = null;
+      state.forceLeaveWithoutHousehold = false;
+    },
+    setHouseholdAddress(state, address) {
+      if (null === state.household) {
+        console.error("no household");
+        throw new Error("No household");
+      }
+
+      state.household.current_address = address;
+    },
+    removeHouseholdAddress(state, address) {
+      if (null === state.household) {
+        console.error("no household");
+        throw new Error("No household");
+      }
+
+      state.household.current_address = null;
+    },
     forceLeaveWithoutHousehold(state) {
       state.household = null;
       state.forceLeaveWithoutHousehold = true;
@@ -221,11 +265,22 @@ const store = createStore({
     setErrors(state, errors) {
       state.errors = errors;
     },
+    addAddressesSuggestion(state, addresses) {
+      let existingIds = state.addressesSuggestion
+        .map(a => a.address_id);
+
+      for (let i in addresses) {
+        if (!existingIds.includes(addresses[i].address_id)) {
+          state.addressesSuggestion.push(addresses[i]);
+        }
+      }
+    }
   },
   actions: {
     addConcerned({ commit, dispatch }, person) {
       commit('addConcerned', person);
       dispatch('computeWarnings');
+      dispatch('fetchAddressSuggestions');
     },
     markPosition({ commit, state, dispatch }, { person_id, position_id }) {
       commit('markPosition', { person_id, position_id });
@@ -242,6 +297,11 @@ const store = createStore({
     removeConcerned({ commit, dispatch }, conc) {
       commit('removeConcerned', conc);
       dispatch('computeWarnings');
+      dispatch('fetchAddressSuggestions');
+    },
+    removeHousehold({ commit, dispatch }) {
+      commit('removeHousehold');
+      dispatch('computeWarnings');
     },
     createHousehold({ commit, dispatch }) {
       commit('createHousehold');
@@ -268,6 +328,17 @@ const store = createStore({
           commit('setHouseholdSuggestionByAccompanyingPeriod', households);
         });
     },
+    fetchAddressSuggestions({ commit, state }) {
+      for (let i in state.concerned) {
+        fetchAddressSuggestionByPerson(state.concerned[i].person.id)
+          .then(addresses => {
+            commit('addAddressesSuggestion', addresses);
+          })
+          .catch(e => {
+            console.log(e);
+          });
+      }
+    },
     computeWarnings({ commit, state, getters }) {
       let warnings = [],
         payload;
@@ -321,6 +392,7 @@ const store = createStore({
 });
 
 store.dispatch('computeWarnings');
+store.dispatch('fetchAddressSuggestions');
 
 if (concerned.length > 0) {
   concerned.forEach(c => {

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

@@ -0,0 +1,51 @@
+
+/*
+* Endpoint chill_api_single_person_address
+* method POST, post Person instance
+*
+*  @id     integer - id of Person
+*  @body   Object - dictionary with changes to post
+*/
+const postAddressToPerson = (personId, addressId) => {
+    //console.log(personId);
+    //console.log(addressId);
+    const body = {
+        'id': addressId
+    };
+    const url = `/api/1.0/person/person/${personId}/address.json`
+    return fetch(url, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json;charset=utf-8'},
+        body: JSON.stringify(body)
+    })
+        .then(response => {
+            if (response.ok) { return response.json(); }
+            throw Error('Error with request resource response');
+        });
+};
+
+/*
+* Endpoint household
+* method POST, post Household instance
+*
+*  @id     integer - id of household
+*  @body   Object - dictionary with changes to post
+*/
+const postAddressToHousehold = (householdId, addressId) => {
+    const body = {
+        'id': addressId
+    };
+    const url = `/api/1.0/person/household/${householdId}/address.json`
+    return fetch(url, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json;charset=utf-8'},
+        body: JSON.stringify(body)
+    })
+        .then(response => {
+            if (response.ok) { return response.json(); }
+            throw Error('Error with request resource response');
+        });
+};
+
+
+export { postAddressToPerson, postAddressToHousehold };

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

@@ -1,9 +1,8 @@
 <template>
    <ul class="record_actions">
       <li class="add-persons">
-         <a class="btn btn-create" @click="openModal">
-            {{ $t(buttonTitle) }}
-         </a>
+         <a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
+            @click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
       </li>
    </ul>
 
@@ -19,7 +18,7 @@
          <template v-slot:body-head>
             <div class="modal-body">
                <div class="search">
-                  
+
                   <label class="col-form-label" style="float: right;">
                      {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
                   </label>
@@ -66,17 +65,17 @@
 
                <div class="create-button">
                   <on-the-fly
-                     v-if="query.length >= 3" 
+                     v-if="query.length >= 3"
                      v-bind:buttonText="$t('onthefly.create.button', {q: query})"
                      action="create"><!-- TODO first close this modal -->
                   </on-the-fly>
                </div>
-               
+
             </div>
          </template>
 
          <template v-slot:footer>
-            <button class="btn btn-create" 
+            <button class="btn btn-create"
                @click.prevent="$emit('addNewPersons', { selected, modal })">
                {{ $t('action.add')}}
             </button>
@@ -150,13 +149,19 @@ export default {
          ];
          let union = [...new Set([
             ...this.suggested.slice().reverse(),
-            ...this.selected.slice().reverse(), 
+            ...this.selected.slice().reverse(),
          ])];
          return uniqBy(union, k => k.key);
       },
-      //options() {
-      //   return this.options;
-      //},
+      getClassButton() {
+         let size = (typeof this.options.button !== 'undefined' && typeof this.options.button.size !== 'undefined') ? this.options.button.size : '';
+         let type = (typeof this.options.button !== 'undefined' && typeof this.options.button.type !== 'undefined') ? this.options.button.type : 'btn-create';
+         return size ? size + ' ' + type : type;
+      },
+      displayTextButton() {
+         return (typeof this.options.button !== 'undefined' && typeof this.options.button.display !== 'undefined') ?
+            this.options.button.display : true;
+      },
       checkUniq() {
          if (this.options.uniq === true) {
             return 'radio';
@@ -184,7 +189,7 @@ export default {
             this.loadSuggestions([]);
          }
       },
-      loadSuggestions(suggested) { 
+      loadSuggestions(suggested) {
          //console.log('suggested', suggested);
          this.search.suggested = suggested;
          this.search.suggested.forEach(function(item) {
@@ -230,7 +235,7 @@ export default {
          margin: auto 4em;
          div.search {
             position: relative;
-            input { 
+            input {
                width: 100%;
                padding: 1.2em 1.5em 1.2em 2.5em;
                //margin: 1em 0;
@@ -239,7 +244,7 @@ export default {
                position: absolute;
                opacity: 0.5;
                padding: 0.65em 0;
-               top: 50%; 
+               top: 50%;
             }
             i.fa-search {
                left: 0.5em;

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

@@ -1,13 +1,13 @@
 <template>
 <div v-if="action === 'show'">
-   
+
    <div class="flex-table">
       <div class="item-bloc">
          <div class="item-row">
             <div class="item-col">
                <h3 :title="person.id">{{ person.text }}</h3>
                <p>
-                  <i class="fa fa-fw" 
+                  <i class="fa fa-fw"
                      :class="genderClass">
                      <!--
                      :title="$t(genderTranslation)"
@@ -20,27 +20,27 @@
                </p>
             </div>
             <div class="item-col">
-               <dl class="list-content"> 
+               <dl class="list-content">
                   <dt>{{ $t('person.firstname') }}</dt>
                   <dd>{{ person.firstName }}</dd>
-                  
+
                   <dt>{{ $t('person.lastname') }}</dt>
                   <dd>{{ person.lastName }}</dd>
-                  
+
                   <dt>{{ $t('person.altnames') }}</dt>
                   <dd>{{ person.altNames }}</dd>
-                  
+
                   <span v-if="person.center">
                      <dt>{{ $t('person.center_name') }}</dt>
                      <dd :title="person.center.id">{{ person.center.name }}</dd>
                   </span>
-                     
+
                   <dt>{{ $t('person.phonenumber') }}</dt>
                   <dd>{{ person.phonenumber }}</dd>
-                  
+
                   <dt>{{ $t('person.mobilenumber') }}</dt>
                   <dd>{{ person.mobilenumber }}</dd>
-                  
+
                   <dt>{{ $t('person.gender.title') }}</dt>
                   <!--
                   <dd>{{ $t(genderTranslation) }}</dd>
@@ -49,61 +49,61 @@
             </div>
          </div>
       </div>
-   </div>   
-   
+   </div>
+
 </div>
 <div v-else-if="action === 'edit' || action === 'create'">
-   
+
    <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>
-   
-   <!--  TODO fix placeholder if undefined 
+
+   <!--  TODO fix placeholder if undefined
    -->
    <div class="form-floating mb-3">
       <select class="form-select form-select-lg" id="gender" v-model="gender">
-         <option selected disabled >{{ $t('person.gender.placeholder') }}</option> 
+         <option selected disabled >{{ $t('person.gender.placeholder') }}</option>
          <option value="woman">{{ $t('person.gender.woman') }}</option>
          <option value="man">{{ $t('person.gender.man') }}</option>
-         <option value="neuter">{{ $t('person.gender.neuter') }}</option>  
+         <option value="neuter">{{ $t('person.gender.neuter') }}</option>
       </select>
       <label for="gender">{{ $t('person.gender.title') }}</label>
    </div>
-   
+
    <div class="input-group mb-3">
       <span class="input-group-text" id="birthdate"><i class="fa fa-fw fa-birthday-cake"></i></span>
-      <input type="date" 
-         class="form-control form-control-lg" 
-         id="chill_personbundle_person_birthdate" 
-         name="chill_personbundle_person[birthdate]" 
+      <input type="date"
+         class="form-control form-control-lg"
+         id="chill_personbundle_person_birthdate"
+         name="chill_personbundle_person[birthdate]"
          v-model="birthDate"
          aria-describedby="birthdate" />
    </div>
-   
+
    <div class="input-group mb-3">
       <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
-      <input class="form-control form-control-lg" 
-         v-model="phonenumber" 
-         v-bind:placeholder="$t('person.phonenumber')" 
-         v-bind:aria-label="$t('person.phonenumber')" 
+      <input class="form-control form-control-lg"
+         v-model="phonenumber"
+         v-bind:placeholder="$t('person.phonenumber')"
+         v-bind:aria-label="$t('person.phonenumber')"
          aria-describedby="phonenumber" />
    </div>
-   
+
    <div class="input-group mb-3">
       <span class="input-group-text" id="mobilenumber"><i class="fa fa-fw fa-mobile"></i></span>
-      <input class="form-control form-control-lg" 
-         v-model="mobilenumber" 
+      <input class="form-control form-control-lg"
+         v-model="mobilenumber"
          v-bind:placeholder="$t('person.mobilenumber')"
-         v-bind:aria-label="$t('person.mobilenumber')" 
+         v-bind:aria-label="$t('person.mobilenumber')"
          aria-describedby="mobilenumber" />
    </div>
-   
+
 </div>
 </template>
 
@@ -131,19 +131,19 @@ export default {
       },
       gender: {
          set(value) { this.person.gender = value; },
-         get() { return this.person.gender; } 
+         get() { return this.person.gender; }
       },
       birthDate: {
-         set(value) { 
+         set(value) {
             if (this.person.birthdate) {
-               this.person.birthdate.datetime = value + "T00:00:00+0100"; 
+               this.person.birthdate.datetime = value + "T00:00:00+0100";
             } else {
                this.person.birthdate = { datetime: value + "T00:00:00+0100"};
             }
          },
-         get() { 
-            return (this.person.birthdate) ? this.person.birthdate.datetime.split('T')[0] : ''; 
-         } 
+         get() {
+            return (this.person.birthdate) ? this.person.birthdate.datetime.split('T')[0] : '';
+         }
       },
       phonenumber: {
          set(value) { this.person.phonenumber = value; },
@@ -174,7 +174,7 @@ export default {
          }
       },
       feminized() {
-         return (this.person.gender === 'woman')? 'e' : ''; 
+         return (this.person.gender === 'woman')? 'e' : '';
       }
    },
    mounted() {

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

@@ -0,0 +1,5 @@
+<div class="alert alert-danger alert-with-actions mb-0">
+    <div class="message">
+        {{ 'This course is located at a temporarily address. You should locate this course to an user'|trans }}
+    </div>
+</div>

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

@@ -8,7 +8,7 @@
     {% if person.isSharingHousehold %}
         <li>
             <a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id': person.getCurrentHousehold.id }) }}"
-               class="btn btn-chill-pink" title="{{ 'Show household'|trans ~ ' n° ' ~ person.getCurrentHousehold.id }}">
+               class="btn btn-sm btn-chill-pink" title="{{ 'Show household'|trans ~ ' n° ' ~ person.getCurrentHousehold.id }}">
                 <i class="fa fa-home"></i>
             </a>
         </li>
@@ -19,7 +19,7 @@
 <div class="accompanyingcourse-resume">
 
     {% if 'DRAFT' == accompanyingCourse.step %}
-        <div class="col-8 alert alert-danger flash_message mb-5">
+        <div class="alert alert-danger flash_message mb-5">
             <span>
                 {{ 'This accompanying course is still a draft'|trans }}
                 <a href="{{ path('chill_person_accompanying_course_edit', { 'accompanying_period_id': accompanyingCourse.id } ) }}">
@@ -27,8 +27,15 @@
                 </a>
             </span>
         </div>
+        {% if accompanyingCourse.locationStatus == 'address' or accompanyingCourse.locationStatus == 'none' %}
+            <div class="alert alert-danger">
+                {{ 'This course is located at a temporarily address. You should locate this course to an user'|trans }}
+            </div>
+        {% endif %}
     {% endif %}
 
+    <h1>{{ 'Resume Accompanying Course'|trans }}</h1>
+
     <div class="associated-persons mb-5">
         <h2 class="mb-3">{{ 'Associated peoples'|trans }}</h2>
         <div class="flex-table mb-3">
@@ -36,15 +43,20 @@
                 {% if participation.enddate is null %}
                     <div class="item-bloc">
                         {{ participation.person|chill_entity_render_box({
-                            'render': 'bloc', 'addLink': false, 'addInfo': true,
+                            'render': 'bloc', 'addLink': false, 'addInfo': true, 'addAltNames': false,
                             'customButtons': { 'before': _self.button_person(participation.person) }
                         }) }}
                     </div>
                 {% endif %}
             {% endfor %}
         </div>
-        {% if withoutHousehold|length > 0 %}
-            {% include '@ChillPerson/AccompanyingCourse/_join_household.html.twig' with {} %}
+        {% if 'DRAFT' != accompanyingCourse.step %}
+            {% if withoutHousehold|length > 0 %}
+                {% include '@ChillPerson/AccompanyingCourse/_join_household.html.twig' with {} %}
+            {% endif %}
+            {% if accompanyingCourse.locationStatus == 'address' or accompanyingCourse.locationStatus == 'none' %}
+                {% include '@ChillPerson/AccompanyingCourse/_warning_address.html.twig' with {} %}
+            {% endif %}
         {% endif %}
     </div>
 
@@ -63,7 +75,7 @@
             <div class="flex-bloc row row-cols-1 g-0">
                 <div class="item-bloc col">
                 {{ requestor|chill_entity_render_box({
-                    'render': 'bloc', 'addLink': false, 'addEntity': true, 'addInfo': info
+                    'render': 'bloc', 'addLink': false, 'addEntity': true, 'addInfo': info, 'addAltNames': false
                 }) }}
                 </div>
             </div>
@@ -80,7 +92,7 @@
                 <div class="item-bloc col">
                     {% if r.person %}
                         {{ r.person|chill_entity_render_box({
-                            'render': 'bloc', 'addLink': false, 'addEntity': true, 'addInfo': true
+                            'render': 'bloc', 'addLink': false, 'addEntity': true, 'addInfo': true, 'addAltNames': false
                         }) }}
                     {% endif %}
                     {% if r.thirdParty %}
@@ -119,8 +131,21 @@
     </div>
 
     {% block contentActivity %}
-    <div class="activity mb-5">
+    <div class="activities mb-5">
         {% set person = null %}
+
+        {% set person_id = null %}
+        {% if person %}
+            {% set person_id = person.id %}
+        {% endif %}
+
+        {% set accompanying_course_id = null %}
+        {% if accompanyingCourse %}
+            {% set accompanying_course_id = accompanyingCourse.id %}
+        {% endif %}
+
+        <h2>{{ 'Activity list' |trans }}</h2>
+
         {% include 'ChillActivityBundle:Activity:list.html.twig' with { 'context': 'accompanyingCourse' } %}
     </div>
     {% endblock %}

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

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

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

@@ -1,94 +1,92 @@
 {% block content %}
-
-    {% for accompanying_period in accompanying_periods %}
     <div class="flex-table">
-        <div class="item-bloc">
-            <div class="item-row">
-                <div class="item-col">
-                    {{'period'|trans}} <b>#{{ accompanying_period.id }}</b>
-                    {% if accompanying_period.emergency %}
-                    &nbsp;
-                    <span class="badge bg-primary">
-                        {{- 'Emergency'|trans|upper -}}
-                    </span>
-                    {% endif %}
-                    {% if accompanying_period.confidential %}
-                    &nbsp;
-                    <span class="badge bg-primary">
-                        {{- 'Confidential'|trans|upper -}}
-                    </span>
-                    {% endif %}
-                    {% if accompanying_period.step == 'DRAFT' %}
-                    &nbsp;
-                    <span class="badge bg-primary">
-                        {{- 'Draft'|trans|upper -}}
-                    </span>
-                    {% else %}
-                    <span class="badge bg-primary">
-                        {{- 'Confirmed'|trans|upper -}}
-                    </span>
-                    {% endif %}
-                </div>
+        {% for accompanying_period in accompanying_periods %}
+            <div class="item-bloc">
 
-                <div class="item-col">
-                {% if chill_accompanying_periods.fields.user == 'visible'  %}
-                    {% if accompanying_period.user %}
-                    {{ accompanying_period.user.username }}
-                    {% else %}
-                        <span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
-                    {% endif %}
-                {% endif %}
-                </div>
-
-            </div>
-            <div class="item-row">
-                {% if accompanying_period.closingDate == null %}
-                    {{ 'accompanying_period.dates_from_%opening_date%'|trans({ '%opening_date%': accompanying_period.openingDate|format_date('long') } ) }}
-                {% else %}
-                    {{ 'accompanying_period.dates_from_%opening_date%_to_%closing_date%'|trans({
-                        '%opening_date%': accompanying_period.openingDate|format_date('long'),
-                        '%closing_date%': accompanying_period.closingDate|format_date('long')}
-                    ) }}
-
-                    {% if accompanying_period.isOpen == false %}
-                        <dl class="chill_view_data">
-                            <dt>{{ 'Closing motive'|trans }}&nbsp;:</dt>
-                            <dd>{{ accompanying_period.closingMotive|chill_entity_render_box }}</dd>
-                        </dl>
-                    {% endif %}
-
-                {% endif %}
-            </div>
-
-                <div class="item-col">
-                    <h3>{{ 'Participants'|trans }}</h3>
-                    {% if accompanying_period.participations.count > 0 %}
-                        {% for p in accompanying_period.participations %}
-                        <p>
-                            <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
-                                {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
-                            </a>
-                        </p>
-                        {% endfor %}
-                    {% else %}
-                        <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                    {% endif %}
-                </div>
-                <div class="item-col">
-                    <h3>{{ 'Requestor'|trans }}</h3>
-                    {% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
-                        {% if accompanying_period.requestorPerson is not null %}
-                        <p>{{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}</p>
+                <div class="item-row">
+                    <div class="item-col">
+                        <span class="h3">
+                            <i class="fa fa-fw fa-random"></i>
+                            <b>{{ accompanying_period.id }}</b>
+                        </span>
+                        {% if accompanying_period.step == 'DRAFT' %}
+                            <span class="badge bg-secondary">{{- 'Draft'|trans|upper -}}</span>
+                        {% else %}
+                            <span class="badge bg-success">{{- 'Confirmed'|trans|upper -}}</span>
                         {% endif %}
-                        {% if accompanying_period.requestorThirdParty is not null %}
-                        <p>{{ accompanying_period.requestorThirdParty.name }}</p>
+                        {% if accompanying_period.emergency %}
+                            <span class="badge bg-danger">{{- 'Emergency'|trans|upper -}}</span>
                         {% endif %}
-                    {% else %}
-                        <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                    {% endif %}
+                        {% if accompanying_period.confidential %}
+                            <span class="badge bg-warning">{{- 'Confidential'|trans|upper -}}</span>
+                        {% endif %}
+                    </div>
+                    <div class="item-col"></div>
+                </div>
+                <div class="item-row">
+                    <div class="item-col">
+                        {% if accompanying_period.closingDate == null %}
+                            {{ 'accompanying_period.dates_from_%opening_date%'|trans({ '%opening_date%': accompanying_period.openingDate|format_date('long') } ) }}
+                        {% else %}
+                            {{ 'accompanying_period.dates_from_%opening_date%_to_%closing_date%'|trans({
+                                '%opening_date%': accompanying_period.openingDate|format_date('long'),
+                                '%closing_date%': accompanying_period.closingDate|format_date('long')}
+                            ) }}
+                            {% if accompanying_period.isOpen == false %}
+                                <dl class="chill_view_data">
+                                    <dt>{{ 'Closing motive'|trans }}&nbsp;:</dt>
+                                    <dd>{{ accompanying_period.closingMotive|chill_entity_render_box }}</dd>
+                                </dl>
+                            {% endif %}
+                        {% endif %}
+                    </div>
+                    <div class="item-col">
+                        {% if chill_accompanying_periods.fields.user == 'visible'  %}
+                            {% if accompanying_period.user %}
+                                {{ accompanying_period.user.username }}
+                            {% else %}
+                                <span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
+                            {% endif %}
+                        {% endif %}
+                    </div>
                 </div>
 
-                <div class="item-col">
+                <div class="item-row separator">
+                    <div class="item-col"><h3>{{ 'Participants'|trans }}</h3></div>
+                    <div class="item-col">
+                        {% if accompanying_period.participations.count > 0 %}
+                            {% for p in accompanying_period.participations %}
+                            <p>
+                                <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
+                                    {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
+                                </a>
+                            </p>
+                            {% endfor %}
+                        {% else %}
+                            <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="item-row">
+                    <div class="item-col"><h3>{{ 'Requestor'|trans }}</h3></div>
+                    <div class="item-col">
+                        {% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
+                            {% if accompanying_period.requestorPerson is not null %}
+                                <p>
+                                    {{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}
+                                </p>
+                            {% endif %}
+                            {% if accompanying_period.requestorThirdParty is not null %}
+                                <p>
+                                    {{ accompanying_period.requestorThirdParty.name }}
+                                </p>
+                            {% endif %}
+                        {% else %}
+                            <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="item-row">
                     <h3>{{ 'Social issues'|trans }}</h3>
                     {% if accompanying_period.socialIssues.count > 0 %}
                         {% for si in accompanying_period.socialIssues %}
@@ -99,42 +97,46 @@
                     {% endif %}
                 </div>
 
-            <div class="item-row">
-                <ul class="record_actions">
-                    {# TODO if enable_accompanying_course_with_multiple_persons is true ... #}
-                    <li>
-                        <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': accompanying_period.id }) }}"
-                           class="btn btn-primary" title="{{ 'See accompanying period'|trans }}">
-                            <i class="fa fa-random"></i>
-                            {{ 'See this period'|trans }}
-                        </a>
-                    </li>
-                    {#
-                    <li>
-                        <a  href="{{ path('chill_person_accompanying_period_update', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}" class="btn btn-update no-content"></a>
-                    </li>
-                    {% if accompanying_period.isOpen == true %}
-                    <li>
-                        <a href="{{ path('chill_person_accompanying_period_close', {'person_id' : person.id}) }}" class="btn btn-update has-hidden change-icon">
-                            <i class="fa fa-lock" aria-hidden="true"></i><span class="show-on-hover">{{'Close accompanying period'|trans }}</span>
-                        </a>
-                    </li>
-                    {% endif %}
-                    {% if accompanying_period.canBeReOpened(person) == true %}
-                    <li>
-                        <a href="{{ path('chill_person_accompanying_period_re_open', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}" class="btn btn-create change-icon has-hidden">
-                            <i class="fa fa-unlock" aria-hidden="true"></i><span class="show-on-hover">{{'Re-open accompanying period'|trans }}</span>
-                        </a>
-                    </li>
-                    {% endif %}
-                    #}
-                </ul>
+                <div class="item-row separator">
+                    <ul class="record_actions">
+
+                        {# TODO if enable_accompanying_course_with_multiple_persons is true ... #}
+                        <li>
+                            <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': accompanying_period.id }) }}"
+                               class="btn btn-sm btn-show" title="{{ 'See accompanying period'|trans }}">{# {{ 'See this period'|trans }} #}</a>
+                        </li>
+
+                        {% if person is defined %}
+                            <li>
+                                <a  href="{{ path('chill_person_accompanying_period_update', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}"
+                                    class="btn btn-sm btn-update" title="{{ 'Edit accompanying period'|trans }}"></a>
+                            </li>
+                            {% if accompanying_period.isOpen == true %}
+                                <li>
+                                    <a href="{{ path('chill_person_accompanying_period_close', {'person_id' : person.id}) }}"
+                                       class="btn btn-sm btn-update change-icon">
+                                        <i class="fa fa-fw fa-lock" aria-hidden="true"></i>
+                                        {{'Close accompanying period'|trans }}
+                                    </a>
+                                </li>
+                            {% endif %}
+                            {% if accompanying_period.canBeReOpened(person) == true %}
+                                <li>
+                                    <a href="{{ path('chill_person_accompanying_period_re_open', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}"
+                                       class="btn btn-sm btn-create change-icon">
+                                        <i class="fa fa-fw fa-unlock" aria-hidden="true"></i>
+                                        {{'Re-open accompanying period'|trans }}
+                                    </a>
+                                </li>
+                            {% endif %}
+                        {% elseif household is defined %}
+                            {# TODO buttons specific for household ? #}
+                        {% endif %}
+
+                    </ul>
+                </div>
+
             </div>
-
-        </div>
+        {% endfor %}
     </div>
-    <p></p>
-    {% endfor %}
-
-
 {% endblock content %}

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

@@ -2,39 +2,47 @@
 
 {% set activeRouteKey = 'chill_person_accompanying_period_list' %}
 
-{% block title %}{{ 'Person accompanying period - %name%'|trans({ '%name%' : person.__toString}) }}{% endblock title %}
+{% block title %}{{ 'Accompanying period list'|trans }}{% endblock title %}
 
 {% block personcontent %}
-<h1>{{ 'Accompanying period list'|trans }}</h1>
+<div class="accompanyingcourse-list">
 
-{% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' %}
+    <h1>{{ 'Accompanying period list'|trans }}</h1>
 
-<ul class="record_actions sticky-form-buttons">
-    <li class="cancel">
-        <a href="{{ path ('chill_person_view', {'person_id' : person.id } ) }}" class="btn btn-cancel">
-            {{ 'Person details'|trans }}
-        </a>
-    </li>
-    <li>
-        <a href="{{ path ('chill_person_accompanying_course_new', {'person_id' : [ person.id ] } ) }}" class="btn btn-create">
-          {{ 'Create an accompanying period'|trans }}
-        </a>
-    </li>
-    {#
-    <li>
-        <a href="{{ path ('chill_person_accompanying_period_create', {'person_id' : person.id } ) }}" class="btn btn-create has-hidden">
-            <span class="show-on-hover">{{ 'Add an accompanying period in the past'|trans }}</span>
-        </a>
-    </li>
-    {% if person.isOpen == false %}
-    <li>
-        <a href="{{ path('chill_person_accompanying_period_open', {'person_id' : person.id} ) }}" class="btn btn-create change-icon has-hidden">
-            <i class="fa fa-unlock" aria-hidden="true"></i>
-            <span class="show-on-hover">{{'Begin a new accompanying period'|trans }}</span>
-        </a>
-    </li>
-    {% endif %}
-    #}
-</ul>
+    {% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' %}
 
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ path ('chill_person_view', {'person_id' : person.id } ) }}"
+               class="btn btn-cancel">{{ 'Person details'|trans }}
+            </a>
+        </li>
+        <li class="dropdown">
+            <a class="btn btn-create change-icon dropdown-toggle"
+               href="#" role="button" id="newAccompanyingPeriod" data-bs-toggle="dropdown" aria-expanded="false">
+                {{ 'Create an accompanying period'|trans }}
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="newAccompanyingPeriod">
+                <li>
+                    <a class="dropdown-item" href="{{ path ('chill_person_accompanying_course_new', {'person_id' : [ person.id ] } ) }}">
+                        <i class="fa fa-fw fa-plus"></i> {{ 'Create an accompanying period'|trans }}
+                    </a>
+                </li>
+                <li>
+                    <a class="dropdown-item" href="{{ path ('chill_person_accompanying_period_create', {'person_id' : person.id } ) }}">
+                        <i class="fa fa-fw fa-reply"></i> {{ 'Add an accompanying period in the past'|trans }}
+                    </a>
+                </li>
+                {% if person.isOpen == false %}
+                <li>
+                    <a class="dropdown-item" href="{{ path('chill_person_accompanying_period_open', {'person_id' : person.id} ) }}">
+                        <i class="fa fa-fw fa-unlock"></i> {{'Begin a new accompanying period'|trans }}
+                    </a>
+                </li>
+                {% endif %}
+            </ul>
+        </li>
+    </ul>
+
+</div>
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig

@@ -0,0 +1,72 @@
+{#
+    This Twig template include load vue_address component.
+    It push all variables from context in Address/App.vue.
+
+    OPTIONS
+    * mode          string ['edit*'|'new'|'create']
+    * address_id    integer
+    * backUrl       twig route:   path('route', {parameters})
+    * modalTitle    twig translated chain
+    * buttonText    twig translated chain
+    * buttonSize    bootstrap class like 'btn-sm'
+
+#}
+<div id="address"></div>
+
+<script type="text/javascript">
+    window.vueRootComponent = 'app';
+
+    {% if person is defined %}
+        window.entityType = 'person';
+        window.entityId = {{ person.id|e('js') }};
+    {% elseif household is defined %}
+        window.entityType = 'household';
+        window.entityId = {{ household.id|e('js') }};
+    {% endif %}
+
+    {% if 'edit' in app.request.get('_route') %}
+        window.addressId = {{ app.request.get('address_id')|e('js') }};
+        window.mode = 'edit';
+    {% elseif mode is defined and mode == 'edit' %}
+        window.addressId = {{ address_id|e('js') }};
+        window.mode = 'edit';
+    {% endif %}
+
+    {% if backUrl is not defined %}
+        {% if person is defined %}
+            window.backUrl = '{{ path('chill_person_address_list', { 'person_id': person.id })|e('js') }}';
+        {% elseif household is defined %}
+            window.backUrl = '{{ path('chill_person_household_addresses', { 'household_id': household.id })|e('js') }}';
+        {% endif %}
+    {% else %}
+        window.backUrl = '{{ backUrl|e('js') }}';
+    {% endif %}
+
+    {% if modalTitle is defined %}
+        window.modalTitle = '{{ modalTitle|trans|e('js') }}';
+    {% endif %}
+
+
+    {% if buttonText is defined %}
+        window.buttonText = '{{ buttonText|trans|e('js') }}';
+    {% endif %}
+
+    {% if buttonSize is defined %}
+        window.buttonSize = '{{ buttonSize|e('js') }}';
+    {% endif %}
+
+    {% if buttonDisplayText is defined and buttonDisplayText == false %}
+        window.buttonDisplayText = false;
+    {% endif %}
+
+    {% if binModalStep1 is defined and binModalStep1 == false %}
+        window.binModalStep1 = false;
+    {% endif %}
+
+    {% if binModalStep2 is defined and binModalStep2 == false %}
+        window.binModalStep2 = false;
+    {% endif %}
+</script>
+
+{{ encore_entry_script_tags('vue_address') }}
+{{ encore_entry_link_tags('vue_address') }}

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

@@ -18,29 +18,21 @@
 
 {% set activeRouteKey = '' %}
 
-{% block title 'Modify address for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) %}
+{% block title 'Edit an address'|trans %}
 
 {% block personcontent %}
-<div class="address-new">
-            
-            {% block content %}
-                <h1>{{ block('title') }}</h1>
-                <div id="address"></div>
-            {% endblock %}
+<div class="address-edit">
+
+    {% block content %}
+        <h1>{{ block('title') }}</h1>
+
+        {# include vue_address component #}
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            binModalStep1: false,
+            binModalStep2: false,
+        } %}
+
+    {% endblock %}
 
 </div>
 {% endblock %}
-
-{% block css %}
-    {{ encore_entry_link_tags('vue_address') }}
-{% endblock %}
-
-{% block js %}
-    <script type="text/javascript">
-        window.personId = {{ person.id|e('js') }};
-        window.addressId = {{ address.id|e('js') }};
-        window.mode = 'edit';
-        window.vueRootComponent = 'app';
-    </script>
-    {{ encore_entry_script_tags('vue_address') }}
-{% endblock %}

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

@@ -27,10 +27,15 @@
 
     <ul class="record_actions my-3">
         <li style="margin: auto;">
-            <a class="btn btn-lg btn-create"
-               href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
-                {{ 'Add an address'|trans }}
-            </a>
+
+            {# include vue_address component #}
+            {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                mode: 'new',
+                buttonSize: 'btn-lg',
+                buttonText: 'Add an address',
+                modalTitle: 'Add an address',
+            } %}
+
         </li>
     </ul>
 
@@ -58,10 +63,32 @@
             {% set row = row + 1 %}
             {% if address.validTo is not empty and address.validTo < previousRowFrom %}
                 <div class="{{ 'row' ~ row ~ ' ' }}col-a action">
+
+                    {# include vue_address component #}
                     <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
+                    {#
+                        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                            address_id: address.id,
+                            mode: 'edit',
+                            binModalStep1: false,
+                            binModalStep2: false,
+                        } %}
+                    #}
+
                 <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
                 <div class="{{ 'row' ~ row ~ ' ' }}col-c action">
+
+                    {# include vue_address component #}
                     <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
+                    {#
+                        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                            address_id: address.id,
+                            mode: 'edit',
+                            binModalStep1: false,
+                            binModalStep2: false,
+                        } %}
+                    #}
+
                 <div class="date">
                     {% if address.validTo is not empty %}
                         {{ address.validTo|format_date('short') }}
@@ -81,7 +108,10 @@
                         'has_no_address': true
                     }) }}
                     <ul class="record_actions">
+
+                        {# include vue_address component #}
                         <li><a href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : address.id } ) }}" class="btn btn-edit"></a></li>
+
                     </ul>
                 </div>
             {# endif #}
@@ -130,6 +160,7 @@
             </a>
         </li>
         <li>
+            {# include vue_address component #}
             <a class="btn btn-create"
                 href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
                 {{ 'Add an address'|trans }}

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

@@ -18,28 +18,22 @@
 
 {% set activeRouteKey = '' %}
 
-{% block title %}{{ 'New address for %name%'|trans({ '%name%': person.firstName|capitalize ~ ' ' ~ person.lastName } )|capitalize }}{% endblock %}
+{% block title %}{{ 'New address'|trans }}{% endblock %}
 
 {% block personcontent %}
 <div class="address-new">
 
-            {% block content %}
-                <h1>{{ block('title') }}</h1>
-                <div id="address"></div>
-            {% endblock %}
-            
+    {% block content %}
+        <h1>{{ block('title') }}</h1>
+
+        {# include vue_address component #}
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            binModalStep1: false,
+            binModalStep2: false,
+        } %}
+
+    {% endblock %}
+
 </div>
 {% endblock %}
 
-{% block css %}
-    {{ encore_entry_link_tags('vue_address') }}
-{% endblock %}
-
-{% block js %}
-    <script type="text/javascript">
-        window.personId = {{ person.id|e('js') }};
-        window.mode = 'new';
-        window.vueRootComponent = 'app';
-    </script>
-    {{ encore_entry_script_tags('vue_address') }}
-{% endblock %}

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

@@ -8,7 +8,9 @@
     * addId         bool
     * addInfo       bool
     * addAge        bool
+    * addCenter     bool
     * hLevel        integer
+    * address_multiline     bool
     * customButtons [
         'before'    Twig\Markup, (injected with macro)
         'replace'   Twig\Markup,
@@ -32,7 +34,6 @@
 
 {% macro label(person, options) %}
     <div class="entity-label">
-
         <div class="denomination {{ 'h' ~ options['hLevel'] }}">
             {%- if options['addLink'] and is_granted('CHILL_PERSON_SEE', person) -%}
                 <a href="{{ chill_path_add_return_path('chill_person_view', { 'person_id': person.id }) }}">
@@ -57,6 +58,15 @@
                 (person.gender == 'man') ? 'man' : 'neuter' %}
             <p class="moreinfo">
                 <i class="fa fa-fw {{ gender }}" title="{{ genderTitle|trans }}"></i>
+
+            {%- if person.deathdate is not null -%}
+
+                <time datetime="{{ person.deathdate|date('Y-m-d') }}" title="{{ 'Deathdate'|trans }}">
+                    {{ 'Date of death'|trans({'deathdate': person.deathdate|format_date("medium") }) }}
+                </time>
+
+
+            {%- else -%}
                 <time datetime="{{ person.birthdate|date('Y-m-d') }}" title="{{ 'Birthdate'|trans }}">
                 {{ 'Born the date'|trans({'gender': person.gender,
                     'birthdate': person.birthdate|format_date("medium") }) }}
@@ -66,6 +76,8 @@
                         {{ 'years_old'|trans({ 'age': person.age }) }}
                     </span>
                 {%- endif -%}
+
+            {%- endif -%}
             </p>
         {%- endif -%}
     {#- tricks to remove easily whitespace after template -#}
@@ -74,7 +86,9 @@
 
 
 {%- if render == 'raw' -%}
-    {{ _self.raw(person, options) }}
+    <span class="entity-raw">
+        {{ _self.raw(person, options) }}
+    </span>
 {%- endif -%}
 
 {%- if render == 'label' -%}
@@ -86,12 +100,13 @@
     <div class="item-col">
         {{ _self.label(person, options) }}
     </div>
-    <div class="item-col">
+    <div class="item-col separator">
         <ul class="list-content fa-ul">
+            {% set multiline = (options['address_multiline']) ? true : false %}
             {{ person.getLastAddress|chill_entity_render_box({
                 'render': 'list',
                 'with_picto': true,
-                'multiline': false,
+                'multiline': multiline,
                 'with_valid_from': false
             }) }}
             <li>
@@ -110,6 +125,12 @@
                     {% endif %}
                 {% endif %}
             </li>
+            {% if options['addCenter'] %}
+                <li>
+                    <i class="fa fa-li fa-long-arrow-right"></i>
+                    {{ person.center }}
+                </li>
+            {% endif %}
         </ul>
         <ul class="record_actions">
             {% if options['customButtons']['before'] is defined %}
@@ -118,7 +139,7 @@
 
             {%- if options['customButtons']['replace'] is not defined and is_granted('CHILL_PERSON_SEE', person) -%}
                 <li>
-                    <a class="btn btn-show" target="_blank" title="{{ 'Show person'|trans }}"
+                    <a class="btn btn-sm btn-show" target="_blank" title="{{ 'Show person'|trans }}"
                     href="{{ path('chill_person_view', { person_id: person.id }) }}"></a>
                 </li>
             {%- else -%}

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

@@ -5,24 +5,24 @@
 {% block content %}
 <div class="household-members">
 
-            <h1>{{ block('title') }}</h1>
+    <h1>{{ block('title') }}</h1>
 
-            {% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' %}
+    {% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' %}
 
-            <div class="form_control">
-                <ul class="record_actions">
-                    <li class="cancel">
-                        <a href="{{ path ('chill_person_household_summary', {'household_id' : household.id } ) }}" class="btn btn-cancel">
-                            {{ 'Household summary'|trans }}
-                        </a>
-                    </li>
-                    {#<li>
-                        <a href="{{ path ('chill_person_household_accompanying_course_new', {'household_id' : [ household.id ] } ) }}" class="btn btn-create">
-                          {{ 'Create an accompanying period'|trans }}
-                        </a>
-                    </li>#}
-                </ul>
-            </div>
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ path ('chill_person_household_summary', {'household_id' : household.id } ) }}" class="btn btn-cancel">
+                {{ 'Household summary'|trans }}
+            </a>
+        </li>
+        {#
+        <li>
+            <a href="{{ path ('chill_person_household_accompanying_course_new', {'household_id' : [ household.id ] } ) }}" class="btn btn-create">
+              {{ 'Create an accompanying period'|trans }}
+            </a>
+        </li>
+        #}
+    </ul>
 
 </div>
 {% endblock %}

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

@@ -6,21 +6,11 @@
     <h1>{{ block('title') }}</h1>
 
     <div>
-        <div id="household-address"></div>
+        {# include vue_address component #}
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            binModalStep1: false,
+            binModalStep2: false,
+        } %}
     </div>
 
-    {% block stylesheets %}
-        {{ encore_entry_link_tags('vue_address') }}
-    {% endblock %}
-
-    {% block js %}
-       <script type="text/javascript">
-            window.householdId = {{ household.id|e('js') }};
-            window.addressId = {{ address.id|e('js') }};
-            window.mode = 'edit';
-            window.vueRootComponent = 'app';
-        </script>
-        {{ encore_entry_script_tags('vue_household_address') }}
-    {% endblock %}
-
 {% endblock %}

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

@@ -6,19 +6,11 @@
     <h1>{{ block('title') }}</h1>
 
     <div>
-        <div id="household-address"></div>
+        {# include vue_address component #}
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            binModalStep1: false,
+            binModalStep2: false,
+        } %}
     </div>
 
-    {% block stylesheets %}
-        {{ encore_entry_link_tags('vue_address') }}
-    {% endblock %}
-
-    {% block js %}
-       <script type="text/javascript">
-            window.householdId = {{ household.id|e('js') }};
-            window.vueRootComponent = 'app';
-        </script>
-        {{ encore_entry_script_tags('vue_household_address') }}
-    {% endblock %}
-
 {% endblock %}

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

@@ -7,22 +7,28 @@
 
     <h1>{{ block('title') }}</h1>
 
-    <ul class="record_actions my-3">
-        <li style="margin: auto;">
-            <a class="btn btn-lg btn-create"
-               href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
-                {{ 'Move household'|trans }}
-            </a>
-        </li>
-    </ul>
+    {% if household.addresses|length == 0 %}
+        <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+    {% else %}
 
-    <div class="address-timeline grid">
+        <ul class="record_actions my-3">
+            <li style="margin: auto;">
 
-        {% if household.addresses|length == 0 %}
-            <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
-        {% else %}
-            <div class="top"><i class="fa fa-caret-up fa-3x"></i></div>
-        {% endif %}
+                {# include vue_address component #}
+                {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                    mode: 'new',
+                    backUrl: chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }),
+                    buttonSize: 'btn-lg',
+                    buttonText: 'Move household',
+                    modalTitle: 'Move household',
+                } %}
+
+            </li>
+        </ul>
+
+        <div class="address-timeline grid">
+
+        <div class="top"><i class="fa fa-caret-up fa-3x"></i></div>
 
         {% set row = 0 %}
         {% set previousRowFrom = null %}
@@ -34,7 +40,10 @@
 
                 <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
                 <div class="{{ 'row' ~ row ~ ' ' }}col-c action">
+
+                    {# include vue_address component #}
                     <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
+
                 <div class="date">
                     {% if address.validTo is not empty %}
                         {{ address.validTo|format_date('short') }}
@@ -54,7 +63,11 @@
                 }) }}
                 <ul class="record_actions">
                     <li>
-                        <a href="{{ path('chill_person_household_address_edit', { 'household_id': household.id, 'address_id' : address.id } ) }}" class="btn btn-edit"></a>
+
+                        {# include vue_address component #}
+                        <a href="{{ path('chill_person_household_address_edit', { 'household_id': household.id, 'address_id' : address.id } ) }}"
+                           class="btn btn-edit"></a>
+
                     </li>
                 </ul>
             </div>
@@ -68,6 +81,7 @@
             {% set previousRowFrom = address.validFrom %}
         {% endfor %}
     </div>
+    {% endif %}
 
     <ul class="record_actions sticky-form-buttons">
         <li class="cancel">
@@ -76,10 +90,13 @@
             </a>
         </li>
         <li>
+
+            {# include vue_address component #}
             <a class="btn btn-create"
-            href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
-            {{ 'Move household'|trans }}
+                href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
+                {{ 'Move household'|trans }}
             </a>
+
         </li>
     </ul>
 

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

@@ -85,8 +85,8 @@
     <div class="flex-table list-household-members">
       {% for m in members %}
         <div class="item-bloc">
-          <div class="item-row person">
-            <div class="item-col box-person">
+          <div class="item-row">
+            <div class="item-col">
               <div>
                 {{ m.person|chill_entity_render_box({'addLink': true}) }}
                 {% if m.holder %}
@@ -97,7 +97,7 @@
                 {{ 'Born the date'|trans({ 'gender': m.person.gender, 'birthdate': m.person.birthdate|format_date('long') }) }}
               </div>
             </div>
-            <div class="item-col box-where">
+            <div class="item-col">
               <ul class="list-content fa-ul">
                 {% if m.startDate is not empty %}
                   <li>{{ 'Since %date%'|trans({'%date%': m.startDate|format_date('long') }) }}</li>
@@ -155,8 +155,8 @@
       <div class="flex-table list-household-members">
         {% for m in members %}
           <div class="item-bloc">
-            <div class="item-row person">
-              <div class="item-col box-person">
+            <div class="item-row">
+              <div class="item-col">
                 <div>
                   {{ m.person|chill_entity_render_box({'addLink': true}) }}
                   {% if m.holder %}
@@ -167,7 +167,7 @@
                   {{ 'Born the date'|trans({ 'gender': m.person.gender, 'birthdate': m.person.birthdate|format_date('long') }) }}
                 </div>
               </div>
-              <div class="item-col box-where">
+              <div class="item-col">
                 <ul class="list-content fa-ul">
                   {% if m.startDate is not empty %}
                     <li>{{ 'Since %date%'|trans({'%date%': m.startDate|format_date('long') }) }}</li>

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

@@ -14,105 +14,107 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
-<h2>{{ title|default('Person search results')|trans }}</h2>
+<div class="list-person">
+    <h2>{{ title|default('Person search results')|trans }}</h2>
 
-<p>
-    {{ '%total% persons matching the search pattern:'|transchoice( total, { '%total%' : total}) }}
-    <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-sm">
-                <i class="fa fa-search" aria-hidden="true"></i> {{ pattern }}
-    </a>
-</p>
+    <p>
+        {{ '%total% persons matching the search pattern:'|transchoice( total, { '%total%' : total}) }}
+        <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-sm">
+                    <i class="fa fa-search" aria-hidden="true"></i> {{ pattern }}
+        </a>
+    </p>
 
-<p>{{ 'Results %start%-%end% of %total%'|trans({ '%start%' : start, '%end%': start + persons|length, '%total%' : total } ) }}</p>
+    <p>{{ 'Results %start%-%end% of %total%'|trans({ '%start%' : start, '%end%': start + persons|length, '%total%' : total } ) }}</p>
 
-{% if persons|length > 0 %}
+    {% if persons|length > 0 %}
 
-    <table>
-        <thead>
-            <tr>
-              <th class="chill-red">{% trans %}Name{% endtrans %}</th>
-                <th class="chill-green">{% trans %}Date of birth{% endtrans %}</th>
-                <th class="chill-orange">{% trans %}Nationality{% endtrans %}</th>
-                <th>&nbsp;</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for person in persons %}
+        <table class="table table-bordered border-dark align-middle">
+            <thead>
                 <tr>
-                    <td>
-                      {% set is_open = person.isOpen() %}
-                      <a href="{{ path('chill_person_view', { person_id : person.getId }) }}" {% if chill_person.fields.accompanying_period == 'visible' %}{% if is_open %} alt="{{ 'An accompanying period is open'|trans|e('html_attr') }}"{% else %} alt="{{ 'Any accompanying periods are open'|trans|e('html_attr') }}" {% endif %}{% endif %}>
-                            {{ person|chill_entity_render_box }}
-                            {% apply spaceless %}
-                                {% if chill_person.fields.accompanying_period == 'visible' %}
-                                  {% if is_open == false %}
-                                  <i class="fa fa-lock" ></i>
-                                  {% else %}
-                                  <i class="fa fa-unlock" ></i>
-                                  {% endif %}
-                                {% endif %}
-                            {% endapply %}
-                        </a>
-                    </td>
-                    <td>
-                        {% if person.birthdate is not null %}
-                            {{ person.birthdate|format_date('long') }}
-                        {% else %}{{  'Unknown date of birth'|trans }}{% endif %}
-                    </td>
-                    <td>
-                        {% if person.nationality is not null %}
-                            {{person.nationality.name | localize_translatable_string }}
-                        {% else %}
-                            {{ 'Without nationality'|trans }}
-                        {% endif %}
-                    </td>
-                    <td>
-                        <ul class="record_actions">
-                            <li><a class="btn btn-show" href="{{ path('chill_person_view', { person_id : person.getId }) }}"></a></li>
-                            {% if is_granted('CHILL_PERSON_UPDATE', person) %}
-                            <li><a class="btn btn-update" href="{{ path('chill_person_general_edit', { person_id : person.getId }) }}"></a></li>
+                  <th class="chill-orange">{% trans %}Name{% endtrans %}</th>
+                    <th class="chill-orange">{% trans %}Date of birth{% endtrans %}</th>
+                    <th class="chill-orange">{% trans %}Nationality{% endtrans %}</th>
+                    <th>&nbsp;</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for person in persons %}
+                    <tr>
+                        <td>
+                          {% set is_open = person.isOpen() %}
+                          <a href="{{ path('chill_person_view', { person_id : person.getId }) }}" {% if chill_person.fields.accompanying_period == 'visible' %}{% if is_open %} alt="{{ 'An accompanying period is open'|trans|e('html_attr') }}"{% else %} alt="{{ 'Any accompanying periods are open'|trans|e('html_attr') }}" {% endif %}{% endif %}>
+                                {{ person|chill_entity_render_box }}
+                                {% apply spaceless %}
+                                    {% if chill_person.fields.accompanying_period == 'visible' %}
+                                      {% if is_open == false %}
+                                      <i class="fa fa-lock" ></i>
+                                      {% else %}
+                                      <i class="fa fa-unlock" ></i>
+                                      {% endif %}
+                                    {% endif %}
+                                {% endapply %}
+                            </a>
+                        </td>
+                        <td>
+                            {% if person.birthdate is not null %}
+                                {{ person.birthdate|format_date('long') }}
+                            {% else %}{{  'Unknown date of birth'|trans }}{% endif %}
+                        </td>
+                        <td>
+                            {% if person.nationality is not null %}
+                                {{person.nationality.name | localize_translatable_string }}
+                            {% else %}
+                                {{ 'Without nationality'|trans }}
                             {% endif %}
-                        </ul>
-                    </td>
-                </tr>         
-            {% endfor %}
-        </tbody>
-    </table>
-            
-            <ul class="record_actions">
-                {% if is_granted('CHILL_PERSON_CREATE') %}
-                <li>
-                    <a href="{{ path('chill_person_new') }}" class="btn btn-create">
-                        {{ 'Add a person'|trans }}
-                    </a>
-                </li>
-                {% endif %}
+                        </td>
+                        <td>
+                            <ul class="record_actions">
+                                <li><a class="btn btn-show" href="{{ path('chill_person_view', { person_id : person.getId }) }}"></a></li>
+                                {% if is_granted('CHILL_PERSON_UPDATE', person) %}
+                                <li><a class="btn btn-update" href="{{ path('chill_person_general_edit', { person_id : person.getId }) }}"></a></li>
+                                {% endif %}
+                            </ul>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
 
-                {% if search_name != "person_similarity" %}
-                <li>
-                    <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
-                        <i class="fa fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
-                    </a>
-                </li>
-                {% endif %}
-                {% if preview == true and persons|length < total %}
-                <li>
-                    <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="btn btn-misc">
-                        {{ 'See all results'|trans }}
-                    </a>
-                </li>
-                {% endif %}
-            </ul>
-{% else %}
-    <ul class="record_actions">
-        <li>
-            <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
-                <i class="fa fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
-            </a>
-        </li>
-    </ul>
-{% endif %}
+                <ul class="record_actions">
+                    {% if is_granted('CHILL_PERSON_CREATE') %}
+                    <li>
+                        <a href="{{ path('chill_person_new') }}" class="btn btn-create">
+                            {{ 'Add a person'|trans }}
+                        </a>
+                    </li>
+                    {% endif %}
 
-{% if preview == false %}
-{{ chill_pagination(paginator) }}
-{% endif %}
+                    {% if search_name != "person_similarity" %}
+                    <li>
+                        <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
+                            <i class="fa fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
+                        </a>
+                    </li>
+                    {% endif %}
+                    {% if preview == true and persons|length < total %}
+                    <li>
+                        <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="btn btn-misc">
+                            {{ 'See all results'|trans }}
+                        </a>
+                    </li>
+                    {% endif %}
+                </ul>
+    {% else %}
+        <ul class="record_actions">
+            <li>
+                <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
+                    <i class="fa fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
+                </a>
+            </li>
+        </ul>
+    {% endif %}
+
+    {% if preview == false %}
+    {{ chill_pagination(paginator) }}
+    {% endif %}
+</div>

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

@@ -14,94 +14,96 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
-<h2>{{ title|default('Person search results by phonenumber')|trans }}</h2>
+<div class="list-by-phonenumber">
+    <h2>{{ title|default('Person search results by phonenumber')|trans }}</h2>
 
-<p>
-    {{ '%total% persons matching the search pattern:'|transchoice( total, { '%total%' : total}) }}
-    <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-sm">
-                <i class="fa fa-search" aria-hidden="true"></i> {{ pattern }}
-    </a>
-</p>
+    <p>
+        {{ '%total% persons matching the search pattern:'|transchoice( total, { '%total%' : total}) }}
+        <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-sm">
+                    <i class="fa fa-search" aria-hidden="true"></i> {{ pattern }}
+        </a>
+    </p>
 
-<p>{{ 'Results %start%-%end% of %total%'|trans({ '%start%' : start, '%end%': start + persons|length, '%total%' : total } ) }}</p>
+    <p>{{ 'Results %start%-%end% of %total%'|trans({ '%start%' : start, '%end%': start + persons|length, '%total%' : total } ) }}</p>
 
-{% if persons|length > 0 %}
+    {% if persons|length > 0 %}
 
-    <table class="person-list__--by-phonenumber">
-        <thead>
-            <tr>
-              <th class="chill-red">{% trans %}Name{% endtrans %}</th>
-                <th class="chill-green">{% trans %}Date of birth{% endtrans %}</th>
-                <th class="chill-orange">{% trans %}Phonenumber{% endtrans %}</th>
-                <th>&nbsp;</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for person in persons %}
+        <table class="table table-bordered border-dark align-middle">
+            <thead>
                 <tr>
-                    <td>
-                      {% set is_open = person.isOpen() %}
-                      <a href="{{ path('chill_person_view', { person_id : person.getId }) }}" {% if chill_person.fields.accompanying_period == 'visible' %}{% if is_open %} alt="{{ 'An accompanying period is open'|trans|e('html_attr') }}"{% else %} alt="{{ 'Any accompanying periods are open'|trans|e('html_attr') }}" {% endif %}{% endif %}>
-                            {{person.firstName}} {{person.lastName}}
-                            {% apply spaceless %}
-                                {% if chill_person.fields.accompanying_period == 'visible' %}
-                                  {% if is_open == false %}
-                                  <i class="fa fa-lock" ></i>
-                                  {% else %}
-                                  <i class="fa fa-unlock" ></i>
-                                  {% endif %}
+                  <th class="chill-orange">{% trans %}Name{% endtrans %}</th>
+                    <th class="chill-orange">{% trans %}Date of birth{% endtrans %}</th>
+                    <th class="chill-orange">{% trans %}Phonenumber{% endtrans %}</th>
+                    <th>&nbsp;</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for person in persons %}
+                    <tr>
+                        <td>
+                          {% set is_open = person.isOpen() %}
+                          <a href="{{ path('chill_person_view', { person_id : person.getId }) }}" {% if chill_person.fields.accompanying_period == 'visible' %}{% if is_open %} alt="{{ 'An accompanying period is open'|trans|e('html_attr') }}"{% else %} alt="{{ 'Any accompanying periods are open'|trans|e('html_attr') }}" {% endif %}{% endif %}>
+                                {{person.firstName}} {{person.lastName}}
+                                {% apply spaceless %}
+                                    {% if chill_person.fields.accompanying_period == 'visible' %}
+                                      {% if is_open == false %}
+                                      <i class="fa fa-lock" ></i>
+                                      {% else %}
+                                      <i class="fa fa-unlock" ></i>
+                                      {% endif %}
+                                    {% endif %}
+                                {% endapply %}
+                            </a>
+                        </td>
+                        <td>
+                            {% if person.birthdate is not null %}{{person.birthdate|format_date('long') }}{% else %}{{  'Unknown date of birth'|trans }}{% endif %}
+                        </td>
+                        <td class="person-list__--by-phonenumber__phones">
+                            <ul>
+                                {% if person.phonenumber is not empty %}
+                                    <li>
+                                        <a href="tel:{{ person.phonenumber }}"><img src="{{ asset('build/images/mobile-alt-solid.svg') }}">&nbsp;<pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>
+                                    </li>
                                 {% endif %}
-                            {% endapply %}
-                        </a>
-                    </td>
-                    <td>
-                        {% if person.birthdate is not null %}{{person.birthdate|format_date('long') }}{% else %}{{  'Unknown date of birth'|trans }}{% endif %}
-                    </td>
-                    <td class="person-list__--by-phonenumber__phones">
-                        <ul>
-                            {% if person.phonenumber is not empty %}
-                                <li>
-                                    <a href="tel:{{ person.phonenumber }}"><img src="{{ asset('build/images/mobile-alt-solid.svg') }}">&nbsp;<pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>
-                                </li>
-                            {% endif %}
-                            {% if person.mobilenumber is not empty%}
-                                <li>
-                                    <a href="tel:{{ person.mobilenumber }}"><img src="{{ asset('build/images/phone-alt-solid.svg') }}">&nbsp;<pre>{{ person.mobilenumber|chill_format_phonenumber }}</pre></a>
-                                </li>
-                            {% endif %}
-                        </ul>
-                    </td>
-                    <td>
-                        <ul class="record_actions">
-                            <li><a class="btn btn-show" href="{{ path('chill_person_view', { person_id : person.getId }) }}"></a></li>
-                            {% if is_granted('CHILL_PERSON_UPDATE', person) %}
-                            <li><a class="btn btn-update" href="{{ path('chill_person_general_edit', { person_id : person.getId }) }}"></a></li>
-                            {% endif %}
-                        </ul>
-                    </td>
-                </tr>         
-            {% endfor %}
-        </tbody>
-    </table>
-            
-            <ul class="record_actions">
-                {% if is_granted('CHILL_PERSON_CREATE') %}
-                <li>
-                    <a href="{{ path('chill_person_new') }}" class="btn btn-create">
-                        {{ 'Add a person'|trans }}
-                    </a>
-                </li>
-                {% endif %}
-                {% if preview == true and persons|length < total %}
-                <li>
-                    <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="btn btn-misc">
-                        {{ 'See all results'|trans }}
-                    </a>
-                </li>
-                {% endif %}
-            </ul>
-{% endif %}
+                                {% if person.mobilenumber is not empty%}
+                                    <li>
+                                        <a href="tel:{{ person.mobilenumber }}"><img src="{{ asset('build/images/phone-alt-solid.svg') }}">&nbsp;<pre>{{ person.mobilenumber|chill_format_phonenumber }}</pre></a>
+                                    </li>
+                                {% endif %}
+                            </ul>
+                        </td>
+                        <td>
+                            <ul class="record_actions">
+                                <li><a class="btn btn-show" href="{{ path('chill_person_view', { person_id : person.getId }) }}"></a></li>
+                                {% if is_granted('CHILL_PERSON_UPDATE', person) %}
+                                <li><a class="btn btn-update" href="{{ path('chill_person_general_edit', { person_id : person.getId }) }}"></a></li>
+                                {% endif %}
+                            </ul>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
 
-{% if preview == false %}
-{{ chill_pagination(paginator) }}
-{% endif %}
+                <ul class="record_actions">
+                    {% if is_granted('CHILL_PERSON_CREATE') %}
+                    <li>
+                        <a href="{{ path('chill_person_new') }}" class="btn btn-create">
+                            {{ 'Add a person'|trans }}
+                        </a>
+                    </li>
+                    {% endif %}
+                    {% if preview == true and persons|length < total %}
+                    <li>
+                        <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="btn btn-misc">
+                            {{ 'See all results'|trans }}
+                        </a>
+                    </li>
+                    {% endif %}
+                </ul>
+    {% endif %}
+
+    {% if preview == false %}
+    {{ chill_pagination(paginator) }}
+    {% endif %}
+</div>

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

@@ -1,181 +1,145 @@
-<h2>{{ title|default('Person search results')|trans }}</h2>
+{%  macro button_person(person) %}
+    <li>
+        <a href="{{ path('chill_person_accompanying_period_list', { 'person_id' : person.id }) }}"
+           class="btn btn-sm btn-primary" title="{{ 'See accompanying periods'|trans }}"><i class="fa fa-random"></i></a>
+    </li>
+{% endmacro %}
 
-<p>
-    {{ '%total% persons matching the search pattern:'|transchoice( total, { '%total%' : total}) }}
-    <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-sm">
-        <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ pattern }}
-    </a>
-</p>
+<div class="list-with-period">
 
-<p>{{ 'Results %start%-%end% of %total%'|trans({ '%start%' : start, '%end%': start + persons|length, '%total%' : total } ) }}</p>
+    <h2>{{ title|default('Person search results')|trans }}</h2>
 
-<ul class="record_actions">
-    {% if is_granted('CHILL_PERSON_CREATE') %}
-        <li>
-            <a href="{{ path('chill_person_new') }}" class="btn btn-create">
-                {{ 'Add a person'|trans }}
-            </a>
-        </li>
-    {% endif %}
-    {% if search_name != "person_similarity" %}
-        <li>
-            <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
-                <i class="fa fa-fw fa-search" aria-hidden="true"></i>
-                {{ 'Advanced search'|trans }}
-            </a>
-        </li>
-    {% endif %}
-    {% if preview == true and persons | length < total %}
-        <li>
-            <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="btn btn-misc">
-                {{ 'See all results'|trans }}
-            </a>
-        </li>
-    {% endif %}
-</ul>
+    <p>
+        {{ '%total% persons matching the search pattern:'|transchoice( total, { '%total%' : total}) }}
+        <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-sm">
+            <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ pattern }}
+        </a>
+    </p>
 
-
-{% if persons|length > 0 %}
-
-    <div class="flex-table list-with-period">
-        {% for person in persons %}
-
-            <div class="item-bloc">
-                <div class="item-row person">
-
-                    <div class="item-col box-person">
-                        <div>
-                            {{ person|chill_entity_render_box({
-                                'render': 'label', 'addLink': true, 'addInfo': true
-                            }) }}
-                        </div>
-                    </div>
-
-                    <div class="item-col box-where">
-                        <ul class="list-content fa-ul">
-                            <li><i class="fa fa-li fa-long-arrow-right"></i>
-                                {{ person.center }}
-                            </li>
-
-                            <li>
-                            {% if person.mobilenumber is not empty %}
-                                <i class="fa fa-li fa-mobile"></i> <a href="{{ 'tel:' ~ person.mobilenumber }}">{{ person.mobilenumber|chill_format_phonenumber }}</a>
-                            {% else %}
-                                <i class="fa fa-li fa-phone"></i>
-                                {% if person.phonenumber is not empty %}
-                                    <a href="{{ 'tel:' ~ person.phonenumber }}">{{ person.phonenumber|chill_format_phonenumber }}</a>
-                                {% else %}
-                                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                                {% endif %}
-                            {% endif %}
-                            </li>
-
-                            <li>
-                                <i class="fa fa-li fa-map-marker"></i>
-                                {% if person.getLastAddress is not null %}
-                                    {{ person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
-                                {% else %}
-                                    <span class="chill-no-data-statement">{{ 'No address'|trans }}</span>
-                                {% endif %}
-                            </li>
-
-                        </ul>
-                        <ul class="record_actions">
-                        <li>
-                            <a href="{{ path('chill_person_view', { 'person_id' : person.id }) }}" class="btn btn-show"
-                                title="{{ 'Open person file'|trans }}"></a>
-                        </li>
-                        <li>
-                            <a href="{{ path('chill_person_accompanying_period_list', { 'person_id' : person.id }) }}"
-                               class="btn btn-primary" title="{{ 'See accompanying periods'|trans }}">
-                                <i class="fa fa-random"></i></a>
-                        </li>
-                    </ul>
-                    </div>
-
-                </div>
-
-                {#- 'apps' is for AccompanyingPeriodParticipationS #}
-                {#- filter using acl -#}
-                {%- set apps = [] %}
-                {%- for app in person.openedParticipations %}
-                    {%- if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_SEE', app.accompanyingPeriod) %}
-                        {%- set apps = apps|merge([app]) %}
-                    {%- endif %}
-                {%- endfor %}
-
-                {% if apps|length > 0 %}
-                    {% for app in apps %}
-                    <div class="item-row periods">
-
-                        <div class="header">
-                            <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': app.accompanyingPeriod.id }) }}"
-                                class="btn btn-chill-green" title="{{ 'See accompanying period'|trans }}">
-                                <i class="fa fa-random"></i>
-                            </a>
-                            <span>{{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}</span>
-                            {% if app.accompanyingPeriod.user is not null %}
-                                <span class="user">
-                                    <abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
-                                    {{ app.accompanyingPeriod.user|chill_entity_render_box }}
-                                </span>
-                            {% endif %}
-                        </div>
-
-                        <div class="list-content">
-                            {% for issue in app.accompanyingPeriod.socialIssues|slice(0,2) %}
-                            <span>{{ issue|chill_entity_render_box }}</span>
-                            {% endfor %}
-
-                            {% if app.accompanyingPeriod.socialIssues|length > 2 %}
-                            <span class="more">{{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }}</span>
-                            {% endif %}
-                        </div>
-
-                    </div>
-                    {% endfor %}
-
-                {% endif %}
-
-            </div>
-
-        {% endfor %}
-    </div>
+    <p>{{ 'Results %start%-%end% of %total%'|trans({ '%start%' : start, '%end%': start + persons|length, '%total%' : total } ) }}</p>
 
     <ul class="record_actions">
         {% if is_granted('CHILL_PERSON_CREATE') %}
-        <li>
-            <a href="{{ path('chill_person_new') }}" class="btn btn-create">
-                {{ 'Add a person'|trans }}
-            </a>
-        </li>
+            <li>
+                <a href="{{ path('chill_person_new') }}" class="btn btn-create">
+                    {{ 'Add a person'|trans }}
+                </a>
+            </li>
         {% endif %}
         {% if search_name != "person_similarity" %}
-        <li>
-            <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
-                <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
-            </a>
-        </li>
+            <li>
+                <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
+                    <i class="fa fa-fw fa-search" aria-hidden="true"></i>
+                    {{ 'Advanced search'|trans }}
+                </a>
+            </li>
         {% endif %}
-        {% if preview == true and persons|length < total %}
-        <li>
-            <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="btn btn-misc">
-                {{ 'See all results'|trans }}
-            </a>
-        </li>
+        {% if preview == true and persons | length < total %}
+            <li>
+                <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="btn btn-misc">
+                    {{ 'See all results'|trans }}
+                </a>
+            </li>
         {% endif %}
     </ul>
 
-{% else %}
-    <ul class="record_actions">
-        <li>
-            <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
-                <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
-            </a>
-        </li>
-    </ul>
-{% endif %}
+    {% if persons|length > 0 %}
+        <div class="flex-table">
+            {% for person in persons %}
+                <div class="item-bloc">
 
-{% if preview == false %}
-    {{ chill_pagination(paginator) }}
-{% endif %}
+                    {{ person|chill_entity_render_box({
+                        'render': 'bloc',
+                        'addLink': true,
+                        'addInfo': true,
+                        'addAltNames': false,
+                        'addCenter': true,
+                        'address_multiline': true,
+                        'customButtons': { 'after': _self.button_person(person) }
+                    }) }}
+
+                    {#- 'apps' is for AccompanyingPeriodParticipationS #}
+                    {#- filter using acl -#}
+                    {%- set apps = [] %}
+                    {%- for app in person.openedParticipations %}
+                        {%- if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_SEE', app.accompanyingPeriod) %}
+                            {%- set apps = apps|merge([app]) %}
+                        {%- endif %}
+                    {%- endfor %}
+
+                    {% if apps|length > 0 %}
+                        <div class="item-row separator periods">
+                        {% for app in apps %}
+
+                            <div class="header">
+                                <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': app.accompanyingPeriod.id }) }}"
+                                    class="btn btn-chill-green" title="{{ 'See accompanying period'|trans }}">
+                                    <i class="fa fa-random"></i>
+                                </a>
+                                <span>
+                                    {{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}
+                                </span>
+                                {% if app.accompanyingPeriod.user is not null %}
+                                    <span class="user">
+                                        <abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
+                                        {{ app.accompanyingPeriod.user|chill_entity_render_box }}
+                                    </span>
+                                {% endif %}
+                            </div>
+
+                            <div class="list-content">
+                                {% for issue in app.accompanyingPeriod.socialIssues|slice(0,2) %}
+                                    <span>{{ issue|chill_entity_render_box }}</span>
+                                {% endfor %}
+                                {% if app.accompanyingPeriod.socialIssues|length > 2 %}
+                                    <span class="more">{{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }}</span>
+                                {% endif %}
+                            </div>
+
+                        {% endfor %}
+                        </div>
+                    {% endif %}
+
+                </div>
+            {% endfor %}
+        </div>
+
+        <ul class="record_actions">
+            {% if is_granted('CHILL_PERSON_CREATE') %}
+            <li>
+                <a href="{{ path('chill_person_new') }}" class="btn btn-create">
+                    {{ 'Add a person'|trans }}
+                </a>
+            </li>
+            {% endif %}
+            {% if search_name != "person_similarity" %}
+            <li>
+                <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
+                    <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
+                </a>
+            </li>
+            {% endif %}
+            {% if preview == true and persons|length < total %}
+            <li>
+                <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="btn btn-misc">
+                    {{ 'See all results'|trans }}
+                </a>
+            </li>
+            {% endif %}
+        </ul>
+    {% else %}
+
+        <ul class="record_actions">
+            <li>
+                <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="btn btn-action">
+                    <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
+                </a>
+            </li>
+        </ul>
+    {% endif %}
+
+    {% if preview == false %}
+        {{ chill_pagination(paginator) }}
+    {% endif %}
+
+</div>

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

@@ -41,11 +41,9 @@ This view should receive those arguments:
         <div class="col-12">
             <figure class="person-details">
                 <h2 class="chill-red">{{ 'Memo'|trans }}</h2>
-
                 <div class="chill-user-quote">
                     {{ person.memo|chill_markdown_to_html }}
                 </div>
-
             </figure>
         </div>
         {% endif %}
@@ -68,6 +66,7 @@ This view should receive those arguments:
 
                     <dt>{{ 'Gender'|trans }}&nbsp;:</dt>
                     <dd>{{ ( person.gender|default('Not given'))|trans }}</dd>
+
                 </dl>
             </figure>
         </div>
@@ -93,6 +92,7 @@ This view should receive those arguments:
                         <dd><span class="chill-no-data-statement">{{ 'Not given'|trans }}</span></dd>
                     {% endif %}
                     {%- endif -%}
+
                     {%- if chill_person.fields.country_of_birth == 'visible' -%}
                     <dt>{{ 'Country of birth'|trans }}&nbsp;:</dt>
                     <dd>{% apply spaceless %}
@@ -106,6 +106,17 @@ This view should receive those arguments:
                 </dl>
             </figure>
         </div>
+
+        {% if person.genderComment.comment is not empty %}
+            <div class="col-12">
+                <figure class="person-details">
+                    <h2 class="chill-beige">{{ 'Gender comment'|trans }}&nbsp;:</h2>
+                    <div class="chill-user-quote">
+                        {{ person.genderComment.comment|chill_markdown_to_html }}
+                    </div>
+                </figure>
+            </div>
+        {% endif %}
     </div>
 
     <div class="row">
@@ -116,14 +127,14 @@ This view should receive those arguments:
 
                 {%- if chill_person.fields.nationality == 'visible' -%}
                 <dl>
-                  <dt>{{ 'Nationality'|trans }}&nbsp;:</dt>
-                    <dd>
-                        {% if person.nationality is not null %}
-                            {{ person.nationality.name|localize_translatable_string }}
-                        {% else %}
-                            <span class="chill-no-data-statement">{{ 'Without nationality'|trans }}</span>
-                        {% endif %}
-                    </dd>
+                    <dt>{{ 'Nationality'|trans }}&nbsp;:</dt>
+                        <dd>
+                            {% if person.nationality is not null %}
+                                {{ person.nationality.name|localize_translatable_string }}
+                            {% else %}
+                                <span class="chill-no-data-statement">{{ 'Without nationality'|trans }}</span>
+                            {% endif %}
+                        </dd>
                 </dl>
                 {%- endif -%}
                 {%- if chill_person.fields.spoken_languages == 'visible' -%}
@@ -150,6 +161,17 @@ This view should receive those arguments:
                             <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
                         {% endif %}
                     </dd>
+
+                    <dt>{{ 'Comment on the marital status'|trans }}&nbsp;:</dt>
+                    <dd>
+                        {% if person.maritalStatusComment.comment is not empty %}
+                            <blockquote class="chill-user-quote">
+                                {{ person.maritalStatusComment.comment|chill_markdown_to_html }}
+                            </blockquote>
+                        {% else %}
+                            <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                        {% endif %}
+                    </dd>
                 </dl>
                 {%- endif -%}
             </figure>
@@ -178,10 +200,15 @@ This view should receive those arguments:
 
                         <ul class="list-inline text-right mt-2">
                             <li class="list-inline-item">
-                                <a class="btn btn-warning btn-sm" title="{{ 'Edit'|trans }}"
-                                   href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : person.lastAddress.id } ) }}">
-                                    <i class="fa fa-pencil fa-fw"></i>
-                                </a>
+                                {# include vue_address component #}
+                                {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                                    mode: 'edit',
+                                    address_id: person.lastAddress.id,
+                                    backUrl: path('chill_person_view', { 'person_id': person.id }),
+                                    modalTitle: 'Edit address', buttonText: 'Edit address',
+                                    buttonSize: 'btn-sm',
+                                    buttonDisplayText: false
+                                } %}
                             </li>
                             <li class="list-inline-item">
                                 <a class="btn btn-secondary btn-sm" title="{{ "Addresses history"|trans }}"
@@ -201,35 +228,55 @@ This view should receive those arguments:
                 </dl>
                 {%- endif -%}
 
-
                 {%- if chill_person.fields.email == 'visible' -%}
                 <dl>
                     <dt>{{ 'Email'|trans }}&nbsp;:</dt>
-                    <dd>{% if person.email is not empty %}<blockquote class="chill-user-quote">{{ person.email|nl2br }}</blockquote>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>{% endif %}</dd>
+                    <dd>{% if person.email is not empty %}
+                            <a href="{{ 'mailto:' ~ person.email }}" class="email">{{ person.email|nl2br }}</a>
+                        {% else %}
+                            <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                        {% endif %}
+                    </dd>
                 </dl>
                 {%- endif -%}
+
                 {%- if chill_person.fields.phonenumber == 'visible' -%}
                 <dl>
                     <dt>{{ 'Phonenumber'|trans }}&nbsp;:</dt>
                     <dd>{% if person.phonenumber is not empty %}<a href="tel:{{ person.phonenumber }}"><pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
                 </dl>
                 {% endif %}
+
                 {%- if chill_person.fields.mobilenumber == 'visible' -%}
                 <dl>
                     <dt>{{ 'Mobilenumber'|trans }}&nbsp;:</dt>
                     <dd>{% if person.mobilenumber is not empty %}<a href="tel:{{ person.mobilenumber }}"><pre>{{ person.mobilenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
                 </dl>
                 {% endif %}
+
+                {# TODO
+                    display collection of others phonenumbers
+                #}
+
                 {%- if chill_person.fields.contact_info == 'visible' -%}
                 <dl>
                     <dt>{{ 'Notes on contact information'|trans }}&nbsp;:</dt>
-                    <dd>{% if person.contactInfo is not empty %}{{ person.contactInfo|nl2br }}{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>{% endif %}</dd>
+                    <dd>
+                        {% if person.contactInfo is not empty %}
+                            <blockquote class="chill-user-quote">
+                                {{ person.contactInfo|chill_markdown_to_html }}
+                            </blockquote>
+                        {% else %}
+                            <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                        {% endif %}
+                    </dd>
                 </dl>
                 {%- endif -%}
 
             </figure>
         </div>
         {%- endif -%}
+
     </div>
 
     {% if cFGroup and (cFGroup.getActiveCustomFields|length > 0) %}

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

@@ -0,0 +1,27 @@
+{% extends '@ChillPerson/Admin/layout.html.twig' %}
+
+{% block layout_wvm_content %}
+    {% embed '@ChillMain/CRUD/_index.html.twig' %}
+        {% block table_entities_thead_tr %}
+            <th>{{ 'Id'|trans }}</th>
+            <th>{{ 'Title'|trans }}</th>
+            <th>&nbsp;</th>
+        {% endblock %}
+
+        {% block table_entities_tbody %}
+        {% for entity in entities %}
+            <tr>
+                <td>{{ entity.id }}</td>
+                <td>{{ entity.title|localize_translatable_string }}</td>
+                <td>
+                    <ul class="record_actions">
+                        <li>
+                            <a href="{{ chill_path_add_return_path('chill_crud_social_evaluation_edit', { 'id': entity.id }) }}" class="sc-button bt-edit"></a>
+                        </li>
+                    </ul>
+                </td>
+            </tr>
+        {% endfor %}
+        {% endblock %}
+    {% endembed %}
+{% endblock %}

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

@@ -0,0 +1,27 @@
+{% extends '@ChillPerson/Admin/layout.html.twig' %}
+
+{% block layout_wvm_content %}
+    {% embed '@ChillMain/CRUD/_index.html.twig' %}
+        {% block table_entities_thead_tr %}
+            <th>{{ 'Id'|trans }}</th>
+            <th>{{ 'Title'|trans }}</th>
+            <th>&nbsp;</th>
+        {% endblock %}
+
+        {% block table_entities_tbody %}
+        {% for entity in entities %}
+            <tr>
+                <td>{{ entity.id }}</td>
+                <td>{{ entity.title|localize_translatable_string }}</td>
+                <td>
+                    <ul class="record_actions">
+                        <li>
+                            <a href="{{ chill_path_add_return_path('chill_crud_social_goal_edit', { 'id': entity.id }) }}" class="sc-button bt-edit"></a>
+                        </li>
+                    </ul>
+                </td>
+            </tr>
+        {% endfor %}
+        {% endblock %}
+    {% endembed %}
+{% endblock %}

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

@@ -0,0 +1,27 @@
+{% extends '@ChillPerson/Admin/layout.html.twig' %}
+
+{% block layout_wvm_content %}
+    {% embed '@ChillMain/CRUD/_index.html.twig' %}
+        {% block table_entities_thead_tr %}
+            <th>{{ 'Id'|trans }}</th>
+            <th>{{ 'Title'|trans }}</th>
+            <th>&nbsp;</th>
+        {% endblock %}
+
+        {% block table_entities_tbody %}
+        {% for entity in entities %}
+            <tr>
+                <td>{{ entity.id }}</td>
+                <td>{{ entity.title|localize_translatable_string }}</td>
+                <td>
+                    <ul class="record_actions">
+                        <li>
+                            <a href="{{ chill_path_add_return_path('chill_crud_social_result_edit', { 'id': entity.id }) }}" class="sc-button bt-edit"></a>
+                        </li>
+                    </ul>
+                </td>
+            </tr>
+        {% endfor %}
+        {% endblock %}
+    {% endembed %}
+{% endblock %}

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

@@ -0,0 +1,27 @@
+{% extends '@ChillPerson/Admin/layout.html.twig' %}
+
+{% block layout_wvm_content %}
+    {% embed '@ChillMain/CRUD/_index.html.twig' %}
+        {% block table_entities_thead_tr %}
+            <th>{{ 'Id'|trans }}</th>
+            <th>{{ 'Title'|trans }}</th>
+            <th>&nbsp;</th>
+        {% endblock %}
+
+        {% block table_entities_tbody %}
+        {% for entity in entities %}
+            <tr>
+                <td>{{ entity.id }}</td>
+                <td>{{ entity.title|localize_translatable_string }}</td>
+                <td>
+                    <ul class="record_actions">
+                        <li>
+                            <a href="{{ chill_path_add_return_path('chill_crud_social_action_edit', { 'id': entity.id }) }}" class="sc-button bt-edit"></a>
+                        </li>
+                    </ul>
+                </td>
+            </tr>
+        {% endfor %}
+        {% endblock %}
+    {% endembed %}
+{% endblock %}

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

@@ -0,0 +1,27 @@
+{% extends '@ChillPerson/Admin/layout.html.twig' %}
+
+{% block layout_wvm_content %}
+    {% embed '@ChillMain/CRUD/_index.html.twig' %}
+        {% block table_entities_thead_tr %}
+            <th>{{ 'Id'|trans }}</th>
+            <th>{{ 'Title'|trans }}</th>
+            <th>&nbsp;</th>
+        {% endblock %}
+
+        {% block table_entities_tbody %}
+        {% for entity in entities %}
+            <tr>
+                <td>{{ entity.id }}</td>
+                <td>{{ entity.title|localize_translatable_string }}</td>
+                <td>
+                    <ul class="record_actions">
+                        <li>
+                            <a href="{{ chill_path_add_return_path('chill_crud_social_issue_edit', { 'id': entity.id }) }}" class="sc-button bt-edit"></a>
+                        </li>
+                    </ul>
+                </td>
+            </tr>
+        {% endfor %}
+        {% endblock %}
+    {% endembed %}
+{% endblock %}

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

@@ -0,0 +1,12 @@
+{% extends '@ChillPerson/Admin/layout.html.twig' %}
+
+{% block title %}
+{% include('@ChillMain/CRUD/_edit_title.html.twig') %}
+{% endblock %}
+
+{% block layout_wvm_content %}
+{% embed '@ChillMain/CRUD/_edit_content.html.twig' %}
+    {% block content_form_actions_view %}{% endblock %}
+    {% block content_form_actions_save_and_show %}{% endblock %}
+{% endembed %}
+{% endblock %}

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

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