Merge remote-tracking branch 'origin/master' into issue230_person

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

@@ -22,9 +22,9 @@ const getUsers = () => {
 };
 
 const getReferrersSuggested = (course) => {
-  const url = `/api/1.0/person/accompanying-course/${course.id}/referrers-suggested.json`;
+   const url = `/api/1.0/person/accompanying-course/${course.id}/referrers-suggested.json`;
 
-  return fetchResults(url);
+   return fetchResults(url);
 }
 
 /*

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

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

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

@@ -4,7 +4,7 @@
 
       <div class="mb-4">
          <label for="selectOrigin">
-            {{ $t('origin.label') }}
+            {{ $t('origin.label.fr') }}
          </label>
 
          <VueMultiselect
@@ -75,8 +75,7 @@ export default {
             });
       },
       transText ({ text }) {
-         const parsedText = JSON.parse(text);
-         return parsedText.fr;
+         return text.fr;
       },
    }
 }

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

@@ -48,7 +48,7 @@
    </div>
 
    <div v-if="suggestedPersons.length > 0">
-      <ul class="list-suggest add-items">
+      <ul class="list-suggest add-items inline">
          <li v-for="p in suggestedPersons" :key="p.id" @click="addSuggestedPerson(p)">
              <span>{{ p.text }}</span>
           </li>

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

@@ -20,7 +20,7 @@
       </VueMultiselect>
 
       <template v-if="referrersSuggested.length > 0">
-         <ul class="list-suggest add-items">
+         <ul class="list-suggest add-items inline">
             <li v-for="u in referrersSuggested" @click="updateReferrer(u)">
                <span>
                   <user-render-box-badge :user="u"></user-render-box-badge>

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

@@ -134,7 +134,7 @@
    </div>
 
    <div v-if="accompanyingCourse.requestor === null && suggestedEntities.length > 0">
-      <ul class="list-suggest add-items">
+      <ul class="list-suggest add-items inline">
          <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
              <span>{{ p.text }}</span>
           </li>

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

@@ -20,21 +20,21 @@
    </div>
 
    <div v-if="suggestedEntities.length > 0">
-      <ul class="list-suggest add-items">
+      <ul class="list-suggest add-items inline">
          <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
-             <span>{{ p.text }}</span>
-          </li>
-        </ul>
+            <span>{{ p.text }}</span>
+         </li>
+      </ul>
    </div>
 
    <div>
       <add-persons
-        buttonTitle="resources.add_resources"
-        modalTitle="resources.add_resources"
-        v-bind:key="addPersons.key"
-        v-bind:options="addPersons.options"
-        @addNewPersons="addNewPersons"
-        ref="addPersons"> <!-- to cast child method -->
+      buttonTitle="resources.add_resources"
+      modalTitle="resources.add_resources"
+      v-bind:key="addPersons.key"
+      v-bind:options="addPersons.options"
+      @addNewPersons="addNewPersons"
+      ref="addPersons"> <!-- to cast child method -->
       </add-persons>
    </div>
 
@@ -87,17 +87,17 @@ export default {
             }
          )
           // filter persons appearing twice in requestor and resources
-          .filter(
-              (e, index, suggested) => {
-                for (let i = 0; i < suggested.length; i = i+1) {
-                  if (i < index && e.id === suggested[i].id) {
-                    return false
-                  }
-                }
+         .filter(
+            (e, index, suggested) => {
+               for (let i = 0; i < suggested.length; i = i+1) {
+               if (i < index && e.id === suggested[i].id) {
+                  return false
+               }
+               }
 
-                return true;
-              }
-          )
+               return true;
+            }
+         )
    }),
    methods: {
       removeResource(item) {

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

@@ -2,33 +2,81 @@
    <person-render-box render="bloc"
       v-if="resource.resource.type === 'person'"
       :person="resource.resource"
-      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3, isConfidential : true }"
-      >
+      :options="{
+         addInfo : true,
+         addId : false,
+         addEntity: true,
+         addLink: false,
+         addAltNames: true,
+         addAge : false,
+         hLevel : 3,
+         isConfidential : true
+      }">
       <template v-slot:record-actions>
          <ul class="record_actions">
-            <!--
-            <button-location v-if="hasCurrentHouseholdAddress" :person="resource.resource"></button-location>
-            -->
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly"></on-the-fly></li>
-            <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="show">
+               </on-the-fly>
+            </li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="edit"
+                  @saveFormOnTheFly="saveFormOnTheFly">
+               </on-the-fly>
+            </li>
+            <li>
+               <button
+                  class="btn btn-sm btn-remove"
+                  :title="$t('action.remove')"
+                  @click.prevent="$emit('remove', resource)">
+               </button>
+            </li>
          </ul>
       </template>
-
    </person-render-box>
+
    <third-party-render-box
       v-if="resource.resource.type === 'thirdparty'"
       :thirdparty="resource.resource"
-      :options="{ addLink : false, addId : false, addEntity: true, addInfo: false, hLevel: 3 }"
-      >
+      :options="{
+         addLink : false,
+         addId : false,
+         addEntity: true,
+         addInfo: false,
+         //addComment: true,
+         hLevel: 3
+      }">
       <template v-slot:record-actions>
          <ul class="record_actions">
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly"></on-the-fly></li>
-            <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="show">
+               </on-the-fly>
+            </li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="edit"
+                  @saveFormOnTheFly="saveFormOnTheFly">
+               </on-the-fly>
+            </li>
+            <li>
+               <button
+                  class="btn btn-sm btn-remove"
+                  :title="$t('action.remove')"
+                  @click.prevent="$emit('remove', resource)">
+               </button>
+            </li>
          </ul>
       </template>
-
    </third-party-render-box>
 </template>
 

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

@@ -23,7 +23,7 @@ if (root === 'app') {
       .use(store)
       .use(i18n)
       .use(VueToast, {
-         position: "top",
+         position: "bottom-right",
          type: "error",
          duration: 5000,
          dismissible: true

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

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

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

@@ -5,24 +5,47 @@
 
   <div id="awc_create_form">
 
-    <div id="picking">
-      <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
-
-      <div v-for="si in socialIssues">
-        <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
+      <div id="picking">
+          <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
+          <div v-for="si in socialIssues">
+            <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
+          </div>
+      <div class="my-3">
+        <div class="col-11">
+          <vue-multiselect
+              name="otherIssues"
+              label="text"
+              track-by="id"
+              open-direction="bottom"
+              :close-on-select="true"
+              :preserve-search="false"
+              :reset-after="true"
+              :hide-selected="true"
+              :taggable="false"
+              :multiple="false"
+              :searchable="true"
+              :allow-empty="true"
+              :show-labels="false"
+              :loading="issueIsLoading"
+              :placeholder="$t('choose_other_social_issue')"
+              :options="socialIssuesOther"
+              @select="addIssueInList">
+          </vue-multiselect>
+        </div>
       </div>
-
       <div v-if="hasSocialIssuePicked">
         <h2>{{ $t('pick_an_action') }}</h2>
-        <vue-multiselect
-          v-model="socialActionPicked"
-          label="text"
-          :options="socialActionsReachables"
-          :searchable="true"
-          :close-on-select="true"
-          :show-labels="true"
-          track-by="id"
-        ></vue-multiselect>
+        <div class="col-11">
+          <vue-multiselect
+            v-model="socialActionPicked"
+            label="text"
+            :options="socialActionsReachables"
+            :searchable="true"
+            :close-on-select="true"
+            :show-labels="true"
+            track-by="id"
+          ></vue-multiselect>
+        </div>
       </div>
 
       <div v-if="isLoadingSocialActions">
@@ -54,7 +77,7 @@
         <p>{{ $t('form_has_errors') }}</p>
 
         <ul>
-          <li v-for="e in errors">
+          <li v-for="e in errors" :key="e.id">
             {{ e }}
           </li>
         </ul>
@@ -63,9 +86,9 @@
       <div>
         <ul class="record_actions">
           <li class="cancel">
-            <a href="#" class="btn btn-cancel">
+            <button class="btn btn-cancel" @click="goToPrevious">
               {{ $t('action.cancel') }}
-            </a>
+            </button>
           </li>
           <li v-if="hasSocialActionPicked">
             <button class="btn btn-save" v-show="!isPostingWork" @click="submit">
@@ -82,43 +105,7 @@
 
 </template>
 
-<style lang="scss">
 
-#awc_create_form {
-  display: grid;
-  grid-template-areas:
-    "picking picking"
-    "start_date end_date"
-    "confirm confirm"
-    ;
-  grid-template-columns: 50% 50%;
-  column-gap: 1.5rem;
-
-  #picking {
-    grid-area: picking;
-
-    #persons {
-      ul {
-        padding: 0;
-
-        list-style-type: none;
-      }
-    }
-  }
-
-  #start_date {
-    grid-area: start_date;
-  }
-
-  #end_date {
-    grid-area: end_date;
-  }
-
-  #confirm {
-    grid-area: confirm;
-  }
-}
-</style>
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
@@ -133,10 +120,11 @@ const i18n = {
       endDate: "Date de fin",
       form_has_errors: "Le formulaire comporte des erreurs",
       pick_social_issue: "Choisir une problématique sociale",
+      pick_other_social_issue: "Veuillez choisir un autre problématique",
       pick_an_action: "Choisir une action d'accompagnement",
       pick_social_issue_linked_with_action: "Indiquez la problématique sociale liée à l'action d'accompagnement",
       persons_involved: "Usagers concernés",
-
+      choose_other_social_issue: "Veuillez choisir un autre problématique",
     }
   }
 }
@@ -145,17 +133,38 @@ export default {
   name: 'App',
   components: {
     VueMultiselect,
-     PersonRenderBox,
+    PersonRenderBox,
   },
   methods: {
     submit() {
-      this.$store.dispatch('submit');
-    }
+      this.$store.dispatch('submit')
+          .catch(({name, violations}) => {
+          if (name === 'ValidationException' || name === 'AccessException') {
+            violations.forEach((violation) => this.$toast.open({message: violation}));
+          } else {
+            this.$toast.open({message: 'An error occurred'})
+          }
+      });
+    },
+    addIssueInList(value) {
+      this.$store.commit('addIssueInList', value);
+      this.$store.commit('removeIssueInOther', value);
+      this.$store.dispatch('pickSocialIssue', value.id);
+    },
+    goToPrevious() {
+      let params = new URLSearchParams(window.location.search);
+      if (params.has('returnPath')) {
+        window.location.replace(params.get('returnPath'));
+      } else {
+        return;
+      }
+    },
   },
   i18n,
   computed: {
     ...mapState([
       'socialIssues',
+      'socialIssuesOther',
       'socialActionsReachables',
       'errors',
       'personsReachables',
@@ -170,12 +179,10 @@ export default {
     personsPicked: {
       get() {
         let s = this.$store.state.personsPicked.map(p => p.id);
-        console.log('persons picked', s);
 
         return s;
       },
       set(v) {
-        console.log('persons picked', v);
         this.$store.commit('setPersonsPickedIds', v);
       }
     },
@@ -218,6 +225,11 @@ export default {
         this.$store.commit('setEndDate', ISOToDate(value));
       }
     },
+    setSocialIssue: {
+      set() {
+        this.$store.dispatch('setSocialIssue', socialIssues[socialIssues.length - 1])
+      }
+    }
   }
 }
 
@@ -228,10 +240,48 @@ export default {
 @import 'ChillPersonAssets/chill/scss/mixins';
 @import 'ChillMainAssets/chill/scss/chill_variables';
 span.badge {
-   @include badge_social($social-issue-color);
-   font-size: 95%;
-   margin-bottom: 5px;
-   margin-right: 1em;
-   margin-left: 1em;
+  @include badge_social($social-issue-color);
+  font-size: 95%;
+  margin-bottom: 5px;
+  margin-right: 1em;
+  margin-left: 1em;
 }
-</style>
+</style>
+
+<style lang="scss">
+
+#awc_create_form {
+  display: grid;
+  grid-template-areas:
+    "picking picking"
+    "start_date end_date"
+    "confirm confirm"
+    ;
+  grid-template-columns: 50% 50%;
+  column-gap: 1.5rem;
+
+  #picking {
+    grid-area: picking;
+
+    #persons {
+      ul {
+        padding: 0;
+
+        list-style-type: none;
+      }
+    }
+  }
+
+  #start_date {
+    grid-area: start_date;
+  }
+
+  #end_date {
+    grid-area: end_date;
+  }
+
+  #confirm {
+    grid-area: confirm;
+  }
+}
+</style>

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

@@ -2,7 +2,8 @@
 import { createStore } from 'vuex';
 import { datetimeToISO } from 'ChillMainAssets/chill/js/date.js';
 import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
-import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
+// import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -12,6 +13,7 @@ const store = createStore({
     accompanyingCourse: window.accompanyingCourse,
     socialIssues: window.accompanyingCourse.socialIssues,
     socialIssuePicked: null,
+    socialIssuesOther: [],
     socialActionsReachables: [],
     socialActionPicked: null,
     personsPicked: window.accompanyingCourse.participations.filter(p => p.endDate == null)
@@ -26,11 +28,9 @@ const store = createStore({
   },
   getters: {
     hasSocialActionPicked(state) {
-      console.log(state.socialActionPicked);
       return null !== state.socialActionPicked;
     },
     hasSocialIssuePicked(state) {
-      console.log(state.socialIssuePicked);
       return null !== state.socialIssuePicked;
     },
     isLoadingSocialActions(state) {
@@ -73,27 +73,34 @@ const store = createStore({
   },
   mutations: {
     setSocialActionsReachables(state, actions) {
-      console.log('set social action reachables');
-      console.log(actions);
-
       state.socialActionsReachables = actions;
     },
     setSocialAction(state, socialAction) {
-      console.log('socialAction', socialAction);
       state.socialActionPicked = socialAction;
     },
     setSocialIssue(state, socialIssueId) {
-      console.log('set social issue', socialIssueId);
       if (socialIssueId === null) {
         state.socialIssuePicked = null;
       } else {
         let mapped = state.socialIssues
           .find(e => e.id === socialIssueId);
-        console.log('mapped', mapped);
         state.socialIssuePicked = mapped;
-        console.log('social issue setted', state.socialIssuePicked);
       }
     },
+    addIssueInList(state, issue) {
+      state.socialIssues.push(issue);
+    },
+    updateIssuesOther(state, payload) {
+      state.socialIssuesOther = payload;
+    },
+    removeIssueInOther(state, issue) {
+      state.socialIssuesOther = state.socialIssuesOther.filter(
+          (i) => i.id !== issue.id
+      );
+    },
+    updateSelected(state, payload) {
+      state.socialIssueSelected = payload;
+    },
     setIsLoadingSocialActions(state, s) {
       state.isLoadingSocialActions = s;
     },
@@ -107,12 +114,12 @@ const store = createStore({
       state.endDate = date;
     },
     setPersonsPickedIds(state, ids) {
-      console.log('persons ids', ids);
+
       state.personsPicked = state.personsReachables
         .filter(p => ids.includes(p.id))
     },
     addErrors(state, { errors, cancel_posting }) {
-      console.log('add errors', errors);
+
       state.errors = errors;
       if (cancel_posting) {
         state.isPostingWork = false;
@@ -121,8 +128,6 @@ const store = createStore({
   },
   actions: {
     pickSocialIssue({ commit }, socialIssueId) {
-      console.log('pick social issue');
-
       commit('setIsLoadingSocialActions', true);
       commit('setSocialAction', null);
       commit('setSocialActionsReachables', []);
@@ -131,8 +136,6 @@ const store = createStore({
 
       findSocialActionsBySocialIssue(socialIssueId).then(
         (response) => {
-          console.log(response);
-          console.log(response.results);
           commit('setSocialIssue', socialIssueId);
           commit('setSocialActionsReachables', response.results);
           commit('setIsLoadingSocialActions', false);
@@ -142,34 +145,34 @@ const store = createStore({
         });
     },
     submit({ commit, getters, state }) {
-      console.log('submit');
-      let
-        payload = getters.buildPayloadCreate,
-        errors = [];
-
+      let payload = getters.buildPayloadCreate;
+      const url = `/api/1.0/person/accompanying-course/${state.accompanyingCourse.id}/work.json`;
       commit('setPostingWork');
 
-      create(state.accompanyingCourse.id, payload)
-        .then( ({status, data}) => {
-          console.log('created return', { status, data});
-          if (status === 200) {
-            console.log('created, nothing to do here any more. Bye-bye!');
-            window.location.assign(`/fr/person/accompanying-period/work/${data.id}/edit`);
-          } else if (status === 422) {
-            console.log(data);
-            for (let i in data.violations) {
-              console.log(i);
-              console.log(data.violations[i].title);
-              errors.push(data.violations[i].title);
-            }
-            console.log('errors after reseponse handling', errors);
-            console.log({errors, cancel_posting: true});
-            commit('addErrors', { errors, cancel_posting: true });
-          }
+      makeFetch('POST', url, payload)
+        .then((response) => {
+          window.location.assign(`/fr/person/accompanying-period/work/${response.id}/edit`)
+        })
+        .catch((error) => {
+          throw error;
         });
     },
+    fetchOtherSocialIssues({commit}) {
+      const url = `/api/1.0/person/social-work/social-issue.json`;
+      return makeFetch('GET', url)
+        .then((response) => {
+          commit('updateIssuesOther', response.results);
+        })
+        .catch((error) => {
+          throw error;
+        })
+    }
   },
 
+
+
 });
 
+store.dispatch('fetchOtherSocialIssues');
+
 export { store };

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

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

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

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

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

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

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

@@ -50,8 +50,8 @@
       </div>
 
       <div class="row mb-3">
-         <label class="col-sm-4 col-form-label">{{ $t('evaluation_public_comment') }}</label>
-         <div class="col-sm-8">
+         <label class="col-sm-4 col-form-label visually-hidden">{{ $t('evaluation_public_comment') }}</label>
+         <div class="col-sm-12">
             <ckeditor
                :editor="editor"
                :placeholder="$t('evaluation_comment_placeholder')"
@@ -61,21 +61,18 @@
          </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>
-                  <template v-for="t in getTemplatesAvailaibleForEvaluation">
-                    <option  v-bind:value="t.id">{{ t.name.fr }}</option>
-                  </template>
-               </select>
-              <button v-if="canGenerate" class="btn btn-update btn-sm change-icon" type="button" @click="generateDocument"><i class="fa fa-fw fa-cog"></i></button>
-              <button v-else class="btn btn-update btn-sm change-icon" type="button" disabled ><i class="fa fa-fw fa-cog"></i></button>
-            </div>
-         </div>
-      </div>
+     <div class="row mb-3">
+       <pick-template
+           entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+           :id="evaluation.id"
+           :templates="getTemplatesAvailables"
+           :beforeMove="submitBeforeGenerate"
+       >
+         <template v-slot:title>
+           <label class="col-sm-4 col-form-label">{{ $t('evaluation_generate_a_document') }}</label>
+         </template>
+       </pick-template>
+     </div>
    </div>
 </div>
 </template>
@@ -85,6 +82,7 @@ import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import { mapGetters, mapState } from 'vuex';
+import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
 
 const i18n = {
    messages: {
@@ -111,6 +109,7 @@ export default {
    props: ['evaluation'],
    components: {
       ckeditor: CKEditor.component,
+      PickTemplate,
    },
    i18n,
    data() {
@@ -120,12 +119,12 @@ export default {
       }
    },
    computed: {
-     ...mapGetters([
-        'getTemplatesAvailaibleForEvaluation'
-     ]),
      ...mapState([
        'isPosting'
      ]),
+      getTemplatesAvailables() {
+        return this.$store.getters.getTemplatesAvailablesForEvaluation(this.evaluation.evaluation);
+      },
       canGenerate() {
         return !this.$store.state.isPosting && this.template !== null;
       },
@@ -176,13 +175,14 @@ export default {
          })
          ;
       },
-      generateDocument() {
-        console.log('template picked', this.template);
-        this.$store.dispatch('generateDocument', { key: this.evaluation.key, templateId: this.template})
+      submitBeforeGenerate() {
+        const callback = (data) => {
+          let evaluationId = data.accompanyingPeriodWorkEvaluations.find(e => e.key === this.evaluation.key).id;
+          return Promise.resolve({entityId: evaluationId});
+        };
+
+        return this.$store.dispatch('submit', callback).catch(e => { console.log(e); throw e; });
       }
    },
-   mounted() {
-      //this.listAllStatus();
-   }
 }
 </script>

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

@@ -2,6 +2,8 @@ import { createStore } from 'vuex';
 import { datetimeToISO, ISOToDatetime, intervalDaysToISO, intervalISOToDays } from 'ChillMainAssets/chill/js/date.js';
 import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
 import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
+import { fetchResults, makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { fetchTemplates } from 'ChillDocGeneratorAssets/api/pickTemplate.js';
 
 const debug = process.env.NODE_ENV !== 'production';
 const evalFQDN = encodeURIComponent("Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation");
@@ -20,20 +22,10 @@ const store = createStore({
     resultsPicked: window.accompanyingCourseWork.results,
     resultsForAction: [],
     resultsForGoal: [],
-    evaluationsPicked: window.accompanyingCourseWork.accompanyingPeriodWorkEvaluations.map((e, index) => {
-      var k = Object.assign(e, {
-        key: index,
-        editEvaluation: false,
-        startDate: e.startDate !== null ? ISOToDatetime(e.startDate.datetime) : null,
-        endDate: e.endDate !== null ? ISOToDatetime(e.endDate.datetime) : null,
-        maxDate: e.maxDate !== null ? ISOToDatetime(e.maxDate.datetime) : null,
-        warningInterval: e.warningInterval !== null ? intervalISOToDays(e.warningInterval) : null,
-      });
-
-      return k;
-    }),
+    evaluationsPicked: [],
     evaluationsForAction: [],
-    templatesAvailableForEvaluation: [],
+    templatesAvailablesForAction: [],
+    templatesAvailablesForEvaluation: new Map([]),
     personsPicked: window.accompanyingCourseWork.persons,
     personsReachables: window.accompanyingCourseWork.accompanyingPeriod.participations.filter(p => p.endDate == null)
       .map(p => p.person),
@@ -65,8 +57,8 @@ const store = createStore({
     hasThirdParties(state) {
       return state.thirdParties.length > 0;
     },
-    getTemplatesAvailaibleForEvaluation(state) {
-      return state.templatesAvailableForEvaluation;
+    getTemplatesAvailablesForEvaluation: (state) => (evaluation) => {
+      return state.templatesAvailablesForEvaluation.get(evaluation.id) || [];
     },
     buildPayload(state) {
       return {
@@ -125,6 +117,20 @@ const store = createStore({
     }
   },
   mutations: {
+    setEvaluationsPicked(state, evaluations) {
+      state.evaluationsPicked = evaluations.map((e, index) => {
+        var k = Object.assign(e, {
+          key: index,
+          editEvaluation: false,
+          startDate: e.startDate !== null ? ISOToDatetime(e.startDate.datetime) : null,
+          endDate: e.endDate !== null ? ISOToDatetime(e.endDate.datetime) : null,
+          maxDate: e.maxDate !== null ? ISOToDatetime(e.maxDate.datetime) : null,
+          warningInterval: e.warningInterval !== null ? intervalISOToDays(e.warningInterval) : null,
+        });
+
+        return k;
+      });
+    },
     setStartDate(state, date) {
       state.startDate = date;
     },
@@ -158,7 +164,14 @@ const store = createStore({
         note: '',
         results: []
       }
+      const tmpIndex = () => {
+        let ar = state.goalsPicked.map(g => g.id),
+            s = Math.min(...ar);
+        return (s < 0) ? s : 0
+      };
+      g.id = tmpIndex() -1
       state.goalsPicked.push(g);
+      //console.log('goals picked ids', state.goalsPicked.map(g => g.id))
     },
     removeGoal(state, goal) {
       state.goalsPicked = state.goalsPicked.filter(g => g.id !== goal.id);
@@ -186,7 +199,7 @@ const store = createStore({
         type: "accompanying_period_work_evaluation",
         key: state.evaluationsPicked.length + 1,
         evaluation: evaluation,
-        startDate: null,
+        startDate: new Date(),
         endDate:  null,
         maxDate:  null,
         warningInterval: null,
@@ -222,10 +235,11 @@ const store = createStore({
       let evaluation = state.evaluationsPicked.find(e => e.key === key);
       evaluation.editEvaluation = !evaluation.editEvaluation;
     },
-    setTemplatesAvailableForEvaluation(state, templates) {
-      for (let i in templates) {
-        state.templatesAvailableForEvaluation.push(templates[i]);
-      }
+    setTemplatesForEvaluation(state, {templates, evaluation}) {
+      state.templatesAvailablesForEvaluation.set(evaluation.id, templates);
+    },
+    setTemplatesAvailablesForAction(state, templates) {
+      state.templatesAvailablesForAction = templates;
     },
     setPersonsPickedIds(state, ids) {
       state.personsPicked = state.personsReachables
@@ -328,36 +342,19 @@ const store = createStore({
           commit('setEvaluationsForAction', data.results);
         });
     },
-    getReachableTemplatesForEvaluation({commit}) {
-      const
-          url = `/fr/doc/gen/templates/for/${evalFQDN}`
-      ;
-      window.fetch(url).then(r => {
-        if (r.ok) {
-          return r.json();
-        }
-        throw new Error("not possible to load templates for evaluations")
-      }).then(data => {
-        commit('setTemplatesAvailableForEvaluation', data.results);
-      }).catch(e => {
-        console.error(e);
-      })
+    addEvaluation({commit, dispatch}, evaluation) {
+      commit('addEvaluation', evaluation);
+      dispatch('fetchTemplatesAvailablesForEvaluation', evaluation);
     },
-    generateDocument({ dispatch }, {key, templateId}) {
-      const callback = function(data) {
-        // get the evaluation id from the data
-        const
-            evaluationId = data.accompanyingPeriodWorkEvaluations.find(e => e.key === key).id,
-            returnPath = encodeURIComponent(window.location.pathname + window.location.search + window.location.hash),
-            url = `/fr/doc/gen/generate/from/${templateId}/for/${evalFQDN}/${evaluationId}?returnPath=${returnPath}`
-        ;
-        //http://localhost:8001/fr/doc/gen/generate/from/12/for/Chill%5CPersonBundle%5CEntity%5CAccompanyingPeriod%5CAccompanyingPeriodWorkEvaluation/41
-
-        console.log('I will generate your doc at', url);
-        window.location.assign(url);
-      };
-
-      dispatch('submit', callback);
+    fetchTemplatesAvailablesForEvaluation({commit, state}, evaluation) {
+      if (!state.templatesAvailablesForEvaluation.has(evaluation.id)) {
+        // commit an empty array to avoid parallel fetching for same evaluation id
+        commit('setTemplatesForEvaluation', {templates: [], evaluation});
+        fetchResults(`/api/1.0/person/docgen/template/by-evaluation/${evaluation.id}.json`)
+          .then(templates => {
+            commit('setTemplatesForEvaluation', {templates, evaluation});
+          });
+      }
     },
     submit({ getters, state, commit }, callback) {
       let
@@ -368,47 +365,66 @@ const store = createStore({
 
       commit('setIsPosting', true);
 
-      window.fetch(url, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-      }).then(response => {
-        if (response.ok || response.status === 422) {
-          return response.json().then(data => ({data, status: response.status}));
-        }
-
-        throw new Error(response.status);
-      }).then(({data, status}) => {
-        if (status === 422) {
-          for (let i in data.violations) {
-            errors.push(data.violations[i].title);
+      return makeFetch('PUT', url, payload)
+        .then(data => {
+          console.log('data received', data);
+          if (typeof(callback) !== 'undefined') {
+            return callback(data);
+          } else {
+            console.info('nothing to do here, bye bye');window.location.assign(`/fr/person/accompanying-period/${state.work.accompanyingPeriod.id}/work`);
           }
-          commit('setErrors', errors);
+        }).catch(error => {
+          console.log('error on submit', error);
           commit('setIsPosting', false);
-        } else if (typeof(callback) !== 'undefined') {
-          callback(data);
-        } else {
-          console.info('nothing to do here, bye bye');
-          window.location.assign(`/fr/person/accompanying-period/${state.work.accompanyingPeriod.id}/work`);
-        }
-      }).catch(e => {
-        commit('setErrors', [
-          'Erreur serveur ou réseau: veuillez ré-essayer. Code erreur: ' + e
-        ]);
-        commit('setIsPosting', false);
-      });
-    },
-    initAsync({ dispatch }) {
-      dispatch('getReachablesResultsForAction');
-      dispatch('getReachablesGoalsForAction');
-      dispatch('getReachablesEvaluationsForAction');
-      dispatch('getReachableTemplatesForEvaluation');
+          commit('setErrors', error.violations);
+        });
     },
+    patchOnTheFly({ commit }, payload) {
+      let body = { type: payload.type };
+      const id = payload.data.id;
+      let url = `/api/1.0/person/person/${id}.json`;
+      let mutation = "updatePerson";
+
+      if (payload.type === 'person') {
+          body.firstName = payload.data.firstName;
+          body.lastName = payload.data.lastName;
+          if (payload.data.birthdate !== null) { body.birthdate = payload.data.birthdate; }
+            body.phonenumber = payload.data.phonenumber;
+            body.mobilenumber = payload.data.mobilenumber;
+            body.gender = payload.data.gender;
+      } else if (payload.type === 'thirdparty') {
+          body.name = payload.data.text;
+          body.email = payload.data.email;
+          body.telephone = payload.data.phonenumber;
+          body.address = { id: payload.data.address.address_id };
+
+        url = `/api/1.0/thirdparty/thirdparty/${id}.json`;
+        mutation = 'updateThirdparty'
+      }
+      makeFetch('PATCH', url, body)
+        .then((response) => {
+            commit(mutation, {target: payload.target, thirdparty: response});
+        })
+        .catch((error) => {
+            throw error;
+        })
+  },
   }
 });
 
-store.dispatch('initAsync');
+store.commit('setEvaluationsPicked', window.accompanyingCourseWork.accompanyingPeriodWorkEvaluations);
+store.dispatch('getReachablesResultsForAction');
+store.dispatch('getReachablesGoalsForAction');
+store.dispatch('getReachablesEvaluationsForAction');
+
+store.state.evaluationsPicked.forEach(evaluation => {
+  store.dispatch('fetchTemplatesAvailablesForEvaluation', evaluation.evaluation)
+});
+
+fetchTemplates('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork')
+  .then(templates => {
+    store.commit('setTemplatesAvailablesForAction', templates);
+  }
+)
 
 export { store };

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

@@ -15,7 +15,12 @@
   <confirmation v-if="step === 'confirm'"></confirmation>
 
   <ul class="record_actions sticky-form-buttons">
-    <li class="cancel" v-if="step !== 'concerned' || hasReturnPath">
+    <li class="cancel" v-if="step !== 'concerned'">
+      <button class="btn btn-cancel" @click="goToPrevious">
+        {{ $t('household_members_editor.app.previous') }}
+      </button>
+    </li>
+    <li class="cancel" v-else-if="hasReturnPath">
       <button class="btn btn-cancel" @click="goToPrevious">
         {{ $t('household_members_editor.app.cancel') }}
       </button>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-table" v-if="hasHousehold">
+  <div class="flex-table mb-5" v-if="hasHousehold">
     <div class="item-bloc">
       <household-render-box :household="fakeHouseholdWithConcerned"></household-render-box>
     </div>

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

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

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

@@ -1,5 +1,6 @@
-
-import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
+import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n';
+import { ontheflyMessages } from 'ChillMainAssets/vuejs/OnTheFly/i18n';
+import { addressMessages } from 'ChillMainAssets/vuejs/Address/i18n';
 
 const appMessages = {
    fr: {
@@ -51,6 +52,7 @@ const appMessages = {
        },
       app: {
        next: 'Suivant',
+       previous: 'Précédent',
        cancel: 'Annuler',
        save: 'Enregistrer',
         steps: {
@@ -83,7 +85,7 @@ const appMessages = {
    }
 };
 
-Object.assign(appMessages.fr, personMessages.fr);
+Object.assign(appMessages.fr, personMessages.fr, addressMessages.fr, ontheflyMessages.fr);
 
 export {
    appMessages

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

@@ -53,6 +53,7 @@
                   <div class="row">
                      <div class="col-12 text-center">{{ $t('visgraph.between') }}<br>{{ $t('visgraph.and') }}</div>
                      <div class="col">
+                        <small>{{ getPersonAge(modal.data.from) }}</small>
                         <h4>{{ getPerson(modal.data.from).text }}</h4>
                         <p class="text-start" v-if="relation && relation.title">
                            <span v-if="reverse">
@@ -64,6 +65,7 @@
                         </p>
                      </div>
                      <div class="col text-end">
+                        <small>{{ getPersonAge(modal.data.to) }}</small>
                         <h4>{{ getPerson(modal.data.to).text }}</h4>
                         <p class="text-end" v-if="relation && relation.title">
                            <span v-if="reverse">
@@ -119,8 +121,9 @@ import vis from 'vis-network/dist/vis-network'
 import { mapState, mapGetters } from "vuex"
 import Modal from 'ChillMainAssets/vuejs/_components/Modal'
 import VueMultiselect from 'vue-multiselect'
-import { getRelationsList, postRelationship, patchRelationship, deleteRelationship } from "./api";
-import { splitId } from "./vis-network";
+import { getRelationsList, postRelationship, patchRelationship, deleteRelationship } from "./api"
+import { splitId, getAge } from "./vis-network"
+import { visMessages } from "./i18n";
 
 export default {
    name: "App",
@@ -128,6 +131,7 @@ export default {
       Modal,
       VueMultiselect
    },
+   props: ['household_id'],
    data() {
       return {
          container: '',
@@ -152,7 +156,9 @@ export default {
                class: null,
                text: null
             },
-         }
+         },
+         canvas: null,
+         link: null,
       }
    },
    computed: {
@@ -164,7 +170,7 @@ export default {
       ]),
 
       visgraph_data() {
-         console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
+         //console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
          return {
             nodes: this.nodes,
             edges: this.edges
@@ -172,12 +178,12 @@ export default {
       },
 
       refreshNetwork() {
-         console.log('--- refresh network')
+         //console.log('--- refresh network')
          window.network.setData(this.visgraph_data)
       },
 
       legendLayers() {
-         console.log('--- refresh legend and rebuild checked Layers')
+         //console.log('--- refresh legend and rebuild checked Layers')
          this.checkedLayers = []
          let layersDisplayed = [
             ...this.nodes.filter(n => n.id.startsWith('household')),
@@ -193,7 +199,7 @@ export default {
       },
 
       checkedLayers() { // required to refresh data checkedLayers
-         console.log('--- checkedLayers')
+         //console.log('--- checkedLayers')
          return this.checkedLayers
       },
 
@@ -218,7 +224,7 @@ export default {
    },
    watch: {
       updateHack(newValue, oldValue) {
-         console.log(`--- updateHack ${oldValue} <> ${newValue}`)
+         //console.log(`--- updateHack ${oldValue} <> ${newValue}`)
          if (oldValue !== newValue) {
             this.forceUpdateComponent()
          }
@@ -229,6 +235,9 @@ export default {
       this.initGraph()
       this.listenOnGraph()
       this.getRelationsList()
+
+      this.canvas = document.getElementById('visgraph').querySelector('canvas')
+      this.link = document.getElementById('exportCanvasBtn')
    },
    methods: {
 
@@ -255,27 +264,27 @@ export default {
 
                case 'person':
                   let person = this.nodes.filter(n => n.id === node)[0]
-                  console.log('@@@@@@ event on selected Node', person.id)
+                  //console.log('@@@@@@ event on selected Node', person.id)
                   if (this.listenPersonFlag === 'normal') {
                      if (person.folded === true) {
-                        console.log('   @@> expand mode event')
+                        //console.log('   @@> expand mode event')
                         this.$store.commit('unfoldPerson', person)
                      }
                   } else {
-                     console.log('   @@> create link mode event')
+                     //console.log('   @@> create link mode event')
                      this.listenStepsToAddRelationship(person)
                   }
                   break
 
                case 'household':
                   let household = this.nodes.filter(n => n.id === node)[0]
-                  console.log('@@@@@@ event on selected Node', household.id)
+                  //console.log('@@@@@@ event on selected Node', household.id)
                   this.$store.dispatch('unfoldPersonsByHousehold', household)
                   break
 
                case 'accompanying_period':
                   let course = this.nodes.filter(n => n.id === node)[0]
-                  console.log('@@@@@@ event on selected Node', course.id)
+                  //console.log('@@@@@@ event on selected Node', course.id)
                   this.$store.dispatch('unfoldPersonsByCourse', course)
                   break
 
@@ -290,7 +299,7 @@ export default {
             }
             let link = data.edges[0]
             let linkType = splitId(link, 'link')
-            console.log('@@@@@ event on selected Edge', data.edges.length, linkType, data)
+            //console.log('@@@@@ event on selected Edge', data.edges.length, linkType, data)
 
             if (linkType.startsWith('relationship')) {
                //console.log('linkType relationship')
@@ -314,7 +323,7 @@ export default {
          })
       },
       listenStepsToAddRelationship(person) {
-         console.log('   @@> listenStep', this.listenPersonFlag)
+         //console.log('   @@> listenStep', this.listenPersonFlag)
          if (this.listenPersonFlag === 'step2') {
             //console.log('   @@> person 2', person)
             this.newEdgeData.to = person.id
@@ -333,7 +342,7 @@ export default {
       /// control Layers
       toggleLayer(value) {
          let id = value.target.value
-         console.log('@@@@@@ toggle Layer', id)
+         //console.log('@@@@@@ toggle Layer', id)
          this.forceUpdateComponent()
          if (this.checkedLayers.includes(id)) {
             this.removeLayer(id)
@@ -382,7 +391,7 @@ export default {
             title: null,
             button: { class: null, text: null, }
          }
-         console.log('==- reset Form', this.modal.data)
+         //console.log('==- reset Form', this.modal.data)
       },
       getRelationsList() {
          //console.log('fetch relationsList')
@@ -400,12 +409,16 @@ export default {
          let person = this.persons.filter(p => p.id === id)
          return person[0]
       },
+      getPersonAge(id) {
+         let person = this.getPerson(id)
+         return getAge(person)
+      },
 
       // actions
       createRelationship() {
          this.displayHelpMessage = true
          this.listenPersonFlag = 'step1' // toggle listener in create link mode
-         console.log('   @@> switch listener to create link mode:', this.listenPersonFlag)
+         //console.log('   @@> switch listener to create link mode:', this.listenPersonFlag)
       },
       dropRelationship() {
          //console.log('delete', this.modal.data)
@@ -417,13 +430,13 @@ export default {
          this.forceUpdateComponent()
       },
       submitRelationship() {
-         console.log('submitRelationship', this.modal.action)
+         //console.log('submitRelationship', this.modal.action)
          switch (this.modal.action) {
 
             case 'create':
                return postRelationship(this.modal.data)
                .then(relationship => new Promise(resolve => {
-                  console.log('post relationship response', relationship)
+                  //console.log('post relationship response', relationship)
                   this.$store.dispatch('addLinkFromRelationship', relationship)
                   this.modal.showModal = false
                   this.resetForm()
@@ -435,7 +448,7 @@ export default {
             case 'edit':
                return patchRelationship(this.modal.data)
                .then(relationship => new Promise(resolve => {
-                  console.log('patch relationship response', relationship)
+                  //console.log('patch relationship response', relationship)
                   this.$store.commit('updateLink', relationship)
                   this.modal.showModal = false
                   this.resetForm()
@@ -450,39 +463,44 @@ export default {
       },
 
       // export image
-      exportCanvasAsImage() {
-         const canvas = document.getElementById('visgraph')
-            .querySelector('canvas')
-         console.log(canvas)
+      async exportCanvasAsImage() {
 
-         let link = document.getElementById('exportCanvasBtn')
-         link.download = "filiation.png"
+         let
+            filename = `filiation_${this.household_id}.jpg`,
+            mime = 'image/jpeg',
+            quality = 0.85,
+            footer = `© Chill ${new Date().getFullYear()}`,
+            timestamp = `${visMessages.fr.visgraph.relationship_household} n° ${this.household_id} — ${new Date().toLocaleString()}`
 
-         canvas.toBlob(blob => {
-            console.log(blob)
-            link.href = URL.createObjectURL(blob)
-         }, 'image/png')
+         // resolve toBlob in a Promise
+         const getCanvasBlob = canvas => new Promise(resolve => {
+            canvas.toBlob(blob => resolve(blob), mime, quality)
+         })
 
-         /*
-         TODO improve feature
-
-         // 1. fonctionne, mais pas de contrôle sur le nom
-         if (canvas && canvas.getContext('2d')) {
-            let img = canvas.toDataURL('image/png;base64;')
-            img = img.replace('image/png','image/octet-stream')
-            window.open(img, '', 'width=1000, height=1000')
-         }
-
-         // 2. fonctionne, mais 2 click et pas compatible avec tous les browsers
-         let link = document.getElementById('exportCanvasBtn')
-         link.download = "image.png"
-         canvas.toBlob(blob => {
-            link.href = URL.createObjectURL(blob)
-         }, 'image/png')
-         */
+         // build image from new temporary canvas
+         let tmpCanvas = document.createElement('canvas')
+         tmpCanvas.width = this.canvas.width
+         tmpCanvas.height = this.canvas.height
 
+         let ctx = tmpCanvas.getContext('2d')
+         ctx.beginPath()
+         ctx.fillStyle = '#fff'
+         ctx.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height);
+         ctx.fillStyle = '#9d4600'
+         ctx.fillText(footer +' — '+ timestamp, 5, tmpCanvas.height - 10)
+         ctx.drawImage(this.canvas, 0, 0)
 
+         return await getCanvasBlob(tmpCanvas)
+            .then(blob => {
+               let url = document.createElement("a")
+               url.download = filename
+               url.href = window.URL.createObjectURL(blob)
+               url.click()
+               console.log('url', url.href)
+               URL.revokeObjectURL(url.href)
+         })
       }
+
    }
 }
 </script>

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

@@ -9,6 +9,7 @@ const visMessages = {
             both: 'neutre, non binaire',
             woman: 'féminin',
             man: 'masculin',
+            undefined: "genre non précisé",
             years: 'ans',
             click_to_expand: 'cliquez pour étendre',
             add_relationship_link: "Créer un lien de filiation",
@@ -24,6 +25,7 @@ const visMessages = {
             refresh: "Rafraîchir",
             screenshot: "Prendre une photo",
             choose_relation: "Choisissez le lien de parenté",
+            relationship_household: "Filiation du ménage",
         },
         edit: 'Éditer',
         del: 'Supprimer',

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

@@ -16,7 +16,12 @@ persons.forEach(person => {
 })
 
 const app = createApp({
-    template: `<app></app>`
+    template: `<app :household_id="this.household_id"></app>`,
+    data() {
+        return {
+            household_id: JSON.parse(container.dataset.householdId)
+        }
+    }
 })
 .use(store)
 .use(i18n)

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

@@ -112,7 +112,7 @@ const store = createStore({
                 }
             })
             //console.log('array', array.map(item => item.person.id))
-            console.log('get persons group', group.map(f => f.id))
+            //console.log('get persons group', group.map(f => f.id))
             return group
         },
 
@@ -120,13 +120,17 @@ const store = createStore({
     },
     mutations: {
         addPerson(state, [person, options]) {
+            let age = getAge(person)
+            age = (age === '')? '' : ' - ' + age
+
             let debug = ''
             /// Debug mode: uncomment to display person_id on visgraph
             //debug = `\nid ${person.id}`
+
             person.group = person.type
             person._id = person.id
             person.id = `person_${person.id}`
-            person.label = `*${person.text}*\n_${getGender(person.gender)} - ${getAge(person.birthdate)}_${debug}` //
+            person.label = `*${person.text}*\n_${getGender(person.gender)}${age}_${debug}`
             person.folded = false
             // folded is used for missing persons
             if (options.folded) {
@@ -161,7 +165,7 @@ const store = createStore({
             state.links.push(link)
         },
         updateLink(state, link) {
-            console.log('updateLink', link)
+            //console.log('updateLink', link)
             let link_ = {
                 from: `person_${link.fromPerson.id}`,
                 to: `person_${link.toPerson.id}`,
@@ -264,7 +268,7 @@ const store = createStore({
         fetchInfoForPerson({ dispatch }, person) {
                 // TODO enfants hors ménages
                 // example: household 61
-                // console.log(person.text, 'household', person.current_household_id)
+                //console.log(person.text, 'household', person.current_household_id)
             if (null !== person.current_household_id) {
                 dispatch('fetchHouseholdForPerson', person)
             }
@@ -305,15 +309,16 @@ const store = createStore({
          */
         addLinkFromPersonsToHousehold({ commit, getters, dispatch }, household) {
             let members = getters.getMembersByHousehold(household.id)
-            console.log('add link for', members.length, 'members')
+            //console.log('add link for', members.length, 'members')
             members.forEach(m => {
                 commit('addLink', {
                     from: `${m.person.type}_${m.person.id}`,
-                    to: `household_${m.person.current_household_id}`,
-                    id: `household_${m.person.current_household_id}-person_${m.person.id}`,
+                    to: `${household.id}`,
+                    id: `${household.id}-person_${m.person.id}`,
                     arrows: 'from',
                     color: 'pink',
                     font: { color: '#D04A60' },
+                    dashes: (getHouseholdWidth(m) === 1)? [0,4] : false,  //edge style:  [dash, gap, dash, gap]
                     label: getHouseholdLabel(m),
                     width: getHouseholdWidth(m),
                 })
@@ -362,7 +367,7 @@ const store = createStore({
          */
         addLinkFromPersonsToCourse({ commit, getters, dispatch }, course) {
             const participations = getters.getParticipationsByCourse(course.id)
-            console.log('add link for', participations.length, 'participations')
+            //console.log('add link for', participations.length, 'participations')
             participations.forEach(p => {
                 //console.log(p.person.id)
                 commit('addLink', {
@@ -445,7 +450,7 @@ const store = createStore({
          *  @param array
          */
         addMissingPerson({ commit, getters, dispatch }, [person, parent]) {
-            console.log('! add missing Person', person.id)
+            //console.log('! add missing Person', person.id)
             commit('markPersonLoaded', person.id)
             commit('addPerson', [person, { folded: true }])
             if (getters.isExcludedNode(parent.id)) {
@@ -467,7 +472,7 @@ const store = createStore({
             getters.getPersonsGroup(participations)
             .forEach(person => {
                 if (person.folded === true) {
-                    console.log('-=. unfold and expand person', person.id)
+                    //console.log('-=. unfold and expand person', person.id)
                     commit('unfoldPerson', person)
                     dispatch('fetchInfoForPerson', person)
                 }
@@ -485,7 +490,7 @@ const store = createStore({
             getters.getPersonsGroup(members)
             .forEach(person => {
                 if (person.folded === true) {
-                    console.log('-=. unfold and expand person', person.id)
+                    //console.log('-=. unfold and expand person', person.id)
                     commit('unfoldPerson', person)
                     dispatch('fetchInfoForPerson', person)
                 }

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

@@ -13,13 +13,12 @@ window.options = {
     locale: 'fr',
     locales: visMessages,
     /*
+    */
     configure: {
         enabled: true,
-        filter: 'nodes,edges',
-        //container: undefined,
+        filter: 'physics',
         showButton: true
     },
-    */
     physics: {
         enabled: true,
         barnesHut: {
@@ -37,8 +36,8 @@ window.options = {
             centralGravity: 0.01,
             springLength: 100,
             springConstant: 0.08,
-            damping: 0.4,
-            avoidOverlap: 0
+            damping: 0.75,
+            avoidOverlap: 0.00
         },
         repulsion: {
             centralGravity: 0.2,
@@ -154,22 +153,26 @@ const getGender = (gender) => {
         case 'man':
             return visMessages.fr.visgraph.man
         default:
-            throw 'gender undefined'
+            return visMessages.fr.visgraph.undefined
     }
 }
 
 /**
- * TODO Repeat getAge() in PersonRenderBox.vue
- * @param birthdate
+ * TODO only one abstract function (-> getAge() is repeated in PersonRenderBox.vue)
+ * @param person
  * @returns {string|null}
  */
-const getAge = (birthdate) => {
-    if (null === birthdate) {
-        return null
+const getAge = (person) => {
+    if (person.birthdate) {
+        let birthdate = new Date(person.birthdate.datetime)
+        if (person.deathdate) {
+            let deathdate = new Date(person.deathdate.datetime)
+            return (deathdate.getFullYear() - birthdate.getFullYear()) + visMessages.fr.visgraph.years
+        }
+        let now = new Date()
+        return (now.getFullYear() - birthdate.getFullYear()) + visMessages.fr.visgraph.years
     }
-    const birthday = new Date(birthdate.datetime)
-    const now = new Date()
-    return (now.getFullYear() - birthday.getFullYear()) + ' '+ visMessages.fr.visgraph.years
+    return ''
 }
 
 /**

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

@@ -1,30 +1,30 @@
-const create = (accompanying_period_id, payload) => {
-  const url = `/api/1.0/person/accompanying-course/${accompanying_period_id}/work.json`;
-  let status;
-  console.log('create', payload);
+// const create = (accompanying_period_id, payload) => {
+//   const url = `/api/1.0/person/accompanying-course/${accompanying_period_id}/work.json`;
+//   let status;
+//   console.log('create', payload);
 
-  return fetch(url, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(payload),
-  })
-    .then(response => {
-      if (response.ok || response.status === 422) {
-        status = response.status;
+//   return fetch(url, {
+//     method: 'POST',
+//     headers: {
+//       'Content-Type': 'application/json',
+//     },
+//     body: JSON.stringify(payload),
+//   })
+//     .then(response => {
+//       if (response.ok || response.status === 422) {
+//         status = response.status;
 
-        return response.json();
-      }
+//         return response.json();
+//       }
 
-      throw new Error("Error while retrieving social actions: " + response.status +
-        " " + response.statusText);
-    })
-    .then(data => {
-      return new Promise((resolve, reject) => {
-        resolve({ status, data });
-      });
-    });
-};
+//       throw new Error("Error while retrieving social actions: " + response.status +
+//         " " + response.statusText);
+//     })
+//     .then(data => {
+//       return new Promise((resolve, reject) => {
+//         resolve({ status, data });
+//       });
+//     });
+// };
 
-export { create };
+// export { create };

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

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

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

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

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

@@ -1,21 +1,22 @@
 <template>
    <div class="list-item" :class="{ checked: isChecked }">
-         
+
+      <label>
          <div>
-            <input 
-               v-bind:type="type" 
+            <input
+               v-bind:type="type"
                v-model="selected"
                name="item"
                v-bind:id="item"
                v-bind:value="setValueByType(item, type)" />
          </div>
-            
-         <suggestion-person 
+
+         <suggestion-person
             v-if="item.result.type === 'person'"
             v-bind:item="item">
          </suggestion-person>
-         
-         <suggestion-third-party 
+
+         <suggestion-third-party
             v-if="item.result.type === 'thirdparty'"
             v-bind:item="item">
          </suggestion-third-party>
@@ -24,6 +25,7 @@
             v-if="item.result.type === 'user'"
             v-bind:item="item">
          </suggestion-user>
+      </label>
 
    </div>
 </template>
@@ -41,7 +43,7 @@ export default {
       SuggestionUser,
    },
    props: [
-      'item', 
+      'item',
       'search',
       'type'
    ],
@@ -69,7 +71,7 @@ export default {
 </script>
 
 <style lang="scss">
-   div.results {   
+   div.results {
       div.list-item {
          padding: 0.4em 0.8em;
          display: flex;
@@ -78,32 +80,36 @@ export default {
             background-color: #ececec;
             border-bottom: 1px dotted #8b8b8b;
          }
-         div.container {
-            & > input {
-               margin-right: 0.8em;
+         label {
+            display: inline-flex;
+            width: 100%;
+            div.container {
+               & > input {
+                  margin-right: 0.8em;
+               }
+               span:not(.name) {
+                  margin-left: 0.5em;
+                  opacity: 0.5;
+                  font-size: 90%;
+                  font-style: italic;
+               }
             }
-            span:not(.name) {
-               margin-left: 0.5em;
-               opacity: 0.5;
-               font-size: 90%;
-               font-style: italic;
+            div.right_actions {
+               margin: 0 0 0 auto;
+               display: flex;
+               align-items: flex-end;
+               & > * {
+                  margin-left: 0.5em;
+                  align-self: baseline;
+               }
+
+               a.btn {
+                  border: 1px solid lightgrey;
+                  font-size: 70%;
+                  padding: 4px;
+               }
             }
          }
-         div.right_actions {
-            margin: 0 0 0 auto;
-            display: flex;
-            align-items: flex-end;
-            & > * {
-               margin-left: 0.5em;
-               align-self: baseline;
-            }
-            
-            a.btn {
-               border: 1px solid lightgrey;
-               font-size: 70%;
-               padding: 4px;
-            } 
-         }
       }
    }
 </style>

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

@@ -1,6 +1,5 @@
 <template>
    <div class="container">
-   
       <span class="name">
          {{ item.result.text }}
       </span>
@@ -8,32 +7,33 @@
          {{ $d(item.result.birthdate.datetime, 'short') }}
        </span>
       <span class="location" v-if="hasAddress">
-         {{ item.result.current_household_address.text }} - 
+         {{ item.result.current_household_address.text }} -
          {{ item.result.current_household_address.postcode.name }}
       </span>
-      
    </div>
+
    <div class="right_actions">
-      
-      <span class="badge rounded-pill bg-secondary" :title="item.key">
-         {{ $t('item.type_person') }}
-      </span>
+      <badge-entity
+        :entity="item.result"
+        :options="{ displayLong: true }">
+      </badge-entity>
       <on-the-fly
          type="person"
          v-bind:id="item.result.id"
          action="show">
       </on-the-fly>
-      
    </div>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 export default {
    name: 'SuggestionPerson',
    components: {
      OnTheFly,
+     BadgeEntity
    },
    props: ['item'],
    computed: {

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

@@ -17,33 +17,23 @@
         </span>
       </div>
     </div>
+
     <div class="right_actions">
-
-     <span class="badge bg-thirdparty-child" v-if="item.result.kind == 'child'">
-        {{ $t('thirdparty.child')}}
-     </span>
-      <span class="badge bg-thirdparty-company" v-else-if="item.result.kind == 'company'">
-       {{ $t('thirdparty.company')}}
-      </span>
-      <span class="badge bg-thirdparty-contact" v-else="item.result.kind == 'contact'">
-        {{ $t('thirdparty.contact')}}
-      </span>
-
-      <span class="badge rounded-pill bg-secondary" :title="item.key">
-         {{ $t('item.type_thirdparty') }}
-      </span>
-
-      <on-the-fly
-          type="thirdparty"
-          v-bind:id="item.result.id"
-          action="show">
-      </on-the-fly>
-
+       <badge-entity
+         :entity="item.result"
+         :options="{ displayLong: true }">
+       </badge-entity>
+       <on-the-fly
+           type="thirdparty"
+           v-bind:id="item.result.id"
+           action="show">
+       </on-the-fly>
     </div>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 const i18n = {
   messages: {
@@ -60,7 +50,8 @@ const i18n = {
 export default {
    name: 'SuggestionThirdParty',
    components: {
-      OnTheFly
+      OnTheFly,
+      BadgeEntity
    },
    props: ['item'],
    i18n,

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

@@ -7,26 +7,22 @@
       </div>
     </div>
     <div class="right_actions">
-      <span class="badge rounded-pill bg-secondary">
-        {{ $t('user')}}
-      </span>
+       <badge-entity
+          :entity="item.result"
+          :options="{ displayLong: true }">
+       </badge-entity>
     </div>
 </template>
 
 <script>
-
-const i18n = {
-  messages: {
-    fr: {
-      user: 'Utilisateur' // TODO how to define other translations?
-    }
-  }
-};
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 export default {
    name: 'SuggestionUser',
+   components: {
+      BadgeEntity
+   },
    props: ['item'],
-   i18n,
    computed: {
      hasParent() {
        return this.$props.item.result.parent !== null;

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

@@ -18,12 +18,17 @@
 
                    <span class="firstname">{{ person.firstName }}</span>
                    <span class="lastname">{{ person.lastName }}</span>
+                   <span v-if="person.deathdate" class="deathdate"> (‡)</span>
                    <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
                        <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                    </span>
 
                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
-                   <span v-if="options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
+
+                   <badge-entity v-if="options.addEntity === true"
+                      :entity="person"
+                      :options="{ displayLong: options.entityDisplayLong }">
+                   </badge-entity>
 
                 </div>
 
@@ -139,12 +144,14 @@
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 export default {
     name: "PersonRenderBox",
     components: {
         AddressRenderBox,
-        Confidential
+        Confidential,
+        BadgeEntity
     },
     props: ['person', 'options', 'render', 'returnPath'],
     computed: {
@@ -192,6 +199,7 @@ export default {
             return `/fr/person/${this.person.id}/general`;
         },
         getAge: function() {
+            // TODO only one abstract function
             if(this.person.birthdate && !this.person.deathdate){
                 const birthday = new Date(this.person.birthdate.datetime)
                 const now = new Date()

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

@@ -39,7 +39,6 @@ const personMessages = {
             neuter: "Neutre, non binaire",
             undefined: "Non renseigné"
          }
-
       },
       error_only_one_person: "Une seule personne peut être sélectionnée !"
    }