diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
index f17e42842..6f33a8deb 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
@@ -1,7 +1,7 @@
 <template>
-    <concerned-groups v-if="hasPerson" />
-    <social-issues-acc v-if="hasSocialIssues" />
-    <location v-if="hasLocation" />
+  <concerned-groups v-if="hasPerson" />
+  <social-issues-acc v-if="hasSocialIssues" />
+  <location v-if="hasLocation" />
 </template>
 
 <script>
@@ -10,12 +10,12 @@ import SocialIssuesAcc from "./components/SocialIssuesAcc.vue";
 import Location from "./components/Location.vue";
 
 export default {
-    name: "App",
-    props: ["hasSocialIssues", "hasLocation", "hasPerson"],
-    components: {
-        ConcernedGroups,
-        SocialIssuesAcc,
-        Location,
-    },
+  name: "App",
+  props: ["hasSocialIssues", "hasLocation", "hasPerson"],
+  components: {
+    ConcernedGroups,
+    SocialIssuesAcc,
+    Location,
+  },
 };
 </script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
index b99de220d..6b275b4b9 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
@@ -1,46 +1,43 @@
 <template>
-    <teleport to="#add-persons" v-if="isComponentVisible">
-        <div class="flex-bloc concerned-groups" :class="getContext">
-            <persons-bloc
-                v-for="bloc in contextPersonsBlocs"
-                :key="bloc.key"
-                :bloc="bloc"
-                :bloc-width="getBlocWidth"
-                :set-persons-in-bloc="setPersonsInBloc"
-            />
-        </div>
-        <div
-            v-if="
-                getContext === 'accompanyingCourse' &&
-                suggestedEntities.length > 0
-            "
+  <teleport to="#add-persons" v-if="isComponentVisible">
+    <div class="flex-bloc concerned-groups" :class="getContext">
+      <persons-bloc
+        v-for="bloc in contextPersonsBlocs"
+        :key="bloc.key"
+        :bloc="bloc"
+        :bloc-width="getBlocWidth"
+        :set-persons-in-bloc="setPersonsInBloc"
+      />
+    </div>
+    <div
+      v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0"
+    >
+      <ul class="list-suggest add-items inline">
+        <li
+          v-for="(p, i) in suggestedEntities"
+          @click="addSuggestedEntity(p)"
+          :key="`suggestedEntities-${i}`"
         >
-            <ul class="list-suggest add-items inline">
-                <li
-                    v-for="(p, i) in suggestedEntities"
-                    @click="addSuggestedEntity(p)"
-                    :key="`suggestedEntities-${i}`"
-                >
-                    <person-text v-if="p.type === 'person'" :person="p" />
-                    <span v-else>{{ p.text }}</span>
-                </li>
-            </ul>
-        </div>
+          <person-text v-if="p.type === 'person'" :person="p" />
+          <span v-else>{{ p.text }}</span>
+        </li>
+      </ul>
+    </div>
 
-        <ul class="record_actions">
-            <li class="add-persons">
-                <add-persons
-                    :buttonTitle="trans(ACTIVITY_ADD_PERSONS)"
-                    :modalTitle="trans(ACTIVITY_ADD_PERSONS)"
-                    v-bind:key="addPersons.key"
-                    v-bind:options="addPersonsOptions"
-                    @addNewPersons="addNewPersons"
-                    ref="addPersons"
-                >
-                </add-persons>
-            </li>
-        </ul>
-    </teleport>
+    <ul class="record_actions">
+      <li class="add-persons">
+        <add-persons
+          :buttonTitle="trans(ACTIVITY_ADD_PERSONS)"
+          :modalTitle="trans(ACTIVITY_ADD_PERSONS)"
+          v-bind:key="addPersons.key"
+          v-bind:options="addPersonsOptions"
+          @addNewPersons="addNewPersons"
+          ref="addPersons"
+        >
+        </add-persons>
+      </li>
+    </ul>
+  </teleport>
 </template>
 
 <script>
@@ -49,208 +46,208 @@ import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
 import PersonsBloc from "./ConcernedGroups/PersonsBloc.vue";
 import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
 import {
-    ACTIVITY_BLOC_PERSONS,
-    ACTIVITY_BLOC_PERSONS_ASSOCIATED,
-    ACTIVITY_BLOC_THIRDPARTY,
-    ACTIVITY_BLOC_USERS,
-    ACTIVITY_ADD_PERSONS,
-    trans,
+  ACTIVITY_BLOC_PERSONS,
+  ACTIVITY_BLOC_PERSONS_ASSOCIATED,
+  ACTIVITY_BLOC_THIRDPARTY,
+  ACTIVITY_BLOC_USERS,
+  ACTIVITY_ADD_PERSONS,
+  trans,
 } from "translator";
 
 export default {
-    name: "ConcernedGroups",
-    components: {
-        AddPersons,
-        PersonsBloc,
-        PersonText,
+  name: "ConcernedGroups",
+  components: {
+    AddPersons,
+    PersonsBloc,
+    PersonText,
+  },
+  setup() {
+    return {
+      trans,
+      ACTIVITY_ADD_PERSONS,
+    };
+  },
+  data() {
+    return {
+      personsBlocs: [
+        {
+          key: "persons",
+          title: trans(ACTIVITY_BLOC_PERSONS),
+          persons: [],
+          included: false,
+        },
+        {
+          key: "personsAssociated",
+          title: trans(ACTIVITY_BLOC_PERSONS_ASSOCIATED),
+          persons: [],
+          included: window.activity
+            ? window.activity.activityType.personsVisible !== 0
+            : true,
+        },
+        {
+          key: "personsNotAssociated",
+          title: "activity.bloc_persons_not_associated",
+          persons: [],
+          included: window.activity
+            ? window.activity.activityType.personsVisible !== 0
+            : true,
+        },
+        {
+          key: "thirdparty",
+          title: trans(ACTIVITY_BLOC_THIRDPARTY),
+          persons: [],
+          included: window.activity
+            ? window.activity.activityType.thirdPartiesVisible !== 0
+            : true,
+        },
+        {
+          key: "users",
+          title: trans(ACTIVITY_BLOC_USERS),
+          persons: [],
+          included: window.activity
+            ? window.activity.activityType.usersVisible !== 0
+            : true,
+        },
+      ],
+      addPersons: {
+        key: "activity",
+      },
+    };
+  },
+  computed: {
+    isComponentVisible() {
+      return window.activity
+        ? window.activity.activityType.personsVisible !== 0 ||
+            window.activity.activityType.thirdPartiesVisible !== 0 ||
+            window.activity.activityType.usersVisible !== 0
+        : true;
     },
-    setup() {
-        return {
-            trans,
-            ACTIVITY_ADD_PERSONS,
-        };
+    ...mapState({
+      persons: (state) => state.activity.persons,
+      thirdParties: (state) => state.activity.thirdParties,
+      users: (state) => state.activity.users,
+      accompanyingCourse: (state) => state.activity.accompanyingPeriod,
+    }),
+    ...mapGetters(["suggestedEntities"]),
+    getContext() {
+      return this.accompanyingCourse ? "accompanyingCourse" : "person";
     },
-    data() {
-        return {
-            personsBlocs: [
-                {
-                    key: "persons",
-                    title: trans(ACTIVITY_BLOC_PERSONS),
-                    persons: [],
-                    included: false,
-                },
-                {
-                    key: "personsAssociated",
-                    title: trans(ACTIVITY_BLOC_PERSONS_ASSOCIATED),
-                    persons: [],
-                    included: window.activity
-                        ? window.activity.activityType.personsVisible !== 0
-                        : true,
-                },
-                {
-                    key: "personsNotAssociated",
-                    title: "activity.bloc_persons_not_associated",
-                    persons: [],
-                    included: window.activity
-                        ? window.activity.activityType.personsVisible !== 0
-                        : true,
-                },
-                {
-                    key: "thirdparty",
-                    title: trans(ACTIVITY_BLOC_THIRDPARTY),
-                    persons: [],
-                    included: window.activity
-                        ? window.activity.activityType.thirdPartiesVisible !== 0
-                        : true,
-                },
-                {
-                    key: "users",
-                    title: trans(ACTIVITY_BLOC_USERS),
-                    persons: [],
-                    included: window.activity
-                        ? window.activity.activityType.usersVisible !== 0
-                        : true,
-                },
-            ],
-            addPersons: {
-                key: "activity",
-            },
-        };
+    contextPersonsBlocs() {
+      return this.personsBlocs.filter((bloc) => bloc.included !== false);
     },
-    computed: {
-        isComponentVisible() {
-            return window.activity
-                ? window.activity.activityType.personsVisible !== 0 ||
-                      window.activity.activityType.thirdPartiesVisible !== 0 ||
-                      window.activity.activityType.usersVisible !== 0
-                : true;
-        },
-        ...mapState({
-            persons: (state) => state.activity.persons,
-            thirdParties: (state) => state.activity.thirdParties,
-            users: (state) => state.activity.users,
-            accompanyingCourse: (state) => state.activity.accompanyingPeriod,
-        }),
-        ...mapGetters(["suggestedEntities"]),
-        getContext() {
-            return this.accompanyingCourse ? "accompanyingCourse" : "person";
-        },
-        contextPersonsBlocs() {
-            return this.personsBlocs.filter((bloc) => bloc.included !== false);
-        },
-        addPersonsOptions() {
-            let optionsType = [];
-            if (window.activity) {
-                if (window.activity.activityType.personsVisible !== 0) {
-                    optionsType.push("person");
-                }
-                if (window.activity.activityType.thirdPartiesVisible !== 0) {
-                    optionsType.push("thirdparty");
-                }
-                if (window.activity.activityType.usersVisible !== 0) {
-                    optionsType.push("user");
-                }
-            } else {
-                optionsType = ["person", "thirdparty", "user"];
-            }
-            return {
-                type: optionsType,
-                priority: null,
-                uniq: false,
-                button: {
-                    size: "btn-sm",
-                },
-            };
-        },
-        getBlocWidth() {
-            return Math.round(100 / this.contextPersonsBlocs.length) + "%";
+    addPersonsOptions() {
+      let optionsType = [];
+      if (window.activity) {
+        if (window.activity.activityType.personsVisible !== 0) {
+          optionsType.push("person");
+        }
+        if (window.activity.activityType.thirdPartiesVisible !== 0) {
+          optionsType.push("thirdparty");
+        }
+        if (window.activity.activityType.usersVisible !== 0) {
+          optionsType.push("user");
+        }
+      } else {
+        optionsType = ["person", "thirdparty", "user"];
+      }
+      return {
+        type: optionsType,
+        priority: null,
+        uniq: false,
+        button: {
+          size: "btn-sm",
         },
+      };
     },
-    mounted() {
-        this.setPersonsInBloc();
+    getBlocWidth() {
+      return Math.round(100 / this.contextPersonsBlocs.length) + "%";
     },
-    methods: {
-        setPersonsInBloc() {
-            let groups;
-            if (this.accompanyingCourse) {
-                groups = this.splitPersonsInGroups();
-            }
-            this.personsBlocs.forEach((bloc) => {
-                if (this.accompanyingCourse) {
-                    switch (bloc.key) {
-                        case "personsAssociated":
-                            bloc.persons = groups.personsAssociated;
-                            bloc.included = true;
-                            break;
-                        case "personsNotAssociated":
-                            bloc.persons = groups.personsNotAssociated;
-                            bloc.included = true;
-                            break;
-                    }
-                } else {
-                    switch (bloc.key) {
-                        case "persons":
-                            bloc.persons = this.persons;
-                            bloc.included = true;
-                            break;
-                    }
-                }
-                switch (bloc.key) {
-                    case "thirdparty":
-                        bloc.persons = this.thirdParties;
-                        break;
-                    case "users":
-                        bloc.persons = this.users;
-                        break;
-                }
-            }, groups);
-        },
-        splitPersonsInGroups() {
-            let personsAssociated = [];
-            let personsNotAssociated = this.persons;
-            let participations = this.getCourseParticipations();
-            this.persons.forEach((person) => {
-                participations.forEach((participation) => {
-                    if (person.id === participation.id) {
-                        //console.log(person.id);
-                        personsAssociated.push(person);
-                        personsNotAssociated = personsNotAssociated.filter(
-                            (p) => p !== person,
-                        );
-                    }
-                });
-            });
-            return {
-                personsAssociated: personsAssociated,
-                personsNotAssociated: personsNotAssociated,
-            };
-        },
-        getCourseParticipations() {
-            let participations = [];
-            this.accompanyingCourse.participations.forEach((participation) => {
-                if (!participation.endDate) {
-                    participations.push(participation.person);
-                }
-            });
-            return participations;
-        },
-        addNewPersons({ selected, modal }) {
-            console.log("@@@ CLICK button addNewPersons", selected);
-            selected.forEach((item) => {
-                this.$store.dispatch("addPersonsInvolved", item);
-            }, this);
-            this.$refs.addPersons.resetSearch(); // to cast child method
-            modal.showModal = false;
-            this.setPersonsInBloc();
-        },
-        addSuggestedEntity(person) {
-            this.$store.dispatch("addPersonsInvolved", {
-                result: person,
-                type: "person",
-            });
-            this.setPersonsInBloc();
-        },
+  },
+  mounted() {
+    this.setPersonsInBloc();
+  },
+  methods: {
+    setPersonsInBloc() {
+      let groups;
+      if (this.accompanyingCourse) {
+        groups = this.splitPersonsInGroups();
+      }
+      this.personsBlocs.forEach((bloc) => {
+        if (this.accompanyingCourse) {
+          switch (bloc.key) {
+            case "personsAssociated":
+              bloc.persons = groups.personsAssociated;
+              bloc.included = true;
+              break;
+            case "personsNotAssociated":
+              bloc.persons = groups.personsNotAssociated;
+              bloc.included = true;
+              break;
+          }
+        } else {
+          switch (bloc.key) {
+            case "persons":
+              bloc.persons = this.persons;
+              bloc.included = true;
+              break;
+          }
+        }
+        switch (bloc.key) {
+          case "thirdparty":
+            bloc.persons = this.thirdParties;
+            break;
+          case "users":
+            bloc.persons = this.users;
+            break;
+        }
+      }, groups);
     },
+    splitPersonsInGroups() {
+      let personsAssociated = [];
+      let personsNotAssociated = this.persons;
+      let participations = this.getCourseParticipations();
+      this.persons.forEach((person) => {
+        participations.forEach((participation) => {
+          if (person.id === participation.id) {
+            //console.log(person.id);
+            personsAssociated.push(person);
+            personsNotAssociated = personsNotAssociated.filter(
+              (p) => p !== person,
+            );
+          }
+        });
+      });
+      return {
+        personsAssociated: personsAssociated,
+        personsNotAssociated: personsNotAssociated,
+      };
+    },
+    getCourseParticipations() {
+      let participations = [];
+      this.accompanyingCourse.participations.forEach((participation) => {
+        if (!participation.endDate) {
+          participations.push(participation.person);
+        }
+      });
+      return participations;
+    },
+    addNewPersons({ selected, modal }) {
+      console.log("@@@ CLICK button addNewPersons", selected);
+      selected.forEach((item) => {
+        this.$store.dispatch("addPersonsInvolved", item);
+      }, this);
+      this.$refs.addPersons.resetSearch(); // to cast child method
+      modal.showModal = false;
+      this.setPersonsInBloc();
+    },
+    addSuggestedEntity(person) {
+      this.$store.dispatch("addPersonsInvolved", {
+        result: person,
+        type: "person",
+      });
+      this.setPersonsInBloc();
+    },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
index 7e839168e..3dffb5aac 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
@@ -1,29 +1,29 @@
 <template>
-    <li>
-        <span :title="person.text" @click.prevent="$emit('remove', person)">
-            <span class="chill_denomination">
-                <person-text :person="person" :is-cut="true" />
-            </span>
-        </span>
-    </li>
+  <li>
+    <span :title="person.text" @click.prevent="$emit('remove', person)">
+      <span class="chill_denomination">
+        <person-text :person="person" :is-cut="true" />
+      </span>
+    </span>
+  </li>
 </template>
 
 <script>
 import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
 
 export default {
-    name: "PersonBadge",
-    props: ["person"],
-    components: {
-        PersonText,
-    },
-    // computed: {
-    //    textCutted() {
-    //       let more = (this.person.text.length > 15) ?'…' : '';
-    //       return this.person.text.slice(0,15) + more;
-    //    }
-    // },
-    emits: ["remove"],
+  name: "PersonBadge",
+  props: ["person"],
+  components: {
+    PersonText,
+  },
+  // computed: {
+  //    textCutted() {
+  //       let more = (this.person.text.length > 15) ?'…' : '';
+  //       return this.person.text.slice(0,15) + more;
+  //    }
+  // },
+  emits: ["remove"],
 };
 </script>
 
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
index c09e122a9..3bb6a84aa 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
@@ -1,38 +1,38 @@
 <template>
-    <div class="item-bloc" :style="{ 'flex-basis': blocWidth }">
-        <div class="item-row">
-            <div class="item-col">
-                <h4>{{ $t(bloc.title) }}</h4>
-            </div>
-            <div class="item-col">
-                <ul class="list-suggest remove-items">
-                    <person-badge
-                        v-for="person in bloc.persons"
-                        :key="person.id"
-                        :person="person"
-                        @remove="removePerson"
-                    />
-                </ul>
-            </div>
-        </div>
+  <div class="item-bloc" :style="{ 'flex-basis': blocWidth }">
+    <div class="item-row">
+      <div class="item-col">
+        <h4>{{ $t(bloc.title) }}</h4>
+      </div>
+      <div class="item-col">
+        <ul class="list-suggest remove-items">
+          <person-badge
+            v-for="person in bloc.persons"
+            :key="person.id"
+            :person="person"
+            @remove="removePerson"
+          />
+        </ul>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import PersonBadge from "./PersonBadge.vue";
 export default {
-    name: "PersonsBloc",
-    components: {
-        PersonBadge,
-    },
-    props: ["bloc", "setPersonsInBloc", "blocWidth"],
-    methods: {
-        removePerson(item) {
-            console.log("@@ CLICK remove person: item", item);
-            this.$store.dispatch("removePersonInvolved", item);
-            this.setPersonsInBloc();
-        },
+  name: "PersonsBloc",
+  components: {
+    PersonBadge,
+  },
+  props: ["bloc", "setPersonsInBloc", "blocWidth"],
+  methods: {
+    removePerson(item) {
+      console.log("@@ CLICK remove person: item", item);
+      this.$store.dispatch("removePersonInvolved", item);
+      this.setPersonsInBloc();
     },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
index 2496067b8..2c16ed472 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
@@ -1,32 +1,32 @@
 <template>
-    <teleport to="#location">
-        <div class="mb-3 row">
-            <label :class="locationClassList">
-                {{ trans(ACTIVITY_LOCATION) }}
-            </label>
-            <div class="col-sm-8">
-                <VueMultiselect
-                    name="selectLocation"
-                    id="selectLocation"
-                    label="name"
-                    track-by="id"
-                    open-direction="top"
-                    :multiple="false"
-                    :searchable="true"
-                    :placeholder="trans(ACTIVITY_CHOOSE_LOCATION)"
-                    :custom-label="customLabel"
-                    :select-label="trans(MULTISELECT_SELECT_LABEL)"
-                    :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
-                    :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
-                    :options="availableLocations"
-                    group-values="locations"
-                    group-label="locationGroup"
-                    v-model="location"
-                />
-                <new-location v-bind:available-locations="availableLocations" />
-            </div>
-        </div>
-    </teleport>
+  <teleport to="#location">
+    <div class="mb-3 row">
+      <label :class="locationClassList">
+        {{ trans(ACTIVITY_LOCATION) }}
+      </label>
+      <div class="col-sm-8">
+        <VueMultiselect
+          name="selectLocation"
+          id="selectLocation"
+          label="name"
+          track-by="id"
+          open-direction="top"
+          :multiple="false"
+          :searchable="true"
+          :placeholder="trans(ACTIVITY_CHOOSE_LOCATION)"
+          :custom-label="customLabel"
+          :select-label="trans(MULTISELECT_SELECT_LABEL)"
+          :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
+          :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
+          :options="availableLocations"
+          group-values="locations"
+          group-label="locationGroup"
+          v-model="location"
+        />
+        <new-location v-bind:available-locations="availableLocations" />
+      </div>
+    </div>
+  </teleport>
 </template>
 
 <script>
@@ -35,60 +35,60 @@ import VueMultiselect from "vue-multiselect";
 import NewLocation from "./Location/NewLocation.vue";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 import {
-    trans,
-    ACTIVITY_LOCATION,
-    ACTIVITY_CHOOSE_LOCATION,
-    MULTISELECT_SELECT_LABEL,
-    MULTISELECT_DESELECT_LABEL,
-    MULTISELECT_SELECTED_LABEL,
+  trans,
+  ACTIVITY_LOCATION,
+  ACTIVITY_CHOOSE_LOCATION,
+  MULTISELECT_SELECT_LABEL,
+  MULTISELECT_DESELECT_LABEL,
+  MULTISELECT_SELECTED_LABEL,
 } from "translator";
 
 export default {
-    name: "Location",
-    components: {
-        NewLocation,
-        VueMultiselect,
+  name: "Location",
+  components: {
+    NewLocation,
+    VueMultiselect,
+  },
+  setup() {
+    return {
+      trans,
+      ACTIVITY_LOCATION,
+      ACTIVITY_CHOOSE_LOCATION,
+      MULTISELECT_SELECT_LABEL,
+      MULTISELECT_DESELECT_LABEL,
+      MULTISELECT_SELECTED_LABEL,
+    };
+  },
+  data() {
+    return {
+      locationClassList: `col-form-label col-sm-4 ${document.querySelector("input#chill_activitybundle_activity_location").getAttribute("required") ? "required" : ""}`,
+    };
+  },
+  computed: {
+    ...mapState(["activity", "availableLocations"]),
+    ...mapGetters(["suggestedEntities"]),
+    location: {
+      get() {
+        return this.activity.location;
+      },
+      set(value) {
+        this.$store.dispatch("updateLocation", value);
+      },
     },
-    setup() {
-        return {
-            trans,
-            ACTIVITY_LOCATION,
-            ACTIVITY_CHOOSE_LOCATION,
-            MULTISELECT_SELECT_LABEL,
-            MULTISELECT_DESELECT_LABEL,
-            MULTISELECT_SELECTED_LABEL,
-        };
+  },
+  methods: {
+    labelAccompanyingCourseLocation(value) {
+      return `${value.address.text} (${localizeString(value.locationType.title)})`;
     },
-    data() {
-        return {
-            locationClassList: `col-form-label col-sm-4 ${document.querySelector("input#chill_activitybundle_activity_location").getAttribute("required") ? "required" : ""}`,
-        };
-    },
-    computed: {
-        ...mapState(["activity", "availableLocations"]),
-        ...mapGetters(["suggestedEntities"]),
-        location: {
-            get() {
-                return this.activity.location;
-            },
-            set(value) {
-                this.$store.dispatch("updateLocation", value);
-            },
-        },
-    },
-    methods: {
-        labelAccompanyingCourseLocation(value) {
-            return `${value.address.text} (${localizeString(value.locationType.title)})`;
-        },
-        customLabel(value) {
-            return value.locationType
-                ? value.name
-                    ? value.name === "__AccompanyingCourseLocation__"
-                        ? this.labelAccompanyingCourseLocation(value)
-                        : `${value.name} (${localizeString(value.locationType.title)})`
-                    : localizeString(value.locationType.title)
-                : "";
-        },
+    customLabel(value) {
+      return value.locationType
+        ? value.name
+          ? value.name === "__AccompanyingCourseLocation__"
+            ? this.labelAccompanyingCourseLocation(value)
+            : `${value.name} (${localizeString(value.locationType.title)})`
+          : localizeString(value.locationType.title)
+        : "";
     },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
index 1cc16ac95..c7dfbf778 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
@@ -1,123 +1,114 @@
 <template>
-    <div>
-        <ul class="record_actions">
-            <li>
-                <a class="btn btn-sm btn-create" @click="openModal">
-                    {{ trans(ACTIVITY_CREATE_NEW_LOCATION) }}
-                </a>
-            </li>
-        </ul>
+  <div>
+    <ul class="record_actions">
+      <li>
+        <a class="btn btn-sm btn-create" @click="openModal">
+          {{ trans(ACTIVITY_CREATE_NEW_LOCATION) }}
+        </a>
+      </li>
+    </ul>
 
-        <teleport to="body">
-            <modal
-                v-if="modal.showModal"
-                :modalDialogClass="modal.modalDialogClass"
-                @close="modal.showModal = false"
-            >
-                <template #header>
-                    <h3 class="modal-title">
-                        {{ trans(ACTIVITY_CREATE_NEW_LOCATION) }}
-                    </h3>
-                </template>
-                <template #body>
-                    <form>
-                        <div class="alert alert-warning" v-if="errors.length">
-                            <ul>
-                                <li v-for="(e, i) in errors" :key="i">
-                                    {{ e }}
-                                </li>
-                            </ul>
-                        </div>
+    <teleport to="body">
+      <modal
+        v-if="modal.showModal"
+        :modalDialogClass="modal.modalDialogClass"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <h3 class="modal-title">
+            {{ trans(ACTIVITY_CREATE_NEW_LOCATION) }}
+          </h3>
+        </template>
+        <template #body>
+          <form>
+            <div class="alert alert-warning" v-if="errors.length">
+              <ul>
+                <li v-for="(e, i) in errors" :key="i">
+                  {{ e }}
+                </li>
+              </ul>
+            </div>
 
-                        <div class="form-floating mb-3">
-                            <select
-                                class="form-select form-select-lg"
-                                id="type"
-                                required
-                                v-model="selectType"
-                            >
-                                <option selected disabled value="">
-                                    {{ trans(ACTIVITY_CHOOSE_LOCATION_TYPE) }}
-                                </option>
-                                <option
-                                    v-for="t in locationTypes"
-                                    :value="t"
-                                    :key="t.id"
-                                >
-                                    {{ localizeString(t.title) }}
-                                </option>
-                            </select>
-                            <label>{{
-                                trans(ACTIVITY_LOCATION_FIELDS_TYPE)
-                            }}</label>
-                        </div>
+            <div class="form-floating mb-3">
+              <select
+                class="form-select form-select-lg"
+                id="type"
+                required
+                v-model="selectType"
+              >
+                <option selected disabled value="">
+                  {{ trans(ACTIVITY_CHOOSE_LOCATION_TYPE) }}
+                </option>
+                <option v-for="t in locationTypes" :value="t" :key="t.id">
+                  {{ localizeString(t.title) }}
+                </option>
+              </select>
+              <label>{{ trans(ACTIVITY_LOCATION_FIELDS_TYPE) }}</label>
+            </div>
 
-                        <div class="form-floating mb-3">
-                            <input
-                                class="form-control form-control-lg"
-                                id="name"
-                                v-model="inputName"
-                                placeholder
-                            />
-                            <label for="name">{{
-                                trans(ACTIVITY_LOCATION_FIELDS_NAME)
-                            }}</label>
-                        </div>
+            <div class="form-floating mb-3">
+              <input
+                class="form-control form-control-lg"
+                id="name"
+                v-model="inputName"
+                placeholder
+              />
+              <label for="name">{{
+                trans(ACTIVITY_LOCATION_FIELDS_NAME)
+              }}</label>
+            </div>
 
-                        <add-address
-                            :context="addAddress.context"
-                            :options="addAddress.options"
-                            :addressChangedCallback="submitNewAddress"
-                            v-if="showAddAddress"
-                            ref="addAddress"
-                        />
+            <add-address
+              :context="addAddress.context"
+              :options="addAddress.options"
+              :addressChangedCallback="submitNewAddress"
+              v-if="showAddAddress"
+              ref="addAddress"
+            />
 
-                        <div class="form-floating mb-3" v-if="showContactData">
-                            <input
-                                class="form-control form-control-lg"
-                                id="phonenumber1"
-                                v-model="inputPhonenumber1"
-                                placeholder
-                            />
-                            <label for="phonenumber1">{{
-                                trans(ACTIVITY_LOCATION_FIELDS_PHONENUMBER1)
-                            }}</label>
-                        </div>
-                        <div class="form-floating mb-3" v-if="hasPhonenumber1">
-                            <input
-                                class="form-control form-control-lg"
-                                id="phonenumber2"
-                                v-model="inputPhonenumber2"
-                                placeholder
-                            />
-                            <label for="phonenumber2">{{
-                                trans(ACTIVITY_LOCATION_FIELDS_PHONENUMBER2)
-                            }}</label>
-                        </div>
-                        <div class="form-floating mb-3" v-if="showContactData">
-                            <input
-                                class="form-control form-control-lg"
-                                id="email"
-                                v-model="inputEmail"
-                                placeholder
-                            />
-                            <label for="email">{{
-                                trans(ACTIVITY_LOCATION_FIELDS_EMAIL)
-                            }}</label>
-                        </div>
-                    </form>
-                </template>
-                <template #footer>
-                    <button
-                        class="btn btn-save"
-                        @click.prevent="saveNewLocation"
-                    >
-                        {{ trans(SAVE) }}
-                    </button>
-                </template>
-            </modal>
-        </teleport>
-    </div>
+            <div class="form-floating mb-3" v-if="showContactData">
+              <input
+                class="form-control form-control-lg"
+                id="phonenumber1"
+                v-model="inputPhonenumber1"
+                placeholder
+              />
+              <label for="phonenumber1">{{
+                trans(ACTIVITY_LOCATION_FIELDS_PHONENUMBER1)
+              }}</label>
+            </div>
+            <div class="form-floating mb-3" v-if="hasPhonenumber1">
+              <input
+                class="form-control form-control-lg"
+                id="phonenumber2"
+                v-model="inputPhonenumber2"
+                placeholder
+              />
+              <label for="phonenumber2">{{
+                trans(ACTIVITY_LOCATION_FIELDS_PHONENUMBER2)
+              }}</label>
+            </div>
+            <div class="form-floating mb-3" v-if="showContactData">
+              <input
+                class="form-control form-control-lg"
+                id="email"
+                v-model="inputEmail"
+                placeholder
+              />
+              <label for="email">{{
+                trans(ACTIVITY_LOCATION_FIELDS_EMAIL)
+              }}</label>
+            </div>
+          </form>
+        </template>
+        <template #footer>
+          <button class="btn btn-save" @click.prevent="saveNewLocation">
+            {{ trans(SAVE) }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+  </div>
 </template>
 
 <script>
@@ -128,237 +119,236 @@ import { getLocationTypes } from "../../api";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 import {
-    SAVE,
-    ACTIVITY_LOCATION_FIELDS_EMAIL,
-    ACTIVITY_LOCATION_FIELDS_PHONENUMBER1,
-    ACTIVITY_LOCATION_FIELDS_PHONENUMBER2,
-    ACTIVITY_LOCATION_FIELDS_NAME,
-    ACTIVITY_LOCATION_FIELDS_TYPE,
-    ACTIVITY_CHOOSE_LOCATION_TYPE,
-    ACTIVITY_CREATE_NEW_LOCATION,
-    trans,
+  SAVE,
+  ACTIVITY_LOCATION_FIELDS_EMAIL,
+  ACTIVITY_LOCATION_FIELDS_PHONENUMBER1,
+  ACTIVITY_LOCATION_FIELDS_PHONENUMBER2,
+  ACTIVITY_LOCATION_FIELDS_NAME,
+  ACTIVITY_LOCATION_FIELDS_TYPE,
+  ACTIVITY_CHOOSE_LOCATION_TYPE,
+  ACTIVITY_CREATE_NEW_LOCATION,
+  trans,
 } from "translator";
 
 export default {
-    name: "NewLocation",
-    components: {
-        Modal,
-        AddAddress,
+  name: "NewLocation",
+  components: {
+    Modal,
+    AddAddress,
+  },
+  setup() {
+    return {
+      trans,
+      SAVE,
+      ACTIVITY_LOCATION_FIELDS_EMAIL,
+      ACTIVITY_LOCATION_FIELDS_PHONENUMBER1,
+      ACTIVITY_LOCATION_FIELDS_PHONENUMBER2,
+      ACTIVITY_LOCATION_FIELDS_NAME,
+      ACTIVITY_LOCATION_FIELDS_TYPE,
+      ACTIVITY_CHOOSE_LOCATION_TYPE,
+      ACTIVITY_CREATE_NEW_LOCATION,
+    };
+  },
+  props: ["availableLocations"],
+  data() {
+    return {
+      errors: [],
+      selected: {
+        type: null,
+        name: null,
+        addressId: null,
+        phonenumber1: null,
+        phonenumber2: null,
+        email: null,
+      },
+      locationTypes: [],
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-scrollable modal-xl",
+      },
+      addAddress: {
+        options: {
+          button: {
+            text: {
+              create: "activity.create_address",
+              edit: "activity.edit_address",
+            },
+            size: "btn-sm",
+          },
+          title: {
+            create: "activity.create_address",
+            edit: "activity.edit_address",
+          },
+        },
+        context: {
+          target: {
+            //name, id
+          },
+          edit: false,
+          addressId: null,
+          defaults: window.addaddress,
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState(["activity"]),
+    selectType: {
+      get() {
+        return this.selected.type;
+      },
+      set(value) {
+        this.selected.type = value;
+      },
     },
-    setup() {
-        return {
-            trans,
-            SAVE,
-            ACTIVITY_LOCATION_FIELDS_EMAIL,
-            ACTIVITY_LOCATION_FIELDS_PHONENUMBER1,
-            ACTIVITY_LOCATION_FIELDS_PHONENUMBER2,
-            ACTIVITY_LOCATION_FIELDS_NAME,
-            ACTIVITY_LOCATION_FIELDS_TYPE,
-            ACTIVITY_CHOOSE_LOCATION_TYPE,
-            ACTIVITY_CREATE_NEW_LOCATION,
+    inputName: {
+      get() {
+        return this.selected.name;
+      },
+      set(value) {
+        this.selected.name = value;
+      },
+    },
+    inputEmail: {
+      get() {
+        return this.selected.email;
+      },
+      set(value) {
+        this.selected.email = value;
+      },
+    },
+    inputPhonenumber1: {
+      get() {
+        return this.selected.phonenumber1;
+      },
+      set(value) {
+        this.selected.phonenumber1 = value;
+      },
+    },
+    inputPhonenumber2: {
+      get() {
+        return this.selected.phonenumber2;
+      },
+      set(value) {
+        this.selected.phonenumber2 = value;
+      },
+    },
+    hasPhonenumber1() {
+      return (
+        this.selected.phonenumber1 !== null && this.selected.phonenumber1 !== ""
+      );
+    },
+    showAddAddress() {
+      let cond = false;
+      if (this.selected.type) {
+        if (this.selected.type.addressRequired !== "never") {
+          cond = true;
+        }
+      }
+      return cond;
+    },
+    showContactData() {
+      let cond = false;
+      if (this.selected.type) {
+        if (this.selected.type.contactData !== "never") {
+          cond = true;
+        }
+      }
+      return cond;
+    },
+  },
+  mounted() {
+    this.getLocationTypesList();
+  },
+  methods: {
+    localizeString,
+    checkForm() {
+      let cond = true;
+      this.errors = [];
+      if (!this.selected.type) {
+        this.errors.push("Type de localisation requis");
+        cond = false;
+      } else {
+        if (
+          this.selected.type.addressRequired === "required" &&
+          !this.selected.addressId
+        ) {
+          this.errors.push("Adresse requise");
+          cond = false;
+        }
+        if (
+          this.selected.type.contactData === "required" &&
+          !this.selected.phonenumber1
+        ) {
+          this.errors.push("Numéro de téléphone requis");
+          cond = false;
+        }
+        if (
+          this.selected.type.contactData === "required" &&
+          !this.selected.email
+        ) {
+          this.errors.push("Adresse email requise");
+          cond = false;
+        }
+      }
+      return cond;
+    },
+    getLocationTypesList() {
+      getLocationTypes().then((results) => {
+        this.locationTypes = results.filter(
+          (t) => t.availableForUsers === true,
+        );
+      });
+    },
+    openModal() {
+      this.modal.showModal = true;
+    },
+    saveNewLocation() {
+      if (this.checkForm()) {
+        let body = {
+          type: "location",
+          name: this.selected.name,
+          locationType: {
+            id: this.selected.type.id,
+            type: "location-type",
+          },
+          phonenumber1: this.selected.phonenumber1,
+          phonenumber2: this.selected.phonenumber2,
+          email: this.selected.email,
         };
-    },
-    props: ["availableLocations"],
-    data() {
-        return {
-            errors: [],
-            selected: {
-                type: null,
-                name: null,
-                addressId: null,
-                phonenumber1: null,
-                phonenumber2: null,
-                email: null,
+        if (this.selected.addressId) {
+          body = Object.assign(body, {
+            address: {
+              id: this.selected.addressId,
             },
-            locationTypes: [],
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-scrollable modal-xl",
-            },
-            addAddress: {
-                options: {
-                    button: {
-                        text: {
-                            create: "activity.create_address",
-                            edit: "activity.edit_address",
-                        },
-                        size: "btn-sm",
-                    },
-                    title: {
-                        create: "activity.create_address",
-                        edit: "activity.edit_address",
-                    },
-                },
-                context: {
-                    target: {
-                        //name, id
-                    },
-                    edit: false,
-                    addressId: null,
-                    defaults: window.addaddress,
-                },
-            },
-        };
-    },
-    computed: {
-        ...mapState(["activity"]),
-        selectType: {
-            get() {
-                return this.selected.type;
-            },
-            set(value) {
-                this.selected.type = value;
-            },
-        },
-        inputName: {
-            get() {
-                return this.selected.name;
-            },
-            set(value) {
-                this.selected.name = value;
-            },
-        },
-        inputEmail: {
-            get() {
-                return this.selected.email;
-            },
-            set(value) {
-                this.selected.email = value;
-            },
-        },
-        inputPhonenumber1: {
-            get() {
-                return this.selected.phonenumber1;
-            },
-            set(value) {
-                this.selected.phonenumber1 = value;
-            },
-        },
-        inputPhonenumber2: {
-            get() {
-                return this.selected.phonenumber2;
-            },
-            set(value) {
-                this.selected.phonenumber2 = value;
-            },
-        },
-        hasPhonenumber1() {
-            return (
-                this.selected.phonenumber1 !== null &&
-                this.selected.phonenumber1 !== ""
-            );
-        },
-        showAddAddress() {
-            let cond = false;
-            if (this.selected.type) {
-                if (this.selected.type.addressRequired !== "never") {
-                    cond = true;
-                }
-            }
-            return cond;
-        },
-        showContactData() {
-            let cond = false;
-            if (this.selected.type) {
-                if (this.selected.type.contactData !== "never") {
-                    cond = true;
-                }
-            }
-            return cond;
-        },
-    },
-    mounted() {
-        this.getLocationTypesList();
-    },
-    methods: {
-        localizeString,
-        checkForm() {
-            let cond = true;
-            this.errors = [];
-            if (!this.selected.type) {
-                this.errors.push("Type de localisation requis");
-                cond = false;
-            } else {
-                if (
-                    this.selected.type.addressRequired === "required" &&
-                    !this.selected.addressId
-                ) {
-                    this.errors.push("Adresse requise");
-                    cond = false;
-                }
-                if (
-                    this.selected.type.contactData === "required" &&
-                    !this.selected.phonenumber1
-                ) {
-                    this.errors.push("Numéro de téléphone requis");
-                    cond = false;
-                }
-                if (
-                    this.selected.type.contactData === "required" &&
-                    !this.selected.email
-                ) {
-                    this.errors.push("Adresse email requise");
-                    cond = false;
-                }
-            }
-            return cond;
-        },
-        getLocationTypesList() {
-            getLocationTypes().then((results) => {
-                this.locationTypes = results.filter(
-                    (t) => t.availableForUsers === true,
-                );
-            });
-        },
-        openModal() {
-            this.modal.showModal = true;
-        },
-        saveNewLocation() {
-            if (this.checkForm()) {
-                let body = {
-                    type: "location",
-                    name: this.selected.name,
-                    locationType: {
-                        id: this.selected.type.id,
-                        type: "location-type",
-                    },
-                    phonenumber1: this.selected.phonenumber1,
-                    phonenumber2: this.selected.phonenumber2,
-                    email: this.selected.email,
-                };
-                if (this.selected.addressId) {
-                    body = Object.assign(body, {
-                        address: {
-                            id: this.selected.addressId,
-                        },
-                    });
-                }
+          });
+        }
 
-                makeFetch("POST", "/api/1.0/main/location.json", body)
-                    .then((response) => {
-                        this.$store.dispatch("addAvailableLocationGroup", {
-                            locationGroup: "Localisations nouvellement créées",
-                            locations: [response],
-                        });
-                        this.$store.dispatch("updateLocation", response);
-                        this.modal.showModal = false;
-                    })
-                    .catch((error) => {
-                        if (error.name === "ValidationException") {
-                            for (let v of error.violations) {
-                                this.errors.push(v);
-                            }
-                        } else {
-                            this.errors.push("An error occurred");
-                        }
-                    });
+        makeFetch("POST", "/api/1.0/main/location.json", body)
+          .then((response) => {
+            this.$store.dispatch("addAvailableLocationGroup", {
+              locationGroup: "Localisations nouvellement créées",
+              locations: [response],
+            });
+            this.$store.dispatch("updateLocation", response);
+            this.modal.showModal = false;
+          })
+          .catch((error) => {
+            if (error.name === "ValidationException") {
+              for (let v of error.violations) {
+                this.errors.push(v);
+              }
+            } else {
+              this.errors.push("An error occurred");
             }
-        },
-        submitNewAddress(payload) {
-            this.selected.addressId = payload.addressId;
-            this.addAddress.context.addressId = payload.addressId;
-            this.addAddress.context.edit = true;
-        },
+          });
+      }
     },
+    submitNewAddress(payload) {
+      this.selected.addressId = payload.addressId;
+      this.addAddress.context.addressId = payload.addressId;
+      this.addAddress.context.edit = true;
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index a45d93b2a..15bb9acd1 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -1,103 +1,98 @@
 <template>
-    <teleport to="#social-issues-acc">
-        <div class="mb-3 row">
-            <div class="col-4">
-                <label :class="socialIssuesClassList">{{
-                    trans(ACTIVITY_SOCIAL_ISSUES)
-                }}</label>
-            </div>
-            <div class="col-8">
-                <check-social-issue
-                    v-for="issue in socialIssuesList"
-                    :key="issue.id"
-                    :issue="issue"
-                    :selection="socialIssuesSelected"
-                    @updateSelected="updateIssuesSelected"
-                >
-                </check-social-issue>
+  <teleport to="#social-issues-acc">
+    <div class="mb-3 row">
+      <div class="col-4">
+        <label :class="socialIssuesClassList">{{
+          trans(ACTIVITY_SOCIAL_ISSUES)
+        }}</label>
+      </div>
+      <div class="col-8">
+        <check-social-issue
+          v-for="issue in socialIssuesList"
+          :key="issue.id"
+          :issue="issue"
+          :selection="socialIssuesSelected"
+          @updateSelected="updateIssuesSelected"
+        >
+        </check-social-issue>
 
-                <div class="my-3">
-                    <VueMultiselect
-                        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="trans(ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE)"
-                        :options="socialIssuesOther"
-                        @select="addIssueInList"
-                    >
-                    </VueMultiselect>
-                </div>
-            </div>
+        <div class="my-3">
+          <VueMultiselect
+            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="trans(ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE)"
+            :options="socialIssuesOther"
+            @select="addIssueInList"
+          >
+          </VueMultiselect>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-3 row">
+      <div class="col-4">
+        <label :class="socialActionsClassList">{{
+          trans(ACTIVITY_SOCIAL_ACTIONS)
+        }}</label>
+      </div>
+      <div class="col-8">
+        <div v-if="actionIsLoading === true">
+          <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
         </div>
 
-        <div class="mb-3 row">
-            <div class="col-4">
-                <label :class="socialActionsClassList">{{
-                    trans(ACTIVITY_SOCIAL_ACTIONS)
-                }}</label>
-            </div>
-            <div class="col-8">
-                <div v-if="actionIsLoading === true">
-                    <i
-                        class="chill-green fa fa-circle-o-notch fa-spin fa-lg"
-                    ></i>
-                </div>
+        <span
+          v-else-if="socialIssuesSelected.length === 0"
+          class="inline-choice chill-no-data-statement mt-3"
+        >
+          {{ trans(ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE) }}
+        </span>
 
-                <span
-                    v-else-if="socialIssuesSelected.length === 0"
-                    class="inline-choice chill-no-data-statement mt-3"
-                >
-                    {{ trans(ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE) }}
-                </span>
+        <template
+          v-else-if="
+            socialActionsList.length > 0 &&
+            (socialIssuesSelected.length || socialActionsSelected.length)
+          "
+        >
+          <div
+            id="actionsList"
+            v-for="group in socialActionsList"
+            :key="group.issue"
+          >
+            <span class="badge bg-chill-l-gray text-dark">{{
+              group.issue
+            }}</span>
+            <check-social-action
+              v-for="action in group.actions"
+              :key="action.id"
+              :action="action"
+              :selection="socialActionsSelected"
+              @updateSelected="updateActionsSelected"
+            >
+            </check-social-action>
+          </div>
+        </template>
 
-                <template
-                    v-else-if="
-                        socialActionsList.length > 0 &&
-                        (socialIssuesSelected.length ||
-                            socialActionsSelected.length)
-                    "
-                >
-                    <div
-                        id="actionsList"
-                        v-for="group in socialActionsList"
-                        :key="group.issue"
-                    >
-                        <span class="badge bg-chill-l-gray text-dark">{{
-                            group.issue
-                        }}</span>
-                        <check-social-action
-                            v-for="action in group.actions"
-                            :key="action.id"
-                            :action="action"
-                            :selection="socialActionsSelected"
-                            @updateSelected="updateActionsSelected"
-                        >
-                        </check-social-action>
-                    </div>
-                </template>
-
-                <span
-                    v-else-if="
-                        actionAreLoaded && socialActionsList.length === 0
-                    "
-                    class="inline-choice chill-no-data-statement mt-3"
-                >
-                    {{ trans(ACTIVITY_SOCIAL_ACTION_LIST_EMPTY) }}
-                </span>
-            </div>
-        </div>
-    </teleport>
+        <span
+          v-else-if="actionAreLoaded && socialActionsList.length === 0"
+          class="inline-choice chill-no-data-statement mt-3"
+        >
+          {{ trans(ACTIVITY_SOCIAL_ACTION_LIST_EMPTY) }}
+        </span>
+      </div>
+    </div>
+  </teleport>
 </template>
 
 <script>
@@ -106,154 +101,153 @@ import CheckSocialIssue from "./SocialIssuesAcc/CheckSocialIssue.vue";
 import CheckSocialAction from "./SocialIssuesAcc/CheckSocialAction.vue";
 import { getSocialIssues, getSocialActionByIssue } from "../api.js";
 import {
-    ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
-    ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
-    ACTIVITY_SOCIAL_ACTIONS,
-    ACTIVITY_SOCIAL_ISSUES,
-    ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE,
-    trans,
+  ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
+  ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
+  ACTIVITY_SOCIAL_ACTIONS,
+  ACTIVITY_SOCIAL_ISSUES,
+  ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE,
+  trans,
 } from "translator";
 
 export default {
-    name: "SocialIssuesAcc",
-    components: {
-        CheckSocialIssue,
-        CheckSocialAction,
-        VueMultiselect,
+  name: "SocialIssuesAcc",
+  components: {
+    CheckSocialIssue,
+    CheckSocialAction,
+    VueMultiselect,
+  },
+  setup() {
+    return {
+      trans,
+      ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
+      ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
+      ACTIVITY_SOCIAL_ACTIONS,
+      ACTIVITY_SOCIAL_ISSUES,
+      ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE,
+    };
+  },
+  data() {
+    return {
+      issueIsLoading: false,
+      actionIsLoading: false,
+      actionAreLoaded: false,
+      socialIssuesClassList: `col-form-label ${document.querySelector("input#chill_activitybundle_activity_socialIssues").getAttribute("required") ? "required" : ""}`,
+      socialActionsClassList: `col-form-label ${document.querySelector("input#chill_activitybundle_activity_socialActions").getAttribute("required") ? "required" : ""}`,
+    };
+  },
+  computed: {
+    socialIssuesList() {
+      return this.$store.state.activity.accompanyingPeriod.socialIssues;
     },
-    setup() {
-        return {
-            trans,
-            ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
-            ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
-            ACTIVITY_SOCIAL_ACTIONS,
-            ACTIVITY_SOCIAL_ISSUES,
-            ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE,
-        };
+    socialIssuesSelected() {
+      return this.$store.state.activity.socialIssues;
     },
-    data() {
-        return {
-            issueIsLoading: false,
-            actionIsLoading: false,
-            actionAreLoaded: false,
-            socialIssuesClassList: `col-form-label ${document.querySelector("input#chill_activitybundle_activity_socialIssues").getAttribute("required") ? "required" : ""}`,
-            socialActionsClassList: `col-form-label ${document.querySelector("input#chill_activitybundle_activity_socialActions").getAttribute("required") ? "required" : ""}`,
-        };
+    socialIssuesOther() {
+      return this.$store.state.socialIssuesOther;
     },
-    computed: {
-        socialIssuesList() {
-            return this.$store.state.activity.accompanyingPeriod.socialIssues;
-        },
-        socialIssuesSelected() {
-            return this.$store.state.activity.socialIssues;
-        },
-        socialIssuesOther() {
-            return this.$store.state.socialIssuesOther;
-        },
-        socialActionsList() {
-            return this.$store.getters.socialActionsListSorted;
-        },
-        socialActionsSelected() {
-            return this.$store.state.activity.socialActions;
-        },
+    socialActionsList() {
+      return this.$store.getters.socialActionsListSorted;
     },
-    mounted() {
-        /* Load other issues in multiselect */
-        this.issueIsLoading = true;
-        this.actionAreLoaded = false;
-
-        getSocialIssues().then((response) => {
-            /* Add issues to the store */
-            this.$store.commit("updateIssuesOther", response);
-
-            /* Add in list the issues already associated (if not yet listed) */
-            this.socialIssuesSelected.forEach((issue) => {
-                if (
-                    this.socialIssuesList.filter((i) => i.id === issue.id)
-                        .length !== 1
-                ) {
-                    this.$store.commit("addIssueInList", issue);
-                }
-            });
-
-            /* Remove from multiselect the issues that are not yet in the checkbox list */
-            this.socialIssuesList.forEach((issue) => {
-                this.$store.commit("removeIssueInOther", issue);
-            });
-
-            /* Filter issues */
-            this.$store.commit("filterList", "issues");
-
-            /* Add in list the actions already associated (if not yet listed) */
-            this.socialActionsSelected.forEach((action) => {
-                this.$store.commit("addActionInList", action);
-            });
-
-            /* Filter actions */
-            this.$store.commit("filterList", "actions");
-
-            this.issueIsLoading = false;
-            this.actionAreLoaded = true;
-            this.updateActionsList();
-        });
+    socialActionsSelected() {
+      return this.$store.state.activity.socialActions;
     },
-    methods: {
-        /* When choosing an issue in multiselect, add it in checkboxes (as selected),
+  },
+  mounted() {
+    /* Load other issues in multiselect */
+    this.issueIsLoading = true;
+    this.actionAreLoaded = false;
+
+    getSocialIssues().then((response) => {
+      /* Add issues to the store */
+      this.$store.commit("updateIssuesOther", response);
+
+      /* Add in list the issues already associated (if not yet listed) */
+      this.socialIssuesSelected.forEach((issue) => {
+        if (
+          this.socialIssuesList.filter((i) => i.id === issue.id).length !== 1
+        ) {
+          this.$store.commit("addIssueInList", issue);
+        }
+      });
+
+      /* Remove from multiselect the issues that are not yet in the checkbox list */
+      this.socialIssuesList.forEach((issue) => {
+        this.$store.commit("removeIssueInOther", issue);
+      });
+
+      /* Filter issues */
+      this.$store.commit("filterList", "issues");
+
+      /* Add in list the actions already associated (if not yet listed) */
+      this.socialActionsSelected.forEach((action) => {
+        this.$store.commit("addActionInList", action);
+      });
+
+      /* Filter actions */
+      this.$store.commit("filterList", "actions");
+
+      this.issueIsLoading = false;
+      this.actionAreLoaded = true;
+      this.updateActionsList();
+    });
+  },
+  methods: {
+    /* When choosing an issue in multiselect, add it in checkboxes (as selected),
          remove it from multiselect, and add socialActions concerned
       */
-        addIssueInList(value) {
-            //console.log('addIssueInList', value);
-            this.$store.commit("addIssueInList", value);
-            this.$store.commit("removeIssueInOther", value);
-            this.$store.dispatch("addIssueSelected", value);
-            this.updateActionsList();
-        },
-        /* Update value for selected issues checkboxes
-         */
-        updateIssuesSelected(issues) {
-            //console.log('updateIssuesSelected', issues);
-            this.$store.dispatch("updateIssuesSelected", issues);
-            this.updateActionsList();
-        },
-        /* Update value for selected actions checkboxes
-         */
-        updateActionsSelected(actions) {
-            //console.log('updateActionsSelected', actions);
-            this.$store.dispatch("updateActionsSelected", actions);
-        },
-        /* Add socialActions concerned: after reset, loop on each issue selected
+    addIssueInList(value) {
+      //console.log('addIssueInList', value);
+      this.$store.commit("addIssueInList", value);
+      this.$store.commit("removeIssueInOther", value);
+      this.$store.dispatch("addIssueSelected", value);
+      this.updateActionsList();
+    },
+    /* Update value for selected issues checkboxes
+     */
+    updateIssuesSelected(issues) {
+      //console.log('updateIssuesSelected', issues);
+      this.$store.dispatch("updateIssuesSelected", issues);
+      this.updateActionsList();
+    },
+    /* Update value for selected actions checkboxes
+     */
+    updateActionsSelected(actions) {
+      //console.log('updateActionsSelected', actions);
+      this.$store.dispatch("updateActionsSelected", actions);
+    },
+    /* Add socialActions concerned: after reset, loop on each issue selected
          to get social actions concerned
       */
-        updateActionsList() {
-            this.resetActionsList();
-            this.socialIssuesSelected.forEach((item) => {
-                this.actionIsLoading = true;
-                getSocialActionByIssue(item.id).then(
-                    (actions) =>
-                        new Promise((resolve) => {
-                            actions.results.forEach((action) => {
-                                this.$store.commit("addActionInList", action);
-                            }, this);
+    updateActionsList() {
+      this.resetActionsList();
+      this.socialIssuesSelected.forEach((item) => {
+        this.actionIsLoading = true;
+        getSocialActionByIssue(item.id).then(
+          (actions) =>
+            new Promise((resolve) => {
+              actions.results.forEach((action) => {
+                this.$store.commit("addActionInList", action);
+              }, this);
 
-                            this.$store.commit("filterList", "actions");
+              this.$store.commit("filterList", "actions");
 
-                            this.actionIsLoading = false;
-                            this.actionAreLoaded = true;
-                            resolve();
-                        }),
-                );
-            }, this);
-        },
-        /* Reset socialActions List: flush list and restore selected actions
-         */
-        resetActionsList() {
-            this.$store.commit("resetActionsList");
-            this.actionAreLoaded = false;
-            this.socialActionsSelected.forEach((item) => {
-                this.$store.commit("addActionInList", item);
-            }, this);
-        },
+              this.actionIsLoading = false;
+              this.actionAreLoaded = true;
+              resolve();
+            }),
+        );
+      }, this);
     },
+    /* Reset socialActions List: flush list and restore selected actions
+     */
+    resetActionsList() {
+      this.$store.commit("resetActionsList");
+      this.actionAreLoaded = false;
+      this.socialActionsSelected.forEach((item) => {
+        this.$store.commit("addActionInList", item);
+      }, this);
+    },
+  },
 };
 </script>
 
@@ -263,18 +257,18 @@ export default {
 @import "ChillMainAssets/chill/scss/chill_variables";
 
 span.multiselect__single {
-    display: none !important;
+  display: none !important;
 }
 
 #actionsList {
-    border-radius: 0.5rem;
-    padding: 1rem;
-    margin: 0.5rem;
-    background-color: whitesmoke;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 0.5rem;
+  background-color: whitesmoke;
 }
 
 span.badge {
-    margin-bottom: 0.5rem;
-    @include badge_social($social-issue-color);
+  margin-bottom: 0.5rem;
+  @include badge_social($social-issue-color);
 }
 </style>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
index 8172b2b6f..cc04a453e 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
@@ -1,38 +1,38 @@
 <template>
-    <span class="inline-choice">
-        <div class="form-check">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                v-model="selected"
-                name="action"
-                :id="action.id"
-                :value="action"
-            />
-            <label class="form-check-label" :for="action.id">
-                <span class="badge bg-light text-dark" :title="action.text">{{
-                    action.text
-                }}</span>
-            </label>
-        </div>
-    </span>
+  <span class="inline-choice">
+    <div class="form-check">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        v-model="selected"
+        name="action"
+        :id="action.id"
+        :value="action"
+      />
+      <label class="form-check-label" :for="action.id">
+        <span class="badge bg-light text-dark" :title="action.text">{{
+          action.text
+        }}</span>
+      </label>
+    </div>
+  </span>
 </template>
 
 <script>
 export default {
-    name: "CheckSocialAction",
-    props: ["action", "selection"],
-    emits: ["updateSelected"],
-    computed: {
-        selected: {
-            set(value) {
-                this.$emit("updateSelected", value);
-            },
-            get() {
-                return this.selection;
-            },
-        },
+  name: "CheckSocialAction",
+  props: ["action", "selection"],
+  emits: ["updateSelected"],
+  computed: {
+    selected: {
+      set(value) {
+        this.$emit("updateSelected", value);
+      },
+      get() {
+        return this.selection;
+      },
     },
+  },
 };
 </script>
 
@@ -41,13 +41,13 @@ export default {
 @import "ChillPersonAssets/chill/scss/mixins";
 @import "ChillMainAssets/chill/scss/chill_variables";
 span.badge {
-    @include badge_social($social-action-color);
-    font-size: 95%;
-    margin-bottom: 5px;
-    margin-right: 1em;
-    max-width: 100%; /* Adjust as needed */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  @include badge_social($social-action-color);
+  font-size: 95%;
+  margin-bottom: 5px;
+  margin-right: 1em;
+  max-width: 100%; /* Adjust as needed */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
index 9dbedf2ea..d6b5d3090 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
@@ -1,38 +1,36 @@
 <template>
-    <span class="inline-choice">
-        <div class="form-check">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                v-model="selected"
-                name="issue"
-                :id="issue.id"
-                :value="issue"
-            />
-            <label class="form-check-label" :for="issue.id">
-                <span class="badge bg-chill-l-gray text-dark">{{
-                    issue.text
-                }}</span>
-            </label>
-        </div>
-    </span>
+  <span class="inline-choice">
+    <div class="form-check">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        v-model="selected"
+        name="issue"
+        :id="issue.id"
+        :value="issue"
+      />
+      <label class="form-check-label" :for="issue.id">
+        <span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
+      </label>
+    </div>
+  </span>
 </template>
 
 <script>
 export default {
-    name: "CheckSocialIssue",
-    props: ["issue", "selection"],
-    emits: ["updateSelected"],
-    computed: {
-        selected: {
-            set(value) {
-                this.$emit("updateSelected", value);
-            },
-            get() {
-                return this.selection;
-            },
-        },
+  name: "CheckSocialIssue",
+  props: ["issue", "selection"],
+  emits: ["updateSelected"],
+  computed: {
+    selected: {
+      set(value) {
+        this.$emit("updateSelected", value);
+      },
+      get() {
+        return this.selection;
+      },
     },
+  },
 };
 </script>
 
@@ -41,9 +39,9 @@ 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;
+  @include badge_social($social-issue-color);
+  font-size: 95%;
+  margin-bottom: 5px;
+  margin-right: 1em;
 }
 </style>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/types.ts b/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
index f0f16429a..542067901 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
@@ -1,76 +1,74 @@
 import { EventInput } from "@fullcalendar/core";
 import {
-    DateTime,
-    Location,
-    User,
-    UserAssociatedInterface,
+  DateTime,
+  Location,
+  User,
+  UserAssociatedInterface,
 } from "../../../ChillMainBundle/Resources/public/types";
 import { Person } from "../../../ChillPersonBundle/Resources/public/types";
 
 export interface CalendarRange {
-    id: number;
-    endDate: DateTime;
-    startDate: DateTime;
-    user: User;
-    location: Location;
-    createdAt: DateTime;
-    createdBy: User;
-    updatedAt: DateTime;
-    updatedBy: User;
+  id: number;
+  endDate: DateTime;
+  startDate: DateTime;
+  user: User;
+  location: Location;
+  createdAt: DateTime;
+  createdBy: User;
+  updatedAt: DateTime;
+  updatedBy: User;
 }
 
 export interface CalendarRangeCreate {
-    user: UserAssociatedInterface;
-    startDate: DateTime;
-    endDate: DateTime;
-    location: Location;
+  user: UserAssociatedInterface;
+  startDate: DateTime;
+  endDate: DateTime;
+  location: Location;
 }
 
 export interface CalendarRangeEdit {
-    startDate?: DateTime;
-    endDate?: DateTime;
-    location?: Location;
+  startDate?: DateTime;
+  endDate?: DateTime;
+  location?: Location;
 }
 
 export interface Calendar {
-    id: number;
+  id: number;
 }
 
 export interface CalendarLight {
-    id: number;
-    endDate: DateTime;
-    startDate: DateTime;
-    mainUser: User;
-    persons: Person[];
-    status: "valid" | "moved" | "canceled";
+  id: number;
+  endDate: DateTime;
+  startDate: DateTime;
+  mainUser: User;
+  persons: Person[];
+  status: "valid" | "moved" | "canceled";
 }
 
 export interface CalendarRemote {
-    id: number;
-    endDate: DateTime;
-    startDate: DateTime;
-    title: string;
-    isAllDay: boolean;
+  id: number;
+  endDate: DateTime;
+  startDate: DateTime;
+  title: string;
+  isAllDay: boolean;
 }
 
 export type EventInputCalendarRange = EventInput & {
-    id: string;
-    userId: number;
-    userLabel: string;
-    calendarRangeId: number;
-    locationId: number;
-    locationName: string;
-    start: string;
-    end: string;
-    is: "range";
+  id: string;
+  userId: number;
+  userLabel: string;
+  calendarRangeId: number;
+  locationId: number;
+  locationName: string;
+  start: string;
+  end: string;
+  is: "range";
 };
 
 export function isEventInputCalendarRange(
-    toBeDetermined: EventInputCalendarRange | EventInput,
+  toBeDetermined: EventInputCalendarRange | EventInput,
 ): toBeDetermined is EventInputCalendarRange {
-    return (
-        typeof toBeDetermined.is === "string" && toBeDetermined.is === "range"
-    );
+  return typeof toBeDetermined.is === "string" && toBeDetermined.is === "range";
 }
 
 export {};
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index 794f05657..c37ea6b91 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -1,164 +1,146 @@
 <template>
-    <teleport to="#mainUser">
-        <h2 class="chill-red">Utilisateur principal</h2>
-        <div>
-            <div>
-                <div v-if="null !== this.$store.getters.getMainUser">
-                    <calendar-active :user="this.$store.getters.getMainUser" />
-                </div>
-                <pick-entity
-                    :multiple="false"
-                    :types="['user']"
-                    :uniqid="'main_user_calendar'"
-                    :picked="
-                        null !== this.$store.getters.getMainUser
-                            ? [this.$store.getters.getMainUser]
-                            : []
-                    "
-                    :removable-if-set="false"
-                    :display-picked="false"
-                    :suggested="this.suggestedUsers"
-                    :label="'main_user'"
-                    @add-new-entity="setMainUser"
-                />
-            </div>
+  <teleport to="#mainUser">
+    <h2 class="chill-red">Utilisateur principal</h2>
+    <div>
+      <div>
+        <div v-if="null !== this.$store.getters.getMainUser">
+          <calendar-active :user="this.$store.getters.getMainUser" />
         </div>
-    </teleport>
+        <pick-entity
+          :multiple="false"
+          :types="['user']"
+          :uniqid="'main_user_calendar'"
+          :picked="
+            null !== this.$store.getters.getMainUser
+              ? [this.$store.getters.getMainUser]
+              : []
+          "
+          :removable-if-set="false"
+          :display-picked="false"
+          :suggested="this.suggestedUsers"
+          :label="'main_user'"
+          @add-new-entity="setMainUser"
+        />
+      </div>
+    </div>
+  </teleport>
 
-    <concerned-groups />
+  <concerned-groups />
 
-    <teleport to="#schedule">
-        <div class="row mb-3" v-if="activity.startDate !== null">
-            <label class="col-form-label col-sm-4">Date</label>
-            <div class="col-sm-8">
-                {{ $d(activity.startDate, "long") }} -
-                {{ $d(activity.endDate, "hoursOnly") }}
-                <span v-if="activity.calendarRange === null"
-                    >(Pas de plage de disponibilité sélectionnée)</span
-                >
-                <span v-else>(Une plage de disponibilité sélectionnée)</span>
-            </div>
-        </div>
-    </teleport>
-
-    <location />
-
-    <teleport to="#fullCalendar">
-        <div class="calendar-actives">
-            <template v-for="u in getActiveUsers" :key="u.id">
-                <calendar-active
-                    :user="u"
-                    :invite="this.$store.getters.getInviteForUser(u)"
-                />
-            </template>
-        </div>
-        <div
-            class="display-options row justify-content-between"
-            style="margin-top: 1rem"
+  <teleport to="#schedule">
+    <div class="row mb-3" v-if="activity.startDate !== null">
+      <label class="col-form-label col-sm-4">Date</label>
+      <div class="col-sm-8">
+        {{ $d(activity.startDate, "long") }} -
+        {{ $d(activity.endDate, "hoursOnly") }}
+        <span v-if="activity.calendarRange === null"
+          >(Pas de plage de disponibilité sélectionnée)</span
         >
-            <div class="col-sm-9 col-xs-12">
-                <div class="input-group mb-3">
-                    <label class="input-group-text" for="slotDuration"
-                        >Durée des créneaux</label
-                    >
-                    <select
-                        v-model="slotDuration"
-                        id="slotDuration"
-                        class="form-select"
-                    >
-                        <option value="00:05:00">5 minutes</option>
-                        <option value="00:10:00">10 minutes</option>
-                        <option value="00:15:00">15 minutes</option>
-                        <option value="00:30:00">30 minutes</option>
-                    </select>
-                    <label class="input-group-text" for="slotMinTime">De</label>
-                    <select
-                        v-model="slotMinTime"
-                        id="slotMinTime"
-                        class="form-select"
-                    >
-                        <option value="00:00:00">0h</option>
-                        <option value="01:00:00">1h</option>
-                        <option value="02:00:00">2h</option>
-                        <option value="03:00:00">3h</option>
-                        <option value="04:00:00">4h</option>
-                        <option value="05:00:00">5h</option>
-                        <option value="06:00:00">6h</option>
-                        <option value="07:00:00">7h</option>
-                        <option value="08:00:00">8h</option>
-                        <option value="09:00:00">9h</option>
-                        <option value="10:00:00">10h</option>
-                        <option value="11:00:00">11h</option>
-                        <option value="12:00:00">12h</option>
-                    </select>
-                    <label class="input-group-text" for="slotMaxTime">À</label>
-                    <select
-                        v-model="slotMaxTime"
-                        id="slotMaxTime"
-                        class="form-select"
-                    >
-                        <option value="12:00:00">12h</option>
-                        <option value="13:00:00">13h</option>
-                        <option value="14:00:00">14h</option>
-                        <option value="15:00:00">15h</option>
-                        <option value="16:00:00">16h</option>
-                        <option value="17:00:00">17h</option>
-                        <option value="18:00:00">18h</option>
-                        <option value="19:00:00">19h</option>
-                        <option value="20:00:00">20h</option>
-                        <option value="21:00:00">21h</option>
-                        <option value="22:00:00">22h</option>
-                        <option value="23:00:00">23h</option>
-                        <option value="23:59:59">24h</option>
-                    </select>
-                </div>
-            </div>
-            <div class="col-sm-3 col-xs-12">
-                <div class="float-end">
-                    <div class="form-check input-group">
-                        <span class="input-group-text">
-                            <input
-                                id="showHideWE"
-                                class="mt-0"
-                                type="checkbox"
-                                v-model="hideWeekends"
-                            />
-                        </span>
-                        <label
-                            for="showHideWE"
-                            class="form-check-label input-group-text"
-                            >Week-ends</label
-                        >
-                    </div>
-                </div>
-            </div>
+        <span v-else>(Une plage de disponibilité sélectionnée)</span>
+      </div>
+    </div>
+  </teleport>
+
+  <location />
+
+  <teleport to="#fullCalendar">
+    <div class="calendar-actives">
+      <template v-for="u in getActiveUsers" :key="u.id">
+        <calendar-active
+          :user="u"
+          :invite="this.$store.getters.getInviteForUser(u)"
+        />
+      </template>
+    </div>
+    <div
+      class="display-options row justify-content-between"
+      style="margin-top: 1rem"
+    >
+      <div class="col-sm-9 col-xs-12">
+        <div class="input-group mb-3">
+          <label class="input-group-text" for="slotDuration"
+            >Durée des créneaux</label
+          >
+          <select v-model="slotDuration" id="slotDuration" class="form-select">
+            <option value="00:05:00">5 minutes</option>
+            <option value="00:10:00">10 minutes</option>
+            <option value="00:15:00">15 minutes</option>
+            <option value="00:30:00">30 minutes</option>
+          </select>
+          <label class="input-group-text" for="slotMinTime">De</label>
+          <select v-model="slotMinTime" id="slotMinTime" class="form-select">
+            <option value="00:00:00">0h</option>
+            <option value="01:00:00">1h</option>
+            <option value="02:00:00">2h</option>
+            <option value="03:00:00">3h</option>
+            <option value="04:00:00">4h</option>
+            <option value="05:00:00">5h</option>
+            <option value="06:00:00">6h</option>
+            <option value="07:00:00">7h</option>
+            <option value="08:00:00">8h</option>
+            <option value="09:00:00">9h</option>
+            <option value="10:00:00">10h</option>
+            <option value="11:00:00">11h</option>
+            <option value="12:00:00">12h</option>
+          </select>
+          <label class="input-group-text" for="slotMaxTime">À</label>
+          <select v-model="slotMaxTime" id="slotMaxTime" class="form-select">
+            <option value="12:00:00">12h</option>
+            <option value="13:00:00">13h</option>
+            <option value="14:00:00">14h</option>
+            <option value="15:00:00">15h</option>
+            <option value="16:00:00">16h</option>
+            <option value="17:00:00">17h</option>
+            <option value="18:00:00">18h</option>
+            <option value="19:00:00">19h</option>
+            <option value="20:00:00">20h</option>
+            <option value="21:00:00">21h</option>
+            <option value="22:00:00">22h</option>
+            <option value="23:00:00">23h</option>
+            <option value="23:59:59">24h</option>
+          </select>
         </div>
-        <FullCalendar ref="fullCalendar" :options="calendarOptions">
-            <template #eventContent="arg">
-                <span>
-                    <b v-if="arg.event.extendedProps.is === 'remote'">{{
-                        arg.event.title
-                    }}</b>
-                    <b v-else-if="arg.event.extendedProps.is === 'range'"
-                        >{{ arg.timeText }}
-                        {{ arg.event.extendedProps.locationName }}
-                        <small>{{
-                            arg.event.extendedProps.userLabel
-                        }}</small></b
-                    >
-                    <b v-else-if="arg.event.extendedProps.is === 'current'"
-                        >{{ arg.timeText }} {{ $t("current_selected") }}
-                    </b>
-                    <b v-else-if="arg.event.extendedProps.is === 'local'">{{
-                        arg.event.title
-                    }}</b>
-                    <b v-else
-                        >{{ arg.timeText }} {{ $t("current_selected") }}
-                    </b>
-                </span>
-            </template>
-        </FullCalendar>
-    </teleport>
+      </div>
+      <div class="col-sm-3 col-xs-12">
+        <div class="float-end">
+          <div class="form-check input-group">
+            <span class="input-group-text">
+              <input
+                id="showHideWE"
+                class="mt-0"
+                type="checkbox"
+                v-model="hideWeekends"
+              />
+            </span>
+            <label for="showHideWE" class="form-check-label input-group-text"
+              >Week-ends</label
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <FullCalendar ref="fullCalendar" :options="calendarOptions">
+      <template #eventContent="arg">
+        <span>
+          <b v-if="arg.event.extendedProps.is === 'remote'">{{
+            arg.event.title
+          }}</b>
+          <b v-else-if="arg.event.extendedProps.is === 'range'"
+            >{{ arg.timeText }}
+            {{ arg.event.extendedProps.locationName }}
+            <small>{{ arg.event.extendedProps.userLabel }}</small></b
+          >
+          <b v-else-if="arg.event.extendedProps.is === 'current'"
+            >{{ arg.timeText }} {{ $t("current_selected") }}
+          </b>
+          <b v-else-if="arg.event.extendedProps.is === 'local'">{{
+            arg.event.title
+          }}</b>
+          <b v-else>{{ arg.timeText }} {{ $t("current_selected") }} </b>
+        </span>
+      </template>
+    </FullCalendar>
+  </teleport>
 </template>
 
 <script>
@@ -175,219 +157,210 @@ import PickEntity from "ChillMainAssets/vuejs/PickEntity/PickEntity.vue";
 import { mapGetters, mapState } from "vuex";
 
 export default {
-    name: "App",
-    components: {
-        ConcernedGroups,
-        Location,
-        FullCalendar,
-        CalendarActive,
-        PickEntity,
+  name: "App",
+  components: {
+    ConcernedGroups,
+    Location,
+    FullCalendar,
+    CalendarActive,
+    PickEntity,
+  },
+  data() {
+    return {
+      errorMsg: [],
+      showMyCalendar: false,
+      slotDuration: "00:05:00",
+      slotMinTime: "09:00:00",
+      slotMaxTime: "18:00:00",
+      hideWeekEnds: true,
+      previousUser: [],
+    };
+  },
+  computed: {
+    ...mapGetters(["getMainUser"]),
+    ...mapState(["activity"]),
+    events() {
+      return this.$store.getters.getEventSources;
     },
-    data() {
-        return {
-            errorMsg: [],
-            showMyCalendar: false,
-            slotDuration: "00:05:00",
-            slotMinTime: "09:00:00",
-            slotMaxTime: "18:00:00",
-            hideWeekEnds: true,
-            previousUser: [],
-        };
+    calendarOptions() {
+      return {
+        locale: frLocale,
+        plugins: [
+          dayGridPlugin,
+          interactionPlugin,
+          timeGridPlugin,
+          dayGridPlugin,
+          listPlugin,
+        ],
+        initialView: "timeGridWeek",
+        initialDate: this.$store.getters.getInitialDate,
+        eventSources: this.events,
+        selectable: true,
+        slotMinTime: this.slotMinTime,
+        slotMaxTime: this.slotMaxTime,
+        scrollTimeReset: false,
+        datesSet: this.onDatesSet,
+        select: this.onDateSelect,
+        eventChange: this.onEventChange,
+        eventClick: this.onEventClick,
+        selectMirror: true,
+        editable: true,
+        weekends: !this.hideWeekEnds,
+        headerToolbar: {
+          left: "prev,next today",
+          center: "title",
+          right: "timeGridWeek,timeGridDay,listWeek",
+        },
+        views: {
+          timeGrid: {
+            slotEventOverlap: false,
+            slotDuration: this.slotDuration,
+          },
+        },
+      };
     },
-    computed: {
-        ...mapGetters(["getMainUser"]),
-        ...mapState(["activity"]),
-        events() {
-            return this.$store.getters.getEventSources;
-        },
-        calendarOptions() {
-            return {
-                locale: frLocale,
-                plugins: [
-                    dayGridPlugin,
-                    interactionPlugin,
-                    timeGridPlugin,
-                    dayGridPlugin,
-                    listPlugin,
-                ],
-                initialView: "timeGridWeek",
-                initialDate: this.$store.getters.getInitialDate,
-                eventSources: this.events,
-                selectable: true,
-                slotMinTime: this.slotMinTime,
-                slotMaxTime: this.slotMaxTime,
-                scrollTimeReset: false,
-                datesSet: this.onDatesSet,
-                select: this.onDateSelect,
-                eventChange: this.onEventChange,
-                eventClick: this.onEventClick,
-                selectMirror: true,
-                editable: true,
-                weekends: !this.hideWeekEnds,
-                headerToolbar: {
-                    left: "prev,next today",
-                    center: "title",
-                    right: "timeGridWeek,timeGridDay,listWeek",
-                },
-                views: {
-                    timeGrid: {
-                        slotEventOverlap: false,
-                        slotDuration: this.slotDuration,
-                    },
-                },
-            };
-        },
-        getActiveUsers() {
-            const users = [];
-            for (const id of this.$store.state.currentView.users.keys()) {
-                users.push(this.$store.getters.getUserDataById(id).user);
-            }
-            return users;
-        },
-        suggestedUsers() {
-            const suggested = [];
-
-            this.$data.previousUser.forEach((u) => {
-                if (u.id !== this.$store.getters.getMainUser.id) {
-                    suggested.push(u);
-                }
-            });
-
-            return suggested;
-        },
+    getActiveUsers() {
+      const users = [];
+      for (const id of this.$store.state.currentView.users.keys()) {
+        users.push(this.$store.getters.getUserDataById(id).user);
+      }
+      return users;
     },
-    methods: {
-        setMainUser({ entity }) {
-            const user = entity;
-            console.log("setMainUser APP", entity);
+    suggestedUsers() {
+      const suggested = [];
 
-            if (
-                user.id !== this.$store.getters.getMainUser &&
-                (this.$store.state.activity.calendarRange !== null ||
-                    this.$store.state.activity.startDate !== null ||
-                    this.$store.state.activity.endDate !== null)
-            ) {
-                if (
-                    !window.confirm(
-                        this.$t("change_main_user_will_reset_event_data"),
-                    )
-                ) {
-                    return;
-                }
-            }
+      this.$data.previousUser.forEach((u) => {
+        if (u.id !== this.$store.getters.getMainUser.id) {
+          suggested.push(u);
+        }
+      });
 
-            // add the previous user, if any, in the previous user list (in use for suggestion)
-            if (null !== this.$store.getters.getMainUser) {
-                const suggestedUids = new Set(
-                    this.$data.previousUser.map((u) => u.id),
-                );
-                if (!suggestedUids.has(this.$store.getters.getMainUser.id)) {
-                    this.$data.previousUser.push(
-                        this.$store.getters.getMainUser,
-                    );
-                }
-            }
-
-            this.$store.dispatch("setMainUser", user);
-            this.$store.commit("showUserOnCalendar", {
-                user,
-                ranges: true,
-                remotes: true,
-            });
-        },
-        removeMainUser(user) {
-            console.log("removeMainUser APP", user);
-
-            window.alert(this.$t("main_user_is_mandatory"));
-            return;
-        },
-        onDatesSet(event) {
-            console.log("onDatesSet", event);
-            this.$store.dispatch("setCurrentDatesView", {
-                start: event.start,
-                end: event.end,
-            });
-        },
-        onDateSelect(payload) {
-            console.log("onDateSelect", payload);
-
-            // show an alert if changing mainUser
-            if (
-                (this.$store.getters.getMainUser !== null &&
-                    this.$store.state.me.id !==
-                        this.$store.getters.getMainUser.id) ||
-                this.$store.getters.getMainUser === null
-            ) {
-                if (!window.confirm(this.$t("will_change_main_user_for_me"))) {
-                    return;
-                } else {
-                    this.$store.commit("showUserOnCalendar", {
-                        user: this.$store.state.me,
-                        remotes: true,
-                        ranges: true,
-                    });
-                }
-            }
-
-            this.$store.dispatch("setEventTimes", {
-                start: payload.start,
-                end: payload.end,
-            });
-        },
-        onEventChange(payload) {
-            console.log("onEventChange", payload);
-            if (this.$store.state.activity.calendarRange !== null) {
-                throw new Error(
-                    "not allowed to edit a calendar associated with a calendar range",
-                );
-            }
-            this.$store.dispatch("setEventTimes", {
-                start: payload.event.start,
-                end: payload.event.end,
-            });
-        },
-        onEventClick(payload) {
-            if (payload.event.extendedProps.is !== "range") {
-                // do nothing when clicking on remote
-                return;
-            }
-
-            // show an alert if changing mainUser
-            if (
-                this.$store.getters.getMainUser !== null &&
-                payload.event.extendedProps.userId !==
-                    this.$store.getters.getMainUser.id
-            ) {
-                if (
-                    !window.confirm(
-                        this.$t("this_calendar_range_will_change_main_user"),
-                    )
-                ) {
-                    return;
-                }
-            }
-
-            this.$store.dispatch("associateCalendarToRange", {
-                range: payload.event,
-            });
-        },
+      return suggested;
     },
+  },
+  methods: {
+    setMainUser({ entity }) {
+      const user = entity;
+      console.log("setMainUser APP", entity);
+
+      if (
+        user.id !== this.$store.getters.getMainUser &&
+        (this.$store.state.activity.calendarRange !== null ||
+          this.$store.state.activity.startDate !== null ||
+          this.$store.state.activity.endDate !== null)
+      ) {
+        if (
+          !window.confirm(this.$t("change_main_user_will_reset_event_data"))
+        ) {
+          return;
+        }
+      }
+
+      // add the previous user, if any, in the previous user list (in use for suggestion)
+      if (null !== this.$store.getters.getMainUser) {
+        const suggestedUids = new Set(this.$data.previousUser.map((u) => u.id));
+        if (!suggestedUids.has(this.$store.getters.getMainUser.id)) {
+          this.$data.previousUser.push(this.$store.getters.getMainUser);
+        }
+      }
+
+      this.$store.dispatch("setMainUser", user);
+      this.$store.commit("showUserOnCalendar", {
+        user,
+        ranges: true,
+        remotes: true,
+      });
+    },
+    removeMainUser(user) {
+      console.log("removeMainUser APP", user);
+
+      window.alert(this.$t("main_user_is_mandatory"));
+      return;
+    },
+    onDatesSet(event) {
+      console.log("onDatesSet", event);
+      this.$store.dispatch("setCurrentDatesView", {
+        start: event.start,
+        end: event.end,
+      });
+    },
+    onDateSelect(payload) {
+      console.log("onDateSelect", payload);
+
+      // show an alert if changing mainUser
+      if (
+        (this.$store.getters.getMainUser !== null &&
+          this.$store.state.me.id !== this.$store.getters.getMainUser.id) ||
+        this.$store.getters.getMainUser === null
+      ) {
+        if (!window.confirm(this.$t("will_change_main_user_for_me"))) {
+          return;
+        } else {
+          this.$store.commit("showUserOnCalendar", {
+            user: this.$store.state.me,
+            remotes: true,
+            ranges: true,
+          });
+        }
+      }
+
+      this.$store.dispatch("setEventTimes", {
+        start: payload.start,
+        end: payload.end,
+      });
+    },
+    onEventChange(payload) {
+      console.log("onEventChange", payload);
+      if (this.$store.state.activity.calendarRange !== null) {
+        throw new Error(
+          "not allowed to edit a calendar associated with a calendar range",
+        );
+      }
+      this.$store.dispatch("setEventTimes", {
+        start: payload.event.start,
+        end: payload.event.end,
+      });
+    },
+    onEventClick(payload) {
+      if (payload.event.extendedProps.is !== "range") {
+        // do nothing when clicking on remote
+        return;
+      }
+
+      // show an alert if changing mainUser
+      if (
+        this.$store.getters.getMainUser !== null &&
+        payload.event.extendedProps.userId !==
+          this.$store.getters.getMainUser.id
+      ) {
+        if (
+          !window.confirm(this.$t("this_calendar_range_will_change_main_user"))
+        ) {
+          return;
+        }
+      }
+
+      this.$store.dispatch("associateCalendarToRange", {
+        range: payload.event,
+      });
+    },
+  },
 };
 </script>
 
 <style>
 .calendar-actives {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .display-options {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }
 
 /* for events which are range */
 .fc-event.isrange {
-    border-width: 3px;
+  border-width: 3px;
 }
 </style>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
index a51e7dd7c..b90349025 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
@@ -1,119 +1,105 @@
 <template>
-    <div :style="style" class="calendar-active">
-        <span class="badge-user">
-            {{ user.text }}
-            <template v-if="invite !== null">
-                <i v-if="invite.status === 'accepted'" class="fa fa-check" />
-                <i
-                    v-else-if="invite.status === 'declined'"
-                    class="fa fa-times"
-                />
-                <i
-                    v-else-if="invite.status === 'pending'"
-                    class="fa fa-question-o"
-                />
-                <i
-                    v-else-if="invite.status === 'tentative'"
-                    class="fa fa-question"
-                />
-                <span v-else="">{{ invite.status }}</span>
-            </template>
-        </span>
-        <span class="form-check-inline form-switch">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                id="flexSwitchCheckDefault"
-                v-model="rangeShow"
-            />
-            &nbsp;<label
-                class="form-check-label"
-                for="flexSwitchCheckDefault"
-                title="Disponibilités"
-                ><i class="fa fa-calendar-check-o"
-            /></label>
-        </span>
-        <span class="form-check-inline form-switch">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                id="flexSwitchCheckDefault"
-                v-model="remoteShow"
-            />
-            &nbsp;<label
-                class="form-check-label"
-                for="flexSwitchCheckDefault"
-                title="Agenda"
-                ><i class="fa fa-calendar"
-            /></label>
-        </span>
-    </div>
+  <div :style="style" class="calendar-active">
+    <span class="badge-user">
+      {{ user.text }}
+      <template v-if="invite !== null">
+        <i v-if="invite.status === 'accepted'" class="fa fa-check" />
+        <i v-else-if="invite.status === 'declined'" class="fa fa-times" />
+        <i v-else-if="invite.status === 'pending'" class="fa fa-question-o" />
+        <i v-else-if="invite.status === 'tentative'" class="fa fa-question" />
+        <span v-else="">{{ invite.status }}</span>
+      </template>
+    </span>
+    <span class="form-check-inline form-switch">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        id="flexSwitchCheckDefault"
+        v-model="rangeShow"
+      />
+      &nbsp;<label
+        class="form-check-label"
+        for="flexSwitchCheckDefault"
+        title="Disponibilités"
+        ><i class="fa fa-calendar-check-o"
+      /></label>
+    </span>
+    <span class="form-check-inline form-switch">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        id="flexSwitchCheckDefault"
+        v-model="remoteShow"
+      />
+      &nbsp;<label
+        class="form-check-label"
+        for="flexSwitchCheckDefault"
+        title="Agenda"
+        ><i class="fa fa-calendar"
+      /></label>
+    </span>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 
 export default {
-    name: "CalendarActive",
-    props: {
-        user: {
-            type: Object,
-            required: true,
-        },
-        invite: {
-            type: Object,
-            required: false,
-            default: null,
-        },
+  name: "CalendarActive",
+  props: {
+    user: {
+      type: Object,
+      required: true,
     },
-    computed: {
-        style() {
-            return {
-                backgroundColor: this.$store.getters.getUserData(this.user)
-                    .mainColor,
-            };
-        },
-        rangeShow: {
-            set(value) {
-                this.$store.commit("showUserOnCalendar", {
-                    user: this.user,
-                    ranges: value,
-                });
-            },
-            get() {
-                return this.$store.getters.isRangeShownOnCalendarForUser(
-                    this.user,
-                );
-            },
-        },
-        remoteShow: {
-            set(value) {
-                this.$store.commit("showUserOnCalendar", {
-                    user: this.user,
-                    remotes: value,
-                });
-            },
-            get() {
-                return this.$store.getters.isRemoteShownOnCalendarForUser(
-                    this.user,
-                );
-            },
-        },
+    invite: {
+      type: Object,
+      required: false,
+      default: null,
     },
+  },
+  computed: {
+    style() {
+      return {
+        backgroundColor: this.$store.getters.getUserData(this.user).mainColor,
+      };
+    },
+    rangeShow: {
+      set(value) {
+        this.$store.commit("showUserOnCalendar", {
+          user: this.user,
+          ranges: value,
+        });
+      },
+      get() {
+        return this.$store.getters.isRangeShownOnCalendarForUser(this.user);
+      },
+    },
+    remoteShow: {
+      set(value) {
+        this.$store.commit("showUserOnCalendar", {
+          user: this.user,
+          remotes: value,
+        });
+      },
+      get() {
+        return this.$store.getters.isRemoteShownOnCalendarForUser(this.user);
+      },
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
 .calendar-active {
-    margin: 0 0.25rem 0.25rem 0;
-    padding: 0.5rem;
+  margin: 0 0.25rem 0.25rem 0;
+  padding: 0.5rem;
 
-    border-radius: 0.5rem;
+  border-radius: 0.5rem;
 
-    color: var(--bs-blue);
+  color: var(--bs-blue);
 
-    & > .badge-user {
-        margin-right: 0.5rem;
-    }
+  & > .badge-user {
+    margin-right: 0.5rem;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.ts
index 135b3ef1a..d267d2606 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.ts
@@ -14,37 +14,37 @@ export { whoami } from "../../../../../ChillMainBundle/Resources/public/lib/api/
  * @return Promise
  */
 export const fetchCalendarRangeForUser = (
-    user: User,
-    start: Date,
-    end: Date,
+  user: User,
+  start: Date,
+  end: Date,
 ): Promise<CalendarRange[]> => {
-    const uri = `/api/1.0/calendar/calendar-range-available/${user.id}.json`;
-    const dateFrom = datetimeToISO(start);
-    const dateTo = datetimeToISO(end);
+  const uri = `/api/1.0/calendar/calendar-range-available/${user.id}.json`;
+  const dateFrom = datetimeToISO(start);
+  const dateTo = datetimeToISO(end);
 
-    return fetchResults<CalendarRange>(uri, { dateFrom, dateTo });
+  return fetchResults<CalendarRange>(uri, { dateFrom, dateTo });
 };
 
 export const fetchCalendarRemoteForUser = (
-    user: User,
-    start: Date,
-    end: Date,
+  user: User,
+  start: Date,
+  end: Date,
 ): Promise<CalendarRemote[]> => {
-    const uri = `/api/1.0/calendar/proxy/calendar/by-user/${user.id}/events`;
-    const dateFrom = datetimeToISO(start);
-    const dateTo = datetimeToISO(end);
+  const uri = `/api/1.0/calendar/proxy/calendar/by-user/${user.id}/events`;
+  const dateFrom = datetimeToISO(start);
+  const dateTo = datetimeToISO(end);
 
-    return fetchResults<CalendarRemote>(uri, { dateFrom, dateTo });
+  return fetchResults<CalendarRemote>(uri, { dateFrom, dateTo });
 };
 
 export const fetchCalendarLocalForUser = (
-    user: User,
-    start: Date,
-    end: Date,
+  user: User,
+  start: Date,
+  end: Date,
 ): Promise<CalendarLight[]> => {
-    const uri = `/api/1.0/calendar/calendar/by-user/${user.id}.json`;
-    const dateFrom = datetimeToISO(start);
-    const dateTo = datetimeToISO(end);
+  const uri = `/api/1.0/calendar/calendar/by-user/${user.id}.json`;
+  const dateFrom = datetimeToISO(start);
+  const dateTo = datetimeToISO(end);
 
-    return fetchResults<CalendarLight>(uri, { dateFrom, dateTo });
+  return fetchResults<CalendarLight>(uri, { dateFrom, dateTo });
 };
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.ts
index 7d7cfaf74..62be00685 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.ts
@@ -1,17 +1,17 @@
 const COLORS = [
-    /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=12 */
-    "#8dd3c7",
-    "#ffffb3",
-    "#bebada",
-    "#fb8072",
-    "#80b1d3",
-    "#fdb462",
-    "#b3de69",
-    "#fccde5",
-    "#d9d9d9",
-    "#bc80bd",
-    "#ccebc5",
-    "#ffed6f",
+  /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=12 */
+  "#8dd3c7",
+  "#ffffb3",
+  "#bebada",
+  "#fb8072",
+  "#80b1d3",
+  "#fdb462",
+  "#b3de69",
+  "#fccde5",
+  "#d9d9d9",
+  "#bc80bd",
+  "#ccebc5",
+  "#ffed6f",
 ];
 
 export { COLORS };
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
index 4e8f97e33..ec312e6de 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
@@ -1,117 +1,117 @@
 import { COLORS } from "../const";
 import { ISOToDatetime } from "../../../../../../ChillMainBundle/Resources/public/chill/js/date";
 import {
-    DateTime,
-    User,
+  DateTime,
+  User,
 } from "../../../../../../ChillMainBundle/Resources/public/types";
 import { CalendarLight, CalendarRange, CalendarRemote } from "../../../types";
 import type { EventInputCalendarRange } from "../../../types";
 import { EventInput } from "@fullcalendar/core";
 
 export interface UserData {
-    user: User;
-    calendarRanges: CalendarRange[];
-    calendarRangesLoaded: {}[];
-    remotes: CalendarRemote[];
-    remotesLoaded: {}[];
-    locals: CalendarRemote[];
-    localsLoaded: {}[];
-    mainColor: string;
+  user: User;
+  calendarRanges: CalendarRange[];
+  calendarRangesLoaded: {}[];
+  remotes: CalendarRemote[];
+  remotesLoaded: {}[];
+  locals: CalendarRemote[];
+  localsLoaded: {}[];
+  mainColor: string;
 }
 
 export const addIdToValue = (string: string, id: number): string => {
-    const array = string ? string.split(",") : [];
-    array.push(id.toString());
-    const str = array.join();
-    return str;
+  const array = string ? string.split(",") : [];
+  array.push(id.toString());
+  const str = array.join();
+  return str;
 };
 
 export const removeIdFromValue = (string: string, id: number) => {
-    let array = string.split(",");
-    array = array.filter((el) => el !== id.toString());
-    const str = array.join();
-    return str;
+  let array = string.split(",");
+  array = array.filter((el) => el !== id.toString());
+  const str = array.join();
+  return str;
 };
 
 /*
  * Assign missing keys for the ConcernedGroups component
  */
 export const mapEntity = (entity: EventInput): EventInput => {
-    const calendar = { ...entity };
-    Object.assign(calendar, { thirdParties: entity.professionals });
+  const calendar = { ...entity };
+  Object.assign(calendar, { thirdParties: entity.professionals });
 
-    if (entity.startDate !== null) {
-        calendar.startDate = ISOToDatetime(entity.startDate.datetime);
-    }
-    if (entity.endDate !== null) {
-        calendar.endDate = ISOToDatetime(entity.endDate.datetime);
-    }
+  if (entity.startDate !== null) {
+    calendar.startDate = ISOToDatetime(entity.startDate.datetime);
+  }
+  if (entity.endDate !== null) {
+    calendar.endDate = ISOToDatetime(entity.endDate.datetime);
+  }
 
-    if (entity.calendarRange !== null) {
-        calendar.calendarRange.calendarRangeId = entity.calendarRange.id;
-        calendar.calendarRange.id = `range_${entity.calendarRange.id}`;
-    }
+  if (entity.calendarRange !== null) {
+    calendar.calendarRange.calendarRangeId = entity.calendarRange.id;
+    calendar.calendarRange.id = `range_${entity.calendarRange.id}`;
+  }
 
-    return calendar;
+  return calendar;
 };
 
 export const createUserData = (user: User, colorIndex: number): UserData => {
-    const colorId = colorIndex % COLORS.length;
+  const colorId = colorIndex % COLORS.length;
 
-    return {
-        user: user,
-        calendarRanges: [],
-        calendarRangesLoaded: [],
-        remotes: [],
-        remotesLoaded: [],
-        locals: [],
-        localsLoaded: [],
-        mainColor: COLORS[colorId],
-    };
+  return {
+    user: user,
+    calendarRanges: [],
+    calendarRangesLoaded: [],
+    remotes: [],
+    remotesLoaded: [],
+    locals: [],
+    localsLoaded: [],
+    mainColor: COLORS[colorId],
+  };
 };
 
 // TODO move this function to a more global namespace, as it is also in use in MyCalendarRange app
 export const calendarRangeToFullCalendarEvent = (
-    entity: CalendarRange,
+  entity: CalendarRange,
 ): EventInputCalendarRange => {
-    return {
-        id: `range_${entity.id}`,
-        title: "(" + entity.user.text + ")",
-        start: entity.startDate.datetime8601,
-        end: entity.endDate.datetime8601,
-        allDay: false,
-        userId: entity.user.id,
-        userLabel: entity.user.label,
-        calendarRangeId: entity.id,
-        locationId: entity.location.id,
-        locationName: entity.location.name,
-        is: "range",
-    };
+  return {
+    id: `range_${entity.id}`,
+    title: "(" + entity.user.text + ")",
+    start: entity.startDate.datetime8601,
+    end: entity.endDate.datetime8601,
+    allDay: false,
+    userId: entity.user.id,
+    userLabel: entity.user.label,
+    calendarRangeId: entity.id,
+    locationId: entity.location.id,
+    locationName: entity.location.name,
+    is: "range",
+  };
 };
 
 export const remoteToFullCalendarEvent = (
-    entity: CalendarRemote,
+  entity: CalendarRemote,
 ): EventInput & { id: string } => {
-    return {
-        id: `range_${entity.id}`,
-        title: entity.title,
-        start: entity.startDate.datetime8601,
-        end: entity.endDate.datetime8601,
-        allDay: entity.isAllDay,
-        is: "remote",
-    };
+  return {
+    id: `range_${entity.id}`,
+    title: entity.title,
+    start: entity.startDate.datetime8601,
+    end: entity.endDate.datetime8601,
+    allDay: entity.isAllDay,
+    is: "remote",
+  };
 };
 
 export const localsToFullCalendarEvent = (
-    entity: CalendarLight,
+  entity: CalendarLight,
 ): EventInput & { id: string; originId: number } => {
-    return {
-        id: `local_${entity.id}`,
-        title: entity.persons.map((p) => p.text).join(", "),
-        originId: entity.id,
-        start: entity.startDate.datetime8601,
-        end: entity.endDate.datetime8601,
-        allDay: false,
-        is: "local",
-    };
+  return {
+    id: `local_${entity.id}`,
+    title: entity.persons.map((p) => p.text).join(", "),
+    originId: entity.id,
+    start: entity.startDate.datetime8601,
+    end: entity.endDate.datetime8601,
+    allDay: false,
+    is: "local",
+  };
 };
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue
index 34b5e3d77..34252ea1b 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue
@@ -1,58 +1,50 @@
 <template>
-    <div class="btn-group" role="group">
-        <button
-            id="btnGroupDrop1"
-            type="button"
-            class="btn btn-misc dropdown-toggle"
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
+  <div class="btn-group" role="group">
+    <button
+      id="btnGroupDrop1"
+      type="button"
+      class="btn btn-misc dropdown-toggle"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+    >
+      <template v-if="status === Statuses.PENDING">
+        <span class="fa fa-hourglass"></span> {{ $t("Give_an_answer") }}
+      </template>
+      <template v-else-if="status === Statuses.ACCEPTED">
+        <span class="fa fa-check"></span> {{ $t("Accepted") }}
+      </template>
+      <template v-else-if="status === Statuses.DECLINED">
+        <span class="fa fa-times"></span> {{ $t("Declined") }}
+      </template>
+      <template v-else-if="status === Statuses.TENTATIVELY_ACCEPTED">
+        <span class="fa fa-question"></span> {{ $t("Tentative") }}
+      </template>
+    </button>
+    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+      <li v-if="status !== Statuses.ACCEPTED">
+        <a class="dropdown-item" @click="changeStatus(Statuses.ACCEPTED)"
+          ><i class="fa fa-check" aria-hidden="true"></i> {{ $t("Accept") }}</a
         >
-            <template v-if="status === Statuses.PENDING">
-                <span class="fa fa-hourglass"></span> {{ $t("Give_an_answer") }}
-            </template>
-            <template v-else-if="status === Statuses.ACCEPTED">
-                <span class="fa fa-check"></span> {{ $t("Accepted") }}
-            </template>
-            <template v-else-if="status === Statuses.DECLINED">
-                <span class="fa fa-times"></span> {{ $t("Declined") }}
-            </template>
-            <template v-else-if="status === Statuses.TENTATIVELY_ACCEPTED">
-                <span class="fa fa-question"></span> {{ $t("Tentative") }}
-            </template>
-        </button>
-        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-            <li v-if="status !== Statuses.ACCEPTED">
-                <a
-                    class="dropdown-item"
-                    @click="changeStatus(Statuses.ACCEPTED)"
-                    ><i class="fa fa-check" aria-hidden="true"></i>
-                    {{ $t("Accept") }}</a
-                >
-            </li>
-            <li v-if="status !== Statuses.DECLINED">
-                <a
-                    class="dropdown-item"
-                    @click="changeStatus(Statuses.DECLINED)"
-                    ><i class="fa fa-times" aria-hidden="true"></i>
-                    {{ $t("Decline") }}</a
-                >
-            </li>
-            <li v-if="status !== Statuses.TENTATIVELY_ACCEPTED">
-                <a
-                    class="dropdown-item"
-                    @click="changeStatus(Statuses.TENTATIVELY_ACCEPTED)"
-                    ><i class="fa fa-question"></i>
-                    {{ $t("Tentatively_accept") }}</a
-                >
-            </li>
-            <li v-if="status !== Statuses.PENDING">
-                <a class="dropdown-item" @click="changeStatus(Statuses.PENDING)"
-                    ><i class="fa fa-hourglass-o"></i>
-                    {{ $t("Set_pending") }}</a
-                >
-            </li>
-        </ul>
-    </div>
+      </li>
+      <li v-if="status !== Statuses.DECLINED">
+        <a class="dropdown-item" @click="changeStatus(Statuses.DECLINED)"
+          ><i class="fa fa-times" aria-hidden="true"></i> {{ $t("Decline") }}</a
+        >
+      </li>
+      <li v-if="status !== Statuses.TENTATIVELY_ACCEPTED">
+        <a
+          class="dropdown-item"
+          @click="changeStatus(Statuses.TENTATIVELY_ACCEPTED)"
+          ><i class="fa fa-question"></i> {{ $t("Tentatively_accept") }}</a
+        >
+      </li>
+      <li v-if="status !== Statuses.PENDING">
+        <a class="dropdown-item" @click="changeStatus(Statuses.PENDING)"
+          ><i class="fa fa-hourglass-o"></i> {{ $t("Set_pending") }}</a
+        >
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script lang="ts">
@@ -64,69 +56,67 @@ const PENDING = "pending";
 const TENTATIVELY_ACCEPTED = "tentative";
 
 const i18n = {
-    messages: {
-        fr: {
-            Give_an_answer: "Répondre",
-            Accepted: "Accepté",
-            Declined: "Refusé",
-            Tentative: "Accepté provisoirement",
-            Accept: "Accepter",
-            Decline: "Refuser",
-            Tentatively_accept: "Accepter provisoirement",
-            Set_pending: "Ne pas répondre",
-        },
+  messages: {
+    fr: {
+      Give_an_answer: "Répondre",
+      Accepted: "Accepté",
+      Declined: "Refusé",
+      Tentative: "Accepté provisoirement",
+      Accept: "Accepter",
+      Decline: "Refuser",
+      Tentatively_accept: "Accepter provisoirement",
+      Set_pending: "Ne pas répondre",
     },
+  },
 };
 
 export default defineComponent({
-    name: "Answer",
-    i18n,
-    props: {
-        calendarId: { type: Number, required: true },
-        status: {
-            type: String as PropType<
-                "accepted" | "declined" | "pending" | "tentative"
-            >,
-            required: true,
-        },
+  name: "Answer",
+  i18n,
+  props: {
+    calendarId: { type: Number, required: true },
+    status: {
+      type: String as PropType<
+        "accepted" | "declined" | "pending" | "tentative"
+      >,
+      required: true,
     },
-    emits: {
-        statusChanged(
-            payload: "accepted" | "declined" | "pending" | "tentative",
-        ) {
-            return true;
-        },
+  },
+  emits: {
+    statusChanged(payload: "accepted" | "declined" | "pending" | "tentative") {
+      return true;
     },
-    data() {
-        return {
-            Statuses: {
-                ACCEPTED,
-                DECLINED,
-                PENDING,
-                TENTATIVELY_ACCEPTED,
-            },
-        };
-    },
-    methods: {
-        changeStatus: function (
-            newStatus: "accepted" | "declined" | "pending" | "tentative",
-        ) {
-            console.log("changeStatus", newStatus);
-            const url = `/api/1.0/calendar/calendar/${this.$props.calendarId}/answer/${newStatus}.json`;
-            window
-                .fetch(url, {
-                    method: "POST",
-                })
-                .then((r: Response) => {
-                    if (!r.ok) {
-                        console.error("could not confirm answer", newStatus);
-                        return;
-                    }
-                    console.log("answer sent", newStatus);
-                    this.$emit("statusChanged", newStatus);
-                });
-        },
+  },
+  data() {
+    return {
+      Statuses: {
+        ACCEPTED,
+        DECLINED,
+        PENDING,
+        TENTATIVELY_ACCEPTED,
+      },
+    };
+  },
+  methods: {
+    changeStatus: function (
+      newStatus: "accepted" | "declined" | "pending" | "tentative",
+    ) {
+      console.log("changeStatus", newStatus);
+      const url = `/api/1.0/calendar/calendar/${this.$props.calendarId}/answer/${newStatus}.json`;
+      window
+        .fetch(url, {
+          method: "POST",
+        })
+        .then((r: Response) => {
+          if (!r.ok) {
+            console.error("could not confirm answer", newStatus);
+            return;
+          }
+          console.log("answer sent", newStatus);
+          this.$emit("statusChanged", newStatus);
+        });
     },
+  },
 });
 </script>
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
index c1cbb7327..d9fcec012 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
@@ -1,225 +1,177 @@
 <template>
-    <div class="row">
-        <div class="col-sm">
-            <label class="form-label">{{ $t("created_availabilities") }}</label>
-            <vue-multiselect
-                v-model="pickedLocation"
-                :options="locations"
-                :label="'name'"
-                :track-by="'id'"
-                :selectLabel="'Presser \'Entrée\' pour choisir'"
-                :selectedLabel="'Choisir'"
-                :deselectLabel="'Presser \'Entrée\' pour enlever'"
-                :placeholder="'Choisir'"
-            ></vue-multiselect>
-        </div>
+  <div class="row">
+    <div class="col-sm">
+      <label class="form-label">{{ $t("created_availabilities") }}</label>
+      <vue-multiselect
+        v-model="pickedLocation"
+        :options="locations"
+        :label="'name'"
+        :track-by="'id'"
+        :selectLabel="'Presser \'Entrée\' pour choisir'"
+        :selectedLabel="'Choisir'"
+        :deselectLabel="'Presser \'Entrée\' pour enlever'"
+        :placeholder="'Choisir'"
+      ></vue-multiselect>
     </div>
-    <div
-        class="display-options row justify-content-between"
-        style="margin-top: 1rem"
-    >
-        <div class="col-sm-9 col-xs-12">
-            <div class="input-group mb-3">
-                <label class="input-group-text" for="slotDuration"
-                    >Durée des créneaux</label
-                >
-                <select
-                    v-model="slotDuration"
-                    id="slotDuration"
-                    class="form-select"
-                >
-                    <option value="00:05:00">5 minutes</option>
-                    <option value="00:10:00">10 minutes</option>
-                    <option value="00:15:00">15 minutes</option>
-                    <option value="00:30:00">30 minutes</option>
-                </select>
-                <label class="input-group-text" for="slotMinTime">De</label>
-                <select
-                    v-model="slotMinTime"
-                    id="slotMinTime"
-                    class="form-select"
-                >
-                    <option value="00:00:00">0h</option>
-                    <option value="01:00:00">1h</option>
-                    <option value="02:00:00">2h</option>
-                    <option value="03:00:00">3h</option>
-                    <option value="04:00:00">4h</option>
-                    <option value="05:00:00">5h</option>
-                    <option value="06:00:00">6h</option>
-                    <option value="07:00:00">7h</option>
-                    <option value="08:00:00">8h</option>
-                    <option value="09:00:00">9h</option>
-                    <option value="10:00:00">10h</option>
-                    <option value="11:00:00">11h</option>
-                    <option value="12:00:00">12h</option>
-                </select>
-                <label class="input-group-text" for="slotMaxTime">À</label>
-                <select
-                    v-model="slotMaxTime"
-                    id="slotMaxTime"
-                    class="form-select"
-                >
-                    <option value="12:00:00">12h</option>
-                    <option value="13:00:00">13h</option>
-                    <option value="14:00:00">14h</option>
-                    <option value="15:00:00">15h</option>
-                    <option value="16:00:00">16h</option>
-                    <option value="17:00:00">17h</option>
-                    <option value="18:00:00">18h</option>
-                    <option value="19:00:00">19h</option>
-                    <option value="20:00:00">20h</option>
-                    <option value="21:00:00">21h</option>
-                    <option value="22:00:00">22h</option>
-                    <option value="23:00:00">23h</option>
-                    <option value="23:59:59">24h</option>
-                </select>
-            </div>
-        </div>
-        <div class="col-xs-12 col-sm-3">
-            <div class="float-end">
-                <div class="form-check input-group">
-                    <span class="input-group-text">
-                        <input
-                            id="showHideWE"
-                            class="mt-0"
-                            type="checkbox"
-                            v-model="showWeekends"
-                        />
-                    </span>
-                    <label
-                        for="showHideWE"
-                        class="form-check-label input-group-text"
-                        >Week-ends</label
-                    >
-                </div>
-            </div>
-        </div>
+  </div>
+  <div
+    class="display-options row justify-content-between"
+    style="margin-top: 1rem"
+  >
+    <div class="col-sm-9 col-xs-12">
+      <div class="input-group mb-3">
+        <label class="input-group-text" for="slotDuration"
+          >Durée des créneaux</label
+        >
+        <select v-model="slotDuration" id="slotDuration" class="form-select">
+          <option value="00:05:00">5 minutes</option>
+          <option value="00:10:00">10 minutes</option>
+          <option value="00:15:00">15 minutes</option>
+          <option value="00:30:00">30 minutes</option>
+        </select>
+        <label class="input-group-text" for="slotMinTime">De</label>
+        <select v-model="slotMinTime" id="slotMinTime" class="form-select">
+          <option value="00:00:00">0h</option>
+          <option value="01:00:00">1h</option>
+          <option value="02:00:00">2h</option>
+          <option value="03:00:00">3h</option>
+          <option value="04:00:00">4h</option>
+          <option value="05:00:00">5h</option>
+          <option value="06:00:00">6h</option>
+          <option value="07:00:00">7h</option>
+          <option value="08:00:00">8h</option>
+          <option value="09:00:00">9h</option>
+          <option value="10:00:00">10h</option>
+          <option value="11:00:00">11h</option>
+          <option value="12:00:00">12h</option>
+        </select>
+        <label class="input-group-text" for="slotMaxTime">À</label>
+        <select v-model="slotMaxTime" id="slotMaxTime" class="form-select">
+          <option value="12:00:00">12h</option>
+          <option value="13:00:00">13h</option>
+          <option value="14:00:00">14h</option>
+          <option value="15:00:00">15h</option>
+          <option value="16:00:00">16h</option>
+          <option value="17:00:00">17h</option>
+          <option value="18:00:00">18h</option>
+          <option value="19:00:00">19h</option>
+          <option value="20:00:00">20h</option>
+          <option value="21:00:00">21h</option>
+          <option value="22:00:00">22h</option>
+          <option value="23:00:00">23h</option>
+          <option value="23:59:59">24h</option>
+        </select>
+      </div>
     </div>
-    <FullCalendar :options="calendarOptions" ref="calendarRef">
-        <template v-slot:eventContent="{ event }: { event: EventApi }">
-            <span :class="eventClasses">
-                <b v-if="event.extendedProps.is === 'remote'">{{
-                    event.title
-                }}</b>
-                <b v-else-if="event.extendedProps.is === 'range'"
-                    >{{ formatDate(event.startStr) }} -
-                    {{ event.extendedProps.locationName }}</b
-                >
-                <b v-else-if="event.extendedProps.is === 'local'">{{
-                    event.title
-                }}</b>
-                <b v-else>no 'is'</b>
-                <a
-                    v-if="event.extendedProps.is === 'range'"
-                    class="fa fa-fw fa-times delete"
-                    @click.prevent="onClickDelete(event)"
-                >
-                </a>
-            </span>
+    <div class="col-xs-12 col-sm-3">
+      <div class="float-end">
+        <div class="form-check input-group">
+          <span class="input-group-text">
+            <input
+              id="showHideWE"
+              class="mt-0"
+              type="checkbox"
+              v-model="showWeekends"
+            />
+          </span>
+          <label for="showHideWE" class="form-check-label input-group-text"
+            >Week-ends</label
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+  <FullCalendar :options="calendarOptions" ref="calendarRef">
+    <template v-slot:eventContent="{ event }: { event: EventApi }">
+      <span :class="eventClasses">
+        <b v-if="event.extendedProps.is === 'remote'">{{ event.title }}</b>
+        <b v-else-if="event.extendedProps.is === 'range'"
+          >{{ formatDate(event.startStr) }} -
+          {{ event.extendedProps.locationName }}</b
+        >
+        <b v-else-if="event.extendedProps.is === 'local'">{{ event.title }}</b>
+        <b v-else>no 'is'</b>
+        <a
+          v-if="event.extendedProps.is === 'range'"
+          class="fa fa-fw fa-times delete"
+          @click.prevent="onClickDelete(event)"
+        >
+        </a>
+      </span>
+    </template>
+  </FullCalendar>
+
+  <div id="copy-widget">
+    <div class="container mt-2 mb-2">
+      <div class="row justify-content-between align-items-center mb-4">
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <h6 class="chill-red">{{ $t("copy_range_from_to") }}</h6>
+        </div>
+        <div class="col-xs-12 col-sm-9 col-md-2">
+          <select v-model="dayOrWeek" id="dayOrWeek" class="form-select">
+            <option value="day">{{ $t("from_day_to_day") }}</option>
+            <option value="week">
+              {{ $t("from_week_to_week") }}
+            </option>
+          </select>
+        </div>
+        <template v-if="dayOrWeek === 'day'">
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <input class="form-control" type="date" v-model="copyFrom" />
+          </div>
+          <div class="col-xs-12 col-sm-1 col-md-1 copy-chevron">
+            <i class="fa fa-angle-double-right"></i>
+          </div>
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <input class="form-control" type="date" v-model="copyTo" />
+          </div>
+          <div class="col-xs-12 col-sm-5 col-md-1">
+            <button class="btn btn-action float-end" @click="copyDay">
+              {{ $t("copy_range") }}
+            </button>
+          </div>
         </template>
-    </FullCalendar>
-
-    <div id="copy-widget">
-        <div class="container mt-2 mb-2">
-            <div class="row justify-content-between align-items-center mb-4">
-                <div class="col-xs-12 col-sm-3 col-md-2">
-                    <h6 class="chill-red">{{ $t("copy_range_from_to") }}</h6>
-                </div>
-                <div class="col-xs-12 col-sm-9 col-md-2">
-                    <select
-                        v-model="dayOrWeek"
-                        id="dayOrWeek"
-                        class="form-select"
-                    >
-                        <option value="day">{{ $t("from_day_to_day") }}</option>
-                        <option value="week">
-                            {{ $t("from_week_to_week") }}
-                        </option>
-                    </select>
-                </div>
-                <template v-if="dayOrWeek === 'day'">
-                    <div class="col-xs-12 col-sm-3 col-md-3">
-                        <input
-                            class="form-control"
-                            type="date"
-                            v-model="copyFrom"
-                        />
-                    </div>
-                    <div class="col-xs-12 col-sm-1 col-md-1 copy-chevron">
-                        <i class="fa fa-angle-double-right"></i>
-                    </div>
-                    <div class="col-xs-12 col-sm-3 col-md-3">
-                        <input
-                            class="form-control"
-                            type="date"
-                            v-model="copyTo"
-                        />
-                    </div>
-                    <div class="col-xs-12 col-sm-5 col-md-1">
-                        <button
-                            class="btn btn-action float-end"
-                            @click="copyDay"
-                        >
-                            {{ $t("copy_range") }}
-                        </button>
-                    </div>
-                </template>
-                <template v-else>
-                    <div class="col-xs-12 col-sm-3 col-md-3">
-                        <select
-                            v-model="copyFromWeek"
-                            id="copyFromWeek"
-                            class="form-select"
-                        >
-                            <option
-                                v-for="w in lastWeeks"
-                                :value="w.value"
-                                :key="w.value"
-                            >
-                                {{ w.text }}
-                            </option>
-                        </select>
-                    </div>
-                    <div class="col-xs-12 col-sm-1 col-md-1 copy-chevron">
-                        <i class="fa fa-angle-double-right"></i>
-                    </div>
-                    <div class="col-xs-12 col-sm-3 col-md-3">
-                        <select
-                            v-model="copyToWeek"
-                            id="copyToWeek"
-                            class="form-select"
-                        >
-                            <option
-                                v-for="w in nextWeeks"
-                                :value="w.value"
-                                :key="w.value"
-                            >
-                                {{ w.text }}
-                            </option>
-                        </select>
-                    </div>
-                    <div class="col-xs-12 col-sm-5 col-md-1">
-                        <button
-                            class="btn btn-action float-end"
-                            @click="copyWeek"
-                        >
-                            {{ $t("copy_range") }}
-                        </button>
-                    </div>
-                </template>
-            </div>
-        </div>
+        <template v-else>
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <select
+              v-model="copyFromWeek"
+              id="copyFromWeek"
+              class="form-select"
+            >
+              <option v-for="w in lastWeeks" :value="w.value" :key="w.value">
+                {{ w.text }}
+              </option>
+            </select>
+          </div>
+          <div class="col-xs-12 col-sm-1 col-md-1 copy-chevron">
+            <i class="fa fa-angle-double-right"></i>
+          </div>
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <select v-model="copyToWeek" id="copyToWeek" class="form-select">
+              <option v-for="w in nextWeeks" :value="w.value" :key="w.value">
+                {{ w.text }}
+              </option>
+            </select>
+          </div>
+          <div class="col-xs-12 col-sm-5 col-md-1">
+            <button class="btn btn-action float-end" @click="copyWeek">
+              {{ $t("copy_range") }}
+            </button>
+          </div>
+        </template>
+      </div>
     </div>
+  </div>
 
-    <!-- not directly seen, but include in a modal -->
-    <edit-location ref="editLocation"></edit-location>
+  <!-- not directly seen, but include in a modal -->
+  <edit-location ref="editLocation"></edit-location>
 </template>
 
 <script setup lang="ts">
 import type {
-    CalendarOptions,
-    DatesSetArg,
-    EventInput,
+  CalendarOptions,
+  DatesSetArg,
+  EventInput,
 } from "@fullcalendar/core";
 import { computed, ref, onMounted } from "vue";
 import { useStore } from "vuex";
@@ -227,14 +179,14 @@ import { key } from "./store";
 import FullCalendar from "@fullcalendar/vue3";
 import frLocale from "@fullcalendar/core/locales/fr";
 import interactionPlugin, {
-    EventResizeDoneArg,
+  EventResizeDoneArg,
 } from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import {
-    EventApi,
-    DateSelectArg,
-    EventDropArg,
-    EventClickArg,
+  EventApi,
+  DateSelectArg,
+  EventDropArg,
+  EventClickArg,
 } from "@fullcalendar/core";
 import { dateToISO, ISOToDate } from "ChillMainAssets/chill/js/date";
 import VueMultiselect from "vue-multiselect";
@@ -255,96 +207,96 @@ const copyFromWeek = ref<string | null>(null);
 const copyToWeek = ref<string | null>(null);
 
 interface Weeks {
-    value: string | null;
-    text: string;
+  value: string | null;
+  text: string;
 }
 
 const getMonday = (week: number): Date => {
-    const lastMonday = new Date();
-    lastMonday.setDate(
-        lastMonday.getDate() - ((lastMonday.getDay() + 6) % 7) + week * 7,
-    );
-    return lastMonday;
+  const lastMonday = new Date();
+  lastMonday.setDate(
+    lastMonday.getDate() - ((lastMonday.getDay() + 6) % 7) + week * 7,
+  );
+  return lastMonday;
 };
 
 const dateOptions: Intl.DateTimeFormatOptions = {
-    weekday: "long",
-    year: "numeric",
-    month: "long",
-    day: "numeric",
+  weekday: "long",
+  year: "numeric",
+  month: "long",
+  day: "numeric",
 };
 
 const lastWeeks = computed((): Weeks[] =>
-    Array.from(Array(30).keys()).map((w) => {
-        const lastMonday = getMonday(15 - w);
-        return {
-            value: dateToISO(lastMonday),
-            text: `Semaine du ${lastMonday.toLocaleDateString("fr-FR", dateOptions)}`,
-        };
-    }),
+  Array.from(Array(30).keys()).map((w) => {
+    const lastMonday = getMonday(15 - w);
+    return {
+      value: dateToISO(lastMonday),
+      text: `Semaine du ${lastMonday.toLocaleDateString("fr-FR", dateOptions)}`,
+    };
+  }),
 );
 
 const nextWeeks = computed((): Weeks[] =>
-    Array.from(Array(52).keys()).map((w) => {
-        const nextMonday = getMonday(w + 1);
-        return {
-            value: dateToISO(nextMonday),
-            text: `Semaine du ${nextMonday.toLocaleDateString("fr-FR", dateOptions)}`,
-        };
-    }),
+  Array.from(Array(52).keys()).map((w) => {
+    const nextMonday = getMonday(w + 1);
+    return {
+      value: dateToISO(nextMonday),
+      text: `Semaine du ${nextMonday.toLocaleDateString("fr-FR", dateOptions)}`,
+    };
+  }),
 );
 
 const formatDate = (datetime: string) => {
-    console.log(typeof datetime);
-    return ISOToDate(datetime);
+  console.log(typeof datetime);
+  return ISOToDate(datetime);
 };
 
 const baseOptions = ref<CalendarOptions>({
-    locale: frLocale,
-    plugins: [interactionPlugin, timeGridPlugin],
-    initialView: "timeGridWeek",
-    initialDate: new Date(),
-    scrollTimeReset: false,
-    selectable: true,
-    // when the dates are changes in the fullcalendar view OR when new events are added
-    datesSet: onDatesSet,
-    // when a date is selected
-    select: onDateSelect,
-    // when a event is resized
-    eventResize: onEventDropOrResize,
-    // when an event is moved
-    eventDrop: onEventDropOrResize,
-    // when an event si clicked
-    eventClick: onEventClick,
-    selectMirror: false,
-    editable: true,
-    headerToolbar: {
-        left: "prev,next today",
-        center: "title",
-        right: "timeGridWeek,timeGridDay",
-    },
+  locale: frLocale,
+  plugins: [interactionPlugin, timeGridPlugin],
+  initialView: "timeGridWeek",
+  initialDate: new Date(),
+  scrollTimeReset: false,
+  selectable: true,
+  // when the dates are changes in the fullcalendar view OR when new events are added
+  datesSet: onDatesSet,
+  // when a date is selected
+  select: onDateSelect,
+  // when a event is resized
+  eventResize: onEventDropOrResize,
+  // when an event is moved
+  eventDrop: onEventDropOrResize,
+  // when an event si clicked
+  eventClick: onEventClick,
+  selectMirror: false,
+  editable: true,
+  headerToolbar: {
+    left: "prev,next today",
+    center: "title",
+    right: "timeGridWeek,timeGridDay",
+  },
 });
 
 const ranges = computed<EventInput[]>(() => {
-    return store.state.calendarRanges.ranges;
+  return store.state.calendarRanges.ranges;
 });
 
 const locations = computed<Location[]>(() => {
-    return store.state.locations.locations;
+  return store.state.locations.locations;
 });
 
 const pickedLocation = computed<Location | null>({
-    get(): Location | null {
-        return (
-            store.state.locations.locationPicked ||
-            store.state.locations.currentLocation
-        );
-    },
-    set(newLocation: Location | null): void {
-        store.commit("locations/setLocationPicked", newLocation, {
-            root: true,
-        });
-    },
+  get(): Location | null {
+    return (
+      store.state.locations.locationPicked ||
+      store.state.locations.currentLocation
+    );
+  },
+  set(newLocation: Location | null): void {
+    store.commit("locations/setLocationPicked", newLocation, {
+      root: true,
+    });
+  },
 });
 
 /**
@@ -373,116 +325,116 @@ const sources = computed<EventSourceInput[]>(() => {
 */
 
 const calendarOptions = computed((): CalendarOptions => {
-    return {
-        ...baseOptions.value,
-        weekends: showWeekends.value,
-        slotDuration: slotDuration.value,
-        events: ranges.value,
-        slotMinTime: slotMinTime.value,
-        slotMaxTime: slotMaxTime.value,
-    };
+  return {
+    ...baseOptions.value,
+    weekends: showWeekends.value,
+    slotDuration: slotDuration.value,
+    events: ranges.value,
+    slotMinTime: slotMinTime.value,
+    slotMaxTime: slotMaxTime.value,
+  };
 });
 
 /**
  * launched when the calendar range date change
  */
 function onDatesSet(event: DatesSetArg): void {
-    store.dispatch("fullCalendar/setCurrentDatesView", {
-        start: event.start,
-        end: event.end,
-    });
+  store.dispatch("fullCalendar/setCurrentDatesView", {
+    start: event.start,
+    end: event.end,
+  });
 }
 
 function onDateSelect(event: DateSelectArg): void {
-    if (null === pickedLocation.value) {
-        window.alert(
-            "Indiquez une localisation avant de créer une période de disponibilité.",
-        );
-        return;
-    }
+  if (null === pickedLocation.value) {
+    window.alert(
+      "Indiquez une localisation avant de créer une période de disponibilité.",
+    );
+    return;
+  }
 
-    store.dispatch("calendarRanges/createRange", {
-        start: event.start,
-        end: event.end,
-        location: pickedLocation.value,
-    });
+  store.dispatch("calendarRanges/createRange", {
+    start: event.start,
+    end: event.end,
+    location: pickedLocation.value,
+  });
 }
 
 /**
  * When a calendar range is deleted
  */
 function onClickDelete(event: EventApi): void {
-    if (event.extendedProps.is !== "range") {
-        return;
-    }
+  if (event.extendedProps.is !== "range") {
+    return;
+  }
 
-    store.dispatch(
-        "calendarRanges/deleteRange",
-        event.extendedProps.calendarRangeId,
-    );
+  store.dispatch(
+    "calendarRanges/deleteRange",
+    event.extendedProps.calendarRangeId,
+  );
 }
 
 function onEventDropOrResize(payload: EventDropArg | EventResizeDoneArg) {
-    if (payload.event.extendedProps.is !== "range") {
-        return;
-    }
+  if (payload.event.extendedProps.is !== "range") {
+    return;
+  }
 
-    store.dispatch("calendarRanges/patchRangeTime", {
-        calendarRangeId: payload.event.extendedProps.calendarRangeId,
-        start: payload.event.start,
-        end: payload.event.end,
-    });
+  store.dispatch("calendarRanges/patchRangeTime", {
+    calendarRangeId: payload.event.extendedProps.calendarRangeId,
+    start: payload.event.start,
+    end: payload.event.end,
+  });
 }
 
 function onEventClick(payload: EventClickArg): void {
-    // @ts-ignore TS does not recognize the target. But it does exists.
-    if (payload.jsEvent.target.classList.contains("delete")) {
-        return;
-    }
-    if (payload.event.extendedProps.is !== "range") {
-        return;
-    }
+  // @ts-ignore TS does not recognize the target. But it does exists.
+  if (payload.jsEvent.target.classList.contains("delete")) {
+    return;
+  }
+  if (payload.event.extendedProps.is !== "range") {
+    return;
+  }
 
-    editLocation.value?.startEdit(payload.event);
+  editLocation.value?.startEdit(payload.event);
 }
 
 function copyDay() {
-    if (null === copyFrom.value || null === copyTo.value) {
-        return;
-    }
-    store.dispatch("calendarRanges/copyFromDayToAnotherDay", {
-        from: ISOToDate(copyFrom.value),
-        to: ISOToDate(copyTo.value),
-    });
+  if (null === copyFrom.value || null === copyTo.value) {
+    return;
+  }
+  store.dispatch("calendarRanges/copyFromDayToAnotherDay", {
+    from: ISOToDate(copyFrom.value),
+    to: ISOToDate(copyTo.value),
+  });
 }
 
 function copyWeek() {
-    if (null === copyFromWeek.value || null === copyToWeek.value) {
-        return;
-    }
-    store.dispatch("calendarRanges/copyFromWeekToAnotherWeek", {
-        fromMonday: ISOToDate(copyFromWeek.value),
-        toMonday: ISOToDate(copyToWeek.value),
-    });
+  if (null === copyFromWeek.value || null === copyToWeek.value) {
+    return;
+  }
+  store.dispatch("calendarRanges/copyFromWeekToAnotherWeek", {
+    fromMonday: ISOToDate(copyFromWeek.value),
+    toMonday: ISOToDate(copyToWeek.value),
+  });
 }
 
 onMounted(() => {
-    copyFromWeek.value = dateToISO(getMonday(0));
-    copyToWeek.value = dateToISO(getMonday(1));
+  copyFromWeek.value = dateToISO(getMonday(0));
+  copyToWeek.value = dateToISO(getMonday(1));
 });
 </script>
 
 <style scoped>
 #copy-widget {
-    position: sticky;
-    bottom: 0px;
-    background-color: white;
-    z-index: 9999999999;
-    padding: 0.25rem 0 0.25rem;
+  position: sticky;
+  bottom: 0px;
+  background-color: white;
+  z-index: 9999999999;
+  padding: 0.25rem 0 0.25rem;
 }
 div.copy-chevron {
-    text-align: center;
-    font-size: x-large;
-    width: 2rem;
+  text-align: center;
+  font-size: x-large;
+  width: 2rem;
 }
 </style>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/Components/EditLocation.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/Components/EditLocation.vue
index 86d4a6c5a..5f434052e 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/Components/EditLocation.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/Components/EditLocation.vue
@@ -1,28 +1,28 @@
 <template>
-    <component :is="Teleport" to="body">
-        <modal v-if="showModal" @close="closeModal">
-            <template v-slot:header>
-                <h3>{{ "Modifier le lieu" }}</h3>
-            </template>
+  <component :is="Teleport" to="body">
+    <modal v-if="showModal" @close="closeModal">
+      <template v-slot:header>
+        <h3>{{ "Modifier le lieu" }}</h3>
+      </template>
 
-            <template v-slot:body>
-                <div></div>
-                <label>Localisation</label>
-                <vue-multiselect
-                    v-model="location"
-                    :options="locations"
-                    :label="'name'"
-                    :track-by="'id'"
-                ></vue-multiselect>
-            </template>
+      <template v-slot:body>
+        <div></div>
+        <label>Localisation</label>
+        <vue-multiselect
+          v-model="location"
+          :options="locations"
+          :label="'name'"
+          :track-by="'id'"
+        ></vue-multiselect>
+      </template>
 
-            <template v-slot:footer>
-                <button class="btn btn-save" @click="saveAndClose">
-                    {{ "Enregistrer" }}
-                </button>
-            </template>
-        </modal>
-    </component>
+      <template v-slot:footer>
+        <button class="btn btn-save" @click="saveAndClose">
+          {{ "Enregistrer" }}
+        </button>
+      </template>
+    </modal>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -39,7 +39,7 @@ import VueMultiselect from "vue-multiselect";
 import { Teleport as teleport_, TeleportProps, VNodeProps } from "vue";
 
 const Teleport = teleport_ as new () => {
-    $props: VNodeProps & TeleportProps;
+  $props: VNodeProps & TeleportProps;
 };
 
 const store = useStore(key);
@@ -50,37 +50,37 @@ const showModal = ref(false);
 //const tele = ref<InstanceType<typeof Teleport> | null>(null);
 
 const locations = computed<Location[]>(() => {
-    return store.state.locations.locations;
+  return store.state.locations.locations;
 });
 
 const startEdit = function (event: EventApi): void {
-    console.log("startEditing", event);
-    calendarRangeId.value = event.extendedProps.calendarRangeId;
-    location.value =
-        store.getters["locations/getLocationById"](
-            event.extendedProps.locationId,
-        ) || null;
+  console.log("startEditing", event);
+  calendarRangeId.value = event.extendedProps.calendarRangeId;
+  location.value =
+    store.getters["locations/getLocationById"](
+      event.extendedProps.locationId,
+    ) || null;
 
-    console.log("new location value", location.value);
-    console.log("calendar range id", calendarRangeId.value);
-    showModal.value = true;
+  console.log("new location value", location.value);
+  console.log("calendar range id", calendarRangeId.value);
+  showModal.value = true;
 };
 
 const saveAndClose = function (e: Event): void {
-    console.log("saveEditAndClose", e);
+  console.log("saveEditAndClose", e);
 
-    store
-        .dispatch("calendarRanges/patchRangeLocation", {
-            location: location.value,
-            calendarRangeId: calendarRangeId.value,
-        })
-        .then((_) => {
-            showModal.value = false;
-        });
+  store
+    .dispatch("calendarRanges/patchRangeLocation", {
+      location: location.value,
+      calendarRangeId: calendarRangeId.value,
+    })
+    .then((_) => {
+      showModal.value = false;
+    });
 };
 
 const closeModal = function (_: any): void {
-    showModal.value = false;
+  showModal.value = false;
 };
 
 defineExpose({ startEdit });
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.ts
index e9e31dd25..18040cb75 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.ts
@@ -1,27 +1,27 @@
 const appMessages = {
-    fr: {
-        created_availabilities: "Lieu des plages de disponibilités créées",
-        edit_your_calendar_range: "Planifiez vos plages de disponibilités",
-        show_my_calendar: "Afficher mon calendrier",
-        show_weekends: "Afficher les week-ends",
-        copy_range: "Copier",
-        copy_range_from_to: "Copier les plages",
-        from_day_to_day: "d'un jour à l'autre",
-        from_week_to_week: "d'une semaine à l'autre",
-        copy_range_how_to:
-            "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi.",
-        new_range_to_save: "Nouvelles plages à enregistrer",
-        update_range_to_save: "Plages à modifier",
-        delete_range_to_save: "Plages à supprimer",
-        by: "Par",
-        main_user_concerned: "Utilisateur concerné",
-        dateFrom: "De",
-        dateTo: "à",
-        day: "Jour",
-        week: "Semaine",
-        month: "Mois",
-        today: "Aujourd'hui",
-    },
+  fr: {
+    created_availabilities: "Lieu des plages de disponibilités créées",
+    edit_your_calendar_range: "Planifiez vos plages de disponibilités",
+    show_my_calendar: "Afficher mon calendrier",
+    show_weekends: "Afficher les week-ends",
+    copy_range: "Copier",
+    copy_range_from_to: "Copier les plages",
+    from_day_to_day: "d'un jour à l'autre",
+    from_week_to_week: "d'une semaine à l'autre",
+    copy_range_how_to:
+      "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi.",
+    new_range_to_save: "Nouvelles plages à enregistrer",
+    update_range_to_save: "Plages à modifier",
+    delete_range_to_save: "Plages à supprimer",
+    by: "Par",
+    main_user_concerned: "Utilisateur concerné",
+    dateFrom: "De",
+    dateTo: "à",
+    day: "Jour",
+    week: "Semaine",
+    month: "Mois",
+    today: "Aujourd'hui",
+  },
 };
 
 export { appMessages };
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts
index cb87b0b67..c053d12bf 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts
@@ -7,13 +7,13 @@ import App2 from "./App2.vue";
 import { useI18n } from "vue-i18n";
 
 futureStore().then((store) => {
-    const i18n = _createI18n(appMessages, false);
+  const i18n = _createI18n(appMessages, false);
 
-    const app = createApp({
-        template: `<app></app>`,
-    })
-        .use(store, key)
-        .use(i18n)
-        .component("app", App2)
-        .mount("#myCalendar");
+  const app = createApp({
+    template: `<app></app>`,
+  })
+    .use(store, key)
+    .use(i18n)
+    .component("app", App2)
+    .mount("#myCalendar");
 });
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts
index e5a863245..d7332fa54 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts
@@ -5,7 +5,7 @@ import me, { MeState } from "./modules/me";
 import fullCalendar, { FullCalendarState } from "./modules/fullcalendar";
 import calendarRanges, { CalendarRangesState } from "./modules/calendarRanges";
 import calendarRemotes, {
-    CalendarRemotesState,
+  CalendarRemotesState,
 } from "./modules/calendarRemotes";
 import { whoami } from "../../../../../../ChillMainBundle/Resources/public/lib/api/user";
 import { User } from "../../../../../../ChillMainBundle/Resources/public/types";
@@ -15,42 +15,40 @@ import calendarLocals, { CalendarLocalsState } from "./modules/calendarLocals";
 const debug = process.env.NODE_ENV !== "production";
 
 export interface State {
-    calendarRanges: CalendarRangesState;
-    calendarRemotes: CalendarRemotesState;
-    calendarLocals: CalendarLocalsState;
-    fullCalendar: FullCalendarState;
-    me: MeState;
-    locations: LocationState;
+  calendarRanges: CalendarRangesState;
+  calendarRemotes: CalendarRemotesState;
+  calendarLocals: CalendarLocalsState;
+  fullCalendar: FullCalendarState;
+  me: MeState;
+  locations: LocationState;
 }
 
 export const key: InjectionKey<Store<State>> = Symbol();
 
 const futureStore = function (): Promise<Store<State>> {
-    return whoami().then((user: User) => {
-        const store = createStore<State>({
-            strict: debug,
-            modules: {
-                me,
-                fullCalendar,
-                calendarRanges,
-                calendarRemotes,
-                calendarLocals,
-                locations,
-            },
-            mutations: {},
-        });
-
-        store.commit("me/setWhoAmi", user, { root: true });
-        store
-            .dispatch("locations/getLocations", null, { root: true })
-            .then((_) => {
-                return store.dispatch("locations/getCurrentLocation", null, {
-                    root: true,
-                });
-            });
-
-        return Promise.resolve(store);
+  return whoami().then((user: User) => {
+    const store = createStore<State>({
+      strict: debug,
+      modules: {
+        me,
+        fullCalendar,
+        calendarRanges,
+        calendarRemotes,
+        calendarLocals,
+        locations,
+      },
+      mutations: {},
     });
+
+    store.commit("me/setWhoAmi", user, { root: true });
+    store.dispatch("locations/getLocations", null, { root: true }).then((_) => {
+      return store.dispatch("locations/getCurrentLocation", null, {
+        root: true,
+      });
+    });
+
+    return Promise.resolve(store);
+  });
 };
 
 export default futureStore;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarLocals.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarLocals.ts
index 07ce477dd..bebeef0b5 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarLocals.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarLocals.ts
@@ -8,109 +8,99 @@ import { TransportExceptionInterface } from "../../../../../../../ChillMainBundl
 import { COLORS } from "../../../Calendar/const";
 
 export interface CalendarLocalsState {
-    locals: EventInput[];
-    localsLoaded: { start: number; end: number }[];
-    localsIndex: Set<string>;
-    key: number;
+  locals: EventInput[];
+  localsLoaded: { start: number; end: number }[];
+  localsIndex: Set<string>;
+  key: number;
 }
 
 type Context = ActionContext<CalendarLocalsState, State>;
 
 export default {
-    namespaced: true,
-    state: (): CalendarLocalsState => ({
-        locals: [],
-        localsLoaded: [],
-        localsIndex: new Set<string>(),
-        key: 0,
-    }),
-    getters: {
-        isLocalsLoaded:
-            (state: CalendarLocalsState) =>
-            ({ start, end }: { start: Date; end: Date }): boolean => {
-                for (const range of state.localsLoaded) {
-                    if (
-                        start.getTime() === range.start &&
-                        end.getTime() === range.end
-                    ) {
-                        return true;
-                    }
-                }
+  namespaced: true,
+  state: (): CalendarLocalsState => ({
+    locals: [],
+    localsLoaded: [],
+    localsIndex: new Set<string>(),
+    key: 0,
+  }),
+  getters: {
+    isLocalsLoaded:
+      (state: CalendarLocalsState) =>
+      ({ start, end }: { start: Date; end: Date }): boolean => {
+        for (const range of state.localsLoaded) {
+          if (start.getTime() === range.start && end.getTime() === range.end) {
+            return true;
+          }
+        }
 
-                return false;
-            },
+        return false;
+      },
+  },
+  mutations: {
+    addLocals(state: CalendarLocalsState, ranges: CalendarLight[]) {
+      console.log("addLocals", ranges);
+
+      const toAdd = ranges
+        .map((cr) => localsToFullCalendarEvent(cr))
+        .filter((r) => !state.localsIndex.has(r.id));
+
+      toAdd.forEach((r) => {
+        state.localsIndex.add(r.id);
+        state.locals.push(r);
+      });
+      state.key = state.key + toAdd.length;
     },
-    mutations: {
-        addLocals(state: CalendarLocalsState, ranges: CalendarLight[]) {
-            console.log("addLocals", ranges);
-
-            const toAdd = ranges
-                .map((cr) => localsToFullCalendarEvent(cr))
-                .filter((r) => !state.localsIndex.has(r.id));
-
-            toAdd.forEach((r) => {
-                state.localsIndex.add(r.id);
-                state.locals.push(r);
-            });
-            state.key = state.key + toAdd.length;
-        },
-        addLoaded(
-            state: CalendarLocalsState,
-            payload: { start: Date; end: Date },
-        ) {
-            state.localsLoaded.push({
-                start: payload.start.getTime(),
-                end: payload.end.getTime(),
-            });
-        },
+    addLoaded(state: CalendarLocalsState, payload: { start: Date; end: Date }) {
+      state.localsLoaded.push({
+        start: payload.start.getTime(),
+        end: payload.end.getTime(),
+      });
     },
-    actions: {
-        fetchLocals(
-            ctx: Context,
-            payload: { start: Date; end: Date },
-        ): Promise<null> {
-            const start = payload.start;
-            const end = payload.end;
+  },
+  actions: {
+    fetchLocals(
+      ctx: Context,
+      payload: { start: Date; end: Date },
+    ): Promise<null> {
+      const start = payload.start;
+      const end = payload.end;
 
-            if (ctx.rootGetters["me/getMe"] === null) {
-                return Promise.resolve(null);
-            }
+      if (ctx.rootGetters["me/getMe"] === null) {
+        return Promise.resolve(null);
+      }
 
-            if (ctx.getters.isLocalsLoaded({ start, end })) {
-                return Promise.resolve(ctx.getters.getRangeSource);
-            }
+      if (ctx.getters.isLocalsLoaded({ start, end })) {
+        return Promise.resolve(ctx.getters.getRangeSource);
+      }
 
-            ctx.commit("addLoaded", {
-                start: start,
-                end: end,
-            });
+      ctx.commit("addLoaded", {
+        start: start,
+        end: end,
+      });
 
-            return fetchCalendarLocalForUser(
-                ctx.rootGetters["me/getMe"],
-                start,
-                end,
-            )
-                .then((remotes: CalendarLight[]) => {
-                    // to be add when reactivity problem will be solve ?
-                    //ctx.commit('addRemotes', remotes);
-                    const inputs = remotes
-                        .map((cr) => localsToFullCalendarEvent(cr))
-                        .map((cr) => ({
-                            ...cr,
-                            backgroundColor: COLORS[0],
-                            textColor: "black",
-                            editable: false,
-                        }));
-                    ctx.commit("calendarRanges/addExternals", inputs, {
-                        root: true,
-                    });
-                    return Promise.resolve(null);
-                })
-                .catch((e: TransportExceptionInterface) => {
-                    console.error(e);
+      return fetchCalendarLocalForUser(ctx.rootGetters["me/getMe"], start, end)
+        .then((remotes: CalendarLight[]) => {
+          // to be add when reactivity problem will be solve ?
+          //ctx.commit('addRemotes', remotes);
+          const inputs = remotes
+            .map((cr) => localsToFullCalendarEvent(cr))
+            .map((cr) => ({
+              ...cr,
+              backgroundColor: COLORS[0],
+              textColor: "black",
+              editable: false,
+            }));
+          ctx.commit("calendarRanges/addExternals", inputs, {
+            root: true,
+          });
+          return Promise.resolve(null);
+        })
+        .catch((e: TransportExceptionInterface) => {
+          console.error(e);
 
-                    return Promise.resolve(null);
-                });
-        },
+          return Promise.resolve(null);
+        });
     },
+  },
 } as Module<CalendarLocalsState, State>;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
index 26984c051..facea746d 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
@@ -1,10 +1,10 @@
 import { State } from "./../index";
 import { ActionContext, Module } from "vuex";
 import {
-    CalendarRange,
-    CalendarRangeCreate,
-    CalendarRangeEdit,
-    isEventInputCalendarRange,
+  CalendarRange,
+  CalendarRangeCreate,
+  CalendarRangeEdit,
+  isEventInputCalendarRange,
 } from "../../../../types";
 import { Location } from "../../../../../../../ChillMainBundle/Resources/public/types";
 import { fetchCalendarRangeForUser } from "../../../Calendar/api";
@@ -12,369 +12,332 @@ import { calendarRangeToFullCalendarEvent } from "../../../Calendar/store/utils"
 import { EventInput } from "@fullcalendar/core";
 import { makeFetch } from "../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 import {
-    datetimeToISO,
-    dateToISO,
-    ISOToDatetime,
+  datetimeToISO,
+  dateToISO,
+  ISOToDatetime,
 } from "../../../../../../../ChillMainBundle/Resources/public/chill/js/date";
 import type { EventInputCalendarRange } from "../../../../types";
 
 export interface CalendarRangesState {
-    ranges: (EventInput | EventInputCalendarRange)[];
-    rangesLoaded: { start: number; end: number }[];
-    rangesIndex: Set<string>;
-    key: number;
+  ranges: (EventInput | EventInputCalendarRange)[];
+  rangesLoaded: { start: number; end: number }[];
+  rangesIndex: Set<string>;
+  key: number;
 }
 
 type Context = ActionContext<CalendarRangesState, State>;
 
 export default {
-    namespaced: true,
-    state: (): CalendarRangesState => ({
-        ranges: [],
-        rangesLoaded: [],
-        rangesIndex: new Set<string>(),
-        key: 0,
-    }),
-    getters: {
-        isRangeLoaded:
-            (state: CalendarRangesState) =>
-            ({ start, end }: { start: Date; end: Date }): boolean => {
-                for (const range of state.rangesLoaded) {
-                    if (
-                        start.getTime() === range.start &&
-                        end.getTime() === range.end
-                    ) {
-                        return true;
-                    }
-                }
+  namespaced: true,
+  state: (): CalendarRangesState => ({
+    ranges: [],
+    rangesLoaded: [],
+    rangesIndex: new Set<string>(),
+    key: 0,
+  }),
+  getters: {
+    isRangeLoaded:
+      (state: CalendarRangesState) =>
+      ({ start, end }: { start: Date; end: Date }): boolean => {
+        for (const range of state.rangesLoaded) {
+          if (start.getTime() === range.start && end.getTime() === range.end) {
+            return true;
+          }
+        }
 
-                return false;
-            },
-        getRangesOnDate:
-            (state: CalendarRangesState) =>
-            (date: Date): EventInputCalendarRange[] => {
-                const founds = [];
-                const dateStr = dateToISO(date) as string;
+        return false;
+      },
+    getRangesOnDate:
+      (state: CalendarRangesState) =>
+      (date: Date): EventInputCalendarRange[] => {
+        const founds = [];
+        const dateStr = dateToISO(date) as string;
 
-                for (const range of state.ranges) {
-                    if (
-                        isEventInputCalendarRange(range) &&
-                        range.start.startsWith(dateStr)
-                    ) {
-                        founds.push(range);
-                    }
-                }
+        for (const range of state.ranges) {
+          if (
+            isEventInputCalendarRange(range) &&
+            range.start.startsWith(dateStr)
+          ) {
+            founds.push(range);
+          }
+        }
 
-                return founds;
-            },
-        getRangesOnWeek:
-            (state: CalendarRangesState) =>
-            (mondayDate: Date): EventInputCalendarRange[] => {
-                const founds = [];
-                for (const d of Array.from(Array(7).keys())) {
-                    const dateOfWeek = new Date(mondayDate);
-                    dateOfWeek.setDate(mondayDate.getDate() + d);
-                    const dateStr = dateToISO(dateOfWeek) as string;
-                    for (const range of state.ranges) {
-                        if (
-                            isEventInputCalendarRange(range) &&
-                            range.start.startsWith(dateStr)
-                        ) {
-                            founds.push(range);
-                        }
-                    }
-                }
+        return founds;
+      },
+    getRangesOnWeek:
+      (state: CalendarRangesState) =>
+      (mondayDate: Date): EventInputCalendarRange[] => {
+        const founds = [];
+        for (const d of Array.from(Array(7).keys())) {
+          const dateOfWeek = new Date(mondayDate);
+          dateOfWeek.setDate(mondayDate.getDate() + d);
+          const dateStr = dateToISO(dateOfWeek) as string;
+          for (const range of state.ranges) {
+            if (
+              isEventInputCalendarRange(range) &&
+              range.start.startsWith(dateStr)
+            ) {
+              founds.push(range);
+            }
+          }
+        }
 
-                return founds;
-            },
+        return founds;
+      },
+  },
+  mutations: {
+    addRanges(state: CalendarRangesState, ranges: CalendarRange[]) {
+      const toAdd = ranges
+        .map((cr) => calendarRangeToFullCalendarEvent(cr))
+        .map((cr) => ({
+          ...cr,
+          backgroundColor: "white",
+          borderColor: "#3788d8",
+          textColor: "black",
+        }))
+        .filter((r) => !state.rangesIndex.has(r.id));
+
+      toAdd.forEach((r) => {
+        state.rangesIndex.add(r.id);
+        state.ranges.push(r);
+      });
+      state.key = state.key + toAdd.length;
     },
-    mutations: {
-        addRanges(state: CalendarRangesState, ranges: CalendarRange[]) {
-            const toAdd = ranges
-                .map((cr) => calendarRangeToFullCalendarEvent(cr))
-                .map((cr) => ({
-                    ...cr,
-                    backgroundColor: "white",
-                    borderColor: "#3788d8",
-                    textColor: "black",
-                }))
-                .filter((r) => !state.rangesIndex.has(r.id));
+    addExternals(
+      state: CalendarRangesState,
+      externalEvents: (EventInput & { id: string })[],
+    ) {
+      const toAdd = externalEvents.filter((r) => !state.rangesIndex.has(r.id));
 
-            toAdd.forEach((r) => {
-                state.rangesIndex.add(r.id);
-                state.ranges.push(r);
-            });
-            state.key = state.key + toAdd.length;
-        },
-        addExternals(
-            state: CalendarRangesState,
-            externalEvents: (EventInput & { id: string })[],
-        ) {
-            const toAdd = externalEvents.filter(
-                (r) => !state.rangesIndex.has(r.id),
-            );
-
-            toAdd.forEach((r) => {
-                state.rangesIndex.add(r.id);
-                state.ranges.push(r);
-            });
-            state.key = state.key + toAdd.length;
-        },
-        addLoaded(
-            state: CalendarRangesState,
-            payload: { start: Date; end: Date },
-        ) {
-            state.rangesLoaded.push({
-                start: payload.start.getTime(),
-                end: payload.end.getTime(),
-            });
-        },
-        addRange(state: CalendarRangesState, payload: CalendarRange) {
-            const asEvent = calendarRangeToFullCalendarEvent(payload);
-            state.ranges.push({
-                ...asEvent,
-                backgroundColor: "white",
-                borderColor: "#3788d8",
-                textColor: "black",
-            });
-            state.rangesIndex.add(asEvent.id);
-            state.key = state.key + 1;
-        },
-        removeRange(state: CalendarRangesState, calendarRangeId: number) {
-            const found = state.ranges.find(
-                (r) =>
-                    r.calendarRangeId === calendarRangeId && r.is === "range",
-            );
-
-            if (found !== undefined) {
-                state.ranges = state.ranges.filter(
-                    (r) =>
-                        !(
-                            r.calendarRangeId === calendarRangeId &&
-                            r.is === "range"
-                        ),
-                );
-
-                if (typeof found.id === "string") {
-                    // should always be true
-                    state.rangesIndex.delete(found.id);
-                }
-
-                state.key = state.key + 1;
-            }
-        },
-        updateRange(state: CalendarRangesState, range: CalendarRange) {
-            const found = state.ranges.find(
-                (r) => r.calendarRangeId === range.id && r.is === "range",
-            );
-            const newEvent = calendarRangeToFullCalendarEvent(range);
-
-            if (found !== undefined) {
-                found.start = newEvent.start;
-                found.end = newEvent.end;
-                found.locationId = range.location.id;
-                found.locationName = range.location.name;
-            }
-
-            state.key = state.key + 1;
-        },
+      toAdd.forEach((r) => {
+        state.rangesIndex.add(r.id);
+        state.ranges.push(r);
+      });
+      state.key = state.key + toAdd.length;
     },
-    actions: {
-        fetchRanges(
-            ctx: Context,
-            payload: { start: Date; end: Date },
-        ): Promise<null> {
-            const start = payload.start;
-            const end = payload.end;
-
-            if (ctx.rootGetters["me/getMe"] === null) {
-                return Promise.resolve(ctx.getters.getRangeSource);
-            }
-
-            if (ctx.getters.isRangeLoaded({ start, end })) {
-                return Promise.resolve(ctx.getters.getRangeSource);
-            }
-
-            ctx.commit("addLoaded", {
-                start: start,
-                end: end,
-            });
-
-            return fetchCalendarRangeForUser(
-                ctx.rootGetters["me/getMe"],
-                start,
-                end,
-            ).then((ranges: CalendarRange[]) => {
-                ctx.commit("addRanges", ranges);
-                return Promise.resolve(null);
-            });
-        },
-        createRange(
-            ctx: Context,
-            {
-                start,
-                end,
-                location,
-            }: { start: Date; end: Date; location: Location },
-        ): Promise<null> {
-            const url = `/api/1.0/calendar/calendar-range.json?`;
-
-            if (ctx.rootState.me.me === null) {
-                throw new Error("user is currently null");
-            }
-
-            const body = {
-                user: {
-                    id: ctx.rootState.me.me.id,
-                    type: "user",
-                },
-                startDate: {
-                    datetime: datetimeToISO(start),
-                },
-                endDate: {
-                    datetime: datetimeToISO(end),
-                },
-                location: {
-                    id: location.id,
-                    type: "location",
-                },
-            } as CalendarRangeCreate;
-
-            return makeFetch<CalendarRangeCreate, CalendarRange>(
-                "POST",
-                url,
-                body,
-            )
-                .then((newRange) => {
-                    ctx.commit("addRange", newRange);
-
-                    return Promise.resolve(null);
-                })
-                .catch((error) => {
-                    console.error(error);
-
-                    throw error;
-                });
-        },
-        deleteRange(ctx: Context, calendarRangeId: number) {
-            const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
-
-            makeFetch<undefined, never>("DELETE", url).then(() => {
-                ctx.commit("removeRange", calendarRangeId);
-            });
-        },
-        patchRangeTime(
-            ctx,
-            {
-                calendarRangeId,
-                start,
-                end,
-            }: { calendarRangeId: number; start: Date; end: Date },
-        ): Promise<null> {
-            const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
-            const body = {
-                startDate: {
-                    datetime: datetimeToISO(start),
-                },
-                endDate: {
-                    datetime: datetimeToISO(end),
-                },
-            } as CalendarRangeEdit;
-
-            return makeFetch<CalendarRangeEdit, CalendarRange>(
-                "PATCH",
-                url,
-                body,
-            )
-                .then((range) => {
-                    ctx.commit("updateRange", range);
-                    return Promise.resolve(null);
-                })
-                .catch((error) => {
-                    console.error(error);
-                    return Promise.resolve(null);
-                });
-        },
-        patchRangeLocation(
-            ctx,
-            {
-                location,
-                calendarRangeId,
-            }: { location: Location; calendarRangeId: number },
-        ): Promise<null> {
-            const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
-            const body = {
-                location: {
-                    id: location.id,
-                    type: "location",
-                },
-            } as CalendarRangeEdit;
-
-            return makeFetch<CalendarRangeEdit, CalendarRange>(
-                "PATCH",
-                url,
-                body,
-            )
-                .then((range) => {
-                    ctx.commit("updateRange", range);
-                    return Promise.resolve(null);
-                })
-                .catch((error) => {
-                    console.error(error);
-                    return Promise.resolve(null);
-                });
-        },
-        copyFromDayToAnotherDay(
-            ctx,
-            { from, to }: { from: Date; to: Date },
-        ): Promise<null> {
-            const rangesToCopy: EventInputCalendarRange[] =
-                ctx.getters["getRangesOnDate"](from);
-            const promises = [];
-
-            for (const r of rangesToCopy) {
-                const start = new Date(ISOToDatetime(r.start) as Date);
-                start.setFullYear(
-                    to.getFullYear(),
-                    to.getMonth(),
-                    to.getDate(),
-                );
-                const end = new Date(ISOToDatetime(r.end) as Date);
-                end.setFullYear(to.getFullYear(), to.getMonth(), to.getDate());
-                const location = ctx.rootGetters["locations/getLocationById"](
-                    r.locationId,
-                );
-
-                promises.push(
-                    ctx.dispatch("createRange", { start, end, location }),
-                );
-            }
-
-            return Promise.all(promises).then(() => Promise.resolve(null));
-        },
-        copyFromWeekToAnotherWeek(
-            ctx: Context,
-            { fromMonday, toMonday }: { fromMonday: Date; toMonday: Date },
-        ): Promise<null> {
-            const rangesToCopy: EventInputCalendarRange[] =
-                ctx.getters["getRangesOnWeek"](fromMonday);
-            const promises = [];
-            const diffTime = toMonday.getTime() - fromMonday.getTime();
-            for (const r of rangesToCopy) {
-                const start = new Date(ISOToDatetime(r.start) as Date);
-                const end = new Date(ISOToDatetime(r.end) as Date);
-                start.setTime(start.getTime() + diffTime);
-                end.setTime(end.getTime() + diffTime);
-                const location = ctx.rootGetters["locations/getLocationById"](
-                    r.locationId,
-                );
-
-                promises.push(
-                    ctx.dispatch("createRange", { start, end, location }),
-                );
-            }
-
-            return Promise.all(promises).then(() => Promise.resolve(null));
-        },
+    addLoaded(state: CalendarRangesState, payload: { start: Date; end: Date }) {
+      state.rangesLoaded.push({
+        start: payload.start.getTime(),
+        end: payload.end.getTime(),
+      });
     },
+    addRange(state: CalendarRangesState, payload: CalendarRange) {
+      const asEvent = calendarRangeToFullCalendarEvent(payload);
+      state.ranges.push({
+        ...asEvent,
+        backgroundColor: "white",
+        borderColor: "#3788d8",
+        textColor: "black",
+      });
+      state.rangesIndex.add(asEvent.id);
+      state.key = state.key + 1;
+    },
+    removeRange(state: CalendarRangesState, calendarRangeId: number) {
+      const found = state.ranges.find(
+        (r) => r.calendarRangeId === calendarRangeId && r.is === "range",
+      );
+
+      if (found !== undefined) {
+        state.ranges = state.ranges.filter(
+          (r) => !(r.calendarRangeId === calendarRangeId && r.is === "range"),
+        );
+
+        if (typeof found.id === "string") {
+          // should always be true
+          state.rangesIndex.delete(found.id);
+        }
+
+        state.key = state.key + 1;
+      }
+    },
+    updateRange(state: CalendarRangesState, range: CalendarRange) {
+      const found = state.ranges.find(
+        (r) => r.calendarRangeId === range.id && r.is === "range",
+      );
+      const newEvent = calendarRangeToFullCalendarEvent(range);
+
+      if (found !== undefined) {
+        found.start = newEvent.start;
+        found.end = newEvent.end;
+        found.locationId = range.location.id;
+        found.locationName = range.location.name;
+      }
+
+      state.key = state.key + 1;
+    },
+  },
+  actions: {
+    fetchRanges(
+      ctx: Context,
+      payload: { start: Date; end: Date },
+    ): Promise<null> {
+      const start = payload.start;
+      const end = payload.end;
+
+      if (ctx.rootGetters["me/getMe"] === null) {
+        return Promise.resolve(ctx.getters.getRangeSource);
+      }
+
+      if (ctx.getters.isRangeLoaded({ start, end })) {
+        return Promise.resolve(ctx.getters.getRangeSource);
+      }
+
+      ctx.commit("addLoaded", {
+        start: start,
+        end: end,
+      });
+
+      return fetchCalendarRangeForUser(
+        ctx.rootGetters["me/getMe"],
+        start,
+        end,
+      ).then((ranges: CalendarRange[]) => {
+        ctx.commit("addRanges", ranges);
+        return Promise.resolve(null);
+      });
+    },
+    createRange(
+      ctx: Context,
+      { start, end, location }: { start: Date; end: Date; location: Location },
+    ): Promise<null> {
+      const url = `/api/1.0/calendar/calendar-range.json?`;
+
+      if (ctx.rootState.me.me === null) {
+        throw new Error("user is currently null");
+      }
+
+      const body = {
+        user: {
+          id: ctx.rootState.me.me.id,
+          type: "user",
+        },
+        startDate: {
+          datetime: datetimeToISO(start),
+        },
+        endDate: {
+          datetime: datetimeToISO(end),
+        },
+        location: {
+          id: location.id,
+          type: "location",
+        },
+      } as CalendarRangeCreate;
+
+      return makeFetch<CalendarRangeCreate, CalendarRange>("POST", url, body)
+        .then((newRange) => {
+          ctx.commit("addRange", newRange);
+
+          return Promise.resolve(null);
+        })
+        .catch((error) => {
+          console.error(error);
+
+          throw error;
+        });
+    },
+    deleteRange(ctx: Context, calendarRangeId: number) {
+      const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
+
+      makeFetch<undefined, never>("DELETE", url).then(() => {
+        ctx.commit("removeRange", calendarRangeId);
+      });
+    },
+    patchRangeTime(
+      ctx,
+      {
+        calendarRangeId,
+        start,
+        end,
+      }: { calendarRangeId: number; start: Date; end: Date },
+    ): Promise<null> {
+      const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
+      const body = {
+        startDate: {
+          datetime: datetimeToISO(start),
+        },
+        endDate: {
+          datetime: datetimeToISO(end),
+        },
+      } as CalendarRangeEdit;
+
+      return makeFetch<CalendarRangeEdit, CalendarRange>("PATCH", url, body)
+        .then((range) => {
+          ctx.commit("updateRange", range);
+          return Promise.resolve(null);
+        })
+        .catch((error) => {
+          console.error(error);
+          return Promise.resolve(null);
+        });
+    },
+    patchRangeLocation(
+      ctx,
+      {
+        location,
+        calendarRangeId,
+      }: { location: Location; calendarRangeId: number },
+    ): Promise<null> {
+      const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
+      const body = {
+        location: {
+          id: location.id,
+          type: "location",
+        },
+      } as CalendarRangeEdit;
+
+      return makeFetch<CalendarRangeEdit, CalendarRange>("PATCH", url, body)
+        .then((range) => {
+          ctx.commit("updateRange", range);
+          return Promise.resolve(null);
+        })
+        .catch((error) => {
+          console.error(error);
+          return Promise.resolve(null);
+        });
+    },
+    copyFromDayToAnotherDay(
+      ctx,
+      { from, to }: { from: Date; to: Date },
+    ): Promise<null> {
+      const rangesToCopy: EventInputCalendarRange[] =
+        ctx.getters["getRangesOnDate"](from);
+      const promises = [];
+
+      for (const r of rangesToCopy) {
+        const start = new Date(ISOToDatetime(r.start) as Date);
+        start.setFullYear(to.getFullYear(), to.getMonth(), to.getDate());
+        const end = new Date(ISOToDatetime(r.end) as Date);
+        end.setFullYear(to.getFullYear(), to.getMonth(), to.getDate());
+        const location = ctx.rootGetters["locations/getLocationById"](
+          r.locationId,
+        );
+
+        promises.push(ctx.dispatch("createRange", { start, end, location }));
+      }
+
+      return Promise.all(promises).then(() => Promise.resolve(null));
+    },
+    copyFromWeekToAnotherWeek(
+      ctx: Context,
+      { fromMonday, toMonday }: { fromMonday: Date; toMonday: Date },
+    ): Promise<null> {
+      const rangesToCopy: EventInputCalendarRange[] =
+        ctx.getters["getRangesOnWeek"](fromMonday);
+      const promises = [];
+      const diffTime = toMonday.getTime() - fromMonday.getTime();
+      for (const r of rangesToCopy) {
+        const start = new Date(ISOToDatetime(r.start) as Date);
+        const end = new Date(ISOToDatetime(r.end) as Date);
+        start.setTime(start.getTime() + diffTime);
+        end.setTime(end.getTime() + diffTime);
+        const location = ctx.rootGetters["locations/getLocationById"](
+          r.locationId,
+        );
+
+        promises.push(ctx.dispatch("createRange", { start, end, location }));
+      }
+
+      return Promise.all(promises).then(() => Promise.resolve(null));
+    },
+  },
 } as Module<CalendarRangesState, State>;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRemotes.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRemotes.ts
index bd2bf20f8..88c0044f3 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRemotes.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRemotes.ts
@@ -8,109 +8,102 @@ import { TransportExceptionInterface } from "../../../../../../../ChillMainBundl
 import { COLORS } from "../../../Calendar/const";
 
 export interface CalendarRemotesState {
-    remotes: EventInput[];
-    remotesLoaded: { start: number; end: number }[];
-    remotesIndex: Set<string>;
-    key: number;
+  remotes: EventInput[];
+  remotesLoaded: { start: number; end: number }[];
+  remotesIndex: Set<string>;
+  key: number;
 }
 
 type Context = ActionContext<CalendarRemotesState, State>;
 
 export default {
-    namespaced: true,
-    state: (): CalendarRemotesState => ({
-        remotes: [],
-        remotesLoaded: [],
-        remotesIndex: new Set<string>(),
-        key: 0,
-    }),
-    getters: {
-        isRemotesLoaded:
-            (state: CalendarRemotesState) =>
-            ({ start, end }: { start: Date; end: Date }): boolean => {
-                for (const range of state.remotesLoaded) {
-                    if (
-                        start.getTime() === range.start &&
-                        end.getTime() === range.end
-                    ) {
-                        return true;
-                    }
-                }
+  namespaced: true,
+  state: (): CalendarRemotesState => ({
+    remotes: [],
+    remotesLoaded: [],
+    remotesIndex: new Set<string>(),
+    key: 0,
+  }),
+  getters: {
+    isRemotesLoaded:
+      (state: CalendarRemotesState) =>
+      ({ start, end }: { start: Date; end: Date }): boolean => {
+        for (const range of state.remotesLoaded) {
+          if (start.getTime() === range.start && end.getTime() === range.end) {
+            return true;
+          }
+        }
 
-                return false;
-            },
+        return false;
+      },
+  },
+  mutations: {
+    addRemotes(state: CalendarRemotesState, ranges: CalendarRemote[]) {
+      console.log("addRemotes", ranges);
+
+      const toAdd = ranges
+        .map((cr) => remoteToFullCalendarEvent(cr))
+        .filter((r) => !state.remotesIndex.has(r.id));
+
+      toAdd.forEach((r) => {
+        state.remotesIndex.add(r.id);
+        state.remotes.push(r);
+      });
+      state.key = state.key + toAdd.length;
     },
-    mutations: {
-        addRemotes(state: CalendarRemotesState, ranges: CalendarRemote[]) {
-            console.log("addRemotes", ranges);
-
-            const toAdd = ranges
-                .map((cr) => remoteToFullCalendarEvent(cr))
-                .filter((r) => !state.remotesIndex.has(r.id));
-
-            toAdd.forEach((r) => {
-                state.remotesIndex.add(r.id);
-                state.remotes.push(r);
-            });
-            state.key = state.key + toAdd.length;
-        },
-        addLoaded(
-            state: CalendarRemotesState,
-            payload: { start: Date; end: Date },
-        ) {
-            state.remotesLoaded.push({
-                start: payload.start.getTime(),
-                end: payload.end.getTime(),
-            });
-        },
+    addLoaded(
+      state: CalendarRemotesState,
+      payload: { start: Date; end: Date },
+    ) {
+      state.remotesLoaded.push({
+        start: payload.start.getTime(),
+        end: payload.end.getTime(),
+      });
     },
-    actions: {
-        fetchRemotes(
-            ctx: Context,
-            payload: { start: Date; end: Date },
-        ): Promise<null> {
-            const start = payload.start;
-            const end = payload.end;
+  },
+  actions: {
+    fetchRemotes(
+      ctx: Context,
+      payload: { start: Date; end: Date },
+    ): Promise<null> {
+      const start = payload.start;
+      const end = payload.end;
 
-            if (ctx.rootGetters["me/getMe"] === null) {
-                return Promise.resolve(null);
-            }
+      if (ctx.rootGetters["me/getMe"] === null) {
+        return Promise.resolve(null);
+      }
 
-            if (ctx.getters.isRemotesLoaded({ start, end })) {
-                return Promise.resolve(ctx.getters.getRangeSource);
-            }
+      if (ctx.getters.isRemotesLoaded({ start, end })) {
+        return Promise.resolve(ctx.getters.getRangeSource);
+      }
 
-            ctx.commit("addLoaded", {
-                start: start,
-                end: end,
-            });
+      ctx.commit("addLoaded", {
+        start: start,
+        end: end,
+      });
 
-            return fetchCalendarRemoteForUser(
-                ctx.rootGetters["me/getMe"],
-                start,
-                end,
-            )
-                .then((remotes: CalendarRemote[]) => {
-                    // to be add when reactivity problem will be solve ?
-                    //ctx.commit('addRemotes', remotes);
-                    const inputs = remotes
-                        .map((cr) => remoteToFullCalendarEvent(cr))
-                        .map((cr) => ({
-                            ...cr,
-                            backgroundColor: COLORS[0],
-                            textColor: "black",
-                            editable: false,
-                        }));
-                    ctx.commit("calendarRanges/addExternals", inputs, {
-                        root: true,
-                    });
-                    return Promise.resolve(null);
-                })
-                .catch((e: TransportExceptionInterface) => {
-                    console.error(e);
+      return fetchCalendarRemoteForUser(ctx.rootGetters["me/getMe"], start, end)
+        .then((remotes: CalendarRemote[]) => {
+          // to be add when reactivity problem will be solve ?
+          //ctx.commit('addRemotes', remotes);
+          const inputs = remotes
+            .map((cr) => remoteToFullCalendarEvent(cr))
+            .map((cr) => ({
+              ...cr,
+              backgroundColor: COLORS[0],
+              textColor: "black",
+              editable: false,
+            }));
+          ctx.commit("calendarRanges/addExternals", inputs, {
+            root: true,
+          });
+          return Promise.resolve(null);
+        })
+        .catch((e: TransportExceptionInterface) => {
+          console.error(e);
 
-                    return Promise.resolve(null);
-                });
-        },
+          return Promise.resolve(null);
+        });
     },
+  },
 } as Module<CalendarRemotesState, State>;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
index 27ef8b8d5..3b53a1718 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
@@ -2,77 +2,77 @@ import { State } from "./../index";
 import { ActionContext } from "vuex";
 
 export interface FullCalendarState {
-    currentView: {
-        start: Date | null;
-        end: Date | null;
-    };
-    key: number;
+  currentView: {
+    start: Date | null;
+    end: Date | null;
+  };
+  key: number;
 }
 
 type Context = ActionContext<FullCalendarState, State>;
 
 export default {
-    namespaced: true,
-    state: (): FullCalendarState => ({
-        currentView: {
-            start: null,
-            end: null,
-        },
-        key: 0,
-    }),
-    mutations: {
-        setCurrentDatesView: function (
-            state: FullCalendarState,
-            payload: { start: Date; end: Date },
-        ): void {
-            state.currentView.start = payload.start;
-            state.currentView.end = payload.end;
-        },
-        increaseKey: function (state: FullCalendarState): void {
-            state.key = state.key + 1;
-        },
+  namespaced: true,
+  state: (): FullCalendarState => ({
+    currentView: {
+      start: null,
+      end: null,
     },
-    actions: {
-        setCurrentDatesView(
-            ctx: Context,
-            { start, end }: { start: Date | null; end: Date | null },
-        ): Promise<null> {
-            console.log("dispatch setCurrentDatesView", { start, end });
-
-            if (
-                ctx.state.currentView.start !== start ||
-                ctx.state.currentView.end !== end
-            ) {
-                ctx.commit("setCurrentDatesView", { start, end });
-            }
-
-            if (start !== null && end !== null) {
-                return Promise.all([
-                    ctx
-                        .dispatch(
-                            "calendarRanges/fetchRanges",
-                            { start, end },
-                            { root: true },
-                        )
-                        .then((_) => Promise.resolve(null)),
-                    ctx
-                        .dispatch(
-                            "calendarRemotes/fetchRemotes",
-                            { start, end },
-                            { root: true },
-                        )
-                        .then((_) => Promise.resolve(null)),
-                    ctx
-                        .dispatch(
-                            "calendarLocals/fetchLocals",
-                            { start, end },
-                            { root: true },
-                        )
-                        .then((_) => Promise.resolve(null)),
-                ]).then((_) => Promise.resolve(null));
-            } else {
-                return Promise.resolve(null);
-            }
-        },
+    key: 0,
+  }),
+  mutations: {
+    setCurrentDatesView: function (
+      state: FullCalendarState,
+      payload: { start: Date; end: Date },
+    ): void {
+      state.currentView.start = payload.start;
+      state.currentView.end = payload.end;
     },
+    increaseKey: function (state: FullCalendarState): void {
+      state.key = state.key + 1;
+    },
+  },
+  actions: {
+    setCurrentDatesView(
+      ctx: Context,
+      { start, end }: { start: Date | null; end: Date | null },
+    ): Promise<null> {
+      console.log("dispatch setCurrentDatesView", { start, end });
+
+      if (
+        ctx.state.currentView.start !== start ||
+        ctx.state.currentView.end !== end
+      ) {
+        ctx.commit("setCurrentDatesView", { start, end });
+      }
+
+      if (start !== null && end !== null) {
+        return Promise.all([
+          ctx
+            .dispatch(
+              "calendarRanges/fetchRanges",
+              { start, end },
+              { root: true },
+            )
+            .then((_) => Promise.resolve(null)),
+          ctx
+            .dispatch(
+              "calendarRemotes/fetchRemotes",
+              { start, end },
+              { root: true },
+            )
+            .then((_) => Promise.resolve(null)),
+          ctx
+            .dispatch(
+              "calendarLocals/fetchLocals",
+              { start, end },
+              { root: true },
+            )
+            .then((_) => Promise.resolve(null)),
+        ]).then((_) => Promise.resolve(null));
+      } else {
+        return Promise.resolve(null);
+      }
+    },
+  },
 };
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/location.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/location.ts
index 91c435810..094640608 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/location.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/location.ts
@@ -5,61 +5,61 @@ import { getLocations } from "../../../../../../../ChillMainBundle/Resources/pub
 import { whereami } from "../../../../../../../ChillMainBundle/Resources/public/lib/api/user";
 
 export interface LocationState {
-    locations: Location[];
-    locationPicked: Location | null;
-    currentLocation: Location | null;
+  locations: Location[];
+  locationPicked: Location | null;
+  currentLocation: Location | null;
 }
 
 export default {
-    namespaced: true,
-    state: (): LocationState => {
-        return {
-            locations: [],
-            locationPicked: null,
-            currentLocation: null,
-        };
+  namespaced: true,
+  state: (): LocationState => {
+    return {
+      locations: [],
+      locationPicked: null,
+      currentLocation: null,
+    };
+  },
+  getters: {
+    getLocationById:
+      (state) =>
+      (id: number): Location | undefined => {
+        return state.locations.find((l) => l.id === id);
+      },
+  },
+  mutations: {
+    setLocations(state, locations): void {
+      state.locations = locations;
     },
-    getters: {
-        getLocationById:
-            (state) =>
-            (id: number): Location | undefined => {
-                return state.locations.find((l) => l.id === id);
-            },
-    },
-    mutations: {
-        setLocations(state, locations): void {
-            state.locations = locations;
-        },
-        setLocationPicked(state, location: Location | null): void {
-            if (null === location) {
-                state.locationPicked = null;
-                return;
-            }
+    setLocationPicked(state, location: Location | null): void {
+      if (null === location) {
+        state.locationPicked = null;
+        return;
+      }
 
-            state.locationPicked =
-                state.locations.find((l) => l.id === location.id) || null;
-        },
-        setCurrentLocation(state, location: Location | null): void {
-            if (null === location) {
-                state.currentLocation = null;
-                return;
-            }
+      state.locationPicked =
+        state.locations.find((l) => l.id === location.id) || null;
+    },
+    setCurrentLocation(state, location: Location | null): void {
+      if (null === location) {
+        state.currentLocation = null;
+        return;
+      }
 
-            state.currentLocation =
-                state.locations.find((l) => l.id === location.id) || null;
-        },
+      state.currentLocation =
+        state.locations.find((l) => l.id === location.id) || null;
     },
-    actions: {
-        getLocations(ctx): Promise<void> {
-            return getLocations().then((locations) => {
-                ctx.commit("setLocations", locations);
-                return Promise.resolve();
-            });
-        },
-        getCurrentLocation(ctx): Promise<void> {
-            return whereami().then((location) => {
-                ctx.commit("setCurrentLocation", location);
-            });
-        },
+  },
+  actions: {
+    getLocations(ctx): Promise<void> {
+      return getLocations().then((locations) => {
+        ctx.commit("setLocations", locations);
+        return Promise.resolve();
+      });
     },
+    getCurrentLocation(ctx): Promise<void> {
+      return whereami().then((location) => {
+        ctx.commit("setCurrentLocation", location);
+      });
+    },
+  },
 } as Module<LocationState, State>;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/me.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/me.ts
index 4f83d0185..0f8ca590e 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/me.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/me.ts
@@ -3,24 +3,24 @@ import { User } from "../../../../../../../ChillMainBundle/Resources/public/type
 import { ActionContext } from "vuex";
 
 export interface MeState {
-    me: User | null;
+  me: User | null;
 }
 
 type Context = ActionContext<MeState, State>;
 
 export default {
-    namespaced: true,
-    state: (): MeState => ({
-        me: null,
-    }),
-    getters: {
-        getMe: function (state: MeState): User | null {
-            return state.me;
-        },
+  namespaced: true,
+  state: (): MeState => ({
+    me: null,
+  }),
+  getters: {
+    getMe: function (state: MeState): User | null {
+      return state.me;
     },
-    mutations: {
-        setWhoAmi(state: MeState, me: User) {
-            state.me = me;
-        },
+  },
+  mutations: {
+    setWhoAmi(state: MeState, me: User) {
+      state.me = me;
     },
+  },
 };
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
index 97d4c6f53..ddf0cc0bd 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -1,51 +1,51 @@
 <template>
-    <div>
-        <h2 class="chill-red">
-            {{ $t("choose_your_calendar_user") }}
-        </h2>
-        <VueMultiselect
-            name="field"
-            id="calendarUserSelector"
-            v-model="value"
-            track-by="id"
-            label="value"
-            :custom-label="transName"
-            :placeholder="$t('select_user')"
-            :multiple="true"
-            :close-on-select="false"
-            :allow-empty="true"
-            :model-value="value"
-            :select-label="$t('multiselect.select_label')"
-            :deselect-label="$t('multiselect.deselect_label')"
-            :selected-label="$t('multiselect.selected_label')"
-            @select="selectUsers"
-            @remove="unSelectUsers"
-            @close="coloriseSelectedValues"
-            :options="options"
-        />
-    </div>
-    <div class="form-check">
-        <input
-            type="checkbox"
-            id="myCalendar"
-            class="form-check-input"
-            v-model="showMyCalendarWidget"
-        />
-        <label class="form-check-label" for="myCalendar">{{
-            $t("show_my_calendar")
-        }}</label>
-    </div>
-    <div class="form-check">
-        <input
-            type="checkbox"
-            id="weekends"
-            class="form-check-input"
-            @click="toggleWeekends"
-        />
-        <label class="form-check-label" for="weekends">{{
-            $t("show_weekends")
-        }}</label>
-    </div>
+  <div>
+    <h2 class="chill-red">
+      {{ $t("choose_your_calendar_user") }}
+    </h2>
+    <VueMultiselect
+      name="field"
+      id="calendarUserSelector"
+      v-model="value"
+      track-by="id"
+      label="value"
+      :custom-label="transName"
+      :placeholder="$t('select_user')"
+      :multiple="true"
+      :close-on-select="false"
+      :allow-empty="true"
+      :model-value="value"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('multiselect.deselect_label')"
+      :selected-label="$t('multiselect.selected_label')"
+      @select="selectUsers"
+      @remove="unSelectUsers"
+      @close="coloriseSelectedValues"
+      :options="options"
+    />
+  </div>
+  <div class="form-check">
+    <input
+      type="checkbox"
+      id="myCalendar"
+      class="form-check-input"
+      v-model="showMyCalendarWidget"
+    />
+    <label class="form-check-label" for="myCalendar">{{
+      $t("show_my_calendar")
+    }}</label>
+  </div>
+  <div class="form-check">
+    <input
+      type="checkbox"
+      id="weekends"
+      class="form-check-input"
+      @click="toggleWeekends"
+    />
+    <label class="form-check-label" for="weekends">{{
+      $t("show_weekends")
+    }}</label>
+  </div>
 </template>
 <script>
 import { fetchCalendarRanges, fetchCalendar } from "../../_api/api";
@@ -53,206 +53,183 @@ import VueMultiselect from "vue-multiselect";
 import { whoami } from "ChillPersonAssets/vuejs/AccompanyingCourse/api";
 
 const COLORS = [
-    /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=12 */
-    "#8dd3c7",
-    "#ffffb3",
-    "#bebada",
-    "#fb8072",
-    "#80b1d3",
-    "#fdb462",
-    "#b3de69",
-    "#fccde5",
-    "#d9d9d9",
-    "#bc80bd",
-    "#ccebc5",
-    "#ffed6f",
+  /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=12 */
+  "#8dd3c7",
+  "#ffffb3",
+  "#bebada",
+  "#fb8072",
+  "#80b1d3",
+  "#fdb462",
+  "#b3de69",
+  "#fccde5",
+  "#d9d9d9",
+  "#bc80bd",
+  "#ccebc5",
+  "#ffed6f",
 ];
 
 export default {
-    name: "CalendarUserSelector",
-    components: { VueMultiselect },
-    props: [
-        "users",
-        "updateEventsSource",
-        "calendarEvents",
-        "showMyCalendar",
-        "toggleMyCalendar",
-        "toggleWeekends",
-    ],
-    data() {
-        return {
-            errorMsg: [],
-            value: [],
-            options: [],
-        };
+  name: "CalendarUserSelector",
+  components: { VueMultiselect },
+  props: [
+    "users",
+    "updateEventsSource",
+    "calendarEvents",
+    "showMyCalendar",
+    "toggleMyCalendar",
+    "toggleWeekends",
+  ],
+  data() {
+    return {
+      errorMsg: [],
+      value: [],
+      options: [],
+    };
+  },
+  computed: {
+    showMyCalendarWidget: {
+      set(value) {
+        this.toggleMyCalendar(value);
+        this.updateEventsSource();
+      },
+      get() {
+        return this.showMyCalendar;
+      },
     },
-    computed: {
-        showMyCalendarWidget: {
-            set(value) {
-                this.toggleMyCalendar(value);
-                this.updateEventsSource();
-            },
-            get() {
-                return this.showMyCalendar;
-            },
-        },
+  },
+  methods: {
+    init() {
+      this.fetchData();
     },
-    methods: {
-        init() {
-            this.fetchData();
-        },
-        fetchData() {
-            fetchCalendarRanges()
-                .then(
-                    (calendarRanges) =>
-                        new Promise((resolve, reject) => {
-                            let results = calendarRanges.results;
+    fetchData() {
+      fetchCalendarRanges()
+        .then(
+          (calendarRanges) =>
+            new Promise((resolve, reject) => {
+              let results = calendarRanges.results;
 
-                            let users = [];
+              let users = [];
 
-                            results.forEach((i) => {
-                                if (!users.some((j) => i.user.id === j.id)) {
-                                    let ratio = Math.floor(
-                                        users.length / COLORS.length,
-                                    );
-                                    let colorIndex =
-                                        users.length - ratio * COLORS.length;
-                                    users.push({
-                                        id: i.user.id,
-                                        username: i.user.username,
-                                        color: COLORS[colorIndex],
-                                    });
-                                }
-                            });
-
-                            let calendarEvents = [];
-                            users.forEach((u) => {
-                                let arr = results
-                                    .filter((i) => i.user.id === u.id)
-                                    .map((i) => ({
-                                        start: i.startDate.datetime,
-                                        end: i.endDate.datetime,
-                                        calendarRangeId: i.id,
-                                        sourceColor: u.color,
-                                        //display: 'background' // can be an option for the disponibility
-                                    }));
-                                calendarEvents.push({
-                                    events: arr,
-                                    color: u.color,
-                                    textColor: "#444444",
-                                    editable: false,
-                                    id: u.id,
-                                });
-                            });
-
-                            this.users.loaded = users;
-                            this.options = users;
-
-                            this.calendarEvents.loaded = calendarEvents;
-                            whoami().then(
-                                (me) =>
-                                    new Promise((resolve, reject) => {
-                                        this.users.logged = me;
-                                        let currentUser = users.find(
-                                            (u) => u.id === me.id,
-                                        );
-                                        this.value = currentUser;
-
-                                        fetchCalendar(currentUser.id).then(
-                                            (calendar) =>
-                                                new Promise(
-                                                    (resolve, reject) => {
-                                                        let results =
-                                                            calendar.results;
-                                                        let events =
-                                                            results.map(
-                                                                (i) => ({
-                                                                    start: i
-                                                                        .startDate
-                                                                        .datetime,
-                                                                    end: i
-                                                                        .endDate
-                                                                        .datetime,
-                                                                }),
-                                                            );
-                                                        let calendarEventsCurrentUser =
-                                                            {
-                                                                events: events,
-                                                                color: "darkblue",
-                                                                id: 1000,
-                                                                editable: false,
-                                                            };
-                                                        this.calendarEvents.user =
-                                                            calendarEventsCurrentUser;
-
-                                                        this.selectUsers(
-                                                            currentUser,
-                                                        );
-
-                                                        resolve();
-                                                    },
-                                                ),
-                                        );
-
-                                        resolve();
-                                    }),
-                            );
-
-                            resolve();
-                        }),
-                )
-                .catch((error) => {
-                    this.errorMsg.push(error.message);
-                });
-        },
-        transName(value) {
-            return `${value.username}`;
-        },
-        coloriseSelectedValues() {
-            let tags = document.querySelectorAll(
-                "div.multiselect__tags-wrap",
-            )[0];
-
-            if (tags.hasChildNodes()) {
-                let children = tags.childNodes;
-                for (let i = 0; i < children.length; i++) {
-                    let child = children[i];
-                    if (child.nodeType === Node.ELEMENT_NODE) {
-                        this.users.selected.forEach((u) => {
-                            if (child.hasChildNodes()) {
-                                if (child.firstChild.innerText == u.username) {
-                                    child.style.background = u.color;
-                                    child.firstChild.style.color = "#444444";
-                                }
-                            }
-                        });
-                    }
+              results.forEach((i) => {
+                if (!users.some((j) => i.user.id === j.id)) {
+                  let ratio = Math.floor(users.length / COLORS.length);
+                  let colorIndex = users.length - ratio * COLORS.length;
+                  users.push({
+                    id: i.user.id,
+                    username: i.user.username,
+                    color: COLORS[colorIndex],
+                  });
                 }
-            }
-        },
-        selectEvents() {
-            let selectedUsersId = this.users.selected.map((a) => a.id);
-            this.calendarEvents.selected = this.calendarEvents.loaded.filter(
-                (a) => selectedUsersId.includes(a.id),
-            );
-        },
-        selectUsers(value) {
-            this.users.selected.push(value);
-            this.coloriseSelectedValues();
-            this.selectEvents();
-            this.updateEventsSource();
-        },
-        unSelectUsers(value) {
-            this.users.selected = this.users.selected.filter(
-                (a) => a.id != value.id,
-            );
-            this.selectEvents();
-            this.updateEventsSource();
-        },
+              });
+
+              let calendarEvents = [];
+              users.forEach((u) => {
+                let arr = results
+                  .filter((i) => i.user.id === u.id)
+                  .map((i) => ({
+                    start: i.startDate.datetime,
+                    end: i.endDate.datetime,
+                    calendarRangeId: i.id,
+                    sourceColor: u.color,
+                    //display: 'background' // can be an option for the disponibility
+                  }));
+                calendarEvents.push({
+                  events: arr,
+                  color: u.color,
+                  textColor: "#444444",
+                  editable: false,
+                  id: u.id,
+                });
+              });
+
+              this.users.loaded = users;
+              this.options = users;
+
+              this.calendarEvents.loaded = calendarEvents;
+              whoami().then(
+                (me) =>
+                  new Promise((resolve, reject) => {
+                    this.users.logged = me;
+                    let currentUser = users.find((u) => u.id === me.id);
+                    this.value = currentUser;
+
+                    fetchCalendar(currentUser.id).then(
+                      (calendar) =>
+                        new Promise((resolve, reject) => {
+                          let results = calendar.results;
+                          let events = results.map((i) => ({
+                            start: i.startDate.datetime,
+                            end: i.endDate.datetime,
+                          }));
+                          let calendarEventsCurrentUser = {
+                            events: events,
+                            color: "darkblue",
+                            id: 1000,
+                            editable: false,
+                          };
+                          this.calendarEvents.user = calendarEventsCurrentUser;
+
+                          this.selectUsers(currentUser);
+
+                          resolve();
+                        }),
+                    );
+
+                    resolve();
+                  }),
+              );
+
+              resolve();
+            }),
+        )
+        .catch((error) => {
+          this.errorMsg.push(error.message);
+        });
     },
-    mounted() {
-        this.init();
+    transName(value) {
+      return `${value.username}`;
     },
+    coloriseSelectedValues() {
+      let tags = document.querySelectorAll("div.multiselect__tags-wrap")[0];
+
+      if (tags.hasChildNodes()) {
+        let children = tags.childNodes;
+        for (let i = 0; i < children.length; i++) {
+          let child = children[i];
+          if (child.nodeType === Node.ELEMENT_NODE) {
+            this.users.selected.forEach((u) => {
+              if (child.hasChildNodes()) {
+                if (child.firstChild.innerText == u.username) {
+                  child.style.background = u.color;
+                  child.firstChild.style.color = "#444444";
+                }
+              }
+            });
+          }
+        }
+      }
+    },
+    selectEvents() {
+      let selectedUsersId = this.users.selected.map((a) => a.id);
+      this.calendarEvents.selected = this.calendarEvents.loaded.filter((a) =>
+        selectedUsersId.includes(a.id),
+      );
+    },
+    selectUsers(value) {
+      this.users.selected.push(value);
+      this.coloriseSelectedValues();
+      this.selectEvents();
+      this.updateEventsSource();
+    },
+    unSelectUsers(value) {
+      this.users.selected = this.users.selected.filter((a) => a.id != value.id);
+      this.selectEvents();
+      this.updateEventsSource();
+    },
+  },
+  mounted() {
+    this.init();
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue b/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
index 1bcc95fd0..3a2f4fd59 100644
--- a/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
+++ b/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
@@ -1,59 +1,54 @@
 <template>
-    <div>
-        <template v-if="templates.length > 0">
-            <slot name="title">
-                <h2>{{ $t("generate_document") }}</h2>
-            </slot>
+  <div>
+    <template v-if="templates.length > 0">
+      <slot name="title">
+        <h2>{{ $t("generate_document") }}</h2>
+      </slot>
 
-            <div class="container">
-                <div class="row">
-                    <div class="col-md-4">
-                        <slot name="label">
-                            <label>{{ $t("select_a_template") }}</label>
-                        </slot>
-                    </div>
-                    <div class="col-md-8">
-                        <div class="input-group mb-3">
-                            <select class="form-select" v-model="template">
-                                <option disabled selected value="">
-                                    {{ $t("choose_a_template") }}
-                                </option>
-                                <template v-for="t in templates" :key="t.id">
-                                    <option :value="t.id">
-                                        {{
-                                            localizeString(t.name) ||
-                                            "Aucun nom défini"
-                                        }}
-                                    </option>
-                                </template>
-                            </select>
-                            <a
-                                v-if="canGenerate"
-                                class="btn btn-update btn-sm change-icon"
-                                :href="buildUrlGenerate"
-                                @click.prevent="
-                                    clickGenerate($event, buildUrlGenerate)
-                                "
-                                ><i class="fa fa-fw fa-cog"
-                            /></a>
-                            <a
-                                v-else
-                                class="btn btn-update btn-sm change-icon"
-                                href="#"
-                                disabled
-                                ><i class="fa fa-fw fa-cog"
-                            /></a>
-                        </div>
-                    </div>
-                </div>
-                <div class="row" v-if="hasDescription">
-                    <div class="col-md-8 align-self-end">
-                        <p>{{ getDescription }}</p>
-                    </div>
-                </div>
+      <div class="container">
+        <div class="row">
+          <div class="col-md-4">
+            <slot name="label">
+              <label>{{ $t("select_a_template") }}</label>
+            </slot>
+          </div>
+          <div class="col-md-8">
+            <div class="input-group mb-3">
+              <select class="form-select" v-model="template">
+                <option disabled selected value="">
+                  {{ $t("choose_a_template") }}
+                </option>
+                <template v-for="t in templates" :key="t.id">
+                  <option :value="t.id">
+                    {{ localizeString(t.name) || "Aucun nom défini" }}
+                  </option>
+                </template>
+              </select>
+              <a
+                v-if="canGenerate"
+                class="btn btn-update btn-sm change-icon"
+                :href="buildUrlGenerate"
+                @click.prevent="clickGenerate($event, buildUrlGenerate)"
+                ><i class="fa fa-fw fa-cog"
+              /></a>
+              <a
+                v-else
+                class="btn btn-update btn-sm change-icon"
+                href="#"
+                disabled
+                ><i class="fa fa-fw fa-cog"
+              /></a>
             </div>
-        </template>
-    </div>
+          </div>
+        </div>
+        <div class="row" v-if="hasDescription">
+          <div class="col-md-8 align-self-end">
+            <p>{{ getDescription }}</p>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -61,83 +56,83 @@ import { buildLink } from "ChillDocGeneratorAssets/lib/document-generator";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 export default {
-    name: "PickTemplate",
-    props: {
-        entityId: [String, Number],
-        entityClass: {
-            type: String,
-            required: false,
-        },
-        templates: {
-            type: Array,
-            required: true,
-        },
-        preventDefaultMoveToGenerate: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
+  name: "PickTemplate",
+  props: {
+    entityId: [String, Number],
+    entityClass: {
+      type: String,
+      required: false,
     },
-    emits: ["goToGenerateDocument"],
-    data() {
-        return {
-            template: null,
-        };
+    templates: {
+      type: Array,
+      required: true,
     },
-    computed: {
-        canGenerate() {
-            return this.template != null;
-        },
-        hasDescription() {
-            if (this.template == null) {
-                return false;
-            }
+    preventDefaultMoveToGenerate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: ["goToGenerateDocument"],
+  data() {
+    return {
+      template: null,
+    };
+  },
+  computed: {
+    canGenerate() {
+      return this.template != null;
+    },
+    hasDescription() {
+      if (this.template == null) {
+        return false;
+      }
 
-            return true;
-        },
-        getDescription() {
-            if (null === this.template) {
-                return "";
-            }
-            let desc = this.templates.find((t) => t.id === this.template);
-            if (null === desc) {
-                return "";
-            }
-            return desc.description || "";
-        },
-        buildUrlGenerate() {
-            if (null === this.template) {
-                return "#";
-            }
+      return true;
+    },
+    getDescription() {
+      if (null === this.template) {
+        return "";
+      }
+      let desc = this.templates.find((t) => t.id === this.template);
+      if (null === desc) {
+        return "";
+      }
+      return desc.description || "";
+    },
+    buildUrlGenerate() {
+      if (null === this.template) {
+        return "#";
+      }
 
-            return buildLink(this.template, this.entityId, this.entityClass);
-        },
+      return buildLink(this.template, this.entityId, this.entityClass);
     },
-    methods: {
-        localizeString(str) {
-            return localizeString(str);
-        },
-        clickGenerate(event, link) {
-            if (!this.preventDefaultMoveToGenerate) {
-                window.location.assign(link);
-            }
+  },
+  methods: {
+    localizeString(str) {
+      return localizeString(str);
+    },
+    clickGenerate(event, link) {
+      if (!this.preventDefaultMoveToGenerate) {
+        window.location.assign(link);
+      }
 
-            this.$emit("goToGenerateDocument", {
-                event,
-                link,
-                template: this.template,
-            });
-        },
+      this.$emit("goToGenerateDocument", {
+        event,
+        link,
+        template: this.template,
+      });
     },
-    i18n: {
-        messages: {
-            fr: {
-                generate_document: "Générer un document",
-                select_a_template: "Choisir un modèle",
-                choose_a_template: "Choisir",
-            },
-        },
+  },
+  i18n: {
+    messages: {
+      fr: {
+        generate_document: "Générer un document",
+        select_a_template: "Choisir un modèle",
+        choose_a_template: "Choisir",
+      },
     },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/js/async-upload/uploader.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/js/async-upload/uploader.ts
index a09c4a5f6..367ab0829 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/js/async-upload/uploader.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/js/async-upload/uploader.ts
@@ -6,20 +6,20 @@ const algo = "AES-CBC";
 const URL_POST = "/asyncupload/temp_url/generate/post";
 
 const keyDefinition = {
-    name: algo,
-    length: 256,
+  name: algo,
+  length: 256,
 };
 
 const createFilename = (): string => {
-    let text = "";
-    const possible =
-        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let text = "";
+  const possible =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
-    for (let i = 0; i < 7; i++) {
-        text += possible.charAt(Math.floor(Math.random() * possible.length));
-    }
+  for (let i = 0; i < 7; i++) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
 
-    return text;
+  return text;
 };
 
 /**
@@ -30,59 +30,59 @@ const createFilename = (): string => {
  * @returns {Promise<StoredObject>} A Promise that resolves to the newly created StoredObject.
  */
 export const fetchNewStoredObject = async (): Promise<StoredObject> => {
-    return makeFetch("POST", "/api/1.0/doc-store/stored-object/create", null);
+  return makeFetch("POST", "/api/1.0/doc-store/stored-object/create", null);
 };
 
 export const uploadVersion = async (
-    uploadFile: ArrayBuffer,
-    storedObject: StoredObject,
+  uploadFile: ArrayBuffer,
+  storedObject: StoredObject,
 ): Promise<string> => {
-    const params = new URLSearchParams();
-    params.append("expires_delay", "180");
-    params.append("submit_delay", "180");
-    const asyncData: PostStoreObjectSignature = await makeFetch(
-        "GET",
-        `/api/1.0/doc-store/async-upload/temp_url/${storedObject.uuid}/generate/post` +
-            "?" +
-            params.toString(),
-    );
-    const suffix = createFilename();
-    const filename = asyncData.prefix + suffix;
-    const formData = new FormData();
-    formData.append("redirect", asyncData.redirect);
-    formData.append("max_file_size", asyncData.max_file_size.toString());
-    formData.append("max_file_count", asyncData.max_file_count.toString());
-    formData.append("expires", asyncData.expires.toString());
-    formData.append("signature", asyncData.signature);
-    formData.append(filename, new Blob([uploadFile]), suffix);
+  const params = new URLSearchParams();
+  params.append("expires_delay", "180");
+  params.append("submit_delay", "180");
+  const asyncData: PostStoreObjectSignature = await makeFetch(
+    "GET",
+    `/api/1.0/doc-store/async-upload/temp_url/${storedObject.uuid}/generate/post` +
+      "?" +
+      params.toString(),
+  );
+  const suffix = createFilename();
+  const filename = asyncData.prefix + suffix;
+  const formData = new FormData();
+  formData.append("redirect", asyncData.redirect);
+  formData.append("max_file_size", asyncData.max_file_size.toString());
+  formData.append("max_file_count", asyncData.max_file_count.toString());
+  formData.append("expires", asyncData.expires.toString());
+  formData.append("signature", asyncData.signature);
+  formData.append(filename, new Blob([uploadFile]), suffix);
 
-    const response = await window.fetch(asyncData.url, {
-        method: "POST",
-        body: formData,
-    });
+  const response = await window.fetch(asyncData.url, {
+    method: "POST",
+    body: formData,
+  });
 
-    if (!response.ok) {
-        console.error("Error while sending file to store", response);
-        throw new Error(response.statusText);
-    }
+  if (!response.ok) {
+    console.error("Error while sending file to store", response);
+    throw new Error(response.statusText);
+  }
 
-    return Promise.resolve(filename);
+  return Promise.resolve(filename);
 };
 
 export const encryptFile = async (
-    originalFile: ArrayBuffer,
+  originalFile: ArrayBuffer,
 ): Promise<[ArrayBuffer, Uint8Array, JsonWebKey]> => {
-    const iv = crypto.getRandomValues(new Uint8Array(16));
-    const key = await window.crypto.subtle.generateKey(keyDefinition, true, [
-        "encrypt",
-        "decrypt",
-    ]);
-    const exportedKey = await window.crypto.subtle.exportKey("jwk", key);
-    const encrypted = await window.crypto.subtle.encrypt(
-        { name: algo, iv: iv },
-        key,
-        originalFile,
-    );
+  const iv = crypto.getRandomValues(new Uint8Array(16));
+  const key = await window.crypto.subtle.generateKey(keyDefinition, true, [
+    "encrypt",
+    "decrypt",
+  ]);
+  const exportedKey = await window.crypto.subtle.exportKey("jwk", key);
+  const encrypted = await window.crypto.subtle.encrypt(
+    { name: algo, iv: iv },
+    key,
+    originalFile,
+  );
 
-    return Promise.resolve([encrypted, iv, exportedKey]);
+  return Promise.resolve([encrypted, iv, exportedKey]);
 };
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/js/generic-doc-api.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/js/generic-doc-api.ts
index c15eff711..aaff2a331 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/js/generic-doc-api.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/js/generic-doc-api.ts
@@ -2,9 +2,9 @@ import { fetchResults } from "ChillMainAssets/lib/api/apiMethods";
 import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
 
 export function fetch_generic_docs_by_accompanying_period(
-    periodId: number,
+  periodId: number,
 ): Promise<GenericDocForAccompanyingPeriod[]> {
-    return fetchResults(
-        `/api/1.0/doc-store/generic-doc/by-period/${periodId}/index`,
-    );
+  return fetchResults(
+    `/api/1.0/doc-store/generic-doc/by-period/${periodId}/index`,
+  );
 }
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/index.ts
index 30fe2b26a..97e0d3aa3 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/index.ts
@@ -6,117 +6,116 @@ import { _createI18n } from "../../../../../ChillMainBundle/Resources/public/vue
 const i18n = _createI18n({});
 
 const startApp = (
-    divElement: HTMLDivElement,
-    collectionEntry: null | HTMLLIElement,
+  divElement: HTMLDivElement,
+  collectionEntry: null | HTMLLIElement,
 ): void => {
-    console.log("app started", divElement);
+  console.log("app started", divElement);
 
-    const inputTitle = collectionEntry?.querySelector("input[type='text']");
+  const inputTitle = collectionEntry?.querySelector("input[type='text']");
 
-    const input_stored_object: HTMLInputElement | null =
-        divElement.querySelector("input[data-stored-object]");
-    if (null === input_stored_object) {
-        throw new Error("input to stored object not found");
-    }
+  const input_stored_object: HTMLInputElement | null = divElement.querySelector(
+    "input[data-stored-object]",
+  );
+  if (null === input_stored_object) {
+    throw new Error("input to stored object not found");
+  }
 
-    let existingDoc: StoredObject | null = null;
-    if (input_stored_object.value !== "") {
-        existingDoc = JSON.parse(input_stored_object.value);
-    }
-    const app_container = document.createElement("div");
-    divElement.appendChild(app_container);
+  let existingDoc: StoredObject | null = null;
+  if (input_stored_object.value !== "") {
+    existingDoc = JSON.parse(input_stored_object.value);
+  }
+  const app_container = document.createElement("div");
+  divElement.appendChild(app_container);
 
-    const app = createApp({
-        template:
-            '<drop-file-widget :existingDoc="this.$data.existingDoc" :allowRemove="true" @addDocument="this.addDocument" @removeDocument="removeDocument"></drop-file-widget>',
-        data() {
-            return {
-                existingDoc: existingDoc,
-                inputTitle: inputTitle,
-            };
-        },
-        components: {
-            DropFileWidget,
-        },
-        methods: {
-            addDocument: function ({
-                stored_object,
-                stored_object_version,
-                file_name,
-            }: {
-                stored_object: StoredObject;
-                stored_object_version: StoredObjectVersion;
-                file_name: string;
-            }): void {
-                stored_object.title = file_name;
-                console.log("object added", stored_object);
-                console.log("version added", stored_object_version);
-                this.$data.existingDoc = stored_object;
-                this.$data.existingDoc.currentVersion = stored_object_version;
-                input_stored_object.value = JSON.stringify(
-                    this.$data.existingDoc,
-                );
-                if (this.$data.inputTitle) {
-                    if (!this.$data.inputTitle?.value) {
-                        this.$data.inputTitle.value = file_name;
-                    }
-                }
-            },
-            removeDocument: function (object: StoredObject): void {
-                console.log("catch remove document", object);
-                input_stored_object.value = "";
-                this.$data.existingDoc = undefined;
-                console.log("collectionEntry", collectionEntry);
+  const app = createApp({
+    template:
+      '<drop-file-widget :existingDoc="this.$data.existingDoc" :allowRemove="true" @addDocument="this.addDocument" @removeDocument="removeDocument"></drop-file-widget>',
+    data() {
+      return {
+        existingDoc: existingDoc,
+        inputTitle: inputTitle,
+      };
+    },
+    components: {
+      DropFileWidget,
+    },
+    methods: {
+      addDocument: function ({
+        stored_object,
+        stored_object_version,
+        file_name,
+      }: {
+        stored_object: StoredObject;
+        stored_object_version: StoredObjectVersion;
+        file_name: string;
+      }): void {
+        stored_object.title = file_name;
+        console.log("object added", stored_object);
+        console.log("version added", stored_object_version);
+        this.$data.existingDoc = stored_object;
+        this.$data.existingDoc.currentVersion = stored_object_version;
+        input_stored_object.value = JSON.stringify(this.$data.existingDoc);
+        if (this.$data.inputTitle) {
+          if (!this.$data.inputTitle?.value) {
+            this.$data.inputTitle.value = file_name;
+          }
+        }
+      },
+      removeDocument: function (object: StoredObject): void {
+        console.log("catch remove document", object);
+        input_stored_object.value = "";
+        this.$data.existingDoc = undefined;
+        console.log("collectionEntry", collectionEntry);
 
-                if (null !== collectionEntry) {
-                    console.log("will remove collection");
-                    collectionEntry.remove();
-                }
-            },
-        },
-    });
+        if (null !== collectionEntry) {
+          console.log("will remove collection");
+          collectionEntry.remove();
+        }
+      },
+    },
+  });
 
-    app.use(i18n).mount(app_container);
+  app.use(i18n).mount(app_container);
 };
 window.addEventListener("collection-add-entry", ((
-    e: CustomEvent<CollectionEventPayload>,
+  e: CustomEvent<CollectionEventPayload>,
 ) => {
-    const detail = e.detail;
-    const divElement: null | HTMLDivElement = detail.entry.querySelector(
-        "div[data-stored-object]",
-    );
+  const detail = e.detail;
+  const divElement: null | HTMLDivElement = detail.entry.querySelector(
+    "div[data-stored-object]",
+  );
 
-    if (null === divElement) {
-        throw new Error("div[data-stored-object] not found");
-    }
+  if (null === divElement) {
+    throw new Error("div[data-stored-object] not found");
+  }
 
-    startApp(divElement, detail.entry);
+  startApp(divElement, detail.entry);
 }) as EventListener);
 
 window.addEventListener("DOMContentLoaded", () => {
-    const upload_inputs: NodeListOf<HTMLDivElement> = document.querySelectorAll(
-        "div[data-stored-object]",
-    );
+  const upload_inputs: NodeListOf<HTMLDivElement> = document.querySelectorAll(
+    "div[data-stored-object]",
+  );
 
-    upload_inputs.forEach((input: HTMLDivElement): void => {
-        // test for a parent to check if this is a collection entry
-        let collectionEntry: null | HTMLLIElement = null;
-        const parent = input.parentElement;
-        console.log("parent", parent);
-        if (null !== parent) {
-            const grandParent = parent.parentElement;
-            console.log("grandParent", grandParent);
-            if (null !== grandParent) {
-                if (
-                    grandParent.tagName.toLowerCase() === "li" &&
-                    grandParent.classList.contains("entry")
-                ) {
-                    collectionEntry = grandParent as HTMLLIElement;
-                }
-            }
+  upload_inputs.forEach((input: HTMLDivElement): void => {
+    // test for a parent to check if this is a collection entry
+    let collectionEntry: null | HTMLLIElement = null;
+    const parent = input.parentElement;
+    console.log("parent", parent);
+    if (null !== parent) {
+      const grandParent = parent.parentElement;
+      console.log("grandParent", grandParent);
+      if (null !== grandParent) {
+        if (
+          grandParent.tagName.toLowerCase() === "li" &&
+          grandParent.classList.contains("entry")
+        ) {
+          collectionEntry = grandParent as HTMLLIElement;
         }
-        startApp(input, collectionEntry);
-    });
+      }
+    }
+    startApp(input, collectionEntry);
+  });
 });
 
 export {};
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/module/button_download/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/module/button_download/index.ts
index 30b9e29d1..4ab819ddf 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/module/button_download/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/module/button_download/index.ts
@@ -9,26 +9,26 @@ import ToastPlugin from "vue-toast-notification";
 const i18n = _createI18n({});
 
 window.addEventListener("DOMContentLoaded", function (e) {
-    document
-        .querySelectorAll<HTMLDivElement>("div[data-download-button-single]")
-        .forEach((el) => {
-            const storedObject = JSON.parse(
-                el.dataset.storedObject as string,
-            ) as StoredObject;
-            const title = el.dataset.title as string;
-            const app = createApp({
-                components: { DownloadButton },
-                data() {
-                    return {
-                        storedObject,
-                        title,
-                        classes: { btn: true, "btn-outline-primary": true },
-                    };
-                },
-                template:
-                    '<download-button :stored-object="storedObject" :at-version="storedObject.currentVersion" :classes="classes" :filename="title" :direct-download="true"></download-button>',
-            });
+  document
+    .querySelectorAll<HTMLDivElement>("div[data-download-button-single]")
+    .forEach((el) => {
+      const storedObject = JSON.parse(
+        el.dataset.storedObject as string,
+      ) as StoredObject;
+      const title = el.dataset.title as string;
+      const app = createApp({
+        components: { DownloadButton },
+        data() {
+          return {
+            storedObject,
+            title,
+            classes: { btn: true, "btn-outline-primary": true },
+          };
+        },
+        template:
+          '<download-button :stored-object="storedObject" :at-version="storedObject.currentVersion" :classes="classes" :filename="title" :direct-download="true"></download-button>',
+      });
 
-            app.use(i18n).use(ToastPlugin).mount(el);
-        });
+      app.use(i18n).use(ToastPlugin).mount(el);
+    });
 });
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts
index 5874e88fe..080f63c66 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts
@@ -8,66 +8,66 @@ import ToastPlugin from "vue-toast-notification";
 const i18n = _createI18n({});
 
 window.addEventListener("DOMContentLoaded", function (e) {
-    document
-        .querySelectorAll<HTMLDivElement>("div[data-download-buttons]")
-        .forEach((el) => {
-            const app = createApp({
-                components: { DocumentActionButtonsGroup },
-                data() {
-                    const datasets = el.dataset as {
-                        filename: string;
-                        canEdit: string;
-                        storedObject: string;
-                        buttonSmall: string;
-                        davLink: string;
-                        davLinkExpiration: string;
-                    };
+  document
+    .querySelectorAll<HTMLDivElement>("div[data-download-buttons]")
+    .forEach((el) => {
+      const app = createApp({
+        components: { DocumentActionButtonsGroup },
+        data() {
+          const datasets = el.dataset as {
+            filename: string;
+            canEdit: string;
+            storedObject: string;
+            buttonSmall: string;
+            davLink: string;
+            davLinkExpiration: string;
+          };
 
-                    const storedObject = JSON.parse(
-                            datasets.storedObject,
-                        ) as StoredObject,
-                        filename = datasets.filename,
-                        canEdit = datasets.canEdit === "1",
-                        small = datasets.buttonSmall === "1",
-                        davLink =
-                            "davLink" in datasets && datasets.davLink !== ""
-                                ? datasets.davLink
-                                : null,
-                        davLinkExpiration =
-                            "davLinkExpiration" in datasets
-                                ? Number.parseInt(datasets.davLinkExpiration)
-                                : null;
-                    return {
-                        storedObject,
-                        filename,
-                        canEdit,
-                        small,
-                        davLink,
-                        davLinkExpiration,
-                    };
-                },
-                template:
-                    '<document-action-buttons-group :can-edit="canEdit" :filename="filename" :stored-object="storedObject" :small="small" :dav-link="davLink" :dav-link-expiration="davLinkExpiration" @on-stored-object-status-change="onStoredObjectStatusChange"></document-action-buttons-group>',
-                methods: {
-                    onStoredObjectStatusChange: function (
-                        newStatus: StoredObjectStatusChange,
-                    ): void {
-                        this.$data.storedObject.status = newStatus.status;
-                        this.$data.storedObject.filename = newStatus.filename;
-                        this.$data.storedObject.type = newStatus.type;
+          const storedObject = JSON.parse(
+              datasets.storedObject,
+            ) as StoredObject,
+            filename = datasets.filename,
+            canEdit = datasets.canEdit === "1",
+            small = datasets.buttonSmall === "1",
+            davLink =
+              "davLink" in datasets && datasets.davLink !== ""
+                ? datasets.davLink
+                : null,
+            davLinkExpiration =
+              "davLinkExpiration" in datasets
+                ? Number.parseInt(datasets.davLinkExpiration)
+                : null;
+          return {
+            storedObject,
+            filename,
+            canEdit,
+            small,
+            davLink,
+            davLinkExpiration,
+          };
+        },
+        template:
+          '<document-action-buttons-group :can-edit="canEdit" :filename="filename" :stored-object="storedObject" :small="small" :dav-link="davLink" :dav-link-expiration="davLinkExpiration" @on-stored-object-status-change="onStoredObjectStatusChange"></document-action-buttons-group>',
+        methods: {
+          onStoredObjectStatusChange: function (
+            newStatus: StoredObjectStatusChange,
+          ): void {
+            this.$data.storedObject.status = newStatus.status;
+            this.$data.storedObject.filename = newStatus.filename;
+            this.$data.storedObject.type = newStatus.type;
 
-                        // remove eventual div which inform pending status
-                        document
-                            .querySelectorAll(
-                                `[data-docgen-is-pending="${this.$data.storedObject.id}"]`,
-                            )
-                            .forEach(function (el) {
-                                el.remove();
-                            });
-                    },
-                },
-            });
+            // remove eventual div which inform pending status
+            document
+              .querySelectorAll(
+                `[data-docgen-is-pending="${this.$data.storedObject.id}"]`,
+              )
+              .forEach(function (el) {
+                el.remove();
+              });
+          },
+        },
+      });
 
-            app.use(i18n).use(ToastPlugin).mount(el);
-        });
+      app.use(i18n).use(ToastPlugin).mount(el);
+    });
 });
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/types/generic_doc.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/types/generic_doc.ts
index facc55e58..9cda25cad 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types/generic_doc.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types/generic_doc.ts
@@ -2,7 +2,7 @@ import { DateTime } from "ChillMainAssets/types";
 import { StoredObject } from "ChillDocStoreAssets/types/index";
 
 export interface GenericDocMetadata {
-    isPresent: boolean;
+  isPresent: boolean;
 }
 
 /**
@@ -15,57 +15,57 @@ export interface EmptyMetadata extends GenericDocMetadata {}
  * Minimal Metadata for a GenericDoc with a normalizer
  */
 export interface BaseMetadata extends GenericDocMetadata {
-    title: string;
+  title: string;
 }
 
 /**
  * A generic doc is a document attached to a Person or an AccompanyingPeriod.
  */
 export interface GenericDoc {
-    type: "doc_store_generic_doc";
-    uniqueKey: string;
-    key: string;
-    identifiers: object;
-    context: "person" | "accompanying-period";
-    doc_date: DateTime;
-    metadata: GenericDocMetadata;
-    storedObject: StoredObject | null;
+  type: "doc_store_generic_doc";
+  uniqueKey: string;
+  key: string;
+  identifiers: object;
+  context: "person" | "accompanying-period";
+  doc_date: DateTime;
+  metadata: GenericDocMetadata;
+  storedObject: StoredObject | null;
 }
 
 export interface GenericDocForAccompanyingPeriod extends GenericDoc {
-    context: "accompanying-period";
+  context: "accompanying-period";
 }
 
 interface BaseMetadataWithHtml extends BaseMetadata {
-    html: string;
+  html: string;
 }
 
 export interface GenericDocForAccompanyingCourseDocument
-    extends GenericDocForAccompanyingPeriod {
-    key: "accompanying_course_document";
-    metadata: BaseMetadataWithHtml;
+  extends GenericDocForAccompanyingPeriod {
+  key: "accompanying_course_document";
+  metadata: BaseMetadataWithHtml;
 }
 
 export interface GenericDocForAccompanyingCourseActivityDocument
-    extends GenericDocForAccompanyingPeriod {
-    key: "accompanying_course_activity_document";
-    metadata: BaseMetadataWithHtml;
+  extends GenericDocForAccompanyingPeriod {
+  key: "accompanying_course_activity_document";
+  metadata: BaseMetadataWithHtml;
 }
 
 export interface GenericDocForAccompanyingCourseCalendarDocument
-    extends GenericDocForAccompanyingPeriod {
-    key: "accompanying_course_calendar_document";
-    metadata: BaseMetadataWithHtml;
+  extends GenericDocForAccompanyingPeriod {
+  key: "accompanying_course_calendar_document";
+  metadata: BaseMetadataWithHtml;
 }
 
 export interface GenericDocForAccompanyingCoursePersonDocument
-    extends GenericDocForAccompanyingPeriod {
-    key: "person_document";
-    metadata: BaseMetadataWithHtml;
+  extends GenericDocForAccompanyingPeriod {
+  key: "person_document";
+  metadata: BaseMetadataWithHtml;
 }
 
 export interface GenericDocForAccompanyingCourseWorkEvaluationDocument
-    extends GenericDocForAccompanyingPeriod {
-    key: "accompanying_period_work_evaluation_document";
-    metadata: BaseMetadataWithHtml;
+  extends GenericDocForAccompanyingPeriod {
+  key: "accompanying_period_work_evaluation_document";
+  metadata: BaseMetadataWithHtml;
 }
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/types/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/types/index.ts
index 5b34b8f73..f71ed0350 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types/index.ts
@@ -4,73 +4,73 @@ import { SignedUrlGet } from "ChillDocStoreAssets/vuejs/StoredObjectButton/helpe
 export type StoredObjectStatus = "empty" | "ready" | "failure" | "pending";
 
 export interface StoredObject {
-    id: number;
-    title: string | null;
-    uuid: string;
-    prefix: string;
-    status: StoredObjectStatus;
-    currentVersion:
-        | null
-        | StoredObjectVersionCreated
-        | StoredObjectVersionPersisted;
-    totalVersions: number;
-    datas: object;
-    /** @deprecated */
-    creationDate: DateTime;
-    createdAt: DateTime | null;
-    createdBy: User | null;
-    _permissions: {
-        canEdit: boolean;
-        canSee: boolean;
-    };
-    _links?: {
-        dav_link?: {
-            href: string;
-            expiration: number;
-        };
-        downloadLink?: SignedUrlGet;
+  id: number;
+  title: string | null;
+  uuid: string;
+  prefix: string;
+  status: StoredObjectStatus;
+  currentVersion:
+    | null
+    | StoredObjectVersionCreated
+    | StoredObjectVersionPersisted;
+  totalVersions: number;
+  datas: object;
+  /** @deprecated */
+  creationDate: DateTime;
+  createdAt: DateTime | null;
+  createdBy: User | null;
+  _permissions: {
+    canEdit: boolean;
+    canSee: boolean;
+  };
+  _links?: {
+    dav_link?: {
+      href: string;
+      expiration: number;
     };
+    downloadLink?: SignedUrlGet;
+  };
 }
 
 export interface StoredObjectVersion {
-    /**
-     * filename of the object in the object storage
-     */
-    filename: string;
-    iv: number[];
-    keyInfos: JsonWebKey;
-    type: string;
+  /**
+   * filename of the object in the object storage
+   */
+  filename: string;
+  iv: number[];
+  keyInfos: JsonWebKey;
+  type: string;
 }
 
 export interface StoredObjectVersionCreated extends StoredObjectVersion {
-    persisted: false;
+  persisted: false;
 }
 
 export interface StoredObjectVersionPersisted
-    extends StoredObjectVersionCreated {
-    version: number;
-    id: number;
-    createdAt: DateTime | null;
-    createdBy: User | null;
+  extends StoredObjectVersionCreated {
+  version: number;
+  id: number;
+  createdAt: DateTime | null;
+  createdBy: User | null;
 }
 
 export interface StoredObjectStatusChange {
-    id: number;
-    filename: string;
-    status: StoredObjectStatus;
-    type: string;
+  id: number;
+  filename: string;
+  status: StoredObjectStatus;
+  type: string;
 }
 
 export interface StoredObjectVersionWithPointInTime
-    extends StoredObjectVersionPersisted {
-    "point-in-times": StoredObjectPointInTime[];
-    "from-restored": StoredObjectVersionPersisted | null;
+  extends StoredObjectVersionPersisted {
+  "point-in-times": StoredObjectPointInTime[];
+  "from-restored": StoredObjectVersionPersisted | null;
 }
 
 export interface StoredObjectPointInTime {
-    id: number;
-    byUser: User | null;
-    reason: "keep-before-conversion" | "keep-by-user";
+  id: number;
+  byUser: User | null;
+  reason: "keep-before-conversion" | "keep-by-user";
 }
 
 /**
@@ -82,63 +82,63 @@ export type WopiEditButtonExecutableBeforeLeaveFunction = () => Promise<void>;
  * Object containing information for performering a POST request to a swift object store
  */
 export interface PostStoreObjectSignature {
-    method: "POST";
-    max_file_size: number;
-    max_file_count: 1;
-    expires: number;
-    submit_delay: 180;
-    redirect: string;
-    prefix: string;
-    url: string;
-    signature: string;
+  method: "POST";
+  max_file_size: number;
+  max_file_count: 1;
+  expires: number;
+  submit_delay: 180;
+  redirect: string;
+  prefix: string;
+  url: string;
+  signature: string;
 }
 
 export interface PDFPage {
-    index: number;
-    width: number;
-    height: number;
+  index: number;
+  width: number;
+  height: number;
 }
 export interface SignatureZone {
-    index: number | null;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    PDFPage: PDFPage;
+  index: number | null;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  PDFPage: PDFPage;
 }
 
 export interface Signature {
-    id: number;
-    storedObject: StoredObject;
-    zones: SignatureZone[];
+  id: number;
+  storedObject: StoredObject;
+  zones: SignatureZone[];
 }
 
 export type SignedState =
-    | "pending"
-    | "signed"
-    | "rejected"
-    | "canceled"
-    | "error";
+  | "pending"
+  | "signed"
+  | "rejected"
+  | "canceled"
+  | "error";
 
 export interface CheckSignature {
-    state: SignedState;
-    storedObject: StoredObject;
+  state: SignedState;
+  storedObject: StoredObject;
 }
 
 export type CanvasEvent = "select" | "add";
 
 export interface ZoomLevel {
-    id: number;
-    zoom: number;
-    label: {
-        fr?: string;
-        nl?: string;
-    };
+  id: number;
+  zoom: number;
+  label: {
+    fr?: string;
+    nl?: string;
+  };
 }
 
 export interface GenericDoc {
-    type: "doc_store_generic_doc";
-    key: string;
-    context: "person" | "accompanying-period";
-    doc_date: DateTime;
+  type: "doc_store_generic_doc";
+  key: string;
+  context: "person" | "accompanying-period";
+  doc_date: DateTime;
 }
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue
index 85548f6d3..8fd348807 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue
@@ -1,67 +1,65 @@
 <template>
-    <div v-if="isButtonGroupDisplayable" class="btn-group">
-        <button
-            :class="
-                Object.assign({
-                    btn: true,
-                    'btn-outline-primary': true,
-                    'dropdown-toggle': true,
-                    'btn-sm': props.small,
-                })
-            "
-            type="button"
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
-        >
-            Actions
-        </button>
-        <ul class="dropdown-menu">
-            <li v-if="isEditableOnline">
-                <wopi-edit-button
-                    :stored-object="props.storedObject"
-                    :classes="{ 'dropdown-item': true }"
-                    :execute-before-leave="props.executeBeforeLeave"
-                ></wopi-edit-button>
-            </li>
-            <li v-if="isEditableOnDesktop">
-                <desktop-edit-button
-                    :classes="{ 'dropdown-item': true }"
-                    :edit-link="props.davLink"
-                    :expiration-link="props.davLinkExpiration"
-                ></desktop-edit-button>
-            </li>
-            <li v-if="isConvertibleToPdf">
-                <convert-button
-                    :stored-object="props.storedObject"
-                    :filename="filename"
-                    :classes="{ 'dropdown-item': true }"
-                ></convert-button>
-            </li>
-            <li v-if="isDownloadable">
-                <download-button
-                    :stored-object="props.storedObject"
-                    :at-version="props.storedObject.currentVersion"
-                    :filename="filename"
-                    :classes="{ 'dropdown-item': true }"
-                    :display-action-string-in-button="true"
-                ></download-button>
-            </li>
-            <li v-if="isHistoryViewable">
-                <history-button
-                    :stored-object="props.storedObject"
-                    :can-edit="
-                        canEdit && props.storedObject._permissions.canEdit
-                    "
-                ></history-button>
-            </li>
-        </ul>
-    </div>
-    <div v-else-if="'pending' === props.storedObject.status">
-        <div class="btn btn-outline-info">Génération en cours</div>
-    </div>
-    <div v-else-if="'failure' === props.storedObject.status">
-        <div class="btn btn-outline-danger">La génération a échoué</div>
-    </div>
+  <div v-if="isButtonGroupDisplayable" class="btn-group">
+    <button
+      :class="
+        Object.assign({
+          btn: true,
+          'btn-outline-primary': true,
+          'dropdown-toggle': true,
+          'btn-sm': props.small,
+        })
+      "
+      type="button"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+    >
+      Actions
+    </button>
+    <ul class="dropdown-menu">
+      <li v-if="isEditableOnline">
+        <wopi-edit-button
+          :stored-object="props.storedObject"
+          :classes="{ 'dropdown-item': true }"
+          :execute-before-leave="props.executeBeforeLeave"
+        ></wopi-edit-button>
+      </li>
+      <li v-if="isEditableOnDesktop">
+        <desktop-edit-button
+          :classes="{ 'dropdown-item': true }"
+          :edit-link="props.davLink"
+          :expiration-link="props.davLinkExpiration"
+        ></desktop-edit-button>
+      </li>
+      <li v-if="isConvertibleToPdf">
+        <convert-button
+          :stored-object="props.storedObject"
+          :filename="filename"
+          :classes="{ 'dropdown-item': true }"
+        ></convert-button>
+      </li>
+      <li v-if="isDownloadable">
+        <download-button
+          :stored-object="props.storedObject"
+          :at-version="props.storedObject.currentVersion"
+          :filename="filename"
+          :classes="{ 'dropdown-item': true }"
+          :display-action-string-in-button="true"
+        ></download-button>
+      </li>
+      <li v-if="isHistoryViewable">
+        <history-button
+          :stored-object="props.storedObject"
+          :can-edit="canEdit && props.storedObject._permissions.canEdit"
+        ></history-button>
+      </li>
+    </ul>
+  </div>
+  <div v-else-if="'pending' === props.storedObject.status">
+    <div class="btn btn-outline-info">Génération en cours</div>
+  </div>
+  <div v-else-if="'failure' === props.storedObject.status">
+    <div class="btn btn-outline-danger">La génération a échoué</div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -70,68 +68,66 @@ import ConvertButton from "./StoredObjectButton/ConvertButton.vue";
 import DownloadButton from "./StoredObjectButton/DownloadButton.vue";
 import WopiEditButton from "./StoredObjectButton/WopiEditButton.vue";
 import {
-    is_extension_editable,
-    is_extension_viewable,
-    is_object_ready,
+  is_extension_editable,
+  is_extension_viewable,
+  is_object_ready,
 } from "./StoredObjectButton/helpers";
 import {
-    StoredObject,
-    StoredObjectStatusChange,
-    StoredObjectVersion,
-    WopiEditButtonExecutableBeforeLeaveFunction,
+  StoredObject,
+  StoredObjectStatusChange,
+  StoredObjectVersion,
+  WopiEditButtonExecutableBeforeLeaveFunction,
 } from "../types";
 import DesktopEditButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/DesktopEditButton.vue";
 import HistoryButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton.vue";
 
 interface DocumentActionButtonsGroupConfig {
-    storedObject: StoredObject;
-    small?: boolean;
-    canEdit?: boolean;
-    canDownload?: boolean;
-    canConvertPdf?: boolean;
-    returnPath?: string;
+  storedObject: StoredObject;
+  small?: boolean;
+  canEdit?: boolean;
+  canDownload?: boolean;
+  canConvertPdf?: boolean;
+  returnPath?: string;
 
-    /**
-     * Will be the filename displayed to the user when he·she download the document
-     * (the document will be saved on his disk with this name)
-     *
-     * If not set, 'document' will be used.
-     */
-    filename?: string;
+  /**
+   * Will be the filename displayed to the user when he·she download the document
+   * (the document will be saved on his disk with this name)
+   *
+   * If not set, 'document' will be used.
+   */
+  filename?: string;
 
-    /**
-     * If set, will execute this function before leaving to the editor
-     */
-    executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;
+  /**
+   * If set, will execute this function before leaving to the editor
+   */
+  executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;
 
-    /**
-     * a link to download and edit file using webdav
-     */
-    davLink?: string;
+  /**
+   * a link to download and edit file using webdav
+   */
+  davLink?: string;
 
-    /**
-     * the expiration date of the download, as a unix timestamp
-     */
-    davLinkExpiration?: number;
+  /**
+   * the expiration date of the download, as a unix timestamp
+   */
+  davLinkExpiration?: number;
 }
 
 const emit =
-    defineEmits<
-        (
-            e: "onStoredObjectStatusChange",
-            newStatus: StoredObjectStatusChange,
-        ) => void
-    >();
+  defineEmits<
+    (
+      e: "onStoredObjectStatusChange",
+      newStatus: StoredObjectStatusChange,
+    ) => void
+  >();
 
 const props = withDefaults(defineProps<DocumentActionButtonsGroupConfig>(), {
-    small: false,
-    canEdit: true,
-    canDownload: true,
-    canConvertPdf: true,
-    returnPath:
-        window.location.pathname +
-        window.location.search +
-        window.location.hash,
+  small: false,
+  canEdit: true,
+  canDownload: true,
+  canConvertPdf: true,
+  returnPath:
+    window.location.pathname + window.location.search + window.location.hash,
 });
 
 /**
@@ -145,93 +141,93 @@ let tryiesForReady = 0;
 const maxTryiesForReady = 120;
 
 const isButtonGroupDisplayable = computed<boolean>(() => {
-    return (
-        isDownloadable.value ||
-        isEditableOnline.value ||
-        isEditableOnDesktop.value ||
-        isConvertibleToPdf.value
-    );
+  return (
+    isDownloadable.value ||
+    isEditableOnline.value ||
+    isEditableOnDesktop.value ||
+    isConvertibleToPdf.value
+  );
 });
 
 const isDownloadable = computed<boolean>(() => {
-    return (
-        props.storedObject.status === "ready" ||
-        // happens when the stored object version is just added, but not persisted
-        (props.storedObject.currentVersion !== null &&
-            props.storedObject.status === "empty")
-    );
+  return (
+    props.storedObject.status === "ready" ||
+    // happens when the stored object version is just added, but not persisted
+    (props.storedObject.currentVersion !== null &&
+      props.storedObject.status === "empty")
+  );
 });
 
 const isEditableOnline = computed<boolean>(() => {
-    return (
-        props.storedObject.status === "ready" &&
-        props.storedObject._permissions.canEdit &&
-        props.canEdit &&
-        props.storedObject.currentVersion !== null &&
-        is_extension_editable(props.storedObject.currentVersion.type) &&
-        props.storedObject.currentVersion.persisted !== false
-    );
+  return (
+    props.storedObject.status === "ready" &&
+    props.storedObject._permissions.canEdit &&
+    props.canEdit &&
+    props.storedObject.currentVersion !== null &&
+    is_extension_editable(props.storedObject.currentVersion.type) &&
+    props.storedObject.currentVersion.persisted !== false
+  );
 });
 
 const isEditableOnDesktop = computed<boolean>(() => {
-    return isEditableOnline.value;
+  return isEditableOnline.value;
 });
 
 const isConvertibleToPdf = computed<boolean>(() => {
-    return (
-        props.storedObject.status === "ready" &&
-        props.storedObject._permissions.canSee &&
-        props.canConvertPdf &&
-        props.storedObject.currentVersion !== null &&
-        is_extension_viewable(props.storedObject.currentVersion.type) &&
-        props.storedObject.currentVersion.type !== "application/pdf" &&
-        props.storedObject.currentVersion.persisted !== false
-    );
+  return (
+    props.storedObject.status === "ready" &&
+    props.storedObject._permissions.canSee &&
+    props.canConvertPdf &&
+    props.storedObject.currentVersion !== null &&
+    is_extension_viewable(props.storedObject.currentVersion.type) &&
+    props.storedObject.currentVersion.type !== "application/pdf" &&
+    props.storedObject.currentVersion.persisted !== false
+  );
 });
 
 const isHistoryViewable = computed<boolean>(() => {
-    return props.storedObject.status === "ready";
+  return props.storedObject.status === "ready";
 });
 
 const checkForReady = function (): void {
-    if (
-        "ready" === props.storedObject.status ||
-        "empty" === props.storedObject.status ||
-        "failure" === props.storedObject.status ||
-        // stop reloading if the page stays opened for a long time
-        tryiesForReady > maxTryiesForReady
-    ) {
-        return;
-    }
+  if (
+    "ready" === props.storedObject.status ||
+    "empty" === props.storedObject.status ||
+    "failure" === props.storedObject.status ||
+    // stop reloading if the page stays opened for a long time
+    tryiesForReady > maxTryiesForReady
+  ) {
+    return;
+  }
 
-    tryiesForReady = tryiesForReady + 1;
+  tryiesForReady = tryiesForReady + 1;
 
-    setTimeout(onObjectNewStatusCallback, 5000);
+  setTimeout(onObjectNewStatusCallback, 5000);
 };
 
 const onObjectNewStatusCallback = async function (): Promise<void> {
-    if (props.storedObject.status === "stored_object_created") {
-        return Promise.resolve();
-    }
-
-    const new_status = await is_object_ready(props.storedObject);
-    if (props.storedObject.status !== new_status.status) {
-        emit("onStoredObjectStatusChange", new_status);
-        return Promise.resolve();
-    } else if ("failure" === new_status.status) {
-        return Promise.resolve();
-    }
-
-    if ("ready" !== new_status.status) {
-        // we check for new status, unless it is ready
-        checkForReady();
-    }
-
+  if (props.storedObject.status === "stored_object_created") {
     return Promise.resolve();
+  }
+
+  const new_status = await is_object_ready(props.storedObject);
+  if (props.storedObject.status !== new_status.status) {
+    emit("onStoredObjectStatusChange", new_status);
+    return Promise.resolve();
+  } else if ("failure" === new_status.status) {
+    return Promise.resolve();
+  }
+
+  if ("ready" !== new_status.status) {
+    // we check for new status, unless it is ready
+    checkForReady();
+  }
+
+  return Promise.resolve();
 };
 
 onMounted(() => {
-    checkForReady();
+  checkForReady();
 });
 </script>
 
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index ea195da4b..3021de36e 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -1,355 +1,338 @@
 <template>
-    <teleport to="body">
-        <modal v-if="modalOpen" @close="modalOpen = false">
-            <template v-slot:header>
-                <h2>{{ trans(SIGNATURES_SIGNATURE_CONFIRMATION) }}</h2>
-            </template>
-            <template v-slot:body>
-                <div class="signature-modal-body text-center" v-if="loading">
-                    <p>
-                        {{ trans(SIGNATURES_ELECTRONIC_SIGNATURE_IN_PROGRESS) }}
-                    </p>
-                    <div class="loading">
-                        <i
-                            class="fa fa-circle-o-notch fa-spin fa-3x"
-                            :title="trans(SIGNATURES_LOADING)"
-                        ></i>
-                    </div>
-                </div>
-                <div class="signature-modal-body text-center" v-else>
-                    <p>{{ trans(SIGNATURES_YOU_ARE_GOING_TO_SIGN) }}</p>
-                    <p>{{ trans(SIGNATURES_ARE_YOU_SURE) }}</p>
-                </div>
-            </template>
-            <template v-slot:footer>
-                <button class="btn btn-action" @click.prevent="confirmSign">
-                    {{ trans(SIGNATURES_YES) }}
-                </button>
-            </template>
-        </modal>
-    </teleport>
-    <div class="col-12 m-auto sticky-top">
-        <div
-            class="row justify-content-center border-bottom pdf-tools d-md-none"
-        >
-            <div class="col-5 text-center turn-page">
-                <select
-                    class="form-select form-select-sm"
-                    id="zoomSelect"
-                    v-model="zoomLevel"
-                    @change="setZoomLevel(zoomLevel)"
-                >
-                    <option value="" selected disabled>Zoom</option>
-                    <option v-for="z in zoomLevels" :value="z.zoom" :key="z.id">
-                        {{ localizeString(z.label) }}
-                    </option>
-                </select>
-                <template v-if="pageCount > 1">
-                    <button
-                        class="btn btn-light btn-xs p-1"
-                        :disabled="page <= 1"
-                        @click="turnPage(-1)"
-                    >
-                        ❮
-                    </button>
-                    <span>{{ page }}/{{ pageCount }}</span>
-                    <button
-                        class="btn btn-light btn-xs p-1"
-                        :disabled="page >= pageCount"
-                        @click="turnPage(1)"
-                    >
-                        ❯
-                    </button>
-                </template>
-                <template v-if="pageCount > 1">
-                    <button
-                        class="btn btn-light btn-xs p-1"
-                        :disabled="page <= 1"
-                        @click="turnPage(-1)"
-                    >
-                        ❮
-                    </button>
-                    <span>{{ page }}/{{ pageCount }}</span>
-                    <button
-                        class="btn btn-light btn-xs p-1"
-                        :disabled="page >= pageCount"
-                        @click="turnPage(1)"
-                    >
-                        ❯
-                    </button>
-                    <input
-                        type="checkbox"
-                        id="checkboxMulti"
-                        v-model="multiPage"
-                        @change="toggleMultiPage"
-                    />
-                    <label class="form-check-label" for="checkboxMulti">
-                        {{ trans(SIGNATURES_ALL_PAGES) }}
-                    </label>
-                </template>
-            </div>
-            <div
-                v-if="signature.zones.length === 1 && signedState !== 'signed'"
-                class="col-5 p-0 text-center turnSignature"
-            >
-                <button
-                    class="btn btn-light btn-sm"
-                    @click="goToSignatureZoneUnique"
-                >
-                    {{ trans(SIGNATURES_GO_TO_SIGNATURE_UNIQUE) }}
-                </button>
-            </div>
-            <div
-                v-if="signature.zones.length > 1"
-                class="col-5 p-0 text-center turnSignature"
-            >
-                <button
-                    :disabled="isFirstSignatureZone()"
-                    class="btn btn-light btn-sm"
-                    @click="turnSignature(-1)"
-                >
-                    {{ trans(SIGNATURES_LAST_ZONE) }}
-                </button>
-                <span>|</span>
-                <button
-                    :disabled="isLastSignatureZone()"
-                    class="btn btn-light btn-sm"
-                    @click="turnSignature(1)"
-                >
-                    {{ trans(SIGNATURES_NEXT_ZONE) }}
-                </button>
-            </div>
-            <div class="col text-end" v-if="signedState !== 'signed'">
-                <button
-                    class="btn btn-misc btn-sm"
-                    :hidden="!userSignatureZone"
-                    @click="undoSign"
-                    v-if="signature.zones.length > 1"
-                    :title="trans(SIGNATURES_CHOOSE_ANOTHER_SIGNATURE)"
-                >
-                    {{ trans(SIGNATURES_ANOTHER_ZONE) }}
-                </button>
-                <button
-                    class="btn btn-misc btn-sm"
-                    :hidden="!userSignatureZone"
-                    @click="undoSign"
-                    v-else
-                >
-                    {{ trans(SIGNATURES_CANCEL) }}
-                </button>
-                <button
-                    v-if="userSignatureZone === null"
-                    :class="{
-                        btn: true,
-                        'btn-sm': true,
-                        'btn-create': canvasEvent !== 'add',
-                        'btn-chill-green': canvasEvent === 'add',
-                        active: canvasEvent === 'add',
-                    }"
-                    @click="toggleAddZone()"
-                    :title="trans(SIGNATURES_ADD_SIGN_ZONE)"
-                >
-                    <template v-if="canvasEvent === 'add'">
-                        <div
-                            class="spinner-border spinner-border-sm"
-                            role="status"
-                        >
-                            <span class="visually-hidden">Loading...</span>
-                        </div>
-                    </template>
-                </button>
-            </div>
+  <teleport to="body">
+    <modal v-if="modalOpen" @close="modalOpen = false">
+      <template v-slot:header>
+        <h2>{{ trans(SIGNATURES_SIGNATURE_CONFIRMATION) }}</h2>
+      </template>
+      <template v-slot:body>
+        <div class="signature-modal-body text-center" v-if="loading">
+          <p>
+            {{ trans(SIGNATURES_ELECTRONIC_SIGNATURE_IN_PROGRESS) }}
+          </p>
+          <div class="loading">
+            <i
+              class="fa fa-circle-o-notch fa-spin fa-3x"
+              :title="trans(SIGNATURES_LOADING)"
+            ></i>
+          </div>
         </div>
+        <div class="signature-modal-body text-center" v-else>
+          <p>{{ trans(SIGNATURES_YOU_ARE_GOING_TO_SIGN) }}</p>
+          <p>{{ trans(SIGNATURES_ARE_YOU_SURE) }}</p>
+        </div>
+      </template>
+      <template v-slot:footer>
+        <button class="btn btn-action" @click.prevent="confirmSign">
+          {{ trans(SIGNATURES_YES) }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
+  <div class="col-12 m-auto sticky-top">
+    <div class="row justify-content-center border-bottom pdf-tools d-md-none">
+      <div class="col-5 text-center turn-page">
+        <select
+          class="form-select form-select-sm"
+          id="zoomSelect"
+          v-model="zoomLevel"
+          @change="setZoomLevel(zoomLevel)"
+        >
+          <option value="" selected disabled>Zoom</option>
+          <option v-for="z in zoomLevels" :value="z.zoom" :key="z.id">
+            {{ localizeString(z.label) }}
+          </option>
+        </select>
+        <template v-if="pageCount > 1">
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page <= 1"
+            @click="turnPage(-1)"
+          >
+            ❮
+          </button>
+          <span>{{ page }}/{{ pageCount }}</span>
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page >= pageCount"
+            @click="turnPage(1)"
+          >
+            ❯
+          </button>
+        </template>
+        <template v-if="pageCount > 1">
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page <= 1"
+            @click="turnPage(-1)"
+          >
+            ❮
+          </button>
+          <span>{{ page }}/{{ pageCount }}</span>
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page >= pageCount"
+            @click="turnPage(1)"
+          >
+            ❯
+          </button>
+          <input
+            type="checkbox"
+            id="checkboxMulti"
+            v-model="multiPage"
+            @change="toggleMultiPage"
+          />
+          <label class="form-check-label" for="checkboxMulti">
+            {{ trans(SIGNATURES_ALL_PAGES) }}
+          </label>
+        </template>
+      </div>
+      <div
+        v-if="signature.zones.length === 1 && signedState !== 'signed'"
+        class="col-5 p-0 text-center turnSignature"
+      >
+        <button class="btn btn-light btn-sm" @click="goToSignatureZoneUnique">
+          {{ trans(SIGNATURES_GO_TO_SIGNATURE_UNIQUE) }}
+        </button>
+      </div>
+      <div
+        v-if="signature.zones.length > 1"
+        class="col-5 p-0 text-center turnSignature"
+      >
+        <button
+          :disabled="isFirstSignatureZone()"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(-1)"
+        >
+          {{ trans(SIGNATURES_LAST_ZONE) }}
+        </button>
+        <span>|</span>
+        <button
+          :disabled="isLastSignatureZone()"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(1)"
+        >
+          {{ trans(SIGNATURES_NEXT_ZONE) }}
+        </button>
+      </div>
+      <div class="col text-end" v-if="signedState !== 'signed'">
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-if="signature.zones.length > 1"
+          :title="trans(SIGNATURES_CHOOSE_ANOTHER_SIGNATURE)"
+        >
+          {{ trans(SIGNATURES_ANOTHER_ZONE) }}
+        </button>
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-else
+        >
+          {{ trans(SIGNATURES_CANCEL) }}
+        </button>
+        <button
+          v-if="userSignatureZone === null"
+          :class="{
+            btn: true,
+            'btn-sm': true,
+            'btn-create': canvasEvent !== 'add',
+            'btn-chill-green': canvasEvent === 'add',
+            active: canvasEvent === 'add',
+          }"
+          @click="toggleAddZone()"
+          :title="trans(SIGNATURES_ADD_SIGN_ZONE)"
+        >
+          <template v-if="canvasEvent === 'add'">
+            <div class="spinner-border spinner-border-sm" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </template>
+        </button>
+      </div>
+    </div>
 
-        <div
-            class="row justify-content-center border-bottom pdf-tools d-none d-md-flex"
+    <div
+      class="row justify-content-center border-bottom pdf-tools d-none d-md-flex"
+    >
+      <div class="col-5 text-center turn-page ps-3">
+        <select
+          class="form-select form-select-sm"
+          id="zoomSelect"
+          v-model="zoomLevel"
+          @change="setZoomLevel(zoomLevel)"
         >
-            <div class="col-5 text-center turn-page ps-3">
-                <select
-                    class="form-select form-select-sm"
-                    id="zoomSelect"
-                    v-model="zoomLevel"
-                    @change="setZoomLevel(zoomLevel)"
-                >
-                    <option value="" selected disabled>Zoom</option>
-                    <option v-for="z in zoomLevels" :value="z.zoom" :key="z.id">
-                        {{ localizeString(z.label) }}
-                    </option>
-                </select>
-                <template v-if="pageCount > 1">
-                    <button
-                        class="btn btn-light btn-xs p-1"
-                        :disabled="page <= 1"
-                        @click="turnPage(-1)"
-                    >
-                        ❮
-                    </button>
-                    <span>{{ page }} / {{ pageCount }}</span>
-                    <button
-                        class="btn btn-light btn-xs p-1"
-                        :disabled="page >= pageCount"
-                        @click="turnPage(1)"
-                    >
-                        ❯
-                    </button>
-                    <input
-                        type="checkbox"
-                        id="checkboxMulti"
-                        v-model="multiPage"
-                        @change="toggleMultiPage"
-                    />
-                    <label class="form-check-label" for="checkboxMulti">
-                        {{ trans(SIGNATURES_SEE_ALL_PAGES) }}
-                    </label>
-                </template>
+          <option value="" selected disabled>Zoom</option>
+          <option v-for="z in zoomLevels" :value="z.zoom" :key="z.id">
+            {{ localizeString(z.label) }}
+          </option>
+        </select>
+        <template v-if="pageCount > 1">
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page <= 1"
+            @click="turnPage(-1)"
+          >
+            ❮
+          </button>
+          <span>{{ page }} / {{ pageCount }}</span>
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page >= pageCount"
+            @click="turnPage(1)"
+          >
+            ❯
+          </button>
+          <input
+            type="checkbox"
+            id="checkboxMulti"
+            v-model="multiPage"
+            @change="toggleMultiPage"
+          />
+          <label class="form-check-label" for="checkboxMulti">
+            {{ trans(SIGNATURES_SEE_ALL_PAGES) }}
+          </label>
+        </template>
+      </div>
+      <div
+        v-if="signature.zones.length === 1 && signedState !== 'signed'"
+        class="col-4 d-xl-none text-center turnSignature p-0"
+      >
+        <button class="btn btn-light btn-sm" @click="goToSignatureZoneUnique">
+          {{ trans(SIGNATURES_GO_TO_SIGNATURE_UNIQUE) }}
+        </button>
+      </div>
+      <div
+        v-if="signature.zones.length > 1 && signedState !== 'signed'"
+        class="col-4 d-xl-none text-center turnSignature p-0"
+      >
+        <button
+          :disabled="isFirstSignatureZone()"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(-1)"
+        >
+          {{ trans(SIGNATURES_LAST_ZONE) }}
+        </button>
+        <span>|</span>
+        <button
+          :disabled="isLastSignatureZone()"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(1)"
+        >
+          {{ trans(SIGNATURES_NEXT_ZONE) }}
+        </button>
+      </div>
+      <div
+        v-if="signature.zones.length === 1 && signedState !== 'signed'"
+        class="col-4 d-none d-xl-flex p-0 text-center turnSignature"
+      >
+        <button class="btn btn-light btn-sm" @click="goToSignatureZoneUnique">
+          {{ trans(SIGNATURES_GO_TO_SIGNATURE_UNIQUE) }}
+        </button>
+      </div>
+      <div
+        v-if="signature.zones.length > 1 && signedState !== 'signed'"
+        class="col-4 d-none d-xl-flex p-0 text-center turnSignature"
+      >
+        <button
+          :disabled="isFirstSignatureZone()"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(-1)"
+        >
+          {{ trans(SIGNATURES_LAST_SIGN_ZONE) }}
+        </button>
+        <span>|</span>
+        <button
+          :disabled="isLastSignatureZone()"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(1)"
+        >
+          {{ trans(SIGNATURES_NEXT_SIGN_ZONE) }}
+        </button>
+      </div>
+      <div class="col text-end" v-if="signedState !== 'signed'">
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-if="signature.zones.length > 1"
+        >
+          {{ trans(SIGNATURES_CHOOSE_ANOTHER_SIGNATURE) }}
+        </button>
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-else
+        >
+          {{ trans(SIGNATURES_CANCEL) }}
+        </button>
+        <button
+          v-if="userSignatureZone === null"
+          :class="{
+            btn: true,
+            'btn-sm': true,
+            'btn-create': canvasEvent !== 'add',
+            'btn-chill-green': canvasEvent === 'add',
+            active: canvasEvent === 'add',
+          }"
+          @click="toggleAddZone()"
+          :title="trans(SIGNATURES_ADD_SIGN_ZONE)"
+        >
+          <template v-if="canvasEvent !== 'add'">
+            {{ trans(SIGNATURES_ADD_ZONE) }}
+          </template>
+          <template v-else>
+            {{ trans(SIGNATURES_CLICK_ON_DOCUMENT) }}
+            <div class="spinner-border spinner-border-sm" role="status">
+              <span class="visually-hidden">Loading...</span>
             </div>
-            <div
-                v-if="signature.zones.length === 1 && signedState !== 'signed'"
-                class="col-4 d-xl-none text-center turnSignature p-0"
-            >
-                <button
-                    class="btn btn-light btn-sm"
-                    @click="goToSignatureZoneUnique"
-                >
-                    {{ trans(SIGNATURES_GO_TO_SIGNATURE_UNIQUE) }}
-                </button>
-            </div>
-            <div
-                v-if="signature.zones.length > 1 && signedState !== 'signed'"
-                class="col-4 d-xl-none text-center turnSignature p-0"
-            >
-                <button
-                    :disabled="isFirstSignatureZone()"
-                    class="btn btn-light btn-sm"
-                    @click="turnSignature(-1)"
-                >
-                    {{ trans(SIGNATURES_LAST_ZONE) }}
-                </button>
-                <span>|</span>
-                <button
-                    :disabled="isLastSignatureZone()"
-                    class="btn btn-light btn-sm"
-                    @click="turnSignature(1)"
-                >
-                    {{ trans(SIGNATURES_NEXT_ZONE) }}
-                </button>
-            </div>
-            <div
-                v-if="signature.zones.length === 1 && signedState !== 'signed'"
-                class="col-4 d-none d-xl-flex p-0 text-center turnSignature"
-            >
-                <button
-                    class="btn btn-light btn-sm"
-                    @click="goToSignatureZoneUnique"
-                >
-                    {{ trans(SIGNATURES_GO_TO_SIGNATURE_UNIQUE) }}
-                </button>
-            </div>
-            <div
-                v-if="signature.zones.length > 1 && signedState !== 'signed'"
-                class="col-4 d-none d-xl-flex p-0 text-center turnSignature"
-            >
-                <button
-                    :disabled="isFirstSignatureZone()"
-                    class="btn btn-light btn-sm"
-                    @click="turnSignature(-1)"
-                >
-                    {{ trans(SIGNATURES_LAST_SIGN_ZONE) }}
-                </button>
-                <span>|</span>
-                <button
-                    :disabled="isLastSignatureZone()"
-                    class="btn btn-light btn-sm"
-                    @click="turnSignature(1)"
-                >
-                    {{ trans(SIGNATURES_NEXT_SIGN_ZONE) }}
-                </button>
-            </div>
-            <div class="col text-end" v-if="signedState !== 'signed'">
-                <button
-                    class="btn btn-misc btn-sm"
-                    :hidden="!userSignatureZone"
-                    @click="undoSign"
-                    v-if="signature.zones.length > 1"
-                >
-                    {{ trans(SIGNATURES_CHOOSE_ANOTHER_SIGNATURE) }}
-                </button>
-                <button
-                    class="btn btn-misc btn-sm"
-                    :hidden="!userSignatureZone"
-                    @click="undoSign"
-                    v-else
-                >
-                    {{ trans(SIGNATURES_CANCEL) }}
-                </button>
-                <button
-                    v-if="userSignatureZone === null"
-                    :class="{
-                        btn: true,
-                        'btn-sm': true,
-                        'btn-create': canvasEvent !== 'add',
-                        'btn-chill-green': canvasEvent === 'add',
-                        active: canvasEvent === 'add',
-                    }"
-                    @click="toggleAddZone()"
-                    :title="trans(SIGNATURES_ADD_SIGN_ZONE)"
-                >
-                    <template v-if="canvasEvent !== 'add'">
-                        {{ trans(SIGNATURES_ADD_ZONE) }}
-                    </template>
-                    <template v-else>
-                        {{ trans(SIGNATURES_CLICK_ON_DOCUMENT) }}
-                        <div
-                            class="spinner-border spinner-border-sm"
-                            role="status"
-                        >
-                            <span class="visually-hidden">Loading...</span>
-                        </div>
-                    </template>
-                </button>
-            </div>
-        </div>
+          </template>
+        </button>
+      </div>
     </div>
-    <div
-        v-if="multiPage"
-        class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center d-flex flex-column"
-        :class="{ onAddZone: canvasEvent === 'add' }"
-    >
-        <canvas v-for="p in pageCount" :key="p" :id="`canvas-${p}`"></canvas>
-    </div>
-    <div
-        v-else
-        class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center"
-        :class="{ onAddZone: canvasEvent === 'add' }"
-    >
-        <canvas class="m-auto" id="canvas"></canvas>
-    </div>
-    <div class="col-xs-12 col-md-12 col-lg-9 m-auto p-4" id="action-buttons">
-        <div class="row">
-            <div class="col d-flex">
-                <a
-                    class="btn btn-cancel"
-                    v-if="signedState !== 'signed'"
-                    :href="getReturnPath()"
-                >
-                    {{ trans(SIGNATURES_CANCEL) }}
-                </a>
-                <a class="btn btn-misc" v-else :href="getReturnPath()">
-                    {{ trans(SIGNATURES_RETURN) }}
-                </a>
-            </div>
-            <div class="col text-end" v-if="signedState !== 'signed'">
-                <button
-                    class="btn btn-action me-2"
-                    :disabled="!userSignatureZone"
-                    @click="sign"
-                >
-                    {{ trans(SIGNATURES_SIGN) }}
-                </button>
-            </div>
-            <div class="col-4" v-else></div>
-        </div>
+  </div>
+  <div
+    v-if="multiPage"
+    class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center d-flex flex-column"
+    :class="{ onAddZone: canvasEvent === 'add' }"
+  >
+    <canvas v-for="p in pageCount" :key="p" :id="`canvas-${p}`"></canvas>
+  </div>
+  <div
+    v-else
+    class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center"
+    :class="{ onAddZone: canvasEvent === 'add' }"
+  >
+    <canvas class="m-auto" id="canvas"></canvas>
+  </div>
+  <div class="col-xs-12 col-md-12 col-lg-9 m-auto p-4" id="action-buttons">
+    <div class="row">
+      <div class="col d-flex">
+        <a
+          class="btn btn-cancel"
+          v-if="signedState !== 'signed'"
+          :href="getReturnPath()"
+        >
+          {{ trans(SIGNATURES_CANCEL) }}
+        </a>
+        <a class="btn btn-misc" v-else :href="getReturnPath()">
+          {{ trans(SIGNATURES_RETURN) }}
+        </a>
+      </div>
+      <div class="col text-end" v-if="signedState !== 'signed'">
+        <button
+          class="btn btn-action me-2"
+          :disabled="!userSignatureZone"
+          @click="sign"
+        >
+          {{ trans(SIGNATURES_SIGN) }}
+        </button>
+      </div>
+      <div class="col-4" v-else></div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -357,43 +340,43 @@ import { ref, Ref } from "vue";
 import { useToast } from "vue-toast-notification";
 import "vue-toast-notification/dist/theme-sugar.css";
 import {
-    CanvasEvent,
-    CheckSignature,
-    Signature,
-    SignatureZone,
-    SignedState,
-    ZoomLevel,
+  CanvasEvent,
+  CheckSignature,
+  Signature,
+  SignatureZone,
+  SignedState,
+  ZoomLevel,
 } from "../../types";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import * as pdfjsLib from "pdfjs-dist";
 import {
-    PDFDocumentProxy,
-    PDFPageProxy,
+  PDFDocumentProxy,
+  PDFPageProxy,
 } from "pdfjs-dist/types/src/display/api";
 
 import {
-    SIGNATURES_YES,
-    SIGNATURES_ARE_YOU_SURE,
-    SIGNATURES_YOU_ARE_GOING_TO_SIGN,
-    SIGNATURES_SIGNATURE_CONFIRMATION,
-    SIGNATURES_SIGN,
-    SIGNATURES_CHOOSE_ANOTHER_SIGNATURE,
-    SIGNATURES_CANCEL,
-    SIGNATURES_LAST_SIGN_ZONE,
-    SIGNATURES_NEXT_SIGN_ZONE,
-    SIGNATURES_ADD_SIGN_ZONE,
-    SIGNATURES_CLICK_ON_DOCUMENT,
-    SIGNATURES_LAST_ZONE,
-    SIGNATURES_NEXT_ZONE,
-    SIGNATURES_ADD_ZONE,
-    SIGNATURES_ANOTHER_ZONE,
-    SIGNATURES_ELECTRONIC_SIGNATURE_IN_PROGRESS,
-    SIGNATURES_LOADING,
-    SIGNATURES_RETURN,
-    SIGNATURES_SEE_ALL_PAGES,
-    SIGNATURES_ALL_PAGES,
-    SIGNATURES_GO_TO_SIGNATURE_UNIQUE,
-    trans,
+  SIGNATURES_YES,
+  SIGNATURES_ARE_YOU_SURE,
+  SIGNATURES_YOU_ARE_GOING_TO_SIGN,
+  SIGNATURES_SIGNATURE_CONFIRMATION,
+  SIGNATURES_SIGN,
+  SIGNATURES_CHOOSE_ANOTHER_SIGNATURE,
+  SIGNATURES_CANCEL,
+  SIGNATURES_LAST_SIGN_ZONE,
+  SIGNATURES_NEXT_SIGN_ZONE,
+  SIGNATURES_ADD_SIGN_ZONE,
+  SIGNATURES_CLICK_ON_DOCUMENT,
+  SIGNATURES_LAST_ZONE,
+  SIGNATURES_NEXT_ZONE,
+  SIGNATURES_ADD_ZONE,
+  SIGNATURES_ANOTHER_ZONE,
+  SIGNATURES_ELECTRONIC_SIGNATURE_IN_PROGRESS,
+  SIGNATURES_LOADING,
+  SIGNATURES_RETURN,
+  SIGNATURES_SEE_ALL_PAGES,
+  SIGNATURES_ALL_PAGES,
+  SIGNATURES_GO_TO_SIGNATURE_UNIQUE,
+  trans,
 } from "translator";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
@@ -420,56 +403,56 @@ const pageCount: Ref<number> = ref(0);
 const zoom: Ref<number> = ref(1);
 let zoomLevel = "";
 const zoomLevels: Ref<ZoomLevel[]> = ref([
-    {
-        id: 0,
-        zoom: 0.75,
-        label: {
-            fr: "75%",
-        },
+  {
+    id: 0,
+    zoom: 0.75,
+    label: {
+      fr: "75%",
     },
-    {
-        id: 1,
-        zoom: zoom.value,
-        label: {
-            fr: "100%",
-        },
+  },
+  {
+    id: 1,
+    zoom: zoom.value,
+    label: {
+      fr: "100%",
     },
-    {
-        id: 2,
-        zoom: 1.25,
-        label: {
-            fr: "125%",
-        },
+  },
+  {
+    id: 2,
+    zoom: 1.25,
+    label: {
+      fr: "125%",
     },
-    {
-        id: 3,
-        zoom: 1.5,
-        label: {
-            fr: "150%",
-        },
+  },
+  {
+    id: 3,
+    zoom: 1.5,
+    label: {
+      fr: "150%",
     },
-    {
-        id: 4,
-        zoom: 2,
-        label: {
-            fr: "200%",
-        },
+  },
+  {
+    id: 4,
+    zoom: 2,
+    label: {
+      fr: "200%",
     },
-    {
-        id: 5,
-        zoom: 3,
-        label: {
-            fr: "300%",
-        },
+  },
+  {
+    id: 5,
+    zoom: 3,
+    label: {
+      fr: "300%",
     },
+  },
 ]);
 let userSignatureZone: Ref<null | SignatureZone> = ref(null);
 let pdf = {} as PDFDocumentProxy;
 
 declare global {
-    interface Window {
-        signature: Signature;
-    }
+  interface Window {
+    signature: Signature;
+  }
 }
 
 const $toast = useToast();
@@ -477,462 +460,451 @@ const $toast = useToast();
 const signature = window.signature;
 
 const isFirstSignatureZone = () =>
-    userSignatureZone.value?.index != null
-        ? userSignatureZone.value.index < 1
-        : false;
+  userSignatureZone.value?.index != null
+    ? userSignatureZone.value.index < 1
+    : false;
 
 const isLastSignatureZone = () =>
-    userSignatureZone.value?.index
-        ? userSignatureZone.value.index >= signature.zones.length - 1
-        : false;
+  userSignatureZone.value?.index
+    ? userSignatureZone.value.index >= signature.zones.length - 1
+    : false;
 
 const setZoomLevel = async (zoomLevel: string) => {
-    zoom.value = Number.parseFloat(zoomLevel);
-    await resetPages();
-    setTimeout(drawAllZones, 200);
+  zoom.value = Number.parseFloat(zoomLevel);
+  await resetPages();
+  setTimeout(drawAllZones, 200);
 };
 
 const mountPdf = async (doc: ArrayBuffer) => {
-    const loadingTask = pdfjsLib.getDocument(doc);
-    pdf = await loadingTask.promise;
-    pageCount.value = pdf.numPages;
-    if (multiPage.value) {
-        await setAllPages();
-    } else {
-        await setPage(1);
-    }
+  const loadingTask = pdfjsLib.getDocument(doc);
+  pdf = await loadingTask.promise;
+  pageCount.value = pdf.numPages;
+  if (multiPage.value) {
+    await setAllPages();
+  } else {
+    await setPage(1);
+  }
 };
 
 const getCanvas = (page: number) =>
-    multiPage.value
-        ? (document.getElementById(`canvas-${page}`) as HTMLCanvasElement)
-        : (document.querySelectorAll("canvas")[0] as HTMLCanvasElement);
+  multiPage.value
+    ? (document.getElementById(`canvas-${page}`) as HTMLCanvasElement)
+    : (document.querySelectorAll("canvas")[0] as HTMLCanvasElement);
 
 const getCanvasId = (canvas: HTMLCanvasElement) => {
-    const number = canvas.id.split("-").pop();
-    return number ? parseInt(number) : 0;
+  const number = canvas.id.split("-").pop();
+  return number ? parseInt(number) : 0;
 };
 
 const getRenderContext = (pdfPage: PDFPageProxy) => {
-    const scale = 1 * zoom.value;
-    const viewport = pdfPage.getViewport({ scale });
-    const canvas = getCanvas(pdfPage.pageNumber);
-    const context = canvas.getContext("2d") as CanvasRenderingContext2D;
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
+  const scale = 1 * zoom.value;
+  const viewport = pdfPage.getViewport({ scale });
+  const canvas = getCanvas(pdfPage.pageNumber);
+  const context = canvas.getContext("2d") as CanvasRenderingContext2D;
+  canvas.height = viewport.height;
+  canvas.width = viewport.width;
 
-    return {
-        canvasContext: context,
-        viewport: viewport,
-    };
+  return {
+    canvasContext: context,
+    viewport: viewport,
+  };
 };
 
 const setAllPages = async () =>
-    Array.from(Array(pageCount.value).keys()).map((p) => setPage(p + 1));
+  Array.from(Array(pageCount.value).keys()).map((p) => setPage(p + 1));
 
 const setPage = async (page: number) => {
-    const pdfPage = await pdf.getPage(page);
-    const renderContext = getRenderContext(pdfPage);
-    await pdfPage.render(renderContext);
+  const pdfPage = await pdf.getPage(page);
+  const renderContext = getRenderContext(pdfPage);
+  await pdfPage.render(renderContext);
 };
 
 const init = () => downloadAndOpen().then(initPdf);
 
 async function downloadAndOpen(): Promise<Blob> {
-    let raw;
-    try {
-        raw = await download_doc_as_pdf(signature.storedObject);
-    } catch (e) {
-        console.error("error while downloading and decrypting document", e);
-        throw e;
-    }
-    const doc = await raw.arrayBuffer();
-    await mountPdf(doc);
-    return raw;
+  let raw;
+  try {
+    raw = await download_doc_as_pdf(signature.storedObject);
+  } catch (e) {
+    console.error("error while downloading and decrypting document", e);
+    throw e;
+  }
+  const doc = await raw.arrayBuffer();
+  await mountPdf(doc);
+  return raw;
 }
 
 const addCanvasEvents = () => {
-    if (multiPage.value) {
-        Array.from(Array(pageCount.value).keys()).map((p) => {
-            const canvas = getCanvas(p + 1);
-            canvas.addEventListener(
-                "pointerup",
-                (e) => canvasClick(e, canvas),
-                false,
-            );
-        });
-    } else {
-        const canvas = document.querySelectorAll(
-            "canvas",
-        )[0] as HTMLCanvasElement;
-        canvas.addEventListener(
-            "pointerup",
-            (e) => canvasClick(e, canvas),
-            false,
-        );
-    }
+  if (multiPage.value) {
+    Array.from(Array(pageCount.value).keys()).map((p) => {
+      const canvas = getCanvas(p + 1);
+      canvas.addEventListener(
+        "pointerup",
+        (e) => canvasClick(e, canvas),
+        false,
+      );
+    });
+  } else {
+    const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
+    canvas.addEventListener("pointerup", (e) => canvasClick(e, canvas), false);
+  }
 };
 
 const initPdf = () => {
-    addCanvasEvents();
-    setTimeout(drawAllZones, 800);
+  addCanvasEvents();
+  setTimeout(drawAllZones, 800);
 };
 
 const resetPages = () =>
-    multiPage.value ? setAllPages() : setPage(page.value);
+  multiPage.value ? setAllPages() : setPage(page.value);
 
 const toggleMultiPage = async () => {
-    await resetPages();
-    setTimeout(drawAllZones, 200);
-    addCanvasEvents();
+  await resetPages();
+  setTimeout(drawAllZones, 200);
+  addCanvasEvents();
 };
 
 const scaleXToCanvas = (x: number, canvasWidth: number, PDFWidth: number) =>
-    Math.round((x * canvasWidth) / PDFWidth);
+  Math.round((x * canvasWidth) / PDFWidth);
 
 const scaleYToCanvas = (h: number, canvasHeight: number, PDFHeight: number) =>
-    Math.round((h * canvasHeight) / PDFHeight);
+  Math.round((h * canvasHeight) / PDFHeight);
 
 const hitSignature = (
-    zone: SignatureZone,
-    xy: number[],
-    canvas: HTMLCanvasElement,
+  zone: SignatureZone,
+  xy: number[],
+  canvas: HTMLCanvasElement,
 ) =>
-    scaleXToCanvas(zone.x, canvas.width, zone.PDFPage.width) < xy[0] &&
-    xy[0] <
-        scaleXToCanvas(zone.x + zone.width, canvas.width, zone.PDFPage.width) &&
-    zone.PDFPage.height * zoom.value -
-        scaleYToCanvas(zone.y, canvas.height, zone.PDFPage.height) <
-        xy[1] &&
-    xy[1] <
-        scaleYToCanvas(
-            zone.height - zone.y,
-            canvas.height,
-            zone.PDFPage.height,
-        ) +
-            zone.PDFPage.height * zoom.value;
+  scaleXToCanvas(zone.x, canvas.width, zone.PDFPage.width) < xy[0] &&
+  xy[0] <
+    scaleXToCanvas(zone.x + zone.width, canvas.width, zone.PDFPage.width) &&
+  zone.PDFPage.height * zoom.value -
+    scaleYToCanvas(zone.y, canvas.height, zone.PDFPage.height) <
+    xy[1] &&
+  xy[1] <
+    scaleYToCanvas(zone.height - zone.y, canvas.height, zone.PDFPage.height) +
+      zone.PDFPage.height * zoom.value;
 
 const selectZone = async (z: SignatureZone, canvas: HTMLCanvasElement) => {
-    userSignatureZone.value = z;
-    const ctx = canvas.getContext("2d");
-    if (ctx) {
-        await resetPages();
-        setTimeout(drawAllZones, 200);
-    }
+  userSignatureZone.value = z;
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    await resetPages();
+    setTimeout(drawAllZones, 200);
+  }
 };
 
 const selectZoneEvent = (e: PointerEvent, canvas: HTMLCanvasElement) =>
-    signature.zones
-        .filter(
-            (z) =>
-                (z.PDFPage.index + 1 === getCanvasId(canvas) &&
-                    multiPage.value) ||
-                (z.PDFPage.index + 1 === page.value && !multiPage.value),
-        )
-        .map((z) => {
-            if (hitSignature(z, [e.offsetX, e.offsetY], canvas)) {
-                if (userSignatureZone.value === null) {
-                    selectZone(z, canvas);
-                } else {
-                    if (userSignatureZone.value.index === z.index) {
-                        sign();
-                    }
-                }
-            }
-        });
+  signature.zones
+    .filter(
+      (z) =>
+        (z.PDFPage.index + 1 === getCanvasId(canvas) && multiPage.value) ||
+        (z.PDFPage.index + 1 === page.value && !multiPage.value),
+    )
+    .map((z) => {
+      if (hitSignature(z, [e.offsetX, e.offsetY], canvas)) {
+        if (userSignatureZone.value === null) {
+          selectZone(z, canvas);
+        } else {
+          if (userSignatureZone.value.index === z.index) {
+            sign();
+          }
+        }
+      }
+    });
 
 const canvasClick = (e: PointerEvent, canvas: HTMLCanvasElement) =>
-    canvasEvent.value === "select"
-        ? selectZoneEvent(e, canvas)
-        : addZoneEvent(e, canvas);
+  canvasEvent.value === "select"
+    ? selectZoneEvent(e, canvas)
+    : addZoneEvent(e, canvas);
 
 const turnPage = async (upOrDown: number) => {
-    page.value = page.value + upOrDown;
-    if (multiPage.value) {
-        const canvas = getCanvas(page.value);
-        canvas.scrollIntoView();
-    } else {
-        await setPage(page.value);
-        setTimeout(drawAllZones, 200);
-    }
+  page.value = page.value + upOrDown;
+  if (multiPage.value) {
+    const canvas = getCanvas(page.value);
+    canvas.scrollIntoView();
+  } else {
+    await setPage(page.value);
+    setTimeout(drawAllZones, 200);
+  }
 };
 
 const selectZoneInCanvas = (signatureZone: SignatureZone) => {
-    page.value = signatureZone.PDFPage.index + 1;
-    const canvas = getCanvas(signatureZone.PDFPage.index + 1);
-    selectZone(signatureZone, canvas);
-    canvas.scrollIntoView();
+  page.value = signatureZone.PDFPage.index + 1;
+  const canvas = getCanvas(signatureZone.PDFPage.index + 1);
+  selectZone(signatureZone, canvas);
+  canvas.scrollIntoView();
 };
 
 const goToSignatureZoneUnique = () => selectZoneInCanvas(signature.zones[0]);
 
 const turnSignature = async (upOrDown: number) => {
-    let zoneIndex = userSignatureZone.value?.index ?? -1;
-    if (zoneIndex < -1) {
-        zoneIndex = -1;
-    }
-    if (zoneIndex < signature.zones.length) {
-        zoneIndex = zoneIndex + upOrDown;
-    } else {
-        zoneIndex = 0;
-    }
-    let currentZone = signature.zones[zoneIndex];
-    if (currentZone) {
-        selectZoneInCanvas(currentZone);
-    }
+  let zoneIndex = userSignatureZone.value?.index ?? -1;
+  if (zoneIndex < -1) {
+    zoneIndex = -1;
+  }
+  if (zoneIndex < signature.zones.length) {
+    zoneIndex = zoneIndex + upOrDown;
+  } else {
+    zoneIndex = 0;
+  }
+  let currentZone = signature.zones[zoneIndex];
+  if (currentZone) {
+    selectZoneInCanvas(currentZone);
+  }
 };
 
 const drawZone = (
-    zone: SignatureZone,
-    ctx: CanvasRenderingContext2D,
-    canvasWidth: number,
-    canvasHeight: number,
+  zone: SignatureZone,
+  ctx: CanvasRenderingContext2D,
+  canvasWidth: number,
+  canvasHeight: number,
 ) => {
-    const unselectedBlue = "#007bff";
-    const selectedBlue = "#034286";
-    ctx.strokeStyle =
-        userSignatureZone.value?.index === zone.index
-            ? selectedBlue
-            : unselectedBlue;
-    ctx.lineWidth = 2;
-    ctx.lineJoin = "bevel";
-    ctx.strokeRect(
-        scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width),
-        zone.PDFPage.height * zoom.value -
-            scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height),
-        scaleXToCanvas(zone.width, canvasWidth, zone.PDFPage.width),
-        scaleYToCanvas(zone.height, canvasHeight, zone.PDFPage.height),
-    );
-    ctx.font = `bold ${16 * zoom.value}px serif`;
-    ctx.textAlign = "center";
-    ctx.fillStyle = "black";
-    const xText =
-        scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width) +
-        scaleXToCanvas(zone.width, canvasWidth, zone.PDFPage.width) / 2;
-    const yText =
-        zone.PDFPage.height * zoom.value -
-        scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height) +
-        scaleYToCanvas(zone.height, canvasHeight, zone.PDFPage.height) / 2;
-    if (userSignatureZone.value?.index === zone.index) {
-        ctx.fillStyle = selectedBlue;
-        ctx.fillText("Signer ici", xText, yText);
-    } else {
-        ctx.fillStyle = unselectedBlue;
-        ctx.fillText("Choisir cette", xText, yText - 12 * zoom.value);
-        ctx.fillText("zone de signature", xText, yText + 12 * zoom.value);
-    }
+  const unselectedBlue = "#007bff";
+  const selectedBlue = "#034286";
+  ctx.strokeStyle =
+    userSignatureZone.value?.index === zone.index
+      ? selectedBlue
+      : unselectedBlue;
+  ctx.lineWidth = 2;
+  ctx.lineJoin = "bevel";
+  ctx.strokeRect(
+    scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width),
+    zone.PDFPage.height * zoom.value -
+      scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height),
+    scaleXToCanvas(zone.width, canvasWidth, zone.PDFPage.width),
+    scaleYToCanvas(zone.height, canvasHeight, zone.PDFPage.height),
+  );
+  ctx.font = `bold ${16 * zoom.value}px serif`;
+  ctx.textAlign = "center";
+  ctx.fillStyle = "black";
+  const xText =
+    scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width) +
+    scaleXToCanvas(zone.width, canvasWidth, zone.PDFPage.width) / 2;
+  const yText =
+    zone.PDFPage.height * zoom.value -
+    scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height) +
+    scaleYToCanvas(zone.height, canvasHeight, zone.PDFPage.height) / 2;
+  if (userSignatureZone.value?.index === zone.index) {
+    ctx.fillStyle = selectedBlue;
+    ctx.fillText("Signer ici", xText, yText);
+  } else {
+    ctx.fillStyle = unselectedBlue;
+    ctx.fillText("Choisir cette", xText, yText - 12 * zoom.value);
+    ctx.fillText("zone de signature", xText, yText + 12 * zoom.value);
+  }
 };
 
 const drawAllZones = () => {
-    if (signedState.value !== "signed") {
-        signature.zones
-            .filter(
-                (z) =>
-                    multiPage.value ||
-                    (z.PDFPage.index + 1 === page.value && !multiPage.value),
-            )
-            .map((z) => {
-                const canvas = getCanvas(z.PDFPage.index + 1);
-                const ctx = canvas.getContext("2d");
-                if (ctx) {
-                    if (userSignatureZone.value) {
-                        if (userSignatureZone.value?.index === z.index) {
-                            drawZone(z, ctx, canvas.width, canvas.height);
-                        }
-                    } else {
-                        drawZone(z, ctx, canvas.width, canvas.height);
-                    }
-                }
-            });
-    }
+  if (signedState.value !== "signed") {
+    signature.zones
+      .filter(
+        (z) =>
+          multiPage.value ||
+          (z.PDFPage.index + 1 === page.value && !multiPage.value),
+      )
+      .map((z) => {
+        const canvas = getCanvas(z.PDFPage.index + 1);
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          if (userSignatureZone.value) {
+            if (userSignatureZone.value?.index === z.index) {
+              drawZone(z, ctx, canvas.width, canvas.height);
+            }
+          } else {
+            drawZone(z, ctx, canvas.width, canvas.height);
+          }
+        }
+      });
+  }
 };
 
 const checkSignature = () => {
-    const url = `/api/1.0/document/workflow/${signature.id}/check-signature`;
-    return makeFetch<null, CheckSignature>("GET", url)
-        .then((r) => {
-            signedState.value = r.state;
-            signature.storedObject = r.storedObject;
-            checkForReady();
-        })
-        .catch((error) => {
-            signedState.value = "error";
-            console.log("Error while checking the signature", error);
-            $toast.error(
-                `Erreur lors de la vérification de la signature: ${error.txt}`,
-            );
-        });
+  const url = `/api/1.0/document/workflow/${signature.id}/check-signature`;
+  return makeFetch<null, CheckSignature>("GET", url)
+    .then((r) => {
+      signedState.value = r.state;
+      signature.storedObject = r.storedObject;
+      checkForReady();
+    })
+    .catch((error) => {
+      signedState.value = "error";
+      console.log("Error while checking the signature", error);
+      $toast.error(
+        `Erreur lors de la vérification de la signature: ${error.txt}`,
+      );
+    });
 };
 
 const maxTryForReady = 60; //2 minutes for trying to sign
 let tryForReady = 0;
 
 const stopTrySigning = () => {
-    loading.value = false;
-    modalOpen.value = false;
+  loading.value = false;
+  modalOpen.value = false;
 };
 
 const checkForReady = () => {
-    if (tryForReady > maxTryForReady) {
-        stopTrySigning();
-        tryForReady = 0;
-        console.log("Reached the maximum number of tentative to try signing");
-        $toast.error(
-            "Le nombre maximum de tentatives pour essayer de signer est atteint",
-        );
-    }
-    if (signedState.value === "rejected") {
-        stopTrySigning();
-        console.log("Signature rejected by the server");
-        $toast.error("Signature rejetée par le serveur");
-    }
-    if (signedState.value === "canceled") {
-        stopTrySigning();
-        console.log("Signature canceled");
-        $toast.error("Signature annulée");
-    }
-    if (signedState.value === "pending") {
-        tryForReady = tryForReady + 1;
-        setTimeout(() => checkSignature(), 2000);
-    } else {
-        stopTrySigning();
-        if (signedState.value === "signed") {
-            userSignatureZone.value = null;
-            downloadAndOpen();
-        }
+  if (tryForReady > maxTryForReady) {
+    stopTrySigning();
+    tryForReady = 0;
+    console.log("Reached the maximum number of tentative to try signing");
+    $toast.error(
+      "Le nombre maximum de tentatives pour essayer de signer est atteint",
+    );
+  }
+  if (signedState.value === "rejected") {
+    stopTrySigning();
+    console.log("Signature rejected by the server");
+    $toast.error("Signature rejetée par le serveur");
+  }
+  if (signedState.value === "canceled") {
+    stopTrySigning();
+    console.log("Signature canceled");
+    $toast.error("Signature annulée");
+  }
+  if (signedState.value === "pending") {
+    tryForReady = tryForReady + 1;
+    setTimeout(() => checkSignature(), 2000);
+  } else {
+    stopTrySigning();
+    if (signedState.value === "signed") {
+      userSignatureZone.value = null;
+      downloadAndOpen();
     }
+  }
 };
 
 const sign = () => (modalOpen.value = true);
 
 const confirmSign = () => {
-    loading.value = true;
-    const url = `/api/1.0/document/workflow/${signature.id}/signature-request`;
-    const body = {
-        storedObject: signature.storedObject,
-        zone: userSignatureZone.value,
-    };
-    makeFetch("POST", url, body)
-        .then(() => {
-            checkForReady();
-        })
-        .catch((error) => {
-            console.log("Error while posting the signature", error);
-            stopTrySigning();
-            $toast.error(
-                `Erreur lors de la soumission de la signature: ${error.txt}`,
-            );
-        });
+  loading.value = true;
+  const url = `/api/1.0/document/workflow/${signature.id}/signature-request`;
+  const body = {
+    storedObject: signature.storedObject,
+    zone: userSignatureZone.value,
+  };
+  makeFetch("POST", url, body)
+    .then(() => {
+      checkForReady();
+    })
+    .catch((error) => {
+      console.log("Error while posting the signature", error);
+      stopTrySigning();
+      $toast.error(
+        `Erreur lors de la soumission de la signature: ${error.txt}`,
+      );
+    });
 };
 
 const undoSign = async () => {
-    signature.zones = signature.zones.filter((z) => z.index !== null);
-    await resetPages();
-    setTimeout(drawAllZones, 200);
-    userSignatureZone.value = null;
-    adding.value = false;
-    canvasEvent.value = "select";
+  signature.zones = signature.zones.filter((z) => z.index !== null);
+  await resetPages();
+  setTimeout(drawAllZones, 200);
+  userSignatureZone.value = null;
+  adding.value = false;
+  canvasEvent.value = "select";
 };
 
 const toggleAddZone = () => {
-    canvasEvent.value = canvasEvent.value === "select" ? "add" : "select";
+  canvasEvent.value = canvasEvent.value === "select" ? "add" : "select";
 };
 
 const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
-    const BOX_WIDTH = 180;
-    const BOX_HEIGHT = 90;
-    const PDFPageHeight = canvas.height;
-    const PDFPageWidth = canvas.width;
+  const BOX_WIDTH = 180;
+  const BOX_HEIGHT = 90;
+  const PDFPageHeight = canvas.height;
+  const PDFPageWidth = canvas.width;
 
-    const x = e.offsetX;
-    const y = e.offsetY;
-    const newZone: SignatureZone = {
-        index: null,
-        x:
-            scaleXToCanvas(x, canvas.width, PDFPageWidth) -
-            scaleXToCanvas(BOX_WIDTH / 2, canvas.width, PDFPageWidth),
-        y:
-            PDFPageHeight * zoom.value -
-            scaleYToCanvas(y, canvas.height, PDFPageHeight) +
-            scaleYToCanvas(BOX_HEIGHT / 2, canvas.height, PDFPageHeight),
-        width: BOX_WIDTH * zoom.value,
-        height: BOX_HEIGHT * zoom.value,
-        PDFPage: {
-            index: multiPage.value ? getCanvasId(canvas) - 1 : page.value - 1,
-            width: PDFPageWidth,
-            height: PDFPageHeight,
-        },
-    };
-    signature.zones.push(newZone);
-    userSignatureZone.value = newZone;
+  const x = e.offsetX;
+  const y = e.offsetY;
+  const newZone: SignatureZone = {
+    index: null,
+    x:
+      scaleXToCanvas(x, canvas.width, PDFPageWidth) -
+      scaleXToCanvas(BOX_WIDTH / 2, canvas.width, PDFPageWidth),
+    y:
+      PDFPageHeight * zoom.value -
+      scaleYToCanvas(y, canvas.height, PDFPageHeight) +
+      scaleYToCanvas(BOX_HEIGHT / 2, canvas.height, PDFPageHeight),
+    width: BOX_WIDTH * zoom.value,
+    height: BOX_HEIGHT * zoom.value,
+    PDFPage: {
+      index: multiPage.value ? getCanvasId(canvas) - 1 : page.value - 1,
+      width: PDFPageWidth,
+      height: PDFPageHeight,
+    },
+  };
+  signature.zones.push(newZone);
+  userSignatureZone.value = newZone;
 
-    await resetPages();
-    setTimeout(drawAllZones, 200);
-    canvasEvent.value = "select";
-    adding.value = true;
+  await resetPages();
+  setTimeout(drawAllZones, 200);
+  canvasEvent.value = "select";
+  adding.value = true;
 };
 
 const getReturnPath = () =>
-    window.location.search
-        ? (window.location.search.split("?returnPath=")[1] ??
-          window.location.pathname)
-        : window.location.pathname;
+  window.location.search
+    ? (window.location.search.split("?returnPath=")[1] ??
+      window.location.pathname)
+    : window.location.pathname;
 
 init();
 </script>
 
 <style scoped lang="scss">
 canvas {
-    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
-    margin: 1rem auto;
+  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
+  margin: 1rem auto;
 }
 
 .onAddZone {
-    cursor: not-allowed;
+  cursor: not-allowed;
 
-    canvas {
-        cursor: copy;
-    }
+  canvas {
+    cursor: copy;
+  }
 }
 
 div#action-buttons {
-    position: sticky;
-    bottom: 0px;
-    background-color: white;
-    z-index: 100;
+  position: sticky;
+  bottom: 0px;
+  background-color: white;
+  z-index: 100;
 }
 div.pdf-tools {
-    background-color: #f3f3f3;
-    font-size: 0.6rem;
-    label {
-        font-size: 0.75rem !important;
-        margin: auto 0 auto 0.3rem;
-    }
-    button {
-        font-size: 0.75rem !important;
-    }
-    div.turnSignature {
-        span {
-            font-size: 1rem;
-        }
-    }
-    @media (min-width: 1400px) {
-        // background: none;
-        // border: none !important;
+  background-color: #f3f3f3;
+  font-size: 0.6rem;
+  label {
+    font-size: 0.75rem !important;
+    margin: auto 0 auto 0.3rem;
+  }
+  button {
+    font-size: 0.75rem !important;
+  }
+  div.turnSignature {
+    span {
+      font-size: 1rem;
     }
+  }
+  @media (min-width: 1400px) {
+    // background: none;
+    // border: none !important;
+  }
 }
 div.turn-page {
-    display: flex;
-    span {
-        font-size: 0.75rem;
-        margin: auto 0.4rem;
-    }
-    select {
-        width: 5rem;
-        font-size: 0.75rem;
-    }
+  display: flex;
+  span {
+    font-size: 0.75rem;
+    margin: auto 0.4rem;
+  }
+  select {
+    width: 5rem;
+    font-size: 0.75rem;
+  }
 }
 div.signature-modal-body {
-    height: 8rem;
+  height: 8rem;
 }
 </style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
index a46257b5e..e3ace5b40 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
@@ -4,36 +4,36 @@ import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
 import App from "./App.vue";
 
 const appMessages = {
-    fr: {
-        yes: "Oui",
-        are_you_sure: "Êtes-vous sûr·e?",
-        you_are_going_to_sign: "Vous allez signer le document",
-        signature_confirmation: "Confirmation de la signature",
-        sign: "Signer",
-        choose_another_signature: "Choisir une autre zone",
-        cancel: "Annuler",
-        last_sign_zone: "Zone de signature précédente",
-        next_sign_zone: "Zone de signature suivante",
-        add_sign_zone: "Ajouter une zone de signature",
-        click_on_document: "Cliquer sur le document",
-        last_zone: "Zone précédente",
-        next_zone: "Zone suivante",
-        add_zone: "Ajouter une zone",
-        another_zone: "Autre zone",
-        electronic_signature_in_progress: "Signature électronique en cours...",
-        loading: "Chargement...",
-        remove_sign_zone: "Enlever la zone",
-        return: "Retour",
-        see_all_pages: "Voir toutes les pages",
-        all_pages: "Toutes les pages",
-    },
+  fr: {
+    yes: "Oui",
+    are_you_sure: "Êtes-vous sûr·e?",
+    you_are_going_to_sign: "Vous allez signer le document",
+    signature_confirmation: "Confirmation de la signature",
+    sign: "Signer",
+    choose_another_signature: "Choisir une autre zone",
+    cancel: "Annuler",
+    last_sign_zone: "Zone de signature précédente",
+    next_sign_zone: "Zone de signature suivante",
+    add_sign_zone: "Ajouter une zone de signature",
+    click_on_document: "Cliquer sur le document",
+    last_zone: "Zone précédente",
+    next_zone: "Zone suivante",
+    add_zone: "Ajouter une zone",
+    another_zone: "Autre zone",
+    electronic_signature_in_progress: "Signature électronique en cours...",
+    loading: "Chargement...",
+    remove_sign_zone: "Enlever la zone",
+    return: "Retour",
+    see_all_pages: "Voir toutes les pages",
+    all_pages: "Toutes les pages",
+  },
 };
 
 const i18n = _createI18n(appMessages);
 
 const app = createApp({
-    template: `<app></app>`,
+  template: `<app></app>`,
 })
-    .use(i18n)
-    .component("app", App)
-    .mount("#document-signature");
+  .use(i18n)
+  .component("app", App)
+  .mount("#document-signature");
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
index 017629ee4..c731ef19f 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
@@ -1,208 +1,206 @@
 <script setup lang="ts">
 import { StoredObject, StoredObjectVersionCreated } from "../../types";
 import {
-    encryptFile,
-    fetchNewStoredObject,
-    uploadVersion,
+  encryptFile,
+  fetchNewStoredObject,
+  uploadVersion,
 } from "../../js/async-upload/uploader";
 import { computed, ref, Ref } from "vue";
 import FileIcon from "ChillDocStoreAssets/vuejs/FileIcon.vue";
 
 interface DropFileConfig {
-    existingDoc?: StoredObject;
+  existingDoc?: StoredObject;
 }
 
 const props = withDefaults(defineProps<DropFileConfig>(), {
-    existingDoc: null,
+  existingDoc: null,
 });
 
 const emit =
-    defineEmits<
-        (
-            e: "addDocument",
-            {
-                stored_object_version: StoredObjectVersionCreated,
-                stored_object: StoredObject,
-                file_name: string,
-            },
-        ) => void
-    >();
+  defineEmits<
+    (
+      e: "addDocument",
+      {
+        stored_object_version: StoredObjectVersionCreated,
+        stored_object: StoredObject,
+        file_name: string,
+      },
+    ) => void
+  >();
 
 const is_dragging: Ref<boolean> = ref(false);
 const uploading: Ref<boolean> = ref(false);
 const display_filename: Ref<string | null> = ref(null);
 
 const has_existing_doc = computed<boolean>(() => {
-    return props.existingDoc !== undefined && props.existingDoc !== null;
+  return props.existingDoc !== undefined && props.existingDoc !== null;
 });
 
 const onDragOver = (e: Event) => {
-    e.preventDefault();
+  e.preventDefault();
 
-    is_dragging.value = true;
+  is_dragging.value = true;
 };
 
 const onDragLeave = (e: Event) => {
-    e.preventDefault();
+  e.preventDefault();
 
-    is_dragging.value = false;
+  is_dragging.value = false;
 };
 
 const onDrop = (e: DragEvent) => {
-    e.preventDefault();
+  e.preventDefault();
 
-    const files = e.dataTransfer?.files;
+  const files = e.dataTransfer?.files;
 
-    if (null === files || undefined === files) {
-        console.error("no files transferred", e.dataTransfer);
-        return;
-    }
-    if (files.length === 0) {
-        console.error("no files given");
-        return;
-    }
+  if (null === files || undefined === files) {
+    console.error("no files transferred", e.dataTransfer);
+    return;
+  }
+  if (files.length === 0) {
+    console.error("no files given");
+    return;
+  }
 
-    handleFile(files[0]);
+  handleFile(files[0]);
 };
 
 const onZoneClick = (e: Event) => {
-    e.stopPropagation();
-    e.preventDefault();
+  e.stopPropagation();
+  e.preventDefault();
 
-    const input = document.createElement("input");
-    input.type = "file";
-    input.addEventListener("change", onFileChange);
+  const input = document.createElement("input");
+  input.type = "file";
+  input.addEventListener("change", onFileChange);
 
-    input.click();
+  input.click();
 };
 
 const onFileChange = async (event: Event): Promise<void> => {
-    const input = event.target as HTMLInputElement;
+  const input = event.target as HTMLInputElement;
 
-    if (input.files && input.files[0]) {
-        console.log("file added", input.files[0]);
-        const file = input.files[0];
-        await handleFile(file);
+  if (input.files && input.files[0]) {
+    console.log("file added", input.files[0]);
+    const file = input.files[0];
+    await handleFile(file);
 
-        return Promise.resolve();
-    }
+    return Promise.resolve();
+  }
 
-    throw "No file given";
+  throw "No file given";
 };
 
 const handleFile = async (file: File): Promise<void> => {
-    uploading.value = true;
-    display_filename.value = file.name;
-    const type = file.type;
+  uploading.value = true;
+  display_filename.value = file.name;
+  const type = file.type;
 
-    // create a stored_object if not exists
-    let stored_object;
-    if (null === props.existingDoc) {
-        stored_object = await fetchNewStoredObject();
-    } else {
-        stored_object = props.existingDoc;
-    }
+  // create a stored_object if not exists
+  let stored_object;
+  if (null === props.existingDoc) {
+    stored_object = await fetchNewStoredObject();
+  } else {
+    stored_object = props.existingDoc;
+  }
 
-    const buffer = await file.arrayBuffer();
-    const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
-    const filename = await uploadVersion(encrypted, stored_object);
+  const buffer = await file.arrayBuffer();
+  const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
+  const filename = await uploadVersion(encrypted, stored_object);
 
-    const stored_object_version: StoredObjectVersionCreated = {
-        filename: filename,
-        iv: Array.from(iv),
-        keyInfos: jsonWebKey,
-        type: type,
-        persisted: false,
-    };
+  const stored_object_version: StoredObjectVersionCreated = {
+    filename: filename,
+    iv: Array.from(iv),
+    keyInfos: jsonWebKey,
+    type: type,
+    persisted: false,
+  };
 
-    const fileName = file.name;
-    let file_name = "Nouveau document";
-    const file_name_split = fileName.split(".");
-    if (file_name_split.length > 1) {
-        const extension = file_name_split
-            ? file_name_split[file_name_split.length - 1]
-            : "";
-        file_name = fileName.replace(extension, "").slice(0, -1);
-    }
+  const fileName = file.name;
+  let file_name = "Nouveau document";
+  const file_name_split = fileName.split(".");
+  if (file_name_split.length > 1) {
+    const extension = file_name_split
+      ? file_name_split[file_name_split.length - 1]
+      : "";
+    file_name = fileName.replace(extension, "").slice(0, -1);
+  }
 
-    emit("addDocument", {
-        stored_object,
-        stored_object_version,
-        file_name: file_name,
-    });
-    uploading.value = false;
+  emit("addDocument", {
+    stored_object,
+    stored_object_version,
+    file_name: file_name,
+  });
+  uploading.value = false;
 };
 </script>
 
 <template>
-    <div class="drop-file">
-        <div
-            v-if="!uploading"
-            :class="{ area: true, dragging: is_dragging }"
-            @click="onZoneClick"
-            @dragover="onDragOver"
-            @dragleave="onDragLeave"
-            @drop="onDrop"
-        >
-            <p v-if="has_existing_doc" class="file-icon">
-                <file-icon :type="props.existingDoc?.type"></file-icon>
-            </p>
+  <div class="drop-file">
+    <div
+      v-if="!uploading"
+      :class="{ area: true, dragging: is_dragging }"
+      @click="onZoneClick"
+      @dragover="onDragOver"
+      @dragleave="onDragLeave"
+      @drop="onDrop"
+    >
+      <p v-if="has_existing_doc" class="file-icon">
+        <file-icon :type="props.existingDoc?.type"></file-icon>
+      </p>
 
-            <p v-if="display_filename !== null" class="display-filename">
-                {{ display_filename }}
-            </p>
-            <!-- todo i18n -->
-            <p v-if="has_existing_doc">
-                Déposez un document ou cliquez ici pour remplacer le document
-                existant
-            </p>
-            <p v-else>
-                Déposez un document ou cliquez ici pour ouvrir le navigateur de
-                fichier
-            </p>
-        </div>
-        <div v-else class="waiting">
-            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
-            <span class="sr-only">Loading...</span>
-        </div>
+      <p v-if="display_filename !== null" class="display-filename">
+        {{ display_filename }}
+      </p>
+      <!-- todo i18n -->
+      <p v-if="has_existing_doc">
+        Déposez un document ou cliquez ici pour remplacer le document existant
+      </p>
+      <p v-else>
+        Déposez un document ou cliquez ici pour ouvrir le navigateur de fichier
+      </p>
     </div>
+    <div v-else class="waiting">
+      <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
+      <span class="sr-only">Loading...</span>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 .drop-file {
+  width: 100%;
+
+  .file-icon {
+    font-size: xx-large;
+  }
+
+  .display-filename {
+    font-variant: small-caps;
+    font-weight: 200;
+  }
+
+  & > .area,
+  & > .waiting {
     width: 100%;
+    height: 10rem;
 
-    .file-icon {
-        font-size: xx-large;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    p {
+      // require for display in DropFileModal
+      text-align: center;
     }
+  }
 
-    .display-filename {
-        font-variant: small-caps;
-        font-weight: 200;
-    }
-
-    & > .area,
-    & > .waiting {
-        width: 100%;
-        height: 10rem;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        p {
-            // require for display in DropFileModal
-            text-align: center;
-        }
-    }
-
-    & > .area {
-        border: 4px dashed #ccc;
-
-        &.dragging {
-            border: 4px dashed blue;
-        }
+  & > .area {
+    border: 4px dashed #ccc;
+
+    &.dragging {
+      border: 4px dashed blue;
     }
+  }
 }
 </style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileModal.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileModal.vue
index 956b3e859..bde094487 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileModal.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileModal.vue
@@ -6,24 +6,24 @@ import { computed, reactive } from "vue";
 import { useToast } from "vue-toast-notification";
 
 interface DropFileConfig {
-    allowRemove: boolean;
-    existingDoc?: StoredObject;
+  allowRemove: boolean;
+  existingDoc?: StoredObject;
 }
 
 const props = withDefaults(defineProps<DropFileConfig>(), {
-    allowRemove: false,
+  allowRemove: false,
 });
 
 const emit = defineEmits<{
-    (
-        e: "addDocument",
-        {
-            stored_object: StoredObject,
-            stored_object_version: StoredObjectVersion,
-            file_name: string,
-        },
-    ): void;
-    (e: "removeDocument"): void;
+  (
+    e: "addDocument",
+    {
+      stored_object: StoredObject,
+      stored_object_version: StoredObjectVersion,
+      file_name: string,
+    },
+  ): void;
+  (e: "removeDocument"): void;
 }>();
 
 const $toast = useToast();
@@ -33,67 +33,67 @@ const state = reactive({ showModal: false });
 const modalClasses = { "modal-dialog-centered": true, "modal-md": true };
 
 const buttonState = computed<"add" | "replace">(() => {
-    if (props.existingDoc === undefined || props.existingDoc === null) {
-        return "add";
-    }
+  if (props.existingDoc === undefined || props.existingDoc === null) {
+    return "add";
+  }
 
-    return "replace";
+  return "replace";
 });
 
 function onAddDocument({
-    stored_object,
-    stored_object_version,
-    file_name,
+  stored_object,
+  stored_object_version,
+  file_name,
 }: {
-    stored_object: StoredObject;
-    stored_object_version: StoredObjectVersion;
-    file_name: string;
+  stored_object: StoredObject;
+  stored_object_version: StoredObjectVersion;
+  file_name: string;
 }): void {
-    const message =
-        buttonState.value === "add" ? "Document ajouté" : "Document remplacé";
-    $toast.success(message);
-    emit("addDocument", { stored_object_version, stored_object, file_name });
-    state.showModal = false;
+  const message =
+    buttonState.value === "add" ? "Document ajouté" : "Document remplacé";
+  $toast.success(message);
+  emit("addDocument", { stored_object_version, stored_object, file_name });
+  state.showModal = false;
 }
 
 function onRemoveDocument(): void {
-    emit("removeDocument");
+  emit("removeDocument");
 }
 
 function openModal(): void {
-    state.showModal = true;
+  state.showModal = true;
 }
 
 function closeModal(): void {
-    state.showModal = false;
+  state.showModal = false;
 }
 </script>
 
 <template>
-    <button
-        v-if="buttonState === 'add'"
-        @click="openModal"
-        class="btn btn-create"
-    >
-        Ajouter un document
-    </button>
-    <button v-else @click="openModal" class="btn btn-edit">
-        Remplacer le document
-    </button>
-    <modal
-        v-if="state.showModal"
-        :modal-dialog-class="modalClasses"
-        @close="closeModal"
-    >
-        <template v-slot:body>
-            <drop-file-widget
-                :existing-doc="existingDoc"
-                :allow-remove="allowRemove"
-                @add-document="onAddDocument"
-                @remove-document="onRemoveDocument"
-            ></drop-file-widget>
-        </template>
-    </modal>
+  <button
+    v-if="buttonState === 'add'"
+    @click="openModal"
+    class="btn btn-create"
+  >
+    Ajouter un document
+  </button>
+  <button v-else @click="openModal" class="btn btn-edit">
+    Remplacer le document
+  </button>
+  <modal
+    v-if="state.showModal"
+    :modal-dialog-class="modalClasses"
+    @close="closeModal"
+  >
+    <template v-slot:body>
+      <drop-file-widget
+        :existing-doc="existingDoc"
+        :allow-remove="allowRemove"
+        @add-document="onAddDocument"
+        @remove-document="onRemoveDocument"
+      ></drop-file-widget>
+    </template>
+  </modal>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileWidget.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileWidget.vue
index 54f8ddf0c..8ead08b45 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileWidget.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileWidget.vue
@@ -5,97 +5,97 @@ import DropFile from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFile.vue";
 import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
 
 interface DropFileConfig {
-    allowRemove: boolean;
-    existingDoc?: StoredObject;
+  allowRemove: boolean;
+  existingDoc?: StoredObject;
 }
 
 const props = withDefaults(defineProps<DropFileConfig>(), {
-    allowRemove: false,
+  allowRemove: false,
 });
 
 const emit = defineEmits<{
-    (
-        e: "addDocument",
-        {
-            stored_object: StoredObject,
-            stored_object_version: StoredObjectVersion,
-            file_name: string,
-        },
-    ): void;
-    (e: "removeDocument"): void;
+  (
+    e: "addDocument",
+    {
+      stored_object: StoredObject,
+      stored_object_version: StoredObjectVersion,
+      file_name: string,
+    },
+  ): void;
+  (e: "removeDocument"): void;
 }>();
 
 const has_existing_doc = computed<boolean>(() => {
-    return props.existingDoc !== undefined && props.existingDoc !== null;
+  return props.existingDoc !== undefined && props.existingDoc !== null;
 });
 
 const dav_link_expiration = computed<number | undefined>(() => {
-    if (props.existingDoc === undefined || props.existingDoc === null) {
-        return undefined;
-    }
-    if (props.existingDoc.status !== "ready") {
-        return undefined;
-    }
+  if (props.existingDoc === undefined || props.existingDoc === null) {
+    return undefined;
+  }
+  if (props.existingDoc.status !== "ready") {
+    return undefined;
+  }
 
-    return props.existingDoc._links?.dav_link?.expiration;
+  return props.existingDoc._links?.dav_link?.expiration;
 });
 
 const dav_link_href = computed<string | undefined>(() => {
-    if (props.existingDoc === undefined || props.existingDoc === null) {
-        return undefined;
-    }
-    if (props.existingDoc.status !== "ready") {
-        return undefined;
-    }
+  if (props.existingDoc === undefined || props.existingDoc === null) {
+    return undefined;
+  }
+  if (props.existingDoc.status !== "ready") {
+    return undefined;
+  }
 
-    return props.existingDoc._links?.dav_link?.href;
+  return props.existingDoc._links?.dav_link?.href;
 });
 
 const onAddDocument = ({
-    stored_object,
-    stored_object_version,
-    file_name,
+  stored_object,
+  stored_object_version,
+  file_name,
 }: {
-    stored_object: StoredObject;
-    stored_object_version: StoredObjectVersion;
-    file_name: string;
+  stored_object: StoredObject;
+  stored_object_version: StoredObjectVersion;
+  file_name: string;
 }): void => {
-    emit("addDocument", { stored_object, stored_object_version, file_name });
+  emit("addDocument", { stored_object, stored_object_version, file_name });
 };
 
 const onRemoveDocument = (e: Event): void => {
-    e.stopPropagation();
-    e.preventDefault();
-    emit("removeDocument");
+  e.stopPropagation();
+  e.preventDefault();
+  emit("removeDocument");
 };
 </script>
 
 <template>
-    <div>
-        <drop-file
-            :existingDoc="props.existingDoc"
-            @addDocument="onAddDocument"
-        ></drop-file>
+  <div>
+    <drop-file
+      :existingDoc="props.existingDoc"
+      @addDocument="onAddDocument"
+    ></drop-file>
 
-        <ul class="record_actions">
-            <li v-if="has_existing_doc">
-                <document-action-buttons-group
-                    :stored-object="props.existingDoc"
-                    :can-edit="props.existingDoc?.status === 'ready'"
-                    :can-download="true"
-                    :dav-link="dav_link_href"
-                    :dav-link-expiration="dav_link_expiration"
-                />
-            </li>
-            <li>
-                <button
-                    v-if="allowRemove"
-                    class="btn btn-delete"
-                    @click="onRemoveDocument($event)"
-                ></button>
-            </li>
-        </ul>
-    </div>
+    <ul class="record_actions">
+      <li v-if="has_existing_doc">
+        <document-action-buttons-group
+          :stored-object="props.existingDoc"
+          :can-edit="props.existingDoc?.status === 'ready'"
+          :can-download="true"
+          :dav-link="dav_link_href"
+          :dav-link-expiration="dav_link_expiration"
+        />
+      </li>
+      <li>
+        <button
+          v-if="allowRemove"
+          class="btn btn-delete"
+          @click="onRemoveDocument($event)"
+        ></button>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/FileIcon.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/FileIcon.vue
index 5260095fa..ba2c44f6a 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/FileIcon.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/FileIcon.vue
@@ -1,46 +1,46 @@
 <script setup lang="ts">
 interface FileIconConfig {
-    type: string;
+  type: string;
 }
 
 const props = defineProps<FileIconConfig>();
 </script>
 
 <template>
-    <i class="fa fa-file-pdf-o" v-if="props.type === 'application/pdf'"></i>
-    <i
-        class="fa fa-file-word-o"
-        v-else-if="props.type === 'application/vnd.oasis.opendocument.text'"
-    ></i>
-    <i
-        class="fa fa-file-word-o"
-        v-else-if="
-            props.type ===
-            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-        "
-    ></i>
-    <i
-        class="fa fa-file-word-o"
-        v-else-if="props.type === 'application/msword'"
-    ></i>
-    <i
-        class="fa fa-file-excel-o"
-        v-else-if="
-            props.type ===
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-        "
-    ></i>
-    <i
-        class="fa fa-file-excel-o"
-        v-else-if="props.type === 'application/vnd.ms-excel'"
-    ></i>
-    <i class="fa fa-file-image-o" v-else-if="props.type === 'image/jpeg'"></i>
-    <i class="fa fa-file-image-o" v-else-if="props.type === 'image/png'"></i>
-    <i
-        class="fa fa-file-archive-o"
-        v-else-if="props.type === 'application/x-zip-compressed'"
-    ></i>
-    <i class="fa fa-file-code-o" v-else></i>
+  <i class="fa fa-file-pdf-o" v-if="props.type === 'application/pdf'"></i>
+  <i
+    class="fa fa-file-word-o"
+    v-else-if="props.type === 'application/vnd.oasis.opendocument.text'"
+  ></i>
+  <i
+    class="fa fa-file-word-o"
+    v-else-if="
+      props.type ===
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+    "
+  ></i>
+  <i
+    class="fa fa-file-word-o"
+    v-else-if="props.type === 'application/msword'"
+  ></i>
+  <i
+    class="fa fa-file-excel-o"
+    v-else-if="
+      props.type ===
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    "
+  ></i>
+  <i
+    class="fa fa-file-excel-o"
+    v-else-if="props.type === 'application/vnd.ms-excel'"
+  ></i>
+  <i class="fa fa-file-image-o" v-else-if="props.type === 'image/jpeg'"></i>
+  <i class="fa fa-file-image-o" v-else-if="props.type === 'image/png'"></i>
+  <i
+    class="fa fa-file-archive-o"
+    v-else-if="props.type === 'application/x-zip-compressed'"
+  ></i>
+  <i class="fa fa-file-code-o" v-else></i>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/ConvertButton.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/ConvertButton.vue
index b6c6a496f..8cb60bc12 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/ConvertButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/ConvertButton.vue
@@ -1,28 +1,28 @@
 <template>
-    <a :class="props.classes" @click="download_and_open($event)" ref="btn">
-        <i class="fa fa-file-pdf-o"></i>
-        Télécharger en pdf
-    </a>
+  <a :class="props.classes" @click="download_and_open($event)" ref="btn">
+    <i class="fa fa-file-pdf-o"></i>
+    Télécharger en pdf
+  </a>
 </template>
 
 <script lang="ts" setup>
 import {
-    build_convert_link,
-    download_and_decrypt_doc,
-    download_doc,
+  build_convert_link,
+  download_and_decrypt_doc,
+  download_doc,
 } from "./helpers";
 import mime from "mime";
 import { reactive, ref } from "vue";
 import { StoredObject } from "../../types";
 
 interface ConvertButtonConfig {
-    storedObject: StoredObject;
-    classes: Record<string, boolean>;
-    filename?: string;
+  storedObject: StoredObject;
+  classes: Record<string, boolean>;
+  filename?: string;
 }
 
 interface DownloadButtonState {
-    content: null | string;
+  content: null | string;
 }
 
 const props = defineProps<ConvertButtonConfig>();
@@ -30,36 +30,34 @@ const state: DownloadButtonState = reactive({ content: null });
 const btn = ref<HTMLAnchorElement | null>(null);
 
 async function download_and_open(event: Event): Promise<void> {
-    const button = event.target as HTMLAnchorElement;
+  const button = event.target as HTMLAnchorElement;
 
-    if (null === state.content) {
-        event.preventDefault();
+  if (null === state.content) {
+    event.preventDefault();
 
-        const raw = await download_doc(
-            build_convert_link(props.storedObject.uuid),
-        );
-        state.content = window.URL.createObjectURL(raw);
+    const raw = await download_doc(build_convert_link(props.storedObject.uuid));
+    state.content = window.URL.createObjectURL(raw);
 
-        button.href = window.URL.createObjectURL(raw);
-        button.type = "application/pdf";
+    button.href = window.URL.createObjectURL(raw);
+    button.type = "application/pdf";
 
-        button.download = props.filename + ".pdf" || "document.pdf";
-    }
+    button.download = props.filename + ".pdf" || "document.pdf";
+  }
 
-    button.click();
-    const reset_pending = setTimeout(reset_state, 45000);
+  button.click();
+  const reset_pending = setTimeout(reset_state, 45000);
 }
 
 function reset_state(): void {
-    state.content = null;
-    btn.value?.removeAttribute("download");
-    btn.value?.removeAttribute("href");
-    btn.value?.removeAttribute("type");
+  state.content = null;
+  btn.value?.removeAttribute("download");
+  btn.value?.removeAttribute("href");
+  btn.value?.removeAttribute("type");
 }
 </script>
 
 <style scoped lang="scss">
 i.fa::before {
-    color: var(--bs-dropdown-link-hover-color);
+  color: var(--bs-dropdown-link-hover-color);
 }
 </style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DesktopEditButton.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DesktopEditButton.vue
index 2b74f76bd..f00889a8e 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DesktopEditButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DesktopEditButton.vue
@@ -3,13 +3,13 @@ import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import { computed, reactive } from "vue";
 
 export interface DesktopEditButtonConfig {
-    editLink: null;
-    classes: Record<string, boolean>;
-    expirationLink: number | Date;
+  editLink: null;
+  classes: Record<string, boolean>;
+  expirationLink: number | Date;
 }
 
 interface DesktopEditButtonState {
-    modalOpened: boolean;
+  modalOpened: boolean;
 }
 
 const state: DesktopEditButtonState = reactive({ modalOpened: false });
@@ -17,80 +17,76 @@ const state: DesktopEditButtonState = reactive({ modalOpened: false });
 const props = defineProps<DesktopEditButtonConfig>();
 
 const buildCommand = computed<string>(
-    () => "vnd.libreoffice.command:ofe|u|" + props.editLink,
+  () => "vnd.libreoffice.command:ofe|u|" + props.editLink,
 );
 
 const editionUntilFormatted = computed<string>(() => {
-    let d;
+  let d;
 
-    if (props.expirationLink instanceof Date) {
-        d = props.expirationLink;
-    } else {
-        d = new Date(props.expirationLink * 1000);
-    }
-    console.log(props.expirationLink);
+  if (props.expirationLink instanceof Date) {
+    d = props.expirationLink;
+  } else {
+    d = new Date(props.expirationLink * 1000);
+  }
+  console.log(props.expirationLink);
 
-    return new Intl.DateTimeFormat(undefined, {
-        dateStyle: "long",
-        timeStyle: "medium",
-    }).format(d);
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "long",
+    timeStyle: "medium",
+  }).format(d);
 });
 </script>
 
 <template>
-    <teleport to="body">
-        <modal v-if="state.modalOpened" @close="state.modalOpened = false">
-            <template v-slot:body>
-                <div class="desktop-edit">
-                    <p class="center">
-                        Veuillez enregistrer vos modifications avant le
-                    </p>
-                    <p>
-                        <strong>{{ editionUntilFormatted }}</strong>
-                    </p>
+  <teleport to="body">
+    <modal v-if="state.modalOpened" @close="state.modalOpened = false">
+      <template v-slot:body>
+        <div class="desktop-edit">
+          <p class="center">Veuillez enregistrer vos modifications avant le</p>
+          <p>
+            <strong>{{ editionUntilFormatted }}</strong>
+          </p>
 
-                    <p>
-                        <a class="btn btn-primary" :href="buildCommand"
-                            >Ouvrir le document pour édition</a
-                        >
-                    </p>
+          <p>
+            <a class="btn btn-primary" :href="buildCommand"
+              >Ouvrir le document pour édition</a
+            >
+          </p>
 
-                    <p>
-                        <small
-                            >Le document peut être édité uniquement en utilisant
-                            Libre Office.</small
-                        >
-                    </p>
+          <p>
+            <small
+              >Le document peut être édité uniquement en utilisant Libre
+              Office.</small
+            >
+          </p>
 
-                    <p>
-                        <small
-                            >En cas d'échec lors de l'enregistrement, sauver le
-                            document sur le poste de travail avant de le déposer
-                            à nouveau ici.</small
-                        >
-                    </p>
+          <p>
+            <small
+              >En cas d'échec lors de l'enregistrement, sauver le document sur
+              le poste de travail avant de le déposer à nouveau ici.</small
+            >
+          </p>
 
-                    <p>
-                        <small
-                            >Vous pouvez naviguez sur d'autres pages pendant
-                            l'édition.</small
-                        >
-                    </p>
-                </div>
-            </template>
-        </modal>
-    </teleport>
-    <a :class="props.classes" @click="state.modalOpened = true">
-        <i class="fa fa-desktop"></i>
-        Éditer sur le bureau
-    </a>
+          <p>
+            <small
+              >Vous pouvez naviguez sur d'autres pages pendant l'édition.</small
+            >
+          </p>
+        </div>
+      </template>
+    </modal>
+  </teleport>
+  <a :class="props.classes" @click="state.modalOpened = true">
+    <i class="fa fa-desktop"></i>
+    Éditer sur le bureau
+  </a>
 </template>
 
 <style scoped lang="scss">
 .desktop-edit {
-    text-align: center;
+  text-align: center;
 }
 i.fa::before {
-    color: var(--bs-dropdown-link-hover-color);
+  color: var(--bs-dropdown-link-hover-color);
 }
 </style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
index d28b49cdf..8316229ce 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
@@ -1,26 +1,26 @@
 <template>
-    <a
-        v-if="!state.is_ready"
-        :class="props.classes"
-        @click="download_and_open()"
-        title="T&#233;l&#233;charger"
-    >
-        <i class="fa fa-download"></i>
-        <template v-if="displayActionStringInButton">Télécharger</template>
-    </a>
-    <a
-        v-else
-        :class="props.classes"
-        target="_blank"
-        :type="props.atVersion.type"
-        :download="buildDocumentName()"
-        :href="state.href_url"
-        ref="open_button"
-        title="Ouvrir"
-    >
-        <i class="fa fa-external-link"></i>
-        <template v-if="displayActionStringInButton">Ouvrir</template>
-    </a>
+  <a
+    v-if="!state.is_ready"
+    :class="props.classes"
+    @click="download_and_open()"
+    title="T&#233;l&#233;charger"
+  >
+    <i class="fa fa-download"></i>
+    <template v-if="displayActionStringInButton">Télécharger</template>
+  </a>
+  <a
+    v-else
+    :class="props.classes"
+    target="_blank"
+    :type="props.atVersion.type"
+    :download="buildDocumentName()"
+    :href="state.href_url"
+    ref="open_button"
+    title="Ouvrir"
+  >
+    <i class="fa fa-external-link"></i>
+    <template v-if="displayActionStringInButton">Ouvrir</template>
+  </a>
 </template>
 
 <script lang="ts" setup>
@@ -30,112 +30,109 @@ import mime from "mime";
 import { StoredObject, StoredObjectVersion } from "../../types";
 
 interface DownloadButtonConfig {
-    storedObject: StoredObject;
-    atVersion: StoredObjectVersion;
-    classes: Record<string, boolean>;
-    filename?: string;
-    /**
-     * if true, display the action string into the button. If false, displays only
-     * the icon
-     */
-    displayActionStringInButton?: boolean;
-    /**
-     * if true, will download directly the file on load
-     */
-    directDownload?: boolean;
+  storedObject: StoredObject;
+  atVersion: StoredObjectVersion;
+  classes: Record<string, boolean>;
+  filename?: string;
+  /**
+   * if true, display the action string into the button. If false, displays only
+   * the icon
+   */
+  displayActionStringInButton?: boolean;
+  /**
+   * if true, will download directly the file on load
+   */
+  directDownload?: boolean;
 }
 
 interface DownloadButtonState {
-    is_ready: boolean;
-    is_running: boolean;
-    href_url: string;
+  is_ready: boolean;
+  is_running: boolean;
+  href_url: string;
 }
 
 const props = withDefaults(defineProps<DownloadButtonConfig>(), {
-    displayActionStringInButton: true,
-    directDownload: false,
+  displayActionStringInButton: true,
+  directDownload: false,
 });
 const state: DownloadButtonState = reactive({
-    is_ready: false,
-    is_running: false,
-    href_url: "#",
+  is_ready: false,
+  is_running: false,
+  href_url: "#",
 });
 
 const open_button = ref<HTMLAnchorElement | null>(null);
 
 function buildDocumentName(): string {
-    let document_name = props.filename ?? props.storedObject.title;
+  let document_name = props.filename ?? props.storedObject.title;
 
-    if ("" === document_name || null === document_name) {
-        document_name = "document";
-    }
+  if ("" === document_name || null === document_name) {
+    document_name = "document";
+  }
 
-    const ext = mime.getExtension(props.atVersion.type);
+  const ext = mime.getExtension(props.atVersion.type);
 
-    if (null !== ext) {
-        return document_name + "." + ext;
-    }
+  if (null !== ext) {
+    return document_name + "." + ext;
+  }
 
-    return document_name;
+  return document_name;
 }
 
 async function download_and_open(): Promise<void> {
-    if (state.is_running) {
-        console.log("state is running, aborting");
-        return;
-    }
+  if (state.is_running) {
+    console.log("state is running, aborting");
+    return;
+  }
 
-    state.is_running = true;
+  state.is_running = true;
 
-    if (state.is_ready) {
-        console.log("state is ready. This should not happens");
-        return;
-    }
+  if (state.is_ready) {
+    console.log("state is ready. This should not happens");
+    return;
+  }
 
-    let raw;
+  let raw;
 
-    try {
-        raw = await download_and_decrypt_doc(
-            props.storedObject,
-            props.atVersion,
-        );
-    } catch (e) {
-        console.error("error while downloading and decrypting document");
-        console.error(e);
-        throw e;
-    }
+  try {
+    raw = await download_and_decrypt_doc(props.storedObject, props.atVersion);
+  } catch (e) {
+    console.error("error while downloading and decrypting document");
+    console.error(e);
+    throw e;
+  }
 
-    state.href_url = window.URL.createObjectURL(raw);
-    state.is_running = false;
-    state.is_ready = true;
+  state.href_url = window.URL.createObjectURL(raw);
+  state.is_running = false;
+  state.is_ready = true;
 
-    if (!props.directDownload) {
-        await nextTick();
-        open_button.value?.click();
+  if (!props.directDownload) {
+    await nextTick();
+    open_button.value?.click();
 
-        console.log("open button should have been clicked");
-        setTimeout(reset_state, 45000);
-    }
+    console.log("open button should have been clicked");
+    setTimeout(reset_state, 45000);
+  }
 }
 
 function reset_state(): void {
-    state.href_url = "#";
-    state.is_ready = false;
-    state.is_running = false;
+  state.href_url = "#";
+  state.is_ready = false;
+  state.is_running = false;
 }
 
 onMounted(() => {
-    if (props.directDownload) {
-        download_and_open();
-    }
+  if (props.directDownload) {
+    download_and_open();
+  }
 });
 </script>
 
 <style scoped lang="scss">
 i.fa::before {
-    color: var(--bs-dropdown-link-hover-color);
+  color: var(--bs-dropdown-link-hover-color);
 }
 i.fa {
-    margin-right: 0.5rem;
+  margin-right: 0.5rem;
 }
 </style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
index 71a8d42ea..f8c1c4ead 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import HistoryButtonModal from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue";
 import {
-    StoredObject,
-    StoredObjectVersionWithPointInTime,
+  StoredObject,
+  StoredObjectVersionWithPointInTime,
 } from "./../../types";
 import { computed, reactive, ref, useTemplateRef } from "vue";
 import { get_versions } from "./HistoryButton/api";
 
 interface HistoryButtonConfig {
-    storedObject: StoredObject;
-    canEdit: boolean;
+  storedObject: StoredObject;
+  canEdit: boolean;
 }
 
 interface HistoryButtonState {
-    versions: StoredObjectVersionWithPointInTime[];
-    loaded: boolean;
+  versions: StoredObjectVersionWithPointInTime[];
+  loaded: boolean;
 }
 
 const props = defineProps<HistoryButtonConfig>();
@@ -22,47 +22,47 @@ const state = reactive<HistoryButtonState>({ versions: [], loaded: false });
 const modal = useTemplateRef<typeof HistoryButtonModal>("modal");
 
 const download_version_and_open_modal = async function (): Promise<void> {
-    if (null !== modal.value) {
-        modal.value.open();
-    } else {
-        console.log("modal is null");
-    }
+  if (null !== modal.value) {
+    modal.value.open();
+  } else {
+    console.log("modal is null");
+  }
 
-    if (!state.loaded) {
-        const versions = await get_versions(props.storedObject);
+  if (!state.loaded) {
+    const versions = await get_versions(props.storedObject);
 
-        for (const version of versions) {
-            state.versions.push(version);
-        }
-        state.loaded = true;
+    for (const version of versions) {
+      state.versions.push(version);
     }
+    state.loaded = true;
+  }
 };
 
 const onRestoreVersion = ({
-    newVersion,
+  newVersion,
 }: {
-    newVersion: StoredObjectVersionWithPointInTime;
+  newVersion: StoredObjectVersionWithPointInTime;
 }) => {
-    state.versions.unshift(newVersion);
+  state.versions.unshift(newVersion);
 };
 </script>
 
 <template>
-    <a @click="download_version_and_open_modal" class="dropdown-item">
-        <history-button-modal
-            ref="modal"
-            :versions="state.versions"
-            :stored-object="storedObject"
-            :can-edit="canEdit"
-            @restore-version="onRestoreVersion"
-        ></history-button-modal>
-        <i class="fa fa-history"></i>
-        Historique
-    </a>
+  <a @click="download_version_and_open_modal" class="dropdown-item">
+    <history-button-modal
+      ref="modal"
+      :versions="state.versions"
+      :stored-object="storedObject"
+      :can-edit="canEdit"
+      @restore-version="onRestoreVersion"
+    ></history-button-modal>
+    <i class="fa fa-history"></i>
+    Historique
+  </a>
 </template>
 
 <style scoped lang="scss">
 i.fa::before {
-    color: var(--bs-dropdown-link-hover-color);
+  color: var(--bs-dropdown-link-hover-color);
 }
 </style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
index ac4bf4591..cf70e3db3 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import {
-    StoredObject,
-    StoredObjectVersionWithPointInTime,
+  StoredObject,
+  StoredObjectVersionWithPointInTime,
 } from "./../../../types";
 import HistoryButtonListItem from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue";
 import { computed, reactive } from "vue";
 
 interface HistoryButtonListConfig {
-    versions: StoredObjectVersionWithPointInTime[];
-    storedObject: StoredObject;
-    canEdit: boolean;
+  versions: StoredObjectVersionWithPointInTime[];
+  storedObject: StoredObject;
+  canEdit: boolean;
 }
 
 const emit = defineEmits<{
-    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
+  restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
 }>();
 
 interface HistoryButtonListState {
-    /**
-     * Contains the number of the newly created version when a version is restored.
-     */
-    restored: number;
+  /**
+   * Contains the number of the newly created version when a version is restored.
+   */
+  restored: number;
 }
 
 const props = defineProps<HistoryButtonListConfig>();
@@ -28,11 +28,11 @@ const props = defineProps<HistoryButtonListConfig>();
 const state = reactive<HistoryButtonListState>({ restored: -1 });
 
 const higher_version = computed<number>(() =>
-    props.versions.reduce(
-        (accumulator: number, version: StoredObjectVersionWithPointInTime) =>
-            Math.max(accumulator, version.version),
-        -1,
-    ),
+  props.versions.reduce(
+    (accumulator: number, version: StoredObjectVersionWithPointInTime) =>
+      Math.max(accumulator, version.version),
+    -1,
+  ),
 );
 
 /**
@@ -41,32 +41,32 @@ const higher_version = computed<number>(() =>
  * internally, keep track of the newly restored version
  */
 const onRestored = ({
-    newVersion,
+  newVersion,
 }: {
-    newVersion: StoredObjectVersionWithPointInTime;
+  newVersion: StoredObjectVersionWithPointInTime;
 }) => {
-    state.restored = newVersion.version;
-    emit("restoreVersion", { newVersion });
+  state.restored = newVersion.version;
+  emit("restoreVersion", { newVersion });
 };
 </script>
 
 <template>
-    <template v-if="props.versions.length > 0">
-        <div class="container">
-            <template v-for="v in props.versions" :key="v.id">
-                <history-button-list-item
-                    :version="v"
-                    :can-edit="canEdit"
-                    :is-current="higher_version === v.version"
-                    :stored-object="storedObject"
-                    @restore-version="onRestored"
-                ></history-button-list-item>
-            </template>
-        </div>
-    </template>
-    <template v-else>
-        <p>Chargement des versions</p>
-    </template>
+  <template v-if="props.versions.length > 0">
+    <div class="container">
+      <template v-for="v in props.versions" :key="v.id">
+        <history-button-list-item
+          :version="v"
+          :can-edit="canEdit"
+          :is-current="higher_version === v.version"
+          :stored-object="storedObject"
+          @restore-version="onRestored"
+        ></history-button-list-item>
+      </template>
+    </div>
+  </template>
+  <template v-else>
+    <p>Chargement des versions</p>
+  </template>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
index bf5e3fffb..2a563d853 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
-    StoredObject,
-    StoredObjectPointInTime,
-    StoredObjectVersionWithPointInTime,
+  StoredObject,
+  StoredObjectPointInTime,
+  StoredObjectVersionWithPointInTime,
 } from "./../../../types";
 import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
 import { ISOToDatetime } from "./../../../../../../ChillMainBundle/Resources/public/chill/js/date";
@@ -12,185 +12,173 @@ import DownloadButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/Downloa
 import { computed } from "vue";
 
 interface HistoryButtonListItemConfig {
-    version: StoredObjectVersionWithPointInTime;
-    storedObject: StoredObject;
-    canEdit: boolean;
-    isCurrent: boolean;
+  version: StoredObjectVersionWithPointInTime;
+  storedObject: StoredObject;
+  canEdit: boolean;
+  isCurrent: boolean;
 }
 
 const emit = defineEmits<{
-    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
+  restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
 }>();
 
 const props = defineProps<HistoryButtonListItemConfig>();
 
 const onRestore = ({
-    newVersion,
+  newVersion,
 }: {
-    newVersion: StoredObjectVersionWithPointInTime;
+  newVersion: StoredObjectVersionWithPointInTime;
 }) => {
-    emit("restoreVersion", { newVersion });
+  emit("restoreVersion", { newVersion });
 };
 
 const isKeptBeforeConversion = computed<boolean>(() => {
-    if ("point-in-times" in props.version) {
-        return props.version["point-in-times"].reduce(
-            (accumulator: boolean, pit: StoredObjectPointInTime) =>
-                accumulator || "keep-before-conversion" === pit.reason,
-            false,
-        );
-    } else {
-        return false;
-    }
+  if ("point-in-times" in props.version) {
+    return props.version["point-in-times"].reduce(
+      (accumulator: boolean, pit: StoredObjectPointInTime) =>
+        accumulator || "keep-before-conversion" === pit.reason,
+      false,
+    );
+  } else {
+    return false;
+  }
 });
 
 const isRestored = computed<boolean>(
-    () => props.version.version > 0 && null !== props.version["from-restored"],
+  () => props.version.version > 0 && null !== props.version["from-restored"],
 );
 
 const isDuplicated = computed<boolean>(
-    () =>
-        props.version.version === 0 && null !== props.version["from-restored"],
+  () => props.version.version === 0 && null !== props.version["from-restored"],
 );
 
 const classes = computed<{
-    row: true;
-    "row-hover": true;
-    "blinking-1": boolean;
-    "blinking-2": boolean;
+  row: true;
+  "row-hover": true;
+  "blinking-1": boolean;
+  "blinking-2": boolean;
 }>(() => ({
-    row: true,
-    "row-hover": true,
-    "blinking-1": props.isRestored && 0 === props.version.version % 2,
-    "blinking-2": props.isRestored && 1 === props.version.version % 2,
+  row: true,
+  "row-hover": true,
+  "blinking-1": props.isRestored && 0 === props.version.version % 2,
+  "blinking-2": props.isRestored && 1 === props.version.version % 2,
 }));
 </script>
 
 <template>
-    <div :class="classes">
-        <div
-            class="col-12 tags"
-            v-if="
-                isCurrent ||
-                isKeptBeforeConversion ||
-                isRestored ||
-                isDuplicated
-            "
-        >
-            <span class="badge bg-success" v-if="isCurrent"
-                >Version actuelle</span
-            >
-            <span class="badge bg-info" v-if="isKeptBeforeConversion"
-                >Conservée avant conversion dans un autre format</span
-            >
-            <span class="badge bg-info" v-if="isRestored"
-                >Restaurée depuis la version
-                {{ version["from-restored"]?.version + 1 }}</span
-            >
-            <span class="badge bg-info" v-if="isDuplicated"
-                >Dupliqué depuis un autre document</span
-            >
-        </div>
-        <div class="col-12">
-            <file-icon :type="version.type"></file-icon>
-            <span
-                ><strong>&nbsp;#{{ version.version + 1 }}&nbsp;</strong></span
-            >
-            <template
-                v-if="version.createdBy !== null && version.createdAt !== null"
-                ><strong v-if="version.version == 0">créé par</strong
-                ><strong v-else>modifié par</strong>
-                <span class="badge-user"
-                    ><UserRenderBoxBadge
-                        :user="version.createdBy"
-                    ></UserRenderBoxBadge
-                ></span>
-                <strong>à</strong>
-                {{
-                    $d(ISOToDatetime(version.createdAt.datetime8601), "long")
-                }}</template
-            ><template
-                v-if="version.createdBy === null && version.createdAt !== null"
-                ><strong v-if="version.version == 0">Créé le</strong
-                ><strong v-else>modifié le</strong>
-                {{
-                    $d(ISOToDatetime(version.createdAt.datetime8601), "long")
-                }}</template
-            >
-        </div>
-        <div class="col-12">
-            <ul class="record_actions small slim on-version-actions">
-                <li v-if="canEdit && !isCurrent">
-                    <restore-version-button
-                        :stored-object-version="props.version"
-                        @restore-version="onRestore"
-                    ></restore-version-button>
-                </li>
-                <li>
-                    <download-button
-                        :stored-object="storedObject"
-                        :at-version="version"
-                        :classes="{
-                            btn: true,
-                            'btn-outline-primary': true,
-                            'btn-sm': true,
-                        }"
-                        :display-action-string-in-button="false"
-                    ></download-button>
-                </li>
-            </ul>
-        </div>
+  <div :class="classes">
+    <div
+      class="col-12 tags"
+      v-if="isCurrent || isKeptBeforeConversion || isRestored || isDuplicated"
+    >
+      <span class="badge bg-success" v-if="isCurrent">Version actuelle</span>
+      <span class="badge bg-info" v-if="isKeptBeforeConversion"
+        >Conservée avant conversion dans un autre format</span
+      >
+      <span class="badge bg-info" v-if="isRestored"
+        >Restaurée depuis la version
+        {{ version["from-restored"]?.version + 1 }}</span
+      >
+      <span class="badge bg-info" v-if="isDuplicated"
+        >Dupliqué depuis un autre document</span
+      >
     </div>
+    <div class="col-12">
+      <file-icon :type="version.type"></file-icon>
+      <span
+        ><strong>&nbsp;#{{ version.version + 1 }}&nbsp;</strong></span
+      >
+      <template v-if="version.createdBy !== null && version.createdAt !== null"
+        ><strong v-if="version.version == 0">créé par</strong
+        ><strong v-else>modifié par</strong>
+        <span class="badge-user"
+          ><UserRenderBoxBadge :user="version.createdBy"></UserRenderBoxBadge
+        ></span>
+        <strong>à</strong>
+        {{
+          $d(ISOToDatetime(version.createdAt.datetime8601), "long")
+        }}</template
+      ><template v-if="version.createdBy === null && version.createdAt !== null"
+        ><strong v-if="version.version == 0">Créé le</strong
+        ><strong v-else>modifié le</strong>
+        {{
+          $d(ISOToDatetime(version.createdAt.datetime8601), "long")
+        }}</template
+      >
+    </div>
+    <div class="col-12">
+      <ul class="record_actions small slim on-version-actions">
+        <li v-if="canEdit && !isCurrent">
+          <restore-version-button
+            :stored-object-version="props.version"
+            @restore-version="onRestore"
+          ></restore-version-button>
+        </li>
+        <li>
+          <download-button
+            :stored-object="storedObject"
+            :at-version="version"
+            :classes="{
+              btn: true,
+              'btn-outline-primary': true,
+              'btn-sm': true,
+            }"
+            :display-action-string-in-button="false"
+          ></download-button>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 div.tags {
-    span.badge:not(:last-child) {
-        margin-right: 0.5rem;
-    }
+  span.badge:not(:last-child) {
+    margin-right: 0.5rem;
+  }
 }
 // to make the animation restart, we have the same animation twice,
 // and alternate between both
 .blinking-1 {
-    animation-name: backgroundColorPalette-1;
-    animation-duration: 8s;
-    animation-iteration-count: 1;
-    animation-direction: normal;
-    animation-timing-function: linear;
+  animation-name: backgroundColorPalette-1;
+  animation-duration: 8s;
+  animation-iteration-count: 1;
+  animation-direction: normal;
+  animation-timing-function: linear;
 }
 @keyframes backgroundColorPalette-1 {
-    0% {
-        background: var(--bs-chill-green-dark);
-    }
-    25% {
-        background: var(--bs-chill-green);
-    }
-    65% {
-        background: var(--bs-chill-beige);
-    }
-    100% {
-        background: unset;
-    }
+  0% {
+    background: var(--bs-chill-green-dark);
+  }
+  25% {
+    background: var(--bs-chill-green);
+  }
+  65% {
+    background: var(--bs-chill-beige);
+  }
+  100% {
+    background: unset;
+  }
 }
 .blinking-2 {
-    animation-name: backgroundColorPalette-2;
-    animation-duration: 8s;
-    animation-iteration-count: 1;
-    animation-direction: normal;
-    animation-timing-function: linear;
+  animation-name: backgroundColorPalette-2;
+  animation-duration: 8s;
+  animation-iteration-count: 1;
+  animation-direction: normal;
+  animation-timing-function: linear;
 }
 @keyframes backgroundColorPalette-2 {
-    0% {
-        background: var(--bs-chill-green-dark);
-    }
-    25% {
-        background: var(--bs-chill-green);
-    }
-    65% {
-        background: var(--bs-chill-beige);
-    }
-    100% {
-        background: unset;
-    }
+  0% {
+    background: var(--bs-chill-green-dark);
+  }
+  25% {
+    background: var(--bs-chill-green);
+  }
+  65% {
+    background: var(--bs-chill-beige);
+  }
+  100% {
+    background: unset;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
index b9535ca2e..0d9a951e5 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
@@ -3,54 +3,54 @@ import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import { reactive } from "vue";
 import HistoryButtonList from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue";
 import {
-    StoredObject,
-    StoredObjectVersionWithPointInTime,
+  StoredObject,
+  StoredObjectVersionWithPointInTime,
 } from "./../../../types";
 
 interface HistoryButtonListConfig {
-    versions: StoredObjectVersionWithPointInTime[];
-    storedObject: StoredObject;
-    canEdit: boolean;
+  versions: StoredObjectVersionWithPointInTime[];
+  storedObject: StoredObject;
+  canEdit: boolean;
 }
 
 const emit = defineEmits<{
-    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
+  restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
 }>();
 
 interface HistoryButtonModalState {
-    opened: boolean;
+  opened: boolean;
 }
 
 const props = defineProps<HistoryButtonListConfig>();
 const state = reactive<HistoryButtonModalState>({ opened: false });
 
 const open = () => {
-    state.opened = true;
+  state.opened = true;
 };
 
 const onRestoreVersion = (payload: {
-    newVersion: StoredObjectVersionWithPointInTime;
+  newVersion: StoredObjectVersionWithPointInTime;
 }) => emit("restoreVersion", payload);
 
 defineExpose({ open });
 </script>
 <template>
-    <Teleport to="body">
-        <modal v-if="state.opened" @close="state.opened = false">
-            <template v-slot:header>
-                <h3>Historique des versions du document</h3>
-            </template>
-            <template v-slot:body>
-                <p>Les versions sont conservées pendant 90 jours.</p>
-                <history-button-list
-                    :versions="props.versions"
-                    :can-edit="canEdit"
-                    :stored-object="storedObject"
-                    @restore-version="onRestoreVersion"
-                ></history-button-list>
-            </template>
-        </modal>
-    </Teleport>
+  <Teleport to="body">
+    <modal v-if="state.opened" @close="state.opened = false">
+      <template v-slot:header>
+        <h3>Historique des versions du document</h3>
+      </template>
+      <template v-slot:body>
+        <p>Les versions sont conservées pendant 90 jours.</p>
+        <history-button-list
+          :versions="props.versions"
+          :can-edit="canEdit"
+          :stored-object="storedObject"
+          @restore-version="onRestoreVersion"
+        ></history-button-list>
+      </template>
+    </modal>
+  </Teleport>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue
index 41ae8e978..595d3781a 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import {
-    StoredObjectVersionPersisted,
-    StoredObjectVersionWithPointInTime,
+  StoredObjectVersionPersisted,
+  StoredObjectVersionWithPointInTime,
 } from "../../../types";
 import { useToast } from "vue-toast-notification";
 import { restore_version } from "./api";
 
 interface RestoreVersionButtonProps {
-    storedObjectVersion: StoredObjectVersionPersisted;
+  storedObjectVersion: StoredObjectVersionPersisted;
 }
 
 const emit = defineEmits<{
-    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
+  restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
 }>();
 
 const props = defineProps<RestoreVersionButtonProps>();
@@ -19,21 +19,21 @@ const props = defineProps<RestoreVersionButtonProps>();
 const $toast = useToast();
 
 const restore_version_fn = async () => {
-    const newVersion = await restore_version(props.storedObjectVersion);
+  const newVersion = await restore_version(props.storedObjectVersion);
 
-    $toast.success("Version restaurée");
-    emit("restoreVersion", { newVersion });
+  $toast.success("Version restaurée");
+  emit("restoreVersion", { newVersion });
 };
 </script>
 
 <template>
-    <button
-        class="btn btn-outline-action"
-        @click="restore_version_fn"
-        title="Restaurer"
-    >
-        <i class="fa fa-rotate-left"></i> Restaurer
-    </button>
+  <button
+    class="btn btn-outline-action"
+    @click="restore_version_fn"
+    title="Restaurer"
+  >
+    <i class="fa fa-rotate-left"></i> Restaurer
+  </button>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts
index cb7581eab..b003e26b7 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts
@@ -1,33 +1,33 @@
 import {
-    StoredObject,
-    StoredObjectVersionPersisted,
-    StoredObjectVersionWithPointInTime,
+  StoredObject,
+  StoredObjectVersionPersisted,
+  StoredObjectVersionWithPointInTime,
 } from "../../../types";
 import {
-    fetchResults,
-    makeFetch,
+  fetchResults,
+  makeFetch,
 } from "../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 
 export const get_versions = async (
-    storedObject: StoredObject,
+  storedObject: StoredObject,
 ): Promise<StoredObjectVersionWithPointInTime[]> => {
-    const versions = await fetchResults<StoredObjectVersionWithPointInTime>(
-        `/api/1.0/doc-store/stored-object/${storedObject.uuid}/versions`,
-    );
+  const versions = await fetchResults<StoredObjectVersionWithPointInTime>(
+    `/api/1.0/doc-store/stored-object/${storedObject.uuid}/versions`,
+  );
 
-    return versions.sort(
-        (
-            a: StoredObjectVersionWithPointInTime,
-            b: StoredObjectVersionWithPointInTime,
-        ) => b.version - a.version,
-    );
+  return versions.sort(
+    (
+      a: StoredObjectVersionWithPointInTime,
+      b: StoredObjectVersionWithPointInTime,
+    ) => b.version - a.version,
+  );
 };
 
 export const restore_version = async (
-    version: StoredObjectVersionPersisted,
+  version: StoredObjectVersionPersisted,
 ): Promise<StoredObjectVersionWithPointInTime> => {
-    return await makeFetch<null, StoredObjectVersionWithPointInTime>(
-        "POST",
-        `/api/1.0/doc-store/stored-object/restore-from-version/${version.id}`,
-    );
+  return await makeFetch<null, StoredObjectVersionWithPointInTime>(
+    "POST",
+    `/api/1.0/doc-store/stored-object/restore-from-version/${version.id}`,
+  );
 };
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/WopiEditButton.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/WopiEditButton.vue
index b57c1f188..97073e4e1 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/WopiEditButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/WopiEditButton.vue
@@ -1,29 +1,27 @@
 <template>
-    <a
-        :class="Object.assign(props.classes, { btn: true })"
-        @click="beforeLeave($event)"
-        :href="
-            build_wopi_editor_link(props.storedObject.uuid, props.returnPath)
-        "
-    >
-        <i class="fa fa-paragraph"></i>
-        Editer en ligne
-    </a>
+  <a
+    :class="Object.assign(props.classes, { btn: true })"
+    @click="beforeLeave($event)"
+    :href="build_wopi_editor_link(props.storedObject.uuid, props.returnPath)"
+  >
+    <i class="fa fa-paragraph"></i>
+    Editer en ligne
+  </a>
 </template>
 
 <script lang="ts" setup>
 import WopiEditButton from "./WopiEditButton.vue";
 import { build_wopi_editor_link } from "./helpers";
 import {
-    StoredObject,
-    WopiEditButtonExecutableBeforeLeaveFunction,
+  StoredObject,
+  WopiEditButtonExecutableBeforeLeaveFunction,
 } from "../../types";
 
 interface WopiEditButtonConfig {
-    storedObject: StoredObject;
-    returnPath?: string;
-    classes: Record<string, boolean>;
-    executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;
+  storedObject: StoredObject;
+  returnPath?: string;
+  classes: Record<string, boolean>;
+  executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;
 }
 
 const props = defineProps<WopiEditButtonConfig>();
@@ -31,24 +29,24 @@ const props = defineProps<WopiEditButtonConfig>();
 let executed = false;
 
 async function beforeLeave(event: Event): Promise<true> {
-    if (props.executeBeforeLeave === undefined || executed === true) {
-        return Promise.resolve(true);
-    }
-
-    event.preventDefault();
-
-    await props.executeBeforeLeave();
-    executed = true;
-
-    const link = event.target as HTMLAnchorElement;
-    link.click();
-
+  if (props.executeBeforeLeave === undefined || executed === true) {
     return Promise.resolve(true);
+  }
+
+  event.preventDefault();
+
+  await props.executeBeforeLeave();
+  executed = true;
+
+  const link = event.target as HTMLAnchorElement;
+  link.click();
+
+  return Promise.resolve(true);
 }
 </script>
 
 <style scoped lang="scss">
 i.fa::before {
-    color: var(--bs-dropdown-link-hover-color);
+  color: var(--bs-dropdown-link-hover-color);
 }
 </style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts
index ff1e6219d..aceaa038b 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts
@@ -1,235 +1,230 @@
 import {
-    StoredObject,
-    StoredObjectStatus,
-    StoredObjectStatusChange,
-    StoredObjectVersion,
+  StoredObject,
+  StoredObjectStatus,
+  StoredObjectStatusChange,
+  StoredObjectVersion,
 } from "../../types";
 import { makeFetch } from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 
 const MIMES_EDIT = new Set([
-    "application/vnd.ms-powerpoint",
-    "application/vnd.ms-excel",
-    "application/vnd.oasis.opendocument.text",
-    "application/vnd.oasis.opendocument.text-flat-xml",
-    "application/vnd.oasis.opendocument.spreadsheet",
-    "application/vnd.oasis.opendocument.spreadsheet-flat-xml",
-    "application/vnd.oasis.opendocument.presentation",
-    "application/vnd.oasis.opendocument.presentation-flat-xml",
-    "application/vnd.oasis.opendocument.graphics",
-    "application/vnd.oasis.opendocument.graphics-flat-xml",
-    "application/vnd.oasis.opendocument.chart",
-    "application/msword",
-    "application/vnd.ms-excel",
-    "application/vnd.ms-powerpoint",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    "application/vnd.ms-word.document.macroEnabled.12",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
-    "application/vnd.ms-excel.sheet.macroEnabled.12",
-    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
-    "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
-    "application/x-dif-document",
-    "text/spreadsheet",
-    "text/csv",
-    "application/x-dbase",
-    "text/rtf",
-    "text/plain",
-    "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.ms-excel",
+  "application/vnd.oasis.opendocument.text",
+  "application/vnd.oasis.opendocument.text-flat-xml",
+  "application/vnd.oasis.opendocument.spreadsheet",
+  "application/vnd.oasis.opendocument.spreadsheet-flat-xml",
+  "application/vnd.oasis.opendocument.presentation",
+  "application/vnd.oasis.opendocument.presentation-flat-xml",
+  "application/vnd.oasis.opendocument.graphics",
+  "application/vnd.oasis.opendocument.graphics-flat-xml",
+  "application/vnd.oasis.opendocument.chart",
+  "application/msword",
+  "application/vnd.ms-excel",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.ms-word.document.macroEnabled.12",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
+  "application/vnd.ms-excel.sheet.macroEnabled.12",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
+  "application/x-dif-document",
+  "text/spreadsheet",
+  "text/csv",
+  "application/x-dbase",
+  "text/rtf",
+  "text/plain",
+  "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
 ]);
 
 const MIMES_VIEW = new Set([
-    ...MIMES_EDIT,
-    [
-        "image/svg+xml",
-        "application/vnd.sun.xml.writer",
-        "application/vnd.sun.xml.calc",
-        "application/vnd.sun.xml.impress",
-        "application/vnd.sun.xml.draw",
-        "application/vnd.sun.xml.writer.global",
-        "application/vnd.sun.xml.writer.template",
-        "application/vnd.sun.xml.calc.template",
-        "application/vnd.sun.xml.impress.template",
-        "application/vnd.sun.xml.draw.template",
-        "application/vnd.oasis.opendocument.text-master",
-        "application/vnd.oasis.opendocument.text-template",
-        "application/vnd.oasis.opendocument.text-master-template",
-        "application/vnd.oasis.opendocument.spreadsheet-template",
-        "application/vnd.oasis.opendocument.presentation-template",
-        "application/vnd.oasis.opendocument.graphics-template",
-        "application/vnd.ms-word.template.macroEnabled.12",
-        "application/vnd.openxmlformats-officedocument.spreadsheetml.template",
-        "application/vnd.ms-excel.template.macroEnabled.12",
-        "application/vnd.openxmlformats-officedocument.presentationml.template",
-        "application/vnd.ms-powerpoint.template.macroEnabled.12",
-        "application/vnd.wordperfect",
-        "application/x-aportisdoc",
-        "application/x-hwp",
-        "application/vnd.ms-works",
-        "application/x-mswrite",
-        "application/vnd.lotus-1-2-3",
-        "image/cgm",
-        "image/vnd.dxf",
-        "image/x-emf",
-        "image/x-wmf",
-        "application/coreldraw",
-        "application/vnd.visio2013",
-        "application/vnd.visio",
-        "application/vnd.ms-visio.drawing",
-        "application/x-mspublisher",
-        "application/x-sony-bbeb",
-        "application/x-gnumeric",
-        "application/macwriteii",
-        "application/x-iwork-numbers-sffnumbers",
-        "application/vnd.oasis.opendocument.text-web",
-        "application/x-pagemaker",
-        "application/x-fictionbook+xml",
-        "application/clarisworks",
-        "image/x-wpg",
-        "application/x-iwork-pages-sffpages",
-        "application/x-iwork-keynote-sffkey",
-        "application/x-abiword",
-        "image/x-freehand",
-        "application/vnd.sun.xml.chart",
-        "application/x-t602",
-        "image/bmp",
-        "image/png",
-        "image/gif",
-        "image/tiff",
-        "image/jpg",
-        "image/jpeg",
-        "application/pdf",
-    ],
+  ...MIMES_EDIT,
+  [
+    "image/svg+xml",
+    "application/vnd.sun.xml.writer",
+    "application/vnd.sun.xml.calc",
+    "application/vnd.sun.xml.impress",
+    "application/vnd.sun.xml.draw",
+    "application/vnd.sun.xml.writer.global",
+    "application/vnd.sun.xml.writer.template",
+    "application/vnd.sun.xml.calc.template",
+    "application/vnd.sun.xml.impress.template",
+    "application/vnd.sun.xml.draw.template",
+    "application/vnd.oasis.opendocument.text-master",
+    "application/vnd.oasis.opendocument.text-template",
+    "application/vnd.oasis.opendocument.text-master-template",
+    "application/vnd.oasis.opendocument.spreadsheet-template",
+    "application/vnd.oasis.opendocument.presentation-template",
+    "application/vnd.oasis.opendocument.graphics-template",
+    "application/vnd.ms-word.template.macroEnabled.12",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.template",
+    "application/vnd.ms-excel.template.macroEnabled.12",
+    "application/vnd.openxmlformats-officedocument.presentationml.template",
+    "application/vnd.ms-powerpoint.template.macroEnabled.12",
+    "application/vnd.wordperfect",
+    "application/x-aportisdoc",
+    "application/x-hwp",
+    "application/vnd.ms-works",
+    "application/x-mswrite",
+    "application/vnd.lotus-1-2-3",
+    "image/cgm",
+    "image/vnd.dxf",
+    "image/x-emf",
+    "image/x-wmf",
+    "application/coreldraw",
+    "application/vnd.visio2013",
+    "application/vnd.visio",
+    "application/vnd.ms-visio.drawing",
+    "application/x-mspublisher",
+    "application/x-sony-bbeb",
+    "application/x-gnumeric",
+    "application/macwriteii",
+    "application/x-iwork-numbers-sffnumbers",
+    "application/vnd.oasis.opendocument.text-web",
+    "application/x-pagemaker",
+    "application/x-fictionbook+xml",
+    "application/clarisworks",
+    "image/x-wpg",
+    "application/x-iwork-pages-sffpages",
+    "application/x-iwork-keynote-sffkey",
+    "application/x-abiword",
+    "image/x-freehand",
+    "application/vnd.sun.xml.chart",
+    "application/x-t602",
+    "image/bmp",
+    "image/png",
+    "image/gif",
+    "image/tiff",
+    "image/jpg",
+    "image/jpeg",
+    "application/pdf",
+  ],
 ]);
 
 export interface SignedUrlGet {
-    method: "GET" | "HEAD";
-    url: string;
-    expires: number;
-    object_name: string;
+  method: "GET" | "HEAD";
+  url: string;
+  expires: number;
+  object_name: string;
 }
 
 function is_extension_editable(mimeType: string): boolean {
-    return MIMES_EDIT.has(mimeType);
+  return MIMES_EDIT.has(mimeType);
 }
 
 function is_extension_viewable(mimeType: string): boolean {
-    return MIMES_VIEW.has(mimeType);
+  return MIMES_VIEW.has(mimeType);
 }
 
 function build_convert_link(uuid: string) {
-    return `/chill/wopi/convert/${uuid}`;
+  return `/chill/wopi/convert/${uuid}`;
 }
 
 function build_download_info_link(
-    storedObject: StoredObject,
-    atVersion: null | StoredObjectVersion,
+  storedObject: StoredObject,
+  atVersion: null | StoredObjectVersion,
 ): string {
-    const url = `/api/1.0/doc-store/async-upload/temp_url/${storedObject.uuid}/generate/get`;
+  const url = `/api/1.0/doc-store/async-upload/temp_url/${storedObject.uuid}/generate/get`;
 
-    if (null !== atVersion) {
-        const params = new URLSearchParams({ version: atVersion.filename });
+  if (null !== atVersion) {
+    const params = new URLSearchParams({ version: atVersion.filename });
 
-        return url + "?" + params.toString();
-    }
+    return url + "?" + params.toString();
+  }
 
-    return url;
+  return url;
 }
 
 async function download_info_link(
-    storedObject: StoredObject,
-    atVersion: null | StoredObjectVersion,
+  storedObject: StoredObject,
+  atVersion: null | StoredObjectVersion,
 ): Promise<SignedUrlGet> {
-    return makeFetch("GET", build_download_info_link(storedObject, atVersion));
+  return makeFetch("GET", build_download_info_link(storedObject, atVersion));
 }
 
 function build_wopi_editor_link(uuid: string, returnPath?: string) {
-    if (returnPath === undefined) {
-        returnPath =
-            window.location.pathname +
-            window.location.search +
-            window.location.hash;
-    }
+  if (returnPath === undefined) {
+    returnPath =
+      window.location.pathname + window.location.search + window.location.hash;
+  }
 
-    return (
-        `/chill/wopi/edit/${uuid}?returnPath=` + encodeURIComponent(returnPath)
-    );
+  return (
+    `/chill/wopi/edit/${uuid}?returnPath=` + encodeURIComponent(returnPath)
+  );
 }
 
 function download_doc(url: string): Promise<Blob> {
-    return window.fetch(url).then((r) => {
-        if (r.ok) {
-            return r.blob();
-        }
+  return window.fetch(url).then((r) => {
+    if (r.ok) {
+      return r.blob();
+    }
 
-        throw new Error("Could not download document");
-    });
+    throw new Error("Could not download document");
+  });
 }
 
 async function download_and_decrypt_doc(
-    storedObject: StoredObject,
-    atVersion: null | StoredObjectVersion,
+  storedObject: StoredObject,
+  atVersion: null | StoredObjectVersion,
 ): Promise<Blob> {
-    const algo = "AES-CBC";
+  const algo = "AES-CBC";
 
-    const atVersionToDownload = atVersion ?? storedObject.currentVersion;
+  const atVersionToDownload = atVersion ?? storedObject.currentVersion;
 
-    if (null === atVersionToDownload) {
-        throw new Error("no version associated to stored object");
-    }
+  if (null === atVersionToDownload) {
+    throw new Error("no version associated to stored object");
+  }
 
-    // sometimes, the downloadInfo may be embedded into the storedObject
-    console.log("storedObject", storedObject);
-    let downloadInfo;
-    if (
-        typeof storedObject._links !== "undefined" &&
-        typeof storedObject._links.downloadLink !== "undefined"
-    ) {
-        downloadInfo = storedObject._links.downloadLink;
-    } else {
-        downloadInfo = await download_info_link(
-            storedObject,
-            atVersionToDownload,
-        );
-    }
+  // sometimes, the downloadInfo may be embedded into the storedObject
+  console.log("storedObject", storedObject);
+  let downloadInfo;
+  if (
+    typeof storedObject._links !== "undefined" &&
+    typeof storedObject._links.downloadLink !== "undefined"
+  ) {
+    downloadInfo = storedObject._links.downloadLink;
+  } else {
+    downloadInfo = await download_info_link(storedObject, atVersionToDownload);
+  }
 
-    const rawResponse = await window.fetch(downloadInfo.url);
+  const rawResponse = await window.fetch(downloadInfo.url);
 
-    if (!rawResponse.ok) {
-        throw new Error(
-            "error while downloading raw file " +
-                rawResponse.status +
-                " " +
-                rawResponse.statusText,
-        );
-    }
+  if (!rawResponse.ok) {
+    throw new Error(
+      "error while downloading raw file " +
+        rawResponse.status +
+        " " +
+        rawResponse.statusText,
+    );
+  }
 
-    if (atVersionToDownload.iv.length === 0) {
-        return rawResponse.blob();
-    }
+  if (atVersionToDownload.iv.length === 0) {
+    return rawResponse.blob();
+  }
 
-    const rawBuffer = await rawResponse.arrayBuffer();
-    try {
-        const key = await window.crypto.subtle.importKey(
-            "jwk",
-            atVersionToDownload.keyInfos,
-            { name: algo },
-            false,
-            ["decrypt"],
-        );
-        const iv = Uint8Array.from(atVersionToDownload.iv);
-        const decrypted = await window.crypto.subtle.decrypt(
-            { name: algo, iv: iv },
-            key,
-            rawBuffer,
-        );
+  const rawBuffer = await rawResponse.arrayBuffer();
+  try {
+    const key = await window.crypto.subtle.importKey(
+      "jwk",
+      atVersionToDownload.keyInfos,
+      { name: algo },
+      false,
+      ["decrypt"],
+    );
+    const iv = Uint8Array.from(atVersionToDownload.iv);
+    const decrypted = await window.crypto.subtle.decrypt(
+      { name: algo, iv: iv },
+      key,
+      rawBuffer,
+    );
 
-        return Promise.resolve(new Blob([decrypted]));
-    } catch (e) {
-        console.error("encounter error while keys and decrypt operations");
-        console.error(e);
+    return Promise.resolve(new Blob([decrypted]));
+  } catch (e) {
+    console.error("encounter error while keys and decrypt operations");
+    console.error(e);
 
-        throw e;
-    }
+    throw e;
+  }
 }
 
 /**
@@ -239,48 +234,45 @@ async function download_and_decrypt_doc(
  * storage.
  */
 async function download_doc_as_pdf(storedObject: StoredObject): Promise<Blob> {
-    if (null === storedObject.currentVersion) {
-        throw new Error("the stored object does not count any version");
-    }
+  if (null === storedObject.currentVersion) {
+    throw new Error("the stored object does not count any version");
+  }
 
-    if (storedObject.currentVersion?.type === "application/pdf") {
-        return download_and_decrypt_doc(
-            storedObject,
-            storedObject.currentVersion,
-        );
-    }
+  if (storedObject.currentVersion?.type === "application/pdf") {
+    return download_and_decrypt_doc(storedObject, storedObject.currentVersion);
+  }
 
-    const convertLink = build_convert_link(storedObject.uuid);
-    const response = await fetch(convertLink);
+  const convertLink = build_convert_link(storedObject.uuid);
+  const response = await fetch(convertLink);
 
-    if (!response.ok) {
-        throw new Error("Could not convert the document: " + response.status);
-    }
+  if (!response.ok) {
+    throw new Error("Could not convert the document: " + response.status);
+  }
 
-    return response.blob();
+  return response.blob();
 }
 
 async function is_object_ready(
-    storedObject: StoredObject,
+  storedObject: StoredObject,
 ): Promise<StoredObjectStatusChange> {
-    const new_status_response = await window.fetch(
-        `/api/1.0/doc-store/stored-object/${storedObject.uuid}/is-ready`,
-    );
+  const new_status_response = await window.fetch(
+    `/api/1.0/doc-store/stored-object/${storedObject.uuid}/is-ready`,
+  );
 
-    if (!new_status_response.ok) {
-        throw new Error("could not fetch the new status");
-    }
+  if (!new_status_response.ok) {
+    throw new Error("could not fetch the new status");
+  }
 
-    return await new_status_response.json();
+  return await new_status_response.json();
 }
 
 export {
-    build_convert_link,
-    build_wopi_editor_link,
-    download_and_decrypt_doc,
-    download_doc,
-    download_doc_as_pdf,
-    is_extension_editable,
-    is_extension_viewable,
-    is_object_ready,
+  build_convert_link,
+  build_wopi_editor_link,
+  download_and_decrypt_doc,
+  download_doc,
+  download_doc_as_pdf,
+  is_extension_editable,
+  is_extension_viewable,
+  is_object_ready,
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/js/date.ts b/src/Bundle/ChillMainBundle/Resources/public/chill/js/date.ts
index 8a0d7cce0..233d802a0 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/js/date.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/js/date.ts
@@ -13,15 +13,15 @@
  *
  */
 export const dateToISO = (date: Date | null): string | null => {
-    if (null === date) {
-        return null;
-    }
+  if (null === date) {
+    return null;
+  }
 
-    return [
-        date.getFullYear(),
-        (date.getMonth() + 1).toString().padStart(2, "0"),
-        date.getDate().toString().padStart(2, "0"),
-    ].join("-");
+  return [
+    date.getFullYear(),
+    (date.getMonth() + 1).toString().padStart(2, "0"),
+    date.getDate().toString().padStart(2, "0"),
+  ].join("-");
 };
 
 /**
@@ -30,16 +30,16 @@ export const dateToISO = (date: Date | null): string | null => {
  * **Experimental**
  */
 export const ISOToDate = (str: string | null): Date | null => {
-    if (null === str) {
-        return null;
-    }
-    if ("" === str.trim()) {
-        return null;
-    }
+  if (null === str) {
+    return null;
+  }
+  if ("" === str.trim()) {
+    return null;
+  }
 
-    const [year, month, day] = str.split("-").map((p) => parseInt(p));
+  const [year, month, day] = str.split("-").map((p) => parseInt(p));
 
-    return new Date(year, month - 1, day, 0, 0, 0, 0);
+  return new Date(year, month - 1, day, 0, 0, 0, 0);
 };
 
 /**
@@ -47,21 +47,19 @@ export const ISOToDate = (str: string | null): Date | null => {
  *
  */
 export const ISOToDatetime = (str: string | null): Date | null => {
-    if (null === str) {
-        return null;
-    }
+  if (null === str) {
+    return null;
+  }
 
-    const [cal, times] = str.split("T"),
-        [year, month, date] = cal.split("-").map((s) => parseInt(s)),
-        [time, timezone] = times.split(times.charAt(8)),
-        [hours, minutes, seconds] = time.split(":").map((s) => parseInt(s));
-    if ("0000" === timezone) {
-        return new Date(
-            Date.UTC(year, month - 1, date, hours, minutes, seconds),
-        );
-    }
+  const [cal, times] = str.split("T"),
+    [year, month, date] = cal.split("-").map((s) => parseInt(s)),
+    [time, timezone] = times.split(times.charAt(8)),
+    [hours, minutes, seconds] = time.split(":").map((s) => parseInt(s));
+  if ("0000" === timezone) {
+    return new Date(Date.UTC(year, month - 1, date, hours, minutes, seconds));
+  }
 
-    return new Date(year, month - 1, date, hours, minutes, seconds);
+  return new Date(year, month - 1, date, hours, minutes, seconds);
 };
 
 /**
@@ -69,96 +67,94 @@ export const ISOToDatetime = (str: string | null): Date | null => {
  *
  */
 export const datetimeToISO = (date: Date): string => {
-    let cal, time, offset;
-    cal = [
-        date.getFullYear(),
-        (date.getMonth() + 1).toString().padStart(2, "0"),
-        date.getDate().toString().padStart(2, "0"),
-    ].join("-");
+  let cal, time, offset;
+  cal = [
+    date.getFullYear(),
+    (date.getMonth() + 1).toString().padStart(2, "0"),
+    date.getDate().toString().padStart(2, "0"),
+  ].join("-");
 
-    time = [
-        date.getHours().toString().padStart(2, "0"),
-        date.getMinutes().toString().padStart(2, "0"),
-        date.getSeconds().toString().padStart(2, "0"),
-    ].join(":");
+  time = [
+    date.getHours().toString().padStart(2, "0"),
+    date.getMinutes().toString().padStart(2, "0"),
+    date.getSeconds().toString().padStart(2, "0"),
+  ].join(":");
 
-    offset = [
-        date.getTimezoneOffset() <= 0 ? "+" : "-",
-        Math.abs(Math.floor(date.getTimezoneOffset() / 60))
-            .toString()
-            .padStart(2, "0"),
-        ":",
-        Math.abs(date.getTimezoneOffset() % 60)
-            .toString()
-            .padStart(2, "0"),
-    ].join("");
+  offset = [
+    date.getTimezoneOffset() <= 0 ? "+" : "-",
+    Math.abs(Math.floor(date.getTimezoneOffset() / 60))
+      .toString()
+      .padStart(2, "0"),
+    ":",
+    Math.abs(date.getTimezoneOffset() % 60)
+      .toString()
+      .padStart(2, "0"),
+  ].join("");
 
-    const x = cal + "T" + time + offset;
+  const x = cal + "T" + time + offset;
 
-    return x;
+  return x;
 };
 
 export const intervalDaysToISO = (days: number | string | null): string => {
-    if (null === days) {
-        return "P0D";
-    }
+  if (null === days) {
+    return "P0D";
+  }
 
-    return `P${days}D`;
+  return `P${days}D`;
 };
 
 export const intervalISOToDays = (str: string | null): number | null => {
-    if (null === str) {
-        return null;
-    }
+  if (null === str) {
+    return null;
+  }
 
-    if ("" === str.trim()) {
-        return null;
-    }
+  if ("" === str.trim()) {
+    return null;
+  }
 
-    let days = 0;
-    let isDate = true;
-    let vstring = "";
-    for (let i = 0; i < str.length; i = i + 1) {
-        if (!isDate) {
-            continue;
-        }
-        switch (str.charAt(i)) {
-            case "P":
-                isDate = true;
-                break;
-            case "T":
-                isDate = false;
-                break;
-            case "0":
-            case "1":
-            case "2":
-            case "3":
-            case "4":
-            case "5":
-            case "6":
-            case "7":
-            case "8":
-            case "9":
-                vstring = vstring + str.charAt(i);
-                break;
-            case "Y":
-                days = days + Number.parseInt(vstring) * 365;
-                vstring = "";
-                break;
-            case "M":
-                days = days + Number.parseInt(vstring) * 30;
-                vstring = "";
-                break;
-            case "D":
-                days = days + Number.parseInt(vstring);
-                vstring = "";
-                break;
-            default:
-                throw Error(
-                    "this character should not appears: " + str.charAt(i),
-                );
-        }
+  let days = 0;
+  let isDate = true;
+  let vstring = "";
+  for (let i = 0; i < str.length; i = i + 1) {
+    if (!isDate) {
+      continue;
     }
+    switch (str.charAt(i)) {
+      case "P":
+        isDate = true;
+        break;
+      case "T":
+        isDate = false;
+        break;
+      case "0":
+      case "1":
+      case "2":
+      case "3":
+      case "4":
+      case "5":
+      case "6":
+      case "7":
+      case "8":
+      case "9":
+        vstring = vstring + str.charAt(i);
+        break;
+      case "Y":
+        days = days + Number.parseInt(vstring) * 365;
+        vstring = "";
+        break;
+      case "M":
+        days = days + Number.parseInt(vstring) * 30;
+        vstring = "";
+        break;
+      case "D":
+        days = days + Number.parseInt(vstring);
+        vstring = "";
+        break;
+      default:
+        throw Error("this character should not appears: " + str.charAt(i));
+    }
+  }
 
-    return days;
+  return days;
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/address.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/api/address.ts
index 896cbd323..864f6cd52 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/address.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/address.ts
@@ -1,61 +1,61 @@
 import {
-    Address,
-    GeographicalUnitLayer,
-    SimpleGeographicalUnit,
+  Address,
+  GeographicalUnitLayer,
+  SimpleGeographicalUnit,
 } from "../../types";
 import { fetchResults, makeFetch } from "./apiMethods";
 
 export const getAddressById = async (address_id: number): Promise<Address> => {
-    const url = `/api/1.0/main/address/${address_id}.json`;
+  const url = `/api/1.0/main/address/${address_id}.json`;
 
-    const response = await fetch(url);
+  const response = await fetch(url);
 
-    if (response.ok) {
-        return response.json();
-    }
+  if (response.ok) {
+    return response.json();
+  }
 
-    throw Error("Error with request resource response");
+  throw Error("Error with request resource response");
 };
 
 export const getGeographicalUnitsByAddress = async (
-    address: Address,
+  address: Address,
 ): Promise<SimpleGeographicalUnit[]> => {
-    return fetchResults<SimpleGeographicalUnit>(
-        `/api/1.0/main/geographical-unit/by-address/${address.address_id}.json`,
-    );
+  return fetchResults<SimpleGeographicalUnit>(
+    `/api/1.0/main/geographical-unit/by-address/${address.address_id}.json`,
+  );
 };
 
 export const getAllGeographicalUnitLayers = async (): Promise<
-    GeographicalUnitLayer[]
+  GeographicalUnitLayer[]
 > => {
-    return fetchResults<GeographicalUnitLayer>(
-        `/api/1.0/main/geographical-unit-layer.json`,
-    );
+  return fetchResults<GeographicalUnitLayer>(
+    `/api/1.0/main/geographical-unit-layer.json`,
+  );
 };
 
 export const syncAddressWithReference = async (
-    address: Address,
+  address: Address,
 ): Promise<Address> => {
-    return makeFetch<null, Address>(
-        "POST",
-        `/api/1.0/main/address/reference-match/${address.address_id}/sync-with-reference`,
-    );
+  return makeFetch<null, Address>(
+    "POST",
+    `/api/1.0/main/address/reference-match/${address.address_id}/sync-with-reference`,
+  );
 };
 
 export const markAddressReviewed = async (
-    address: Address,
+  address: Address,
 ): Promise<Address> => {
-    return makeFetch<null, Address>(
-        "POST",
-        `/api/1.0/main/address/reference-match/${address.address_id}/set/reviewed`,
-    );
+  return makeFetch<null, Address>(
+    "POST",
+    `/api/1.0/main/address/reference-match/${address.address_id}/set/reviewed`,
+  );
 };
 
 export const markAddressToReview = async (
-    address: Address,
+  address: Address,
 ): Promise<Address> => {
-    return makeFetch<null, Address>(
-        "POST",
-        `/api/1.0/main/address/reference-match/${address.address_id}/set/to_review`,
-    );
+  return makeFetch<null, Address>(
+    "POST",
+    `/api/1.0/main/address/reference-match/${address.address_id}/set/to_review`,
+  );
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts
index e8256b348..9bfb952b5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts
@@ -6,57 +6,57 @@ export type fetchOption = Record<string, boolean | string | number | null>;
 export type Params = Record<string, number | string>;
 
 export interface PaginationResponse<T> {
-    pagination: {
-        more: boolean;
-        items_per_page: number;
-    };
-    results: T[];
-    count: number;
+  pagination: {
+    more: boolean;
+    items_per_page: number;
+  };
+  results: T[];
+  count: number;
 }
 
 export type FetchParams = Record<string, string | number | null>;
 
 export interface TransportExceptionInterface {
-    name: string;
+  name: string;
 }
 
 export interface ValidationExceptionInterface
-    extends TransportExceptionInterface {
-    name: "ValidationException";
-    error: object;
-    violations: string[];
-    titles: string[];
-    propertyPaths: string[];
+  extends TransportExceptionInterface {
+  name: "ValidationException";
+  error: object;
+  violations: string[];
+  titles: string[];
+  propertyPaths: string[];
 }
 
 export interface ValidationErrorResponse extends TransportExceptionInterface {
-    violations: {
-        title: string;
-        propertyPath: string;
-    }[];
+  violations: {
+    title: string;
+    propertyPath: string;
+  }[];
 }
 
 export interface AccessExceptionInterface extends TransportExceptionInterface {
-    name: "AccessException";
-    violations: string[];
+  name: "AccessException";
+  violations: string[];
 }
 
 export interface NotFoundExceptionInterface
-    extends TransportExceptionInterface {
-    name: "NotFoundException";
+  extends TransportExceptionInterface {
+  name: "NotFoundException";
 }
 
 export interface ServerExceptionInterface extends TransportExceptionInterface {
-    name: "ServerException";
-    message: string;
-    code: number;
-    body: string;
+  name: "ServerException";
+  message: string;
+  code: number;
+  body: string;
 }
 
 export interface ConflictHttpExceptionInterface
-    extends TransportExceptionInterface {
-    name: "ConflictHttpException";
-    violations: string[];
+  extends TransportExceptionInterface {
+  name: "ConflictHttpException";
+  violations: string[];
 }
 
 /**
@@ -66,223 +66,223 @@ export interface ConflictHttpExceptionInterface
  * and use of the @link{fetchResults} method.
  */
 export const makeFetch = <Input, Output>(
-    method: "POST" | "GET" | "PUT" | "PATCH" | "DELETE",
-    url: string,
-    body?: body | Input | null,
-    options?: FetchParams,
+  method: "POST" | "GET" | "PUT" | "PATCH" | "DELETE",
+  url: string,
+  body?: body | Input | null,
+  options?: FetchParams,
 ): Promise<Output> => {
-    let opts = {
-        method: method,
-        headers: {
-            "Content-Type": "application/json;charset=utf-8",
-        },
+  let opts = {
+    method: method,
+    headers: {
+      "Content-Type": "application/json;charset=utf-8",
+    },
+  };
+
+  if (body !== null && typeof body !== "undefined") {
+    Object.assign(opts, { body: JSON.stringify(body) });
+  }
+
+  if (typeof options !== "undefined") {
+    opts = Object.assign(opts, options);
+  }
+  return fetch(url, opts).then((response) => {
+    if (response.status === 204) {
+      return Promise.resolve();
+    }
+
+    if (response.ok) {
+      return response.json();
+    }
+
+    if (response.status === 422) {
+      return response.json().then((response) => {
+        throw ValidationException(response);
+      });
+    }
+
+    if (response.status === 403) {
+      throw AccessException(response);
+    }
+
+    if (response.status === 409) {
+      throw ConflictHttpException(response);
+    }
+
+    throw {
+      name: "Exception",
+      sta: response.status,
+      txt: response.statusText,
+      err: new Error(),
+      violations: response.body,
     };
-
-    if (body !== null && typeof body !== "undefined") {
-        Object.assign(opts, { body: JSON.stringify(body) });
-    }
-
-    if (typeof options !== "undefined") {
-        opts = Object.assign(opts, options);
-    }
-    return fetch(url, opts).then((response) => {
-        if (response.status === 204) {
-            return Promise.resolve();
-        }
-
-        if (response.ok) {
-            return response.json();
-        }
-
-        if (response.status === 422) {
-            return response.json().then((response) => {
-                throw ValidationException(response);
-            });
-        }
-
-        if (response.status === 403) {
-            throw AccessException(response);
-        }
-
-        if (response.status === 409) {
-            throw ConflictHttpException(response);
-        }
-
-        throw {
-            name: "Exception",
-            sta: response.status,
-            txt: response.statusText,
-            err: new Error(),
-            violations: response.body,
-        };
-    });
+  });
 };
 
 /**
  * Fetch results with certain parameters
  */
 function _fetchAction<T>(
-    page: number,
-    uri: string,
-    params?: FetchParams,
+  page: number,
+  uri: string,
+  params?: FetchParams,
 ): Promise<PaginationResponse<T>> {
-    const item_per_page = 50;
+  const item_per_page = 50;
 
-    const searchParams = new URLSearchParams();
-    searchParams.append("item_per_page", item_per_page.toString());
-    searchParams.append("page", page.toString());
+  const searchParams = new URLSearchParams();
+  searchParams.append("item_per_page", item_per_page.toString());
+  searchParams.append("page", page.toString());
 
-    if (params !== undefined) {
-        Object.keys(params).forEach((key) => {
-            const v = params[key];
-            if (typeof v === "string") {
-                searchParams.append(key, v);
-            } else if (typeof v === "number") {
-                searchParams.append(key, v.toString());
-            } else if (v === null) {
-                searchParams.append(key, "");
-            }
+  if (params !== undefined) {
+    Object.keys(params).forEach((key) => {
+      const v = params[key];
+      if (typeof v === "string") {
+        searchParams.append(key, v);
+      } else if (typeof v === "number") {
+        searchParams.append(key, v.toString());
+      } else if (v === null) {
+        searchParams.append(key, "");
+      }
+    });
+  }
+
+  const url = uri + "?" + searchParams.toString();
+
+  return fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json;charset=utf-8",
+    },
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+
+      if (response.status === 404) {
+        throw NotFoundException(response);
+      }
+
+      if (response.status === 422) {
+        return response.json().then((response) => {
+          throw ValidationException(response);
         });
-    }
+      }
 
-    const url = uri + "?" + searchParams.toString();
+      if (response.status === 403) {
+        throw AccessException(response);
+      }
 
-    return fetch(url, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json;charset=utf-8",
-        },
+      if (response.status >= 500) {
+        return response.text().then((body) => {
+          throw ServerException(response.status, body);
+        });
+      }
+
+      throw new Error("other network error");
     })
-        .then((response) => {
-            if (response.ok) {
-                return response.json();
-            }
-
-            if (response.status === 404) {
-                throw NotFoundException(response);
-            }
-
-            if (response.status === 422) {
-                return response.json().then((response) => {
-                    throw ValidationException(response);
-                });
-            }
-
-            if (response.status === 403) {
-                throw AccessException(response);
-            }
-
-            if (response.status >= 500) {
-                return response.text().then((body) => {
-                    throw ServerException(response.status, body);
-                });
-            }
-
-            throw new Error("other network error");
-        })
-        .catch(
-            (
-                reason:
-                    | NotFoundExceptionInterface
-                    | ServerExceptionInterface
-                    | ValidationExceptionInterface
-                    | TransportExceptionInterface,
-            ) => {
-                console.error(reason);
-                throw reason;
-            },
-        );
+    .catch(
+      (
+        reason:
+          | NotFoundExceptionInterface
+          | ServerExceptionInterface
+          | ValidationExceptionInterface
+          | TransportExceptionInterface,
+      ) => {
+        console.error(reason);
+        throw reason;
+      },
+    );
 }
 
 export const fetchResults = async <T>(
-    uri: string,
-    params?: FetchParams,
+  uri: string,
+  params?: FetchParams,
 ): Promise<T[]> => {
-    const promises: Promise<T[]>[] = [];
-    let page = 1;
-    const firstData: PaginationResponse<T> = (await _fetchAction(
-        page,
-        uri,
-        params,
-    )) as PaginationResponse<T>;
+  const promises: Promise<T[]>[] = [];
+  let page = 1;
+  const firstData: PaginationResponse<T> = (await _fetchAction(
+    page,
+    uri,
+    params,
+  )) as PaginationResponse<T>;
 
-    promises.push(Promise.resolve(firstData.results));
+  promises.push(Promise.resolve(firstData.results));
 
-    if (firstData.pagination.more) {
-        do {
-            page = ++page;
-            promises.push(
-                _fetchAction<T>(page, uri, params).then((r) =>
-                    Promise.resolve(r.results),
-                ),
-            );
-        } while (page * firstData.pagination.items_per_page < firstData.count);
-    }
+  if (firstData.pagination.more) {
+    do {
+      page = ++page;
+      promises.push(
+        _fetchAction<T>(page, uri, params).then((r) =>
+          Promise.resolve(r.results),
+        ),
+      );
+    } while (page * firstData.pagination.items_per_page < firstData.count);
+  }
 
-    return Promise.all(promises).then((values) => values.flat());
+  return Promise.all(promises).then((values) => values.flat());
 };
 
 export const fetchScopes = (): Promise<Scope[]> => {
-    return fetchResults("/api/1.0/main/scope.json");
+  return fetchResults("/api/1.0/main/scope.json");
 };
 
 /**
  * Error objects to be thrown
  */
 const ValidationException = (
-    response: ValidationErrorResponse,
+  response: ValidationErrorResponse,
 ): ValidationExceptionInterface => {
-    const error = {} as ValidationExceptionInterface;
-    error.name = "ValidationException";
-    error.violations = response.violations.map(
-        (violation) => `${violation.title}: ${violation.propertyPath}`,
-    );
-    error.titles = response.violations.map((violation) => violation.title);
-    error.propertyPaths = response.violations.map(
-        (violation) => violation.propertyPath,
-    );
-    return error;
+  const error = {} as ValidationExceptionInterface;
+  error.name = "ValidationException";
+  error.violations = response.violations.map(
+    (violation) => `${violation.title}: ${violation.propertyPath}`,
+  );
+  error.titles = response.violations.map((violation) => violation.title);
+  error.propertyPaths = response.violations.map(
+    (violation) => violation.propertyPath,
+  );
+  return error;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const AccessException = (response: Response): AccessExceptionInterface => {
-    const error = {} as AccessExceptionInterface;
-    error.name = "AccessException";
-    error.violations = ["You are not allowed to perform this action"];
+  const error = {} as AccessExceptionInterface;
+  error.name = "AccessException";
+  error.violations = ["You are not allowed to perform this action"];
 
-    return error;
+  return error;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const NotFoundException = (response: Response): NotFoundExceptionInterface => {
-    const error = {} as NotFoundExceptionInterface;
-    error.name = "NotFoundException";
+  const error = {} as NotFoundExceptionInterface;
+  error.name = "NotFoundException";
 
-    return error;
+  return error;
 };
 
 const ServerException = (
-    code: number,
-    body: string,
+  code: number,
+  body: string,
 ): ServerExceptionInterface => {
-    const error = {} as ServerExceptionInterface;
-    error.name = "ServerException";
-    error.code = code;
-    error.body = body;
+  const error = {} as ServerExceptionInterface;
+  error.name = "ServerException";
+  error.code = code;
+  error.body = body;
 
-    return error;
+  return error;
 };
 
 const ConflictHttpException = (
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    response: Response,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  response: Response,
 ): ConflictHttpExceptionInterface => {
-    const error = {} as ConflictHttpExceptionInterface;
+  const error = {} as ConflictHttpExceptionInterface;
 
-    error.name = "ConflictHttpException";
-    error.violations = [
-        "Sorry, but someone else has already changed this entity. Please refresh the page and apply the changes again",
-    ];
+  error.name = "ConflictHttpException";
+  error.violations = [
+    "Sorry, but someone else has already changed this entity. Please refresh the page and apply the changes again",
+  ];
 
-    return error;
+  return error;
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/export.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/api/export.ts
index 7e350b102..6e66122e7 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/export.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/export.ts
@@ -2,17 +2,17 @@ import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import { ExportGeneration } from "ChillMainAssets/types";
 
 export const fetchExportGenerationStatus = async (
-    exportGenerationId: string,
+  exportGenerationId: string,
 ): Promise<ExportGeneration> =>
-    makeFetch(
-        "GET",
-        `/api/1.0/main/export-generation/${exportGenerationId}/object`,
-    );
+  makeFetch(
+    "GET",
+    `/api/1.0/main/export-generation/${exportGenerationId}/object`,
+  );
 
 export const generateFromSavedExport = async (
-    savedExportUuid: string,
+  savedExportUuid: string,
 ): Promise<ExportGeneration> =>
-    makeFetch(
-        "POST",
-        `/api/1.0/main/export/export-generation/create-from-saved-export/${savedExportUuid}`,
-    );
+  makeFetch(
+    "POST",
+    `/api/1.0/main/export/export-generation/create-from-saved-export/${savedExportUuid}`,
+  );
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/locations.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/api/locations.ts
index 3c326ba78..375881924 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/locations.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/locations.ts
@@ -2,7 +2,7 @@ import { fetchResults } from "./apiMethods";
 import { Location, LocationType } from "../../types";
 
 export const getLocations = (): Promise<Location[]> =>
-    fetchResults("/api/1.0/main/location.json");
+  fetchResults("/api/1.0/main/location.json");
 
 export const getLocationTypes = (): Promise<LocationType[]> =>
-    fetchResults("/api/1.0/main/location-type.json");
+  fetchResults("/api/1.0/main/location-type.json");
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/return_path.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/api/return_path.ts
index e444aa2e5..54a12c030 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/return_path.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/return_path.ts
@@ -1,3 +1,3 @@
 export function buildReturnPath(location: Location): string {
-    return location.pathname + location.search;
+  return location.pathname + location.search;
 }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/user.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/api/user.ts
index 62703b740..e51d09abb 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/user.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/user.ts
@@ -2,23 +2,23 @@ import { User } from "../../types";
 import { makeFetch } from "./apiMethods";
 
 export const whoami = (): Promise<User> => {
-    const url = `/api/1.0/main/whoami.json`;
-    return fetch(url).then((response) => {
-        if (response.ok) {
-            return response.json();
-        }
-        throw {
-            msg: "Error while getting whoami.",
-            sta: response.status,
-            txt: response.statusText,
-            err: new Error(),
-            body: response.body,
-        };
-    });
+  const url = `/api/1.0/main/whoami.json`;
+  return fetch(url).then((response) => {
+    if (response.ok) {
+      return response.json();
+    }
+    throw {
+      msg: "Error while getting whoami.",
+      sta: response.status,
+      txt: response.statusText,
+      err: new Error(),
+      body: response.body,
+    };
+  });
 };
 
 export const whereami = (): Promise<Location | null> => {
-    const url = `/api/1.0/main/user-current-location.json`;
+  const url = `/api/1.0/main/user-current-location.json`;
 
-    return makeFetch<null, Location | null>("GET", url);
+  return makeFetch<null, Location | null>("GET", url);
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/entity-notification/api.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/entity-notification/api.ts
index 47cf9b1e9..97ba98d75 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/entity-notification/api.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/entity-notification/api.ts
@@ -1,22 +1,22 @@
 const buildLinkCreate = function (
-    relatedEntityClass: string,
-    relatedEntityId: number,
-    to: number | null,
-    returnPath: string | null,
+  relatedEntityClass: string,
+  relatedEntityId: number,
+  to: number | null,
+  returnPath: string | null,
 ): string {
-    const params = new URLSearchParams();
-    params.append("entityClass", relatedEntityClass);
-    params.append("entityId", relatedEntityId.toString());
+  const params = new URLSearchParams();
+  params.append("entityClass", relatedEntityClass);
+  params.append("entityId", relatedEntityId.toString());
 
-    if (null !== to) {
-        params.append("tos[0]", to.toString());
-    }
+  if (null !== to) {
+    params.append("tos[0]", to.toString());
+  }
 
-    if (null !== returnPath) {
-        params.append("returnPath", returnPath);
-    }
+  if (null !== returnPath) {
+    params.append("returnPath", returnPath);
+  }
 
-    return `/fr/notification/create?${params.toString()}`;
+  return `/fr/notification/create?${params.toString()}`;
 };
 
 export { buildLinkCreate };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/entity-workflow/api.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/entity-workflow/api.ts
index a9955f31b..4f9dea715 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/entity-workflow/api.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/entity-workflow/api.ts
@@ -10,17 +10,17 @@
  * @throws {Error} If the related entity ID is undefined.
  */
 export const buildLinkCreate = (
-    workflowName: string,
-    relatedEntityClass: string,
-    relatedEntityId: number | undefined,
+  workflowName: string,
+  relatedEntityClass: string,
+  relatedEntityId: number | undefined,
 ): string => {
-    if (typeof relatedEntityId === "undefined") {
-        throw new Error("the related entity id is not set");
-    }
-    const params = new URLSearchParams();
-    params.set("entityClass", relatedEntityClass);
-    params.set("entityId", relatedEntityId.toString(10));
-    params.set("workflow", workflowName);
+  if (typeof relatedEntityId === "undefined") {
+    throw new Error("the related entity id is not set");
+  }
+  const params = new URLSearchParams();
+  params.set("entityClass", relatedEntityClass);
+  params.set("entityId", relatedEntityId.toString(10));
+  params.set("workflow", workflowName);
 
-    return `/fr/main/workflow/create?` + params.toString();
+  return `/fr/main/workflow/create?` + params.toString();
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts
index 9cd1dcb51..b2fa260d2 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts
@@ -9,33 +9,33 @@ import { TranslatableString } from "ChillMainAssets/types";
  * @returns The localized string or null if no translation is available
  */
 export function localizeString(
-    translatableString: TranslatableString | null | undefined,
-    locale?: string,
+  translatableString: TranslatableString | null | undefined,
+  locale?: string,
 ): string {
-    if (!translatableString || Object.keys(translatableString).length === 0) {
-        return "";
-    }
-
-    const currentLocale = locale || navigator.language.split("-")[0] || "fr";
-
-    if (translatableString[currentLocale]) {
-        return translatableString[currentLocale];
-    }
-
-    // Define fallback locales
-    const fallbackLocales: string[] = ["fr", "en"];
-
-    for (const fallbackLocale of fallbackLocales) {
-        if (translatableString[fallbackLocale]) {
-            return translatableString[fallbackLocale];
-        }
-    }
-
-    // No fallback translation found, use the first available
-    const availableLocales = Object.keys(translatableString);
-    if (availableLocales.length > 0) {
-        return translatableString[availableLocales[0]];
-    }
-
+  if (!translatableString || Object.keys(translatableString).length === 0) {
     return "";
+  }
+
+  const currentLocale = locale || navigator.language.split("-")[0] || "fr";
+
+  if (translatableString[currentLocale]) {
+    return translatableString[currentLocale];
+  }
+
+  // Define fallback locales
+  const fallbackLocales: string[] = ["fr", "en"];
+
+  for (const fallbackLocale of fallbackLocales) {
+    if (translatableString[fallbackLocale]) {
+      return translatableString[fallbackLocale];
+    }
+  }
+
+  // No fallback translation found, use the first available
+  const availableLocales = Object.keys(translatableString);
+  if (availableLocales.length > 0) {
+    return translatableString[availableLocales[0]];
+  }
+
+  return "";
 }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/workflow/attachments.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/workflow/attachments.ts
index 7e2f23f57..05c745099 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/workflow/attachments.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/workflow/attachments.ts
@@ -3,20 +3,20 @@ import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/gener
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 
 export const find_attachments_by_workflow = async (
-    workflowId: number,
+  workflowId: number,
 ): Promise<WorkflowAttachment[]> =>
-    makeFetch("GET", `/api/1.0/main/workflow/${workflowId}/attachment`);
+  makeFetch("GET", `/api/1.0/main/workflow/${workflowId}/attachment`);
 
 export const create_attachment = async (
-    workflowId: number,
-    genericDoc: GenericDocForAccompanyingPeriod,
+  workflowId: number,
+  genericDoc: GenericDocForAccompanyingPeriod,
 ): Promise<WorkflowAttachment> =>
-    makeFetch("POST", `/api/1.0/main/workflow/${workflowId}/attachment`, {
-        relatedGenericDocKey: genericDoc.key,
-        relatedGenericDocIdentifiers: genericDoc.identifiers,
-    });
+  makeFetch("POST", `/api/1.0/main/workflow/${workflowId}/attachment`, {
+    relatedGenericDocKey: genericDoc.key,
+    relatedGenericDocIdentifiers: genericDoc.identifiers,
+  });
 
 export const delete_attachment = async (
-    attachment: WorkflowAttachment,
+  attachment: WorkflowAttachment,
 ): Promise<void> =>
-    makeFetch("DELETE", `/api/1.0/main/workflow/attachment/${attachment.id}`);
+  makeFetch("DELETE", `/api/1.0/main/workflow/attachment/${attachment.id}`);
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts b/src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts
index abe516934..d41a70499 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts
@@ -7,43 +7,43 @@ import { Address } from "../../types";
 const i18n = _createI18n({});
 
 document
-    .querySelectorAll<HTMLSpanElement>("span[data-address-details]")
-    .forEach((el) => {
-        const dataset = el.dataset as {
-            addressId: string;
-            addressRefStatus: string;
+  .querySelectorAll<HTMLSpanElement>("span[data-address-details]")
+  .forEach((el) => {
+    const dataset = el.dataset as {
+      addressId: string;
+      addressRefStatus: string;
+    };
+
+    const app = createApp({
+      components: { AddressDetailsButton },
+      data() {
+        return {
+          addressId: Number.parseInt(dataset.addressId),
+          addressRefStatus: dataset.addressRefStatus,
         };
-
-        const app = createApp({
-            components: { AddressDetailsButton },
-            data() {
-                return {
-                    addressId: Number.parseInt(dataset.addressId),
-                    addressRefStatus: dataset.addressRefStatus,
-                };
-            },
-            template:
-                '<address-details-button :address_id="addressId" :address_ref_status="addressRefStatus" @update-address="onUpdateAddress"></address-details-button>',
-            methods: {
-                onUpdateAddress: (address: Address): void => {
-                    if (
-                        address.refStatus === "to_review" ||
-                        address.refStatus === "reviewed"
-                    ) {
-                        // in this two case, the address content do not change
-                        return;
-                    }
-                    if (
-                        window.confirm(
-                            "L'adresse a été modifiée. Vous pouvez continuer votre travail. Cependant, pour afficher les données immédiatement, veuillez recharger la page. \n\n Voulez-vous recharger la page immédiatement ?",
-                        )
-                    ) {
-                        window.location.reload();
-                    }
-                },
-            },
-        });
-
-        app.use(i18n);
-        app.mount(el);
+      },
+      template:
+        '<address-details-button :address_id="addressId" :address_ref_status="addressRefStatus" @update-address="onUpdateAddress"></address-details-button>',
+      methods: {
+        onUpdateAddress: (address: Address): void => {
+          if (
+            address.refStatus === "to_review" ||
+            address.refStatus === "reviewed"
+          ) {
+            // in this two case, the address content do not change
+            return;
+          }
+          if (
+            window.confirm(
+              "L'adresse a été modifiée. Vous pouvez continuer votre travail. Cependant, pour afficher les données immédiatement, veuillez recharger la page. \n\n Voulez-vous recharger la page immédiatement ?",
+            )
+          ) {
+            window.location.reload();
+          }
+        },
+      },
     });
+
+    app.use(i18n);
+    app.mount(el);
+  });
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts
index a396da295..fbbbb5881 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts
@@ -1,16 +1,16 @@
 import {
-    Essentials,
-    Bold,
-    Italic,
-    Paragraph,
-    Markdown,
-    BlockQuote,
-    Heading,
-    Link,
-    List,
-    Emoji,
-    Mention,
-    Fullscreen,
+  Essentials,
+  Bold,
+  Italic,
+  Paragraph,
+  Markdown,
+  BlockQuote,
+  Heading,
+  Link,
+  List,
+  Emoji,
+  Mention,
+  Fullscreen,
 } from "ckeditor5";
 import coreTranslations from "ckeditor5/translations/fr.js";
 
@@ -19,41 +19,41 @@ import "ckeditor5/ckeditor5.css";
 import "./index.scss";
 
 export default {
-    plugins: [
-        Essentials,
-        Markdown,
-        Bold,
-        Italic,
-        BlockQuote,
-        Heading,
-        Link,
-        List,
-        Paragraph,
-        // both Emoji and Mention are required for Emoji feature
-        Emoji,
-        Mention,
-        // to enable fullscreen
-        Fullscreen,
+  plugins: [
+    Essentials,
+    Markdown,
+    Bold,
+    Italic,
+    BlockQuote,
+    Heading,
+    Link,
+    List,
+    Paragraph,
+    // both Emoji and Mention are required for Emoji feature
+    Emoji,
+    Mention,
+    // to enable fullscreen
+    Fullscreen,
+  ],
+  toolbar: {
+    items: [
+      "heading",
+      "|",
+      "bold",
+      "italic",
+      "link",
+      "bulletedList",
+      "numberedList",
+      "blockQuote",
+      "|",
+      "emoji",
+      "|",
+      "undo",
+      "redo",
+      "|",
+      "fullscreen",
     ],
-    toolbar: {
-        items: [
-            "heading",
-            "|",
-            "bold",
-            "italic",
-            "link",
-            "bulletedList",
-            "numberedList",
-            "blockQuote",
-            "|",
-            "emoji",
-            "|",
-            "undo",
-            "redo",
-            "|",
-            "fullscreen",
-        ],
-    },
-    translations: [coreTranslations],
-    licenseKey: "GPL",
+  },
+  translations: [coreTranslations],
+  licenseKey: "GPL",
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts
index 783c0acfa..f8e0cb48b 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts
@@ -2,31 +2,31 @@ import { createApp } from "vue";
 import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 const ckeditorFields: NodeListOf<HTMLTextAreaElement> =
-    document.querySelectorAll("textarea[ckeditor]");
+  document.querySelectorAll("textarea[ckeditor]");
 ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
-    const content = field.value;
-    const div = document.createElement("div");
+  const content = field.value;
+  const div = document.createElement("div");
 
-    if (field.parentNode !== null) {
-        field.parentNode.insertBefore(div, field);
-    } else {
-        throw "parent is null";
-    }
+  if (field.parentNode !== null) {
+    field.parentNode.insertBefore(div, field);
+  } else {
+    throw "parent is null";
+  }
 
-    createApp({
-        components: { CommentEditor },
-        template: `<comment-editor v-model="content" @update:modelValue="handleInput"></comment-editor>`,
-        data() {
-            return {
-                content,
-            };
-        },
-        methods: {
-            handleInput() {
-                field.value = this.content;
-            },
-        },
-    }).mount(div);
+  createApp({
+    components: { CommentEditor },
+    template: `<comment-editor v-model="content" @update:modelValue="handleInput"></comment-editor>`,
+    data() {
+      return {
+        content,
+      };
+    },
+    methods: {
+      handleInput() {
+        field.value = this.content;
+      },
+    },
+  }).mount(div);
 
-    field.style.display = "none";
+  field.style.display = "none";
 });
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/collection/index.ts b/src/Bundle/ChillMainBundle/Resources/public/module/collection/index.ts
index 77ff044ec..1c45f468d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/collection/index.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/collection/index.ts
@@ -31,157 +31,157 @@
 import "./collection.scss";
 
 declare global {
-    interface GlobalEventHandlersEventMap {
-        "show-hide-show": CustomEvent<{
-            id: number;
-            froms: HTMLElement[];
-            container: HTMLElement;
-        }>;
-    }
+  interface GlobalEventHandlersEventMap {
+    "show-hide-show": CustomEvent<{
+      id: number;
+      froms: HTMLElement[];
+      container: HTMLElement;
+    }>;
+  }
 }
 
 export class CollectionEventPayload {
-    collection: HTMLUListElement;
-    entry: HTMLLIElement;
+  collection: HTMLUListElement;
+  entry: HTMLLIElement;
 
-    constructor(collection: HTMLUListElement, entry: HTMLLIElement) {
-        this.collection = collection;
-        this.entry = entry;
-    }
+  constructor(collection: HTMLUListElement, entry: HTMLLIElement) {
+    this.collection = collection;
+    this.entry = entry;
+  }
 }
 
 export const handleAdd = (button: any): void => {
-    const form_name = button.dataset.collectionAddTarget,
-        prototype = button.dataset.formPrototype,
-        collection: HTMLUListElement | null = document.querySelector(
-            'ul[data-collection-name="' + form_name + '"]',
-        );
+  const form_name = button.dataset.collectionAddTarget,
+    prototype = button.dataset.formPrototype,
+    collection: HTMLUListElement | null = document.querySelector(
+      'ul[data-collection-name="' + form_name + '"]',
+    );
 
-    if (collection === null) {
-        return;
+  if (collection === null) {
+    return;
+  }
+
+  const empty_explain: HTMLLIElement | null = collection.querySelector(
+      "li[data-collection-empty-explain]",
+    ),
+    entry = document.createElement("li"),
+    counter = collection.querySelectorAll("li.entry").length, // Updated counter logic
+    content = prototype.replace(/__name__/g, counter.toString()),
+    event = new CustomEvent("collection-add-entry", {
+      detail: new CollectionEventPayload(collection, entry),
+    });
+
+  console.log(counter);
+  console.log(content);
+
+  entry.innerHTML = content;
+  entry.classList.add("entry");
+
+  if ("collectionRegular" in collection.dataset) {
+    initializeRemove(collection, entry);
+    if (empty_explain !== null) {
+      empty_explain.remove();
     }
+  }
 
-    const empty_explain: HTMLLIElement | null = collection.querySelector(
-            "li[data-collection-empty-explain]",
-        ),
-        entry = document.createElement("li"),
-        counter = collection.querySelectorAll("li.entry").length, // Updated counter logic
-        content = prototype.replace(/__name__/g, counter.toString()),
-        event = new CustomEvent("collection-add-entry", {
-            detail: new CollectionEventPayload(collection, entry),
-        });
-
-    console.log(counter);
-    console.log(content);
-
-    entry.innerHTML = content;
-    entry.classList.add("entry");
-
-    if ("collectionRegular" in collection.dataset) {
-        initializeRemove(collection, entry);
-        if (empty_explain !== null) {
-            empty_explain.remove();
-        }
-    }
-
-    collection.appendChild(entry);
-    collection.dispatchEvent(event);
-    window.dispatchEvent(event);
+  collection.appendChild(entry);
+  collection.dispatchEvent(event);
+  window.dispatchEvent(event);
 };
 
 const initializeRemove = (
-    collection: HTMLUListElement,
-    entry: HTMLLIElement,
+  collection: HTMLUListElement,
+  entry: HTMLLIElement,
 ): void => {
-    const button = buildRemoveButton(collection, entry);
-    if (null === button) {
-        return;
-    }
-    entry.appendChild(button);
+  const button = buildRemoveButton(collection, entry);
+  if (null === button) {
+    return;
+  }
+  entry.appendChild(button);
 };
 
 export const buildRemoveButton = (
-    collection: HTMLUListElement,
-    entry: HTMLLIElement,
+  collection: HTMLUListElement,
+  entry: HTMLLIElement,
 ): HTMLButtonElement | null => {
-    const button = document.createElement("button"),
-        isPersisted = entry.dataset.collectionIsPersisted || "",
-        content = collection.dataset.collectionButtonRemoveLabel || "",
-        allowDelete = collection.dataset.collectionAllowDelete || "",
-        event = new CustomEvent("collection-remove-entry", {
-            detail: new CollectionEventPayload(collection, entry),
-        });
-
-    if (allowDelete === "0" && isPersisted === "1") {
-        return null;
-    }
-    button.classList.add("btn", "btn-delete", "remove-entry");
-    button.textContent = content;
-    button.addEventListener("click", (e: Event) => {
-        e.preventDefault();
-        entry.remove();
-        collection.dispatchEvent(event);
-        window.dispatchEvent(event);
+  const button = document.createElement("button"),
+    isPersisted = entry.dataset.collectionIsPersisted || "",
+    content = collection.dataset.collectionButtonRemoveLabel || "",
+    allowDelete = collection.dataset.collectionAllowDelete || "",
+    event = new CustomEvent("collection-remove-entry", {
+      detail: new CollectionEventPayload(collection, entry),
     });
 
-    return button;
+  if (allowDelete === "0" && isPersisted === "1") {
+    return null;
+  }
+  button.classList.add("btn", "btn-delete", "remove-entry");
+  button.textContent = content;
+  button.addEventListener("click", (e: Event) => {
+    e.preventDefault();
+    entry.remove();
+    collection.dispatchEvent(event);
+    window.dispatchEvent(event);
+  });
+
+  return button;
 };
 
 const collectionsInit = new Set<string>();
 const buttonsInit = new Set<string>();
 
 const initialize = function (target: Document | Element): void {
-    const addButtons: NodeListOf<HTMLButtonElement> = document.querySelectorAll(
-            "button[data-collection-add-target]",
-        ),
-        collections: NodeListOf<HTMLUListElement> = document.querySelectorAll(
-            "ul[data-collection-regular]",
-        );
+  const addButtons: NodeListOf<HTMLButtonElement> = document.querySelectorAll(
+      "button[data-collection-add-target]",
+    ),
+    collections: NodeListOf<HTMLUListElement> = document.querySelectorAll(
+      "ul[data-collection-regular]",
+    );
 
-    for (let i = 0; i < addButtons.length; i++) {
-        const addButton = addButtons[i];
-        const uniqid = addButton.dataset.uniqid as string;
-        if (buttonsInit.has(uniqid)) {
-            continue;
-        }
-        buttonsInit.add(uniqid);
-        addButton.addEventListener("click", (e: Event) => {
-            e.preventDefault();
-            handleAdd(e.target);
-        });
+  for (let i = 0; i < addButtons.length; i++) {
+    const addButton = addButtons[i];
+    const uniqid = addButton.dataset.uniqid as string;
+    if (buttonsInit.has(uniqid)) {
+      continue;
     }
-    for (let i = 0; i < collections.length; i++) {
-        const collection = collections[i];
-        const uniqid = collection.dataset.uniqid as string;
-        if (collectionsInit.has(uniqid)) {
-            continue;
-        }
-        collectionsInit.add(uniqid);
-        const entries: NodeListOf<HTMLLIElement> =
-            collection.querySelectorAll(":scope > li");
-        for (let j = 0; j < entries.length; j++) {
-            if (entries[j].dataset.collectionEmptyExplain === "1") {
-                continue;
-            }
-            initializeRemove(collections[i], entries[j]);
-        }
+    buttonsInit.add(uniqid);
+    addButton.addEventListener("click", (e: Event) => {
+      e.preventDefault();
+      handleAdd(e.target);
+    });
+  }
+  for (let i = 0; i < collections.length; i++) {
+    const collection = collections[i];
+    const uniqid = collection.dataset.uniqid as string;
+    if (collectionsInit.has(uniqid)) {
+      continue;
     }
+    collectionsInit.add(uniqid);
+    const entries: NodeListOf<HTMLLIElement> =
+      collection.querySelectorAll(":scope > li");
+    for (let j = 0; j < entries.length; j++) {
+      if (entries[j].dataset.collectionEmptyExplain === "1") {
+        continue;
+      }
+      initializeRemove(collections[i], entries[j]);
+    }
+  }
 };
 
 window.addEventListener("DOMContentLoaded", () => {
-    initialize(document);
+  initialize(document);
 });
 
 window.addEventListener(
-    "show-hide-show",
-    (
-        event: CustomEvent<{
-            id: number;
-            container: HTMLElement;
-            froms: HTMLElement[];
-        }>,
-    ) => {
-        const container = event.detail.container as HTMLElement;
-        initialize(container);
-    },
+  "show-hide-show",
+  (
+    event: CustomEvent<{
+      id: number;
+      container: HTMLElement;
+      froms: HTMLElement[];
+    }>,
+  ) => {
+    const container = event.detail.container as HTMLElement;
+    initialize(container);
+  },
 );
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read_all.ts b/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read_all.ts
index 97697fca5..d07a7e815 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read_all.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read_all.ts
@@ -5,39 +5,39 @@ import NotificationReadAllToggle from "../../vuejs/_components/Notification/Noti
 const i18n = _createI18n({});
 
 document.addEventListener("DOMContentLoaded", function () {
-    const elements = document.querySelectorAll(".notification_all_read");
+  const elements = document.querySelectorAll(".notification_all_read");
 
-    elements.forEach((element) => {
-        console.log("launch");
-        createApp({
-            template: `<notification-read-all-toggle @markAsRead="markAsRead" @markAsUnRead="markAsUnread"></notification-read-all-toggle>`,
-            components: {
-                NotificationReadAllToggle,
-            },
-            methods: {
-                markAsRead(id: number) {
-                    const el = document.querySelector<HTMLDivElement>(
-                        `div.notification-status[data-notification-id="${id}"]`,
-                    );
-                    if (el === null) {
-                        return;
-                    }
-                    el.classList.add("read");
-                    el.classList.remove("unread");
-                },
-                markAsUnread(id: number) {
-                    const el = document.querySelector<HTMLDivElement>(
-                        `div.notification-status[data-notification-id="${id}"]`,
-                    );
-                    if (el === null) {
-                        return;
-                    }
-                    el.classList.remove("read");
-                    el.classList.add("unread");
-                },
-            },
-        })
-            .use(i18n)
-            .mount(element);
-    });
+  elements.forEach((element) => {
+    console.log("launch");
+    createApp({
+      template: `<notification-read-all-toggle @markAsRead="markAsRead" @markAsUnRead="markAsUnread"></notification-read-all-toggle>`,
+      components: {
+        NotificationReadAllToggle,
+      },
+      methods: {
+        markAsRead(id: number) {
+          const el = document.querySelector<HTMLDivElement>(
+            `div.notification-status[data-notification-id="${id}"]`,
+          );
+          if (el === null) {
+            return;
+          }
+          el.classList.add("read");
+          el.classList.remove("unread");
+        },
+        markAsUnread(id: number) {
+          const el = document.querySelector<HTMLDivElement>(
+            `div.notification-status[data-notification-id="${id}"]`,
+          );
+          if (el === null) {
+            return;
+          }
+          el.classList.remove("read");
+          el.classList.add("unread");
+        },
+      },
+    })
+      .use(i18n)
+      .mount(element);
+  });
 });
diff --git a/src/Bundle/ChillMainBundle/Resources/public/types.ts b/src/Bundle/ChillMainBundle/Resources/public/types.ts
index 40a645ce6..fecb9a578 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/types.ts
@@ -208,13 +208,13 @@ export interface WorkflowAttachment {
 }
 
 export interface ExportGeneration {
-    id: string;
-    type: "export_generation";
-    exportAlias: string;
-    createdBy: User | null;
-    createdAt: DateTime | null;
-    status: StoredObjectStatus;
-    storedObject: StoredObject;
+  id: string;
+  type: "export_generation";
+  exportAlias: string;
+  createdBy: User | null;
+  createdAt: DateTime | null;
+  status: StoredObjectStatus;
+  storedObject: StoredObject;
 }
 
 export interface PrivateCommentEmbeddable {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index 075bf6d65..d259d0cae 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -1,130 +1,130 @@
 <template>
-    <add-address
-        :key="key"
-        :context="context"
-        :options="options"
-        :address-changed-callback="submitAddress"
-        ref="addAddress"
-    />
+  <add-address
+    :key="key"
+    :context="context"
+    :options="options"
+    :address-changed-callback="submitAddress"
+    ref="addAddress"
+  />
 </template>
 
 <script>
 import AddAddress from "./components/AddAddress.vue";
 import {
-    postAddressToHousehold,
-    postAddressToPerson,
+  postAddressToHousehold,
+  postAddressToPerson,
 } from "ChillPersonAssets/vuejs/_api/AddAddress";
 
 export default {
-    name: "App",
-    components: {
-        AddAddress,
+  name: "App",
+  components: {
+    AddAddress,
+  },
+  props: ["addAddress", "callback"],
+  emits: ["addressEdited", "addressCreated"],
+  computed: {
+    context() {
+      return this.addAddress.context;
     },
-    props: ["addAddress", "callback"],
-    emits: ["addressEdited", "addressCreated"],
-    computed: {
-        context() {
-            return this.addAddress.context;
-        },
-        options() {
-            return this.addAddress.options;
-        },
-        key() {
-            return this.context.edit
-                ? "address_" + this.context.addressId
-                : this.context.target.name + "_" + this.context.target.id;
-        },
+    options() {
+      return this.addAddress.options;
     },
-    mounted() {
-        //console.log('AddAddress: data context', this.context);
-        //console.log('AddAddress: data options', this.options);
+    key() {
+      return this.context.edit
+        ? "address_" + this.context.addressId
+        : this.context.target.name + "_" + this.context.target.id;
     },
-    methods: {
-        displayErrors() {
-            return this.$refs.addAddress.errorMsg;
-        },
-        submitAddress(payload) {
-            console.log("@@@ click on Submit Address Button", payload);
-
-            // Existing address
-            if (this.context.edit) {
-                // address is already linked, just finish !
-                this.$refs.addAddress.afterLastPaneAction({});
-                this.$emit("addressEdited", payload);
-
-                // New created address
-            } else {
-                this.postAddressTo(payload);
-            }
-        },
-
-        /*
-         *  Post new created address to targetEntity
-         */
-        postAddressTo(payload) {
-            this.$emit("addressCreated", payload);
-
-            console.log(
-                "postAddress",
-                payload.addressId,
-                "To",
-                payload.target,
-                payload.targetId,
-            );
-            switch (payload.target) {
-                case "household":
-                    postAddressToHousehold(payload.targetId, payload.addressId)
-                        .then(
-                            (address) =>
-                                new Promise((resolve, reject) => {
-                                    console.log("..household address", address);
-                                    this.$refs.addAddress.flag.loading = false;
-                                    this.$refs.addAddress.flag.success = true;
-
-                                    // finish
-                                    this.$refs.addAddress.afterLastPaneAction({
-                                        addressId: address.address_id,
-                                    });
-
-                                    resolve();
-                                }),
-                        )
-                        .catch((error) => {
-                            this.$refs.addAddress.errorMsg.push(error);
-                            this.$refs.addAddress.flag.loading = false;
-                        });
-                    break;
-                case "person":
-                    postAddressToPerson(payload.targetId, payload.addressId)
-                        .then(
-                            (address) =>
-                                new Promise((resolve, reject) => {
-                                    console.log("..person address", address);
-                                    this.$refs.addAddress.flag.loading = false;
-                                    this.$refs.addAddress.flag.success = true;
-
-                                    // finish
-                                    this.$refs.addAddress.afterLastPaneAction({
-                                        addressId: address.address_id,
-                                    });
-
-                                    resolve();
-                                }),
-                        )
-                        .catch((error) => {
-                            this.$refs.addAddress.errorMsg.push(error);
-                            this.$refs.addAddress.flag.loading = false;
-                        });
-                    break;
-                case "thirdparty":
-                    console.log("TODO write postAddressToThirdparty");
-                    break;
-                default:
-                    this.$refs.addAddress.errorMsg.push(
-                        "That entity is not managed by address !",
-                    );
-            }
-        },
+  },
+  mounted() {
+    //console.log('AddAddress: data context', this.context);
+    //console.log('AddAddress: data options', this.options);
+  },
+  methods: {
+    displayErrors() {
+      return this.$refs.addAddress.errorMsg;
     },
+    submitAddress(payload) {
+      console.log("@@@ click on Submit Address Button", payload);
+
+      // Existing address
+      if (this.context.edit) {
+        // address is already linked, just finish !
+        this.$refs.addAddress.afterLastPaneAction({});
+        this.$emit("addressEdited", payload);
+
+        // New created address
+      } else {
+        this.postAddressTo(payload);
+      }
+    },
+
+    /*
+     *  Post new created address to targetEntity
+     */
+    postAddressTo(payload) {
+      this.$emit("addressCreated", payload);
+
+      console.log(
+        "postAddress",
+        payload.addressId,
+        "To",
+        payload.target,
+        payload.targetId,
+      );
+      switch (payload.target) {
+        case "household":
+          postAddressToHousehold(payload.targetId, payload.addressId)
+            .then(
+              (address) =>
+                new Promise((resolve, reject) => {
+                  console.log("..household address", address);
+                  this.$refs.addAddress.flag.loading = false;
+                  this.$refs.addAddress.flag.success = true;
+
+                  // finish
+                  this.$refs.addAddress.afterLastPaneAction({
+                    addressId: address.address_id,
+                  });
+
+                  resolve();
+                }),
+            )
+            .catch((error) => {
+              this.$refs.addAddress.errorMsg.push(error);
+              this.$refs.addAddress.flag.loading = false;
+            });
+          break;
+        case "person":
+          postAddressToPerson(payload.targetId, payload.addressId)
+            .then(
+              (address) =>
+                new Promise((resolve, reject) => {
+                  console.log("..person address", address);
+                  this.$refs.addAddress.flag.loading = false;
+                  this.$refs.addAddress.flag.success = true;
+
+                  // finish
+                  this.$refs.addAddress.afterLastPaneAction({
+                    addressId: address.address_id,
+                  });
+
+                  resolve();
+                }),
+            )
+            .catch((error) => {
+              this.$refs.addAddress.errorMsg.push(error);
+              this.$refs.addAddress.flag.loading = false;
+            });
+          break;
+        case "thirdparty":
+          console.log("TODO write postAddressToThirdparty");
+          break;
+        default:
+          this.$refs.addAddress.errorMsg.push(
+            "That entity is not managed by address !",
+          );
+      }
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
index 5d90bf818..fda84c817 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
@@ -1,32 +1,32 @@
 <template>
-    <ul
-        class="record_actions"
-        v-if="!options.onlyButton"
-        :class="{ 'sticky-form-buttons': isStickyForm }"
-    >
-        <li v-if="isStickyForm" class="cancel">
-            <slot name="before" />
-        </li>
-        <li>
-            <slot name="action" />
-        </li>
-        <li v-if="isStickyForm">
-            <slot name="after" />
-        </li>
-    </ul>
-    <slot v-else name="action" />
+  <ul
+    class="record_actions"
+    v-if="!options.onlyButton"
+    :class="{ 'sticky-form-buttons': isStickyForm }"
+  >
+    <li v-if="isStickyForm" class="cancel">
+      <slot name="before" />
+    </li>
+    <li>
+      <slot name="action" />
+    </li>
+    <li v-if="isStickyForm">
+      <slot name="after" />
+    </li>
+  </ul>
+  <slot v-else name="action" />
 </template>
 
 <script>
 export default {
-    name: "ActionButtons",
-    props: ["options", "defaultz"],
-    computed: {
-        isStickyForm() {
-            return typeof this.options.stickyActions !== "undefined"
-                ? this.options.stickyActions
-                : this.defaultz.stickyActions;
-        },
+  name: "ActionButtons",
+  props: ["options", "defaultz"],
+  computed: {
+    isStickyForm() {
+      return typeof this.options.stickyActions !== "undefined"
+        ? this.options.stickyActions
+        : this.defaultz.stickyActions;
     },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
index 103849e3a..ede1b3778 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -1,251 +1,248 @@
 <template>
-    <!-- step0 -->
-    <show-pane
-        v-if="flag.showPane"
+  <!-- step0 -->
+  <show-pane
+    v-if="flag.showPane"
+    :context="this.context"
+    :options="this.options"
+    :defaultz="this.defaultz"
+    :entity="this.entity"
+    :flag="this.flag"
+    :use-date-pane="this.useDatePane"
+    @open-edit-pane="openEditPane"
+    ref="showAddress"
+  />
+
+  <!-- step 1 -->
+  <teleport to="body" v-if="inModal">
+    <modal
+      v-if="flag.suggestPane"
+      modal-dialog-class="modal-dialog-scrollable modal-xl"
+      @close="resetPane"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t(getTextTitle) }}
+          <span v-if="flag.loading" class="loading">
+            <i class="fa fa-circle-o-notch fa-spin fa-fw" />
+            <span class="sr-only">{{ $t("loading") }}</span>
+          </span>
+        </h2>
+      </template>
+
+      <template #body>
+        <suggest-pane
+          :context="this.context"
+          :options="this.options"
+          :defaultz="this.defaultz"
+          :entity="this.entity"
+          :flag="this.flag"
+          @pick-address="this.pickAddress"
+          ref="suggestAddress"
+        />
+      </template>
+
+      <template #footer>
+        <button @click="openEditPane" class="btn btn-create">
+          {{ $t("create_a_new_address") }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
+  <template v-else>
+    <div v-if="flag.suggestPane" class="mt-4 flex-grow-1">
+      <suggest-pane
         :context="this.context"
         :options="this.options"
         :defaultz="this.defaultz"
         :entity="this.entity"
         :flag="this.flag"
-        :use-date-pane="this.useDatePane"
-        @open-edit-pane="openEditPane"
-        ref="showAddress"
-    />
+        :inside-modal="false"
+        @pick-address="this.pickAddress"
+        ref="suggestAddress"
+      >
+        <template #before v-if="!bypassFirstStep">
+          <a class="btn btn-cancel" @click="resetPane">
+            {{ $t("action.cancel") }}
+          </a>
+        </template>
+        <template #action>
+          <li>
+            <button @click="openEditPane" class="btn btn-create">
+              {{ $t("create_a_new_address") }}
+            </button>
+          </li>
+        </template>
+      </suggest-pane>
+    </div>
+  </template>
 
-    <!-- step 1 -->
-    <teleport to="body" v-if="inModal">
-        <modal
-            v-if="flag.suggestPane"
-            modal-dialog-class="modal-dialog-scrollable modal-xl"
-            @close="resetPane"
+  <!-- step 2 -->
+  <teleport to="body" v-if="inModal">
+    <modal
+      v-if="flag.editPane"
+      modal-dialog-class="modal-dialog-scrollable modal-xl"
+      @close="resetPane"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t(getTextTitle) }}
+          <span v-if="flag.loading" class="loading">
+            <i class="fa fa-circle-o-notch fa-spin fa-fw" />
+            <span class="sr-only">{{ $t("loading") }}</span>
+          </span>
+        </h2>
+      </template>
+
+      <template #body>
+        <edit-pane
+          :context="this.context"
+          :options="this.options"
+          :defaultz="this.defaultz"
+          :entity="this.entity"
+          :flag="this.flag"
+          :errors="this.errors"
+          :check-errors="this.checkErrors"
+          @get-cities="getCities"
+          @get-reference-addresses="getReferenceAddresses"
+        />
+      </template>
+
+      <template #footer>
+        <!--<button class="btn btn-cancel change-icon" @click="resetPane">{{ $t('action.cancel') }}</button>-->
+        <button
+          v-if="!this.context.edit && this.useDatePane"
+          class="btn btn-update change-icon"
+          @click="closeEditPane"
         >
-            <template #header>
-                <h2 class="modal-title">
-                    {{ $t(getTextTitle) }}
-                    <span v-if="flag.loading" class="loading">
-                        <i class="fa fa-circle-o-notch fa-spin fa-fw" />
-                        <span class="sr-only">{{ $t("loading") }}</span>
-                    </span>
-                </h2>
-            </template>
+          {{ $t("nav.next") }}
+          <i class="fa fa-fw fa-arrow-right" />
+        </button>
+        <button v-else class="btn btn-save" @click="closeEditPane">
+          {{ $t("action.save") }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
+  <template v-else>
+    <div v-if="flag.editPane" class="mt-4 flex-grow-1">
+      <edit-pane
+        :context="this.context"
+        :options="this.options"
+        :defaultz="this.defaultz"
+        :entity="this.entity"
+        :flag="this.flag"
+        :errors="this.errors"
+        :check-errors="this.checkErrors"
+        :inside-modal="false"
+        @get-cities="getCities"
+        @get-reference-addresses="getReferenceAddresses"
+      >
+        <template #before>
+          <a class="btn btn-cancel" @click="resetPane">
+            {{ $t("action.cancel") }}
+          </a>
+        </template>
+        <template #action>
+          <li v-if="!this.context.edit && this.useDatePane">
+            <button class="btn btn-update change-icon" @click="closeEditPane">
+              {{ $t("nav.next") }}
+              <i class="fa fa-fw fa-arrow-right" />
+            </button>
+          </li>
+          <li v-else>
+            <button class="btn btn-save" @click="closeEditPane">
+              {{ $t("action.save") }}
+            </button>
+          </li>
+        </template>
+      </edit-pane>
+    </div>
+  </template>
 
-            <template #body>
-                <suggest-pane
-                    :context="this.context"
-                    :options="this.options"
-                    :defaultz="this.defaultz"
-                    :entity="this.entity"
-                    :flag="this.flag"
-                    @pick-address="this.pickAddress"
-                    ref="suggestAddress"
-                />
-            </template>
+  <!-- step 3 -->
+  <teleport to="body" v-if="inModal">
+    <modal
+      v-if="flag.datePane"
+      modal-dialog-class="modal-dialog-scrollable modal-xl"
+      @close="resetPane"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t(getTextTitle) }}
+          <span v-if="flag.loading" class="loading">
+            <i class="fa fa-circle-o-notch fa-spin fa-fw" />
+            <span class="sr-only">{{ $t("loading") }}</span>
+          </span>
+        </h2>
+      </template>
 
-            <template #footer>
-                <button @click="openEditPane" class="btn btn-create">
-                    {{ $t("create_a_new_address") }}
-                </button>
-            </template>
-        </modal>
-    </teleport>
-    <template v-else>
-        <div v-if="flag.suggestPane" class="mt-4 flex-grow-1">
-            <suggest-pane
-                :context="this.context"
-                :options="this.options"
-                :defaultz="this.defaultz"
-                :entity="this.entity"
-                :flag="this.flag"
-                :inside-modal="false"
-                @pick-address="this.pickAddress"
-                ref="suggestAddress"
-            >
-                <template #before v-if="!bypassFirstStep">
-                    <a class="btn btn-cancel" @click="resetPane">
-                        {{ $t("action.cancel") }}
-                    </a>
-                </template>
-                <template #action>
-                    <li>
-                        <button @click="openEditPane" class="btn btn-create">
-                            {{ $t("create_a_new_address") }}
-                        </button>
-                    </li>
-                </template>
-            </suggest-pane>
-        </div>
-    </template>
+      <template #body>
+        <date-pane
+          :context="this.context"
+          :options="this.options"
+          :defaultz="this.defaultz"
+          :entity="this.entity"
+          :flag="this.flag"
+          ref="dateAddress"
+        />
+      </template>
 
-    <!-- step 2 -->
-    <teleport to="body" v-if="inModal">
-        <modal
-            v-if="flag.editPane"
-            modal-dialog-class="modal-dialog-scrollable modal-xl"
-            @close="resetPane"
-        >
-            <template #header>
-                <h2 class="modal-title">
-                    {{ $t(getTextTitle) }}
-                    <span v-if="flag.loading" class="loading">
-                        <i class="fa fa-circle-o-notch fa-spin fa-fw" />
-                        <span class="sr-only">{{ $t("loading") }}</span>
-                    </span>
-                </h2>
-            </template>
-
-            <template #body>
-                <edit-pane
-                    :context="this.context"
-                    :options="this.options"
-                    :defaultz="this.defaultz"
-                    :entity="this.entity"
-                    :flag="this.flag"
-                    :errors="this.errors"
-                    :check-errors="this.checkErrors"
-                    @get-cities="getCities"
-                    @get-reference-addresses="getReferenceAddresses"
-                />
-            </template>
-
-            <template #footer>
-                <!--<button class="btn btn-cancel change-icon" @click="resetPane">{{ $t('action.cancel') }}</button>-->
-                <button
-                    v-if="!this.context.edit && this.useDatePane"
-                    class="btn btn-update change-icon"
-                    @click="closeEditPane"
-                >
-                    {{ $t("nav.next") }}
-                    <i class="fa fa-fw fa-arrow-right" />
-                </button>
-                <button v-else class="btn btn-save" @click="closeEditPane">
-                    {{ $t("action.save") }}
-                </button>
-            </template>
-        </modal>
-    </teleport>
-    <template v-else>
-        <div v-if="flag.editPane" class="mt-4 flex-grow-1">
-            <edit-pane
-                :context="this.context"
-                :options="this.options"
-                :defaultz="this.defaultz"
-                :entity="this.entity"
-                :flag="this.flag"
-                :errors="this.errors"
-                :check-errors="this.checkErrors"
-                :inside-modal="false"
-                @get-cities="getCities"
-                @get-reference-addresses="getReferenceAddresses"
-            >
-                <template #before>
-                    <a class="btn btn-cancel" @click="resetPane">
-                        {{ $t("action.cancel") }}
-                    </a>
-                </template>
-                <template #action>
-                    <li v-if="!this.context.edit && this.useDatePane">
-                        <button
-                            class="btn btn-update change-icon"
-                            @click="closeEditPane"
-                        >
-                            {{ $t("nav.next") }}
-                            <i class="fa fa-fw fa-arrow-right" />
-                        </button>
-                    </li>
-                    <li v-else>
-                        <button class="btn btn-save" @click="closeEditPane">
-                            {{ $t("action.save") }}
-                        </button>
-                    </li>
-                </template>
-            </edit-pane>
-        </div>
-    </template>
-
-    <!-- step 3 -->
-    <teleport to="body" v-if="inModal">
-        <modal
-            v-if="flag.datePane"
-            modal-dialog-class="modal-dialog-scrollable modal-xl"
-            @close="resetPane"
-        >
-            <template #header>
-                <h2 class="modal-title">
-                    {{ $t(getTextTitle) }}
-                    <span v-if="flag.loading" class="loading">
-                        <i class="fa fa-circle-o-notch fa-spin fa-fw" />
-                        <span class="sr-only">{{ $t("loading") }}</span>
-                    </span>
-                </h2>
-            </template>
-
-            <template #body>
-                <date-pane
-                    :context="this.context"
-                    :options="this.options"
-                    :defaultz="this.defaultz"
-                    :entity="this.entity"
-                    :flag="this.flag"
-                    ref="dateAddress"
-                />
-            </template>
-
-            <template #footer>
-                <button class="btn btn-misc" @click="openEditPane">
-                    <i class="fa fa-fw fa-arrow-left" />
-                    {{ $t("nav.previous") }}
-                </button>
-                <button class="btn btn-save" @click="closeDatePane">
-                    {{ $t("action.save") }}
-                </button>
-                <!-- -->
-            </template>
-        </modal>
-    </teleport>
-    <template v-else>
-        <div v-if="flag.datePane" class="mt-4 flex-grow-1">
-            <date-pane
-                :context="this.context"
-                :options="this.options"
-                :defaultz="this.defaultz"
-                :entity="this.entity"
-                :flag="this.flag"
-                :inside-modal="false"
-                ref="dateAddress"
-            >
-                <template #before>
-                    <button class="btn btn-misc" @click="openEditPane">
-                        <i class="fa fa-fw fa-arrow-left" />
-                        {{ $t("nav.previous") }}
-                    </button>
-                </template>
-                <template #action>
-                    <li>
-                        <button class="btn btn-save" @click="closeDatePane">
-                            {{ $t("action.save") }}
-                        </button>
-                    </li>
-                </template>
-            </date-pane>
-        </div>
-    </template>
+      <template #footer>
+        <button class="btn btn-misc" @click="openEditPane">
+          <i class="fa fa-fw fa-arrow-left" />
+          {{ $t("nav.previous") }}
+        </button>
+        <button class="btn btn-save" @click="closeDatePane">
+          {{ $t("action.save") }}
+        </button>
+        <!-- -->
+      </template>
+    </modal>
+  </teleport>
+  <template v-else>
+    <div v-if="flag.datePane" class="mt-4 flex-grow-1">
+      <date-pane
+        :context="this.context"
+        :options="this.options"
+        :defaultz="this.defaultz"
+        :entity="this.entity"
+        :flag="this.flag"
+        :inside-modal="false"
+        ref="dateAddress"
+      >
+        <template #before>
+          <button class="btn btn-misc" @click="openEditPane">
+            <i class="fa fa-fw fa-arrow-left" />
+            {{ $t("nav.previous") }}
+          </button>
+        </template>
+        <template #action>
+          <li>
+            <button class="btn btn-save" @click="closeDatePane">
+              {{ $t("action.save") }}
+            </button>
+          </li>
+        </template>
+      </date-pane>
+    </div>
+  </template>
 </template>
 
 <script>
 import Modal from "ChillMainAssets/vuejs/_components/Modal";
 import {
-    duplicateAddress,
-    fetchCountries,
-    fetchCities,
-    fetchReferenceAddresses,
-    getAddress,
-    patchAddress,
-    postAddress,
-    postPostalCode,
+  duplicateAddress,
+  fetchCountries,
+  fetchCities,
+  fetchReferenceAddresses,
+  getAddress,
+  patchAddress,
+  postAddress,
+  postPostalCode,
 } from "../api";
 import {
-    postAddressToPerson,
-    postAddressToHousehold,
+  postAddressToPerson,
+  postAddressToHousehold,
 } from "ChillPersonAssets/vuejs/_api/AddAddress.js";
 import ShowPane from "./ShowPane.vue";
 import SuggestPane from "./SuggestPane.vue";
@@ -253,661 +250,648 @@ import EditPane from "./EditPane.vue";
 import DatePane from "./DatePane.vue";
 
 export default {
-    name: "AddAddress",
-    props: ["context", "options", "addressChangedCallback"],
-    components: {
-        Modal,
-        ShowPane,
-        SuggestPane,
-        EditPane,
-        DatePane,
+  name: "AddAddress",
+  props: ["context", "options", "addressChangedCallback"],
+  components: {
+    Modal,
+    ShowPane,
+    SuggestPane,
+    EditPane,
+    DatePane,
+  },
+  emits: {
+    pickAddress: null,
+  },
+  data() {
+    return {
+      flag: {
+        showPane: true, // begin with showPane
+        suggestPane: false,
+        editPane: false,
+        datePane: false,
+        loading: false,
+        success: false,
+      },
+      errors: [],
+      defaultz: {
+        button: {
+          text: {
+            create: "add_an_address_title",
+            edit: "edit_address",
+          },
+          type: { create: "btn-create", edit: "btn-update" },
+          displayText: true,
+        },
+        title: { create: "add_an_address_title", edit: "edit_address" },
+        openPanesInModal: true,
+        stickyActions: false,
+        // show a message when no address.
+        // if set to undefined, the value will be equivalent to false if stickyActions is false, true otherwise.
+        showMessageWhenNoAddress: undefined,
+        useDate: {
+          validFrom: false,
+          validTo: false,
+        },
+        onlyButton: false,
+      },
+      entity: {
+        address: {}, // <== loaded and returned
+        loaded: {
+          countries: [],
+          cities: [],
+          addresses: [],
+        },
+        selected: {
+          // <== make temporary changes
+          isNoAddress: false,
+          country: {},
+          city: {},
+          postcode: {
+            code: null,
+            name: null,
+          },
+          address: {},
+          writeNew: {
+            address: false,
+            postcode: false,
+          },
+          valid: {
+            from: new Date(),
+            to: null,
+          },
+        },
+        addressMap: {
+          // Note: LeafletJs demands [lat, lon]
+          // cfr https://macwright.com/lonlat/
+          center: [
+            this.context.defaults.map_center.x,
+            this.context.defaults.map_center.y,
+          ],
+          zoom: this.context.defaults.map_center.z,
+        },
+      },
+      errorMsg: [],
+    };
+  },
+  computed: {
+    inModal() {
+      return typeof this.options.openPanesInModal !== "undefined"
+        ? this.options.openPanesInModal
+        : this.defaultz.openPanesInModal;
     },
-    emits: {
-        pickAddress: null,
+    validFrom() {
+      return typeof this.options.useDate !== "undefined" &&
+        typeof this.options.useDate.validFrom !== "undefined"
+        ? this.options.useDate.validFrom
+        : this.defaultz.useDate.validFrom;
     },
-    data() {
-        return {
-            flag: {
-                showPane: true, // begin with showPane
-                suggestPane: false,
-                editPane: false,
-                datePane: false,
-                loading: false,
-                success: false,
-            },
-            errors: [],
-            defaultz: {
-                button: {
-                    text: {
-                        create: "add_an_address_title",
-                        edit: "edit_address",
-                    },
-                    type: { create: "btn-create", edit: "btn-update" },
-                    displayText: true,
-                },
-                title: { create: "add_an_address_title", edit: "edit_address" },
-                openPanesInModal: true,
-                stickyActions: false,
-                // show a message when no address.
-                // if set to undefined, the value will be equivalent to false if stickyActions is false, true otherwise.
-                showMessageWhenNoAddress: undefined,
-                useDate: {
-                    validFrom: false,
-                    validTo: false,
-                },
-                onlyButton: false,
-            },
-            entity: {
-                address: {}, // <== loaded and returned
-                loaded: {
-                    countries: [],
-                    cities: [],
-                    addresses: [],
-                },
-                selected: {
-                    // <== make temporary changes
-                    isNoAddress: false,
-                    country: {},
-                    city: {},
-                    postcode: {
-                        code: null,
-                        name: null,
-                    },
-                    address: {},
-                    writeNew: {
-                        address: false,
-                        postcode: false,
-                    },
-                    valid: {
-                        from: new Date(),
-                        to: null,
-                    },
-                },
-                addressMap: {
-                    // Note: LeafletJs demands [lat, lon]
-                    // cfr https://macwright.com/lonlat/
-                    center: [
-                        this.context.defaults.map_center.x,
-                        this.context.defaults.map_center.y,
-                    ],
-                    zoom: this.context.defaults.map_center.z,
-                },
-            },
-            errorMsg: [],
-        };
+    validTo() {
+      return typeof this.options.useDate !== "undefined" &&
+        typeof this.options.useDate.validTo !== "undefined"
+        ? this.options.useDate.validTo
+        : this.defaultz.useDate.validTo;
     },
-    computed: {
-        inModal() {
-            return typeof this.options.openPanesInModal !== "undefined"
-                ? this.options.openPanesInModal
-                : this.defaultz.openPanesInModal;
-        },
-        validFrom() {
-            return typeof this.options.useDate !== "undefined" &&
-                typeof this.options.useDate.validFrom !== "undefined"
-                ? this.options.useDate.validFrom
-                : this.defaultz.useDate.validFrom;
-        },
-        validTo() {
-            return typeof this.options.useDate !== "undefined" &&
-                typeof this.options.useDate.validTo !== "undefined"
-                ? this.options.useDate.validTo
-                : this.defaultz.useDate.validTo;
-        },
-        useDatePane() {
-            return this.validFrom || this.validTo ? true : false;
-        },
-        hasSuggestions() {
-            if (typeof this.context.suggestions !== "undefined") {
-                console.log("hasSuggestions", this.context.suggestions);
-                return this.context.suggestions.length > 0;
-            }
-            return false;
-        },
-        displaySuggestions() {
-            return !this.context.edit && this.hasSuggestions;
-        },
-        getTextTitle() {
-            if (
-                typeof this.options.title !== "undefined" &&
-                (this.options.title.edit !== null ||
-                    this.options.title.create !== null)
-            ) {
-                return this.context.edit
-                    ? this.options.title.edit
-                    : this.options.title.create;
-            }
-            return this.context.edit
-                ? this.defaultz.title.edit
-                : this.defaultz.title.create;
-        },
-        bypassFirstStep() {
-            // exception: passing step0 if new address and pane are not in modal
-            return !this.context.edit && !this.inModal;
-        },
-        forceRedirect() {
-            return !(
-                this.context.backUrl === null ||
-                typeof this.context.backUrl === "undefined"
-            );
-        },
+    useDatePane() {
+      return this.validFrom || this.validTo ? true : false;
     },
-    mounted() {
-        //console.log('validFrom', this.validFrom);
-        //console.log('validTo', this.validTo);
-        //console.log('useDatePane', this.useDatePane);
-        //console.log('Mounted now !');
+    hasSuggestions() {
+      if (typeof this.context.suggestions !== "undefined") {
+        console.log("hasSuggestions", this.context.suggestions);
+        return this.context.suggestions.length > 0;
+      }
+      return false;
+    },
+    displaySuggestions() {
+      return !this.context.edit && this.hasSuggestions;
+    },
+    getTextTitle() {
+      if (
+        typeof this.options.title !== "undefined" &&
+        (this.options.title.edit !== null || this.options.title.create !== null)
+      ) {
+        return this.context.edit
+          ? this.options.title.edit
+          : this.options.title.create;
+      }
+      return this.context.edit
+        ? this.defaultz.title.edit
+        : this.defaultz.title.create;
+    },
+    bypassFirstStep() {
+      // exception: passing step0 if new address and pane are not in modal
+      return !this.context.edit && !this.inModal;
+    },
+    forceRedirect() {
+      return !(
+        this.context.backUrl === null ||
+        typeof this.context.backUrl === "undefined"
+      );
+    },
+  },
+  mounted() {
+    //console.log('validFrom', this.validFrom);
+    //console.log('validTo', this.validTo);
+    //console.log('useDatePane', this.useDatePane);
+    //console.log('Mounted now !');
 
-        if (this.context.edit) {
-            console.log("getInitialAddress", this.context.addressId);
-            this.getInitialAddress(this.context.addressId);
+    if (this.context.edit) {
+      console.log("getInitialAddress", this.context.addressId);
+      this.getInitialAddress(this.context.addressId);
+    }
+    this.openShowPane();
+  },
+  methods: {
+    /*
+     *  Opening and closing Panes when interacting with buttons
+     */
+    openShowPane() {
+      if (this.flag.editPane === false && this.bypassFirstStep) {
+        console.log("bypassFirstStep");
+        this.closeShowPane();
+        this.openEditPane();
+      } else {
+        this.flag.showPane = true;
+        //console.log('step0: open the Show Panel');
+      }
+    },
+    closeShowPane() {
+      // Show pane can be closed only when openPanesInModal is false
+      if (!this.inModal) {
+        this.flag.showPane = false;
+        console.log("step0: close the Show Panel");
+      }
+    },
+    openSuggestPane() {
+      this.flag.suggestPane = true;
+      console.log("step1: open the Suggestion Panel");
+    },
+    closeSuggestPane() {
+      this.flag.suggestPane = false;
+      console.log("step1: close the Suggestion Panel");
+    },
+    openEditPane() {
+      if (this.flag.suggestPane === false && this.displaySuggestions) {
+        console.log("displaySuggestions");
+        this.openSuggestPane();
+      } else {
+        if (this.flag.datePane === false) {
+          this.initForm(); // reset form except if we come back from datePane
         }
-        this.openShowPane();
+        this.getCountries(); // will open editPane when resolve promise
+      }
     },
-    methods: {
-        /*
-         *  Opening and closing Panes when interacting with buttons
-         */
-        openShowPane() {
-            if (this.flag.editPane === false && this.bypassFirstStep) {
-                console.log("bypassFirstStep");
+    closeEditPane() {
+      this.flag.editPane = false;
+      console.log("step2: close the Edit Panel");
+      if (!this.context.edit && this.useDatePane) {
+        this.openDatePane();
+      } else {
+        this.applyChanges();
+        if (!this.forceRedirect) {
+          this.openShowPane();
+        }
+      }
+    },
+    openDatePane() {
+      this.flag.datePane = true;
+      console.log("step3: open the Date Panel");
+    },
+    closeDatePane() {
+      this.applyChanges();
+      this.flag.datePane = false;
+      console.log("step3: close the Date Panel");
+    },
+    resetPane() {
+      console.log("resetPane");
+      this.flag.suggestPane = false;
+      this.flag.editPane = false;
+      this.flag.datePane = false;
+      this.openShowPane();
+    },
+
+    /*
+     *  What happens when submitting last Pane:
+     *  - redirect or reset pane,
+     *  - change context to editing
+     */
+    afterLastPaneAction(params) {
+      this.initForm();
+      if (this.forceRedirect) {
+        console.log("redirect to backUrl");
+        window.location.assign(this.context.backUrl);
+      } else {
+        console.log("don't redirect");
+        this.resetPane();
+        if (!this.context.edit) {
+          this.context.edit = true;
+          this.context.addressId = params.addressId;
+          console.log("context is now edit, with address", params.addressId);
+        }
+      }
+    },
+
+    /*
+     *  Async Fetch datas
+     */
+    getInitialAddress(id) {
+      this.flag.loading = true;
+      getAddress(id)
+        .then(
+          (address) =>
+            new Promise((resolve, reject) => {
+              this.entity.address = address;
+              this.flag.loading = false;
+              resolve();
+            }),
+        )
+        .catch((error) => {
+          this.errorMsg.push(error.message);
+          this.flag.loading = false;
+        });
+    },
+
+    getCountries() {
+      this.flag.loading = true;
+      fetchCountries()
+        .then(
+          (countries) =>
+            new Promise((resolve, reject) => {
+              this.entity.loaded.countries = countries.results;
+              if (this.flag.showPane === true) {
                 this.closeShowPane();
-                this.openEditPane();
-            } else {
-                this.flag.showPane = true;
-                //console.log('step0: open the Show Panel');
-            }
-        },
-        closeShowPane() {
-            // Show pane can be closed only when openPanesInModal is false
-            if (!this.inModal) {
-                this.flag.showPane = false;
-                console.log("step0: close the Show Panel");
-            }
-        },
-        openSuggestPane() {
-            this.flag.suggestPane = true;
-            console.log("step1: open the Suggestion Panel");
-        },
-        closeSuggestPane() {
-            this.flag.suggestPane = false;
-            console.log("step1: close the Suggestion Panel");
-        },
-        openEditPane() {
-            if (this.flag.suggestPane === false && this.displaySuggestions) {
-                console.log("displaySuggestions");
-                this.openSuggestPane();
-            } else {
-                if (this.flag.datePane === false) {
-                    this.initForm(); // reset form except if we come back from datePane
-                }
-                this.getCountries(); // will open editPane when resolve promise
-            }
-        },
-        closeEditPane() {
-            this.flag.editPane = false;
-            console.log("step2: close the Edit Panel");
-            if (!this.context.edit && this.useDatePane) {
-                this.openDatePane();
-            } else {
-                this.applyChanges();
-                if (!this.forceRedirect) {
-                    this.openShowPane();
-                }
-            }
-        },
-        openDatePane() {
-            this.flag.datePane = true;
-            console.log("step3: open the Date Panel");
-        },
-        closeDatePane() {
-            this.applyChanges();
-            this.flag.datePane = false;
-            console.log("step3: close the Date Panel");
-        },
-        resetPane() {
-            console.log("resetPane");
-            this.flag.suggestPane = false;
-            this.flag.editPane = false;
-            this.flag.datePane = false;
-            this.openShowPane();
-        },
-
-        /*
-         *  What happens when submitting last Pane:
-         *  - redirect or reset pane,
-         *  - change context to editing
-         */
-        afterLastPaneAction(params) {
-            this.initForm();
-            if (this.forceRedirect) {
-                console.log("redirect to backUrl");
-                window.location.assign(this.context.backUrl);
-            } else {
-                console.log("don't redirect");
-                this.resetPane();
-                if (!this.context.edit) {
-                    this.context.edit = true;
-                    this.context.addressId = params.addressId;
-                    console.log(
-                        "context is now edit, with address",
-                        params.addressId,
-                    );
-                }
-            }
-        },
-
-        /*
-         *  Async Fetch datas
-         */
-        getInitialAddress(id) {
-            this.flag.loading = true;
-            getAddress(id)
-                .then(
-                    (address) =>
-                        new Promise((resolve, reject) => {
-                            this.entity.address = address;
-                            this.flag.loading = false;
-                            resolve();
-                        }),
-                )
-                .catch((error) => {
-                    this.errorMsg.push(error.message);
-                    this.flag.loading = false;
-                });
-        },
-
-        getCountries() {
-            this.flag.loading = true;
-            fetchCountries()
-                .then(
-                    (countries) =>
-                        new Promise((resolve, reject) => {
-                            this.entity.loaded.countries = countries.results;
-                            if (this.flag.showPane === true) {
-                                this.closeShowPane();
-                            }
-                            if (this.flag.suggestPane === true) {
-                                this.closeSuggestPane();
-                            }
-                            if (this.flag.datePane === true) {
-                                this.flag.datePane = false;
-                            }
-                            console.log("step2: open the Edit panel");
-                            this.flag.editPane = true;
-                            this.flag.loading = false;
-                            resolve();
-                        }),
-                )
-                .catch((error) => {
-                    this.errorMsg.push(error.message);
-                    this.flag.loading = false;
-                });
-        },
-
-        getCities(country) {
-            this.flag.loading = true;
-            fetchCities(country)
-                .then(
-                    (cities) =>
-                        new Promise((resolve, reject) => {
-                            this.entity.loaded.cities = cities.results.filter(
-                                (c) => c.origin !== 3,
-                            ); // filter out user-defined cities
-                            this.flag.loading = false;
-                            resolve();
-                        }),
-                )
-                .catch((error) => {
-                    this.errorMsg.push(error.message);
-                    this.flag.loading = false;
-                });
-        },
-
-        getReferenceAddresses(city) {
-            this.flag.loading = true;
-            fetchReferenceAddresses(city)
-                .then(
-                    (addresses) =>
-                        new Promise((resolve, reject) => {
-                            this.entity.loaded.addresses = addresses.results;
-                            this.flag.loading = false;
-                            resolve();
-                        }),
-                )
-                .catch((error) => {
-                    this.errorMsg.push(error.message);
-                    this.flag.loading = false;
-                });
-        },
-
-        checkErrors() {
-            this.errors = [];
-            if (this.entity.selected.country === null) {
-                this.errors.push("Un pays doit être sélectionné.");
-            }
-            if (this.entity.selected.city === null) {
-                this.errors.push("Une ville doit être sélectionnée.");
-            } else {
-                if (Object.keys(this.entity.selected.city).length === 0) {
-                    this.errors.push("Une ville doit être sélectionnée.");
-                }
-            }
-            if (!this.entity.selected.isNoAddress) {
-                if (
-                    this.entity.selected.address.street === null ||
-                    this.entity.selected.address.street === "" ||
-                    this.entity.selected.address.streetNumber === null ||
-                    this.entity.selected.address.streetNumber === ""
-                ) {
-                    this.errors.push("Une adresse doit être sélectionnée.");
-                }
-            }
-        },
-
-        /*
-         *   Make form ready for new changes
-         */
-        initForm() {
-            console.log("init form");
-
-            this.entity.loaded.addresses = [];
-            this.entity.loaded.cities = [];
-            this.entity.loaded.countries = [];
-
-            this.entity.selected.confidential = this.context.edit
-                ? this.entity.address.confidential
-                : false;
-            this.entity.selected.isNoAddress =
-                this.context.edit && this.entity.address.text === ""
-                    ? true
-                    : false;
-
-            this.entity.selected.country = this.context.edit
-                ? this.entity.address.country
-                : {};
-            this.entity.selected.postcode = this.context.edit
-                ? this.entity.address.postcode
-                : {};
-            this.entity.selected.city = this.context.edit
-                ? this.entity.address.postcode
-                : {};
-
-            this.entity.selected.address = {};
-            this.entity.selected.address.street = this.context.edit
-                ? this.entity.address.street
-                : "";
-            this.entity.selected.address.streetNumber = this.context.edit
-                ? this.entity.address.streetNumber
-                : "";
-            this.entity.selected.address.floor = this.context.edit
-                ? this.entity.address.floor
-                : "";
-            this.entity.selected.address.corridor = this.context.edit
-                ? this.entity.address.corridor
-                : "";
-            this.entity.selected.address.steps = this.context.edit
-                ? this.entity.address.steps
-                : "";
-            this.entity.selected.address.flat = this.context.edit
-                ? this.entity.address.flat
-                : "";
-            this.entity.selected.address.buildingName = this.context.edit
-                ? this.entity.address.buildingName
-                : "";
-            this.entity.selected.address.distribution = this.context.edit
-                ? this.entity.address.distribution
-                : "";
-            this.entity.selected.address.extra = this.context.edit
-                ? this.entity.address.extra
-                : "";
-
-            this.entity.selected.writeNew.address =
-                this.context.edit &&
-                this.entity.address.addressReference === null &&
-                this.entity.address.street.length > 0;
-            this.entity.selected.writeNew.postcode = false; // NB: this used to be this.context.edit, but think it was erroneous;
-            console.log(
-                "!! just set writeNew.postcode to",
-                this.entity.selected.writeNew.postcode,
-            );
-
-            this.checkErrors();
-        },
-
-        /*
-         *  When changes are validated (get out step2 edit pane, button valid),
-         *  apply some transformations before asyncing with backend
-         *  from entity.selected to entity.address
-         */
-        applyChanges() {
-            console.log("apply changes");
-            let newAddress = {
-                confidential: this.entity.selected.confidential,
-                isNoAddress: this.entity.selected.isNoAddress,
-                street: this.entity.selected.isNoAddress
-                    ? ""
-                    : this.entity.selected.address.street,
-                streetNumber: this.entity.selected.isNoAddress
-                    ? ""
-                    : this.entity.selected.address.streetNumber,
-                postcode: { id: this.entity.selected.city.id },
-                floor: this.entity.selected.address.floor,
-                corridor: this.entity.selected.address.corridor,
-                steps: this.entity.selected.address.steps,
-                flat: this.entity.selected.address.flat,
-                buildingName: this.entity.selected.address.buildingName,
-                distribution: this.entity.selected.address.distribution,
-                extra: this.entity.selected.address.extra,
-            };
-
-            if (this.entity.selected.address.point !== undefined) {
-                newAddress = Object.assign(newAddress, {
-                    point: this.entity.selected.address.point.coordinates,
-                });
-            } else {
-                if (this.entity.selected.postcode.coordinates) {
-                    newAddress = Object.assign(newAddress, {
-                        point: this.entity.selected.postcode.coordinates,
-                    });
-                }
-            }
-
-            // add the address reference, if any
-            if (this.entity.selected.address.addressReference !== undefined) {
-                newAddress = Object.assign(newAddress, {
-                    addressReference:
-                        this.entity.selected.address.addressReference,
-                });
-            } else {
-                newAddress = Object.assign(newAddress, {
-                    addressReference: null,
-                });
-            }
-
-            if (this.validFrom) {
-                console.log(
-                    "add validFrom in fetch body",
-                    this.entity.selected.valid.from,
-                );
-                newAddress = Object.assign(newAddress, {
-                    validFrom: {
-                        datetime: `${this.entity.selected.valid.from.toISOString().split("T")[0]}T00:00:00+0100`,
-                    },
-                });
-            }
-            if (this.validTo && null !== this.entity.selected.valid.to) {
-                console.log(
-                    "add validTo in fetch body",
-                    this.entity.selected.valid.to,
-                );
-                newAddress = Object.assign(newAddress, {
-                    validTo: {
-                        datetime: `${this.entity.selected.valid.to.toISOString().split("T")[0]}T00:00:00+0100`,
-                    },
-                });
-            }
-            if (this.entity.selected.writeNew.postcode) {
-                let newPostcode = this.entity.selected.postcode;
-                newPostcode = Object.assign(newPostcode, {
-                    country: { id: this.entity.selected.country.id },
-                }); //TODO why not assign postcodeBody here = Object.assign(postcodeBody, {'origin': 3}); ?
-                console.log(
-                    "writeNew postcode is true! newPostcode: ",
-                    newPostcode,
-                );
-                newAddress = Object.assign(newAddress, {
-                    newPostcode: newPostcode,
-                });
-            }
-
-            if (!this.context.edit) {
-                this.addNewAddress(newAddress).then((payload) =>
-                    this.addressChangedCallback(payload),
-                );
-            } else {
-                this.updateAddress({
-                    addressId: this.context.addressId,
-                    newAddress: newAddress,
-                }).then((payload) => this.addressChangedCallback(payload));
-            }
-        },
-
-        /*
-         *  Async POST transactions,
-         *  creating new address, and receive backend datas when promise is resolved
-         */
-        addNewAddress(payload) {
-            console.log("addNewAddress", payload);
-            this.flag.loading = true;
-
-            if ("newPostcode" in payload) {
-                let postcodeBody = payload.newPostcode;
-                postcodeBody = Object.assign(postcodeBody, { origin: 3 });
-                console.log("juste before post new postcode", postcodeBody);
-                return postPostalCode(postcodeBody).then((postalCode) => {
-                    console.log("new postcode created", postalCode.id);
-                    payload.postcode = { id: postalCode.id };
-                    return this.postNewAddress(payload);
-                });
-            } else {
-                return this.postNewAddress(payload);
-            }
-        },
-
-        postNewAddress(payload) {
-            console.log("postNewAddress", payload);
-            return postAddress(payload)
-                .then(
-                    (address) =>
-                        new Promise((resolve, reject) => {
-                            this.entity.address = address;
-                            this.flag.loading = false;
-                            this.flag.success = true;
-                            resolve({
-                                address,
-                                targetOrigin: this.context.target,
-                                // for "legacy" use:
-                                target: this.context.target.name,
-                                targetId: this.context.target.id,
-                                addressId: this.entity.address.address_id,
-                            });
-                        }),
-                )
-                .catch((error) => {
-                    this.errorMsg.push(error);
-                    this.flag.loading = false;
-                });
-        },
-
-        /*
-         *  Async PATCH transactions,
-         *  then update existing address with backend datas when promise is resolved
-         */
-        updateAddress(payload) {
-            this.flag.loading = true;
-
-            // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
-            // BUG réécrit un postcode à chaque édition !
-            if ("newPostcode" in payload.newAddress) {
-                let postcodeBody = payload.newAddress.newPostcode;
-                postcodeBody = Object.assign(postcodeBody, { origin: 3 });
-
-                console.log("juste before post new postcode", postcodeBody);
-                return postPostalCode(postcodeBody).then((postalCode) => {
-                    console.log("new postcode created", postalCode.id);
-                    payload.newAddress.postcode = { id: postalCode.id };
-                    return this.patchExistingAddress(payload);
-                });
-            } else {
-                return this.patchExistingAddress(payload);
-            }
-        },
-
-        patchExistingAddress(payload) {
-            console.log("patchExistingAddress", payload);
-            return patchAddress(payload.addressId, payload.newAddress)
-                .then(
-                    (address) =>
-                        new Promise((resolve, reject) => {
-                            this.entity.address = address;
-                            this.flag.loading = false;
-                            this.flag.success = true;
-                            return resolve({
-                                address,
-                                targetOrigin: this.context.target,
-                                // for "legacy" use:
-                                target: this.context.target.name,
-                                targetId: this.context.target.id,
-                                addressId: this.entity.address.address_id,
-                            });
-                        }),
-                )
-                .catch((error) => {
-                    this.errorMsg.push(error);
-                    this.flag.loading = false;
-                });
-        },
-
-        /**
-         *
-         * Called when the event pick-address is emitted, which is, by the way,
-         * called when an address suggestion is picked.
-         *
-         * @param address the address selected
-         */
-        pickAddress(address) {
-            console.log("pickAddress", address);
-            duplicateAddress(address).then((newAddress) => {
-                this.entity.address = newAddress;
-                this.flag.loading = false;
-                this.flag.success = true;
-                let payload = {
-                    address: newAddress,
-                    targetOrigin: this.context.target,
-                    // for "legacy" use:
-                    target: this.context.target.name,
-                    targetId: this.context.target.id,
-                    addressId: this.entity.address.address_id,
-                };
-                this.addressChangedCallback(payload);
+              }
+              if (this.flag.suggestPane === true) {
                 this.closeSuggestPane();
-            });
-        },
+              }
+              if (this.flag.datePane === true) {
+                this.flag.datePane = false;
+              }
+              console.log("step2: open the Edit panel");
+              this.flag.editPane = true;
+              this.flag.loading = false;
+              resolve();
+            }),
+        )
+        .catch((error) => {
+          this.errorMsg.push(error.message);
+          this.flag.loading = false;
+        });
     },
+
+    getCities(country) {
+      this.flag.loading = true;
+      fetchCities(country)
+        .then(
+          (cities) =>
+            new Promise((resolve, reject) => {
+              this.entity.loaded.cities = cities.results.filter(
+                (c) => c.origin !== 3,
+              ); // filter out user-defined cities
+              this.flag.loading = false;
+              resolve();
+            }),
+        )
+        .catch((error) => {
+          this.errorMsg.push(error.message);
+          this.flag.loading = false;
+        });
+    },
+
+    getReferenceAddresses(city) {
+      this.flag.loading = true;
+      fetchReferenceAddresses(city)
+        .then(
+          (addresses) =>
+            new Promise((resolve, reject) => {
+              this.entity.loaded.addresses = addresses.results;
+              this.flag.loading = false;
+              resolve();
+            }),
+        )
+        .catch((error) => {
+          this.errorMsg.push(error.message);
+          this.flag.loading = false;
+        });
+    },
+
+    checkErrors() {
+      this.errors = [];
+      if (this.entity.selected.country === null) {
+        this.errors.push("Un pays doit être sélectionné.");
+      }
+      if (this.entity.selected.city === null) {
+        this.errors.push("Une ville doit être sélectionnée.");
+      } else {
+        if (Object.keys(this.entity.selected.city).length === 0) {
+          this.errors.push("Une ville doit être sélectionnée.");
+        }
+      }
+      if (!this.entity.selected.isNoAddress) {
+        if (
+          this.entity.selected.address.street === null ||
+          this.entity.selected.address.street === "" ||
+          this.entity.selected.address.streetNumber === null ||
+          this.entity.selected.address.streetNumber === ""
+        ) {
+          this.errors.push("Une adresse doit être sélectionnée.");
+        }
+      }
+    },
+
+    /*
+     *   Make form ready for new changes
+     */
+    initForm() {
+      console.log("init form");
+
+      this.entity.loaded.addresses = [];
+      this.entity.loaded.cities = [];
+      this.entity.loaded.countries = [];
+
+      this.entity.selected.confidential = this.context.edit
+        ? this.entity.address.confidential
+        : false;
+      this.entity.selected.isNoAddress =
+        this.context.edit && this.entity.address.text === "" ? true : false;
+
+      this.entity.selected.country = this.context.edit
+        ? this.entity.address.country
+        : {};
+      this.entity.selected.postcode = this.context.edit
+        ? this.entity.address.postcode
+        : {};
+      this.entity.selected.city = this.context.edit
+        ? this.entity.address.postcode
+        : {};
+
+      this.entity.selected.address = {};
+      this.entity.selected.address.street = this.context.edit
+        ? this.entity.address.street
+        : "";
+      this.entity.selected.address.streetNumber = this.context.edit
+        ? this.entity.address.streetNumber
+        : "";
+      this.entity.selected.address.floor = this.context.edit
+        ? this.entity.address.floor
+        : "";
+      this.entity.selected.address.corridor = this.context.edit
+        ? this.entity.address.corridor
+        : "";
+      this.entity.selected.address.steps = this.context.edit
+        ? this.entity.address.steps
+        : "";
+      this.entity.selected.address.flat = this.context.edit
+        ? this.entity.address.flat
+        : "";
+      this.entity.selected.address.buildingName = this.context.edit
+        ? this.entity.address.buildingName
+        : "";
+      this.entity.selected.address.distribution = this.context.edit
+        ? this.entity.address.distribution
+        : "";
+      this.entity.selected.address.extra = this.context.edit
+        ? this.entity.address.extra
+        : "";
+
+      this.entity.selected.writeNew.address =
+        this.context.edit &&
+        this.entity.address.addressReference === null &&
+        this.entity.address.street.length > 0;
+      this.entity.selected.writeNew.postcode = false; // NB: this used to be this.context.edit, but think it was erroneous;
+      console.log(
+        "!! just set writeNew.postcode to",
+        this.entity.selected.writeNew.postcode,
+      );
+
+      this.checkErrors();
+    },
+
+    /*
+     *  When changes are validated (get out step2 edit pane, button valid),
+     *  apply some transformations before asyncing with backend
+     *  from entity.selected to entity.address
+     */
+    applyChanges() {
+      console.log("apply changes");
+      let newAddress = {
+        confidential: this.entity.selected.confidential,
+        isNoAddress: this.entity.selected.isNoAddress,
+        street: this.entity.selected.isNoAddress
+          ? ""
+          : this.entity.selected.address.street,
+        streetNumber: this.entity.selected.isNoAddress
+          ? ""
+          : this.entity.selected.address.streetNumber,
+        postcode: { id: this.entity.selected.city.id },
+        floor: this.entity.selected.address.floor,
+        corridor: this.entity.selected.address.corridor,
+        steps: this.entity.selected.address.steps,
+        flat: this.entity.selected.address.flat,
+        buildingName: this.entity.selected.address.buildingName,
+        distribution: this.entity.selected.address.distribution,
+        extra: this.entity.selected.address.extra,
+      };
+
+      if (this.entity.selected.address.point !== undefined) {
+        newAddress = Object.assign(newAddress, {
+          point: this.entity.selected.address.point.coordinates,
+        });
+      } else {
+        if (this.entity.selected.postcode.coordinates) {
+          newAddress = Object.assign(newAddress, {
+            point: this.entity.selected.postcode.coordinates,
+          });
+        }
+      }
+
+      // add the address reference, if any
+      if (this.entity.selected.address.addressReference !== undefined) {
+        newAddress = Object.assign(newAddress, {
+          addressReference: this.entity.selected.address.addressReference,
+        });
+      } else {
+        newAddress = Object.assign(newAddress, {
+          addressReference: null,
+        });
+      }
+
+      if (this.validFrom) {
+        console.log(
+          "add validFrom in fetch body",
+          this.entity.selected.valid.from,
+        );
+        newAddress = Object.assign(newAddress, {
+          validFrom: {
+            datetime: `${this.entity.selected.valid.from.toISOString().split("T")[0]}T00:00:00+0100`,
+          },
+        });
+      }
+      if (this.validTo && null !== this.entity.selected.valid.to) {
+        console.log("add validTo in fetch body", this.entity.selected.valid.to);
+        newAddress = Object.assign(newAddress, {
+          validTo: {
+            datetime: `${this.entity.selected.valid.to.toISOString().split("T")[0]}T00:00:00+0100`,
+          },
+        });
+      }
+      if (this.entity.selected.writeNew.postcode) {
+        let newPostcode = this.entity.selected.postcode;
+        newPostcode = Object.assign(newPostcode, {
+          country: { id: this.entity.selected.country.id },
+        }); //TODO why not assign postcodeBody here = Object.assign(postcodeBody, {'origin': 3}); ?
+        console.log("writeNew postcode is true! newPostcode: ", newPostcode);
+        newAddress = Object.assign(newAddress, {
+          newPostcode: newPostcode,
+        });
+      }
+
+      if (!this.context.edit) {
+        this.addNewAddress(newAddress).then((payload) =>
+          this.addressChangedCallback(payload),
+        );
+      } else {
+        this.updateAddress({
+          addressId: this.context.addressId,
+          newAddress: newAddress,
+        }).then((payload) => this.addressChangedCallback(payload));
+      }
+    },
+
+    /*
+     *  Async POST transactions,
+     *  creating new address, and receive backend datas when promise is resolved
+     */
+    addNewAddress(payload) {
+      console.log("addNewAddress", payload);
+      this.flag.loading = true;
+
+      if ("newPostcode" in payload) {
+        let postcodeBody = payload.newPostcode;
+        postcodeBody = Object.assign(postcodeBody, { origin: 3 });
+        console.log("juste before post new postcode", postcodeBody);
+        return postPostalCode(postcodeBody).then((postalCode) => {
+          console.log("new postcode created", postalCode.id);
+          payload.postcode = { id: postalCode.id };
+          return this.postNewAddress(payload);
+        });
+      } else {
+        return this.postNewAddress(payload);
+      }
+    },
+
+    postNewAddress(payload) {
+      console.log("postNewAddress", payload);
+      return postAddress(payload)
+        .then(
+          (address) =>
+            new Promise((resolve, reject) => {
+              this.entity.address = address;
+              this.flag.loading = false;
+              this.flag.success = true;
+              resolve({
+                address,
+                targetOrigin: this.context.target,
+                // for "legacy" use:
+                target: this.context.target.name,
+                targetId: this.context.target.id,
+                addressId: this.entity.address.address_id,
+              });
+            }),
+        )
+        .catch((error) => {
+          this.errorMsg.push(error);
+          this.flag.loading = false;
+        });
+    },
+
+    /*
+     *  Async PATCH transactions,
+     *  then update existing address with backend datas when promise is resolved
+     */
+    updateAddress(payload) {
+      this.flag.loading = true;
+
+      // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
+      // BUG réécrit un postcode à chaque édition !
+      if ("newPostcode" in payload.newAddress) {
+        let postcodeBody = payload.newAddress.newPostcode;
+        postcodeBody = Object.assign(postcodeBody, { origin: 3 });
+
+        console.log("juste before post new postcode", postcodeBody);
+        return postPostalCode(postcodeBody).then((postalCode) => {
+          console.log("new postcode created", postalCode.id);
+          payload.newAddress.postcode = { id: postalCode.id };
+          return this.patchExistingAddress(payload);
+        });
+      } else {
+        return this.patchExistingAddress(payload);
+      }
+    },
+
+    patchExistingAddress(payload) {
+      console.log("patchExistingAddress", payload);
+      return patchAddress(payload.addressId, payload.newAddress)
+        .then(
+          (address) =>
+            new Promise((resolve, reject) => {
+              this.entity.address = address;
+              this.flag.loading = false;
+              this.flag.success = true;
+              return resolve({
+                address,
+                targetOrigin: this.context.target,
+                // for "legacy" use:
+                target: this.context.target.name,
+                targetId: this.context.target.id,
+                addressId: this.entity.address.address_id,
+              });
+            }),
+        )
+        .catch((error) => {
+          this.errorMsg.push(error);
+          this.flag.loading = false;
+        });
+    },
+
+    /**
+     *
+     * Called when the event pick-address is emitted, which is, by the way,
+     * called when an address suggestion is picked.
+     *
+     * @param address the address selected
+     */
+    pickAddress(address) {
+      console.log("pickAddress", address);
+      duplicateAddress(address).then((newAddress) => {
+        this.entity.address = newAddress;
+        this.flag.loading = false;
+        this.flag.success = true;
+        let payload = {
+          address: newAddress,
+          targetOrigin: this.context.target,
+          // for "legacy" use:
+          target: this.context.target.name,
+          targetId: this.context.target.id,
+          addressId: this.entity.address.address_id,
+        };
+        this.addressChangedCallback(payload);
+        this.closeSuggestPane();
+      });
+    },
+  },
 };
 </script>
 
 <style lang="scss">
 div.entity-address {
-    position: relative;
-    div.loading {
-        position: absolute;
-        right: 0;
-        top: -55px;
-    }
+  position: relative;
+  div.loading {
+    position: absolute;
+    right: 0;
+    top: -55px;
+  }
 }
 h4.h3 {
-    font-weight: bold;
+  font-weight: bold;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue
index 167b3b981..4aa44f4a6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="address_map" />
+  <div id="address_map" />
 </template>
 
 <script>
@@ -8,112 +8,107 @@ import markerIconPng from "leaflet/dist/images/marker-icon.png";
 import "leaflet/dist/leaflet.css";
 
 const lonLatForLeaflet = (coordinates) => {
-    return [coordinates[1], coordinates[0]];
+  return [coordinates[1], coordinates[0]];
 };
 
 export default {
-    name: "AddressMap",
-    props: ["entity"],
-    data() {
-        return {
-            map: null,
-            marker: null,
-        };
+  name: "AddressMap",
+  props: ["entity"],
+  data() {
+    return {
+      map: null,
+      marker: null,
+    };
+  },
+  computed: {
+    center() {
+      return this.entity.addressMap.center;
     },
-    computed: {
-        center() {
-            return this.entity.addressMap.center;
-        },
-        hasAddressPoint() {
-            if (Object.keys(this.entity.address).length === 0) {
-                return false;
-            }
-            if (null !== this.entity.address.addressReference) {
-                return true;
-            }
-            if (
-                null !== this.entity.address.postcode &&
-                null !== this.entity.address.postcode.center
-            ) {
-                return true;
-            }
-            return false;
-        },
-        /**
-         *
-         * @returns {coordinates: [float, float], type: "Point"}
-         */
-        addressPoint() {
-            if (Object.keys(this.entity.address).length === 0) {
-                return null;
-            }
-
-            if (null !== this.entity.address.addressReference) {
-                return this.entity.address.addressReference.point;
-            }
-
-            if (
-                null !== this.entity.address.postcode &&
-                null !== this.entity.address.postcode.center
-            ) {
-                return this.entity.address.postcode.center;
-            }
-
-            return null;
-        },
+    hasAddressPoint() {
+      if (Object.keys(this.entity.address).length === 0) {
+        return false;
+      }
+      if (null !== this.entity.address.addressReference) {
+        return true;
+      }
+      if (
+        null !== this.entity.address.postcode &&
+        null !== this.entity.address.postcode.center
+      ) {
+        return true;
+      }
+      return false;
     },
-    methods: {
-        init() {
-            this.map = L.map("address_map");
+    /**
+     *
+     * @returns {coordinates: [float, float], type: "Point"}
+     */
+    addressPoint() {
+      if (Object.keys(this.entity.address).length === 0) {
+        return null;
+      }
 
-            if (!this.hasAddressPoint) {
-                this.map.setView(
-                    lonLatForLeaflet(this.entity.addressMap.center),
-                    this.entity.addressMap.zoom,
-                );
-            } else {
-                this.map.setView(
-                    lonLatForLeaflet(this.addressPoint.coordinates),
-                    15,
-                );
-            }
+      if (null !== this.entity.address.addressReference) {
+        return this.entity.address.addressReference.point;
+      }
 
-            this.map.scrollWheelZoom.disable();
+      if (
+        null !== this.entity.address.postcode &&
+        null !== this.entity.address.postcode.center
+      ) {
+        return this.entity.address.postcode.center;
+      }
 
-            L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-                attribution:
-                    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-            }).addTo(this.map);
-
-            const markerIcon = L.icon({
-                iconUrl: markerIconPng,
-                iconAnchor: [12, 41],
-            });
-
-            if (!this.hasAddressPoint) {
-                this.marker = L.marker(
-                    lonLatForLeaflet(this.entity.addressMap.center),
-                    { icon: markerIcon },
-                );
-            } else {
-                this.marker = L.marker(
-                    lonLatForLeaflet(this.addressPoint.coordinates),
-                    { icon: markerIcon },
-                );
-            }
-            this.marker.addTo(this.map);
-        },
-        update() {
-            if (this.marker && this.entity.addressMap.center) {
-                this.marker.setLatLng(
-                    lonLatForLeaflet(this.entity.addressMap.center),
-                );
-                this.map.panTo(lonLatForLeaflet(this.entity.addressMap.center));
-            }
-        },
+      return null;
     },
-    mounted() {
-        this.init();
+  },
+  methods: {
+    init() {
+      this.map = L.map("address_map");
+
+      if (!this.hasAddressPoint) {
+        this.map.setView(
+          lonLatForLeaflet(this.entity.addressMap.center),
+          this.entity.addressMap.zoom,
+        );
+      } else {
+        this.map.setView(lonLatForLeaflet(this.addressPoint.coordinates), 15);
+      }
+
+      this.map.scrollWheelZoom.disable();
+
+      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        attribution:
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      }).addTo(this.map);
+
+      const markerIcon = L.icon({
+        iconUrl: markerIconPng,
+        iconAnchor: [12, 41],
+      });
+
+      if (!this.hasAddressPoint) {
+        this.marker = L.marker(
+          lonLatForLeaflet(this.entity.addressMap.center),
+          { icon: markerIcon },
+        );
+      } else {
+        this.marker = L.marker(
+          lonLatForLeaflet(this.addressPoint.coordinates),
+          { icon: markerIcon },
+        );
+      }
+      this.marker.addTo(this.map);
     },
+    update() {
+      if (this.marker && this.entity.addressMap.center) {
+        this.marker.setLatLng(lonLatForLeaflet(this.entity.addressMap.center));
+        this.map.panTo(lonLatForLeaflet(this.entity.addressMap.center));
+      }
+    },
+  },
+  mounted() {
+    this.init();
+  },
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
index 4b59efbc6..3e9da5da4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
@@ -1,149 +1,149 @@
 <template>
-    <h4 class="h3">
-        {{ $t("fill_an_address") }}
-    </h4>
-    <div class="row my-3">
-        <div class="col-lg-6" v-if="!isNoAddress">
-            <div class="form-floating my-1">
-                <input
-                    class="form-control"
-                    type="text"
-                    name="floor"
-                    :placeholder="$t('floor')"
-                    v-model="floor"
-                />
-                <label for="floor">{{ $t("floor") }}</label>
-            </div>
-            <div class="form-floating my-1">
-                <input
-                    class="form-control"
-                    type="text"
-                    name="corridor"
-                    :placeholder="$t('corridor')"
-                    v-model="corridor"
-                />
-                <label for="corridor">{{ $t("corridor") }}</label>
-            </div>
-            <div class="form-floating my-1">
-                <input
-                    class="form-control"
-                    type="text"
-                    name="steps"
-                    :placeholder="$t('steps')"
-                    v-model="steps"
-                />
-                <label for="steps">{{ $t("steps") }}</label>
-            </div>
-            <div class="form-floating my-1">
-                <input
-                    class="form-control"
-                    type="text"
-                    name="flat"
-                    :placeholder="$t('flat')"
-                    v-model="flat"
-                />
-                <label for="flat">{{ $t("flat") }}</label>
-            </div>
-        </div>
-        <div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
-            <div class="form-floating my-1" v-if="!isNoAddress">
-                <input
-                    class="form-control"
-                    type="text"
-                    name="buildingName"
-                    maxlength="255"
-                    :placeholder="$t('buildingName')"
-                    v-model="buildingName"
-                />
-                <label for="buildingName">{{ $t("buildingName") }}</label>
-            </div>
-            <div class="form-floating my-1">
-                <input
-                    class="form-control"
-                    type="text"
-                    name="extra"
-                    maxlength="255"
-                    :placeholder="$t('extra')"
-                    v-model="extra"
-                />
-                <label for="extra">{{ $t("extra") }}</label>
-            </div>
-            <div class="form-floating my-1" v-if="!isNoAddress">
-                <input
-                    class="form-control"
-                    type="text"
-                    name="distribution"
-                    maxlength="255"
-                    :placeholder="$t('distribution')"
-                    v-model="distribution"
-                />
-                <label for="distribution">{{ $t("distribution") }}</label>
-            </div>
-        </div>
+  <h4 class="h3">
+    {{ $t("fill_an_address") }}
+  </h4>
+  <div class="row my-3">
+    <div class="col-lg-6" v-if="!isNoAddress">
+      <div class="form-floating my-1">
+        <input
+          class="form-control"
+          type="text"
+          name="floor"
+          :placeholder="$t('floor')"
+          v-model="floor"
+        />
+        <label for="floor">{{ $t("floor") }}</label>
+      </div>
+      <div class="form-floating my-1">
+        <input
+          class="form-control"
+          type="text"
+          name="corridor"
+          :placeholder="$t('corridor')"
+          v-model="corridor"
+        />
+        <label for="corridor">{{ $t("corridor") }}</label>
+      </div>
+      <div class="form-floating my-1">
+        <input
+          class="form-control"
+          type="text"
+          name="steps"
+          :placeholder="$t('steps')"
+          v-model="steps"
+        />
+        <label for="steps">{{ $t("steps") }}</label>
+      </div>
+      <div class="form-floating my-1">
+        <input
+          class="form-control"
+          type="text"
+          name="flat"
+          :placeholder="$t('flat')"
+          v-model="flat"
+        />
+        <label for="flat">{{ $t("flat") }}</label>
+      </div>
     </div>
+    <div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
+      <div class="form-floating my-1" v-if="!isNoAddress">
+        <input
+          class="form-control"
+          type="text"
+          name="buildingName"
+          maxlength="255"
+          :placeholder="$t('buildingName')"
+          v-model="buildingName"
+        />
+        <label for="buildingName">{{ $t("buildingName") }}</label>
+      </div>
+      <div class="form-floating my-1">
+        <input
+          class="form-control"
+          type="text"
+          name="extra"
+          maxlength="255"
+          :placeholder="$t('extra')"
+          v-model="extra"
+        />
+        <label for="extra">{{ $t("extra") }}</label>
+      </div>
+      <div class="form-floating my-1" v-if="!isNoAddress">
+        <input
+          class="form-control"
+          type="text"
+          name="distribution"
+          maxlength="255"
+          :placeholder="$t('distribution')"
+          v-model="distribution"
+        />
+        <label for="distribution">{{ $t("distribution") }}</label>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "AddressMore",
-    props: ["entity", "isNoAddress"],
-    computed: {
-        floor: {
-            set(value) {
-                this.entity.selected.address.floor = value;
-            },
-            get() {
-                return this.entity.selected.address.floor;
-            },
-        },
-        corridor: {
-            set(value) {
-                this.entity.selected.address.corridor = value;
-            },
-            get() {
-                return this.entity.selected.address.corridor;
-            },
-        },
-        steps: {
-            set(value) {
-                this.entity.selected.address.steps = value;
-            },
-            get() {
-                return this.entity.selected.address.steps;
-            },
-        },
-        flat: {
-            set(value) {
-                this.entity.selected.address.flat = value;
-            },
-            get() {
-                return this.entity.selected.address.flat;
-            },
-        },
-        buildingName: {
-            set(value) {
-                this.entity.selected.address.buildingName = value;
-            },
-            get() {
-                return this.entity.selected.address.buildingName;
-            },
-        },
-        extra: {
-            set(value) {
-                this.entity.selected.address.extra = value;
-            },
-            get() {
-                return this.entity.selected.address.extra;
-            },
-        },
-        distribution: {
-            set(value) {
-                this.entity.selected.address.distribution = value;
-            },
-            get() {
-                return this.entity.selected.address.distribution;
-            },
-        },
+  name: "AddressMore",
+  props: ["entity", "isNoAddress"],
+  computed: {
+    floor: {
+      set(value) {
+        this.entity.selected.address.floor = value;
+      },
+      get() {
+        return this.entity.selected.address.floor;
+      },
     },
+    corridor: {
+      set(value) {
+        this.entity.selected.address.corridor = value;
+      },
+      get() {
+        return this.entity.selected.address.corridor;
+      },
+    },
+    steps: {
+      set(value) {
+        this.entity.selected.address.steps = value;
+      },
+      get() {
+        return this.entity.selected.address.steps;
+      },
+    },
+    flat: {
+      set(value) {
+        this.entity.selected.address.flat = value;
+      },
+      get() {
+        return this.entity.selected.address.flat;
+      },
+    },
+    buildingName: {
+      set(value) {
+        this.entity.selected.address.buildingName = value;
+      },
+      get() {
+        return this.entity.selected.address.buildingName;
+      },
+    },
+    extra: {
+      set(value) {
+        this.entity.selected.address.extra = value;
+      },
+      get() {
+        return this.entity.selected.address.extra;
+      },
+    },
+    distribution: {
+      set(value) {
+        this.entity.selected.address.distribution = value;
+      },
+      get() {
+        return this.entity.selected.address.distribution;
+      },
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
index fd1740a40..6ad8965b4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
@@ -1,227 +1,223 @@
 <template>
-    <div class="my-1">
-        <label class="col-form-label" for="addressSelector">{{
-            $t("address")
-        }}</label>
-        <VueMultiselect
-            id="addressSelector"
-            v-model="value"
-            :placeholder="$t('select_address')"
-            :tag-placeholder="$t('create_address')"
-            :select-label="$t('multiselect.select_label')"
-            :deselect-label="$t('create_address')"
-            :selected-label="$t('multiselect.selected_label')"
-            @search-change="listenInputSearch"
-            :internal-search="false"
-            ref="addressSelector"
-            @select="selectAddress"
-            @remove="remove"
-            name="field"
-            track-by="id"
-            label="value"
-            :custom-label="transName"
-            :taggable="true"
-            :multiple="false"
-            @tag="addAddress"
-            :loading="isLoading"
-            :options="addresses"
-        />
-    </div>
+  <div class="my-1">
+    <label class="col-form-label" for="addressSelector">{{
+      $t("address")
+    }}</label>
+    <VueMultiselect
+      id="addressSelector"
+      v-model="value"
+      :placeholder="$t('select_address')"
+      :tag-placeholder="$t('create_address')"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('create_address')"
+      :selected-label="$t('multiselect.selected_label')"
+      @search-change="listenInputSearch"
+      :internal-search="false"
+      ref="addressSelector"
+      @select="selectAddress"
+      @remove="remove"
+      name="field"
+      track-by="id"
+      label="value"
+      :custom-label="transName"
+      :taggable="true"
+      :multiple="false"
+      @tag="addAddress"
+      :loading="isLoading"
+      :options="addresses"
+    />
+  </div>
 
-    <div
-        class="custom-address row g-1"
-        v-if="
-            writeNewAddress ||
-            writeNewPostalCode ||
-            (isEnteredCustomAddress && !isAddressSelectorOpen)
-        "
-    >
-        <div class="col-10">
-            <div class="form-floating">
-                <input
-                    class="form-control"
-                    type="text"
-                    name="street"
-                    :placeholder="$t('street')"
-                    v-model="street"
-                />
-                <label for="street">{{ $t("street") }}</label>
-            </div>
-        </div>
-        <div class="col-2">
-            <div class="form-floating">
-                <input
-                    class="form-control"
-                    type="text"
-                    name="streetNumber"
-                    :placeholder="$t('streetNumber')"
-                    v-model="streetNumber"
-                />
-                <label for="streetNumber">{{ $t("streetNumber") }}</label>
-            </div>
-        </div>
+  <div
+    class="custom-address row g-1"
+    v-if="
+      writeNewAddress ||
+      writeNewPostalCode ||
+      (isEnteredCustomAddress && !isAddressSelectorOpen)
+    "
+  >
+    <div class="col-10">
+      <div class="form-floating">
+        <input
+          class="form-control"
+          type="text"
+          name="street"
+          :placeholder="$t('street')"
+          v-model="street"
+        />
+        <label for="street">{{ $t("street") }}</label>
+      </div>
     </div>
+    <div class="col-2">
+      <div class="form-floating">
+        <input
+          class="form-control"
+          type="text"
+          name="streetNumber"
+          :placeholder="$t('streetNumber')"
+          v-model="streetNumber"
+        />
+        <label for="streetNumber">{{ $t("streetNumber") }}</label>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import VueMultiselect from "vue-multiselect";
 import {
-    searchReferenceAddresses,
-    fetchReferenceAddresses,
+  searchReferenceAddresses,
+  fetchReferenceAddresses,
 } from "../../api.js";
 
 export default {
-    name: "AddressSelection",
-    components: { VueMultiselect },
-    props: ["entity", "context", "updateMapCenter", "flag", "checkErrors"],
-    data() {
-        return {
-            value: this.context.edit
-                ? this.entity.address.addressReference
-                : null,
-            isLoading: false,
-        };
+  name: "AddressSelection",
+  components: { VueMultiselect },
+  props: ["entity", "context", "updateMapCenter", "flag", "checkErrors"],
+  data() {
+    return {
+      value: this.context.edit ? this.entity.address.addressReference : null,
+      isLoading: false,
+    };
+  },
+  computed: {
+    writeNewAddress() {
+      return this.entity.selected.writeNew.address;
     },
-    computed: {
-        writeNewAddress() {
-            return this.entity.selected.writeNew.address;
-        },
-        writeNewPostalCode() {
-            return this.entity.selected.writeNew.postCode;
-        },
-        isAddressSelectorOpen() {
-            return this.$refs.addressSelector.$data.isOpen;
-        },
-        isEnteredCustomAddress() {
-            return (
-                this.$data.value !== null &&
-                typeof this.$data.value.text !== "undefined"
-            );
-        },
-        addresses() {
-            return this.entity.loaded.addresses;
-        },
-        street: {
-            set(value) {
-                this.entity.selected.address.street = value;
-            },
-            get() {
-                return this.entity.selected.address.street;
-            },
-        },
-        streetNumber: {
-            set(value) {
-                this.entity.selected.address.streetNumber = value;
-            },
-            get() {
-                return this.entity.selected.address.streetNumber;
-            },
-        },
+    writeNewPostalCode() {
+      return this.entity.selected.writeNew.postCode;
     },
-    methods: {
-        transName(value) {
-            return value.streetNumber === undefined
-                ? value.street
-                : `${value.streetNumber}, ${value.street}`;
-        },
-        selectAddress(value) {
-            this.entity.selected.address = value;
-            this.entity.selected.address.addressReference = {
-                id: value.id,
-            };
-            this.entity.selected.address.street = value.street;
-            this.entity.selected.address.streetNumber = value.streetNumber;
-            this.entity.selected.writeNew.address = false;
-            this.updateMapCenter(value.point);
-            this.checkErrors();
-        },
-        remove() {
-            this.entity.selected.address = {};
-            this.checkErrors();
-        },
-        listenInputSearch(query) {
-            //console.log('listenInputSearch', query, this.isAddressSelectorOpen);
-            if (
-                !this.entity.selected.writeNew.postcode &&
-                "id" in this.entity.selected.city
-            ) {
-                if (query.length > 2) {
-                    this.isLoading = true;
-                    searchReferenceAddresses(query, this.entity.selected.city)
-                        .then(
-                            (addresses) =>
-                                new Promise((resolve, reject) => {
-                                    this.entity.loaded.addresses =
-                                        addresses.results;
-                                    this.isLoading = false;
-                                    resolve();
-                                }),
-                        )
-                        .catch((error) => {
-                            console.log(error); //TODO better error handling
-                            this.isLoading = false;
-                        });
-                } else {
-                    if (query.length === 0) {
-                        // Fetch all cities when suppressing the query
-                        this.isLoading = true;
-                        fetchReferenceAddresses(this.entity.selected.city)
-                            .then(
-                                (addresses) =>
-                                    new Promise((resolve, reject) => {
-                                        this.entity.loaded.addresses =
-                                            addresses.results;
-                                        this.isLoading = false;
-                                        resolve();
-                                    }),
-                            )
-                            .catch((error) => {
-                                console.log(error);
-                                this.isLoading = false;
-                            });
-                    }
-                }
-            }
-
-            if (this.isAddressSelectorOpen) {
-                this.$data.value = { text: query };
-            } else if (this.isEnteredCustomAddress) {
-                let addr = this.splitAddress(this.$data.value.text);
-                this.entity.selected.address.street = addr.street;
-                this.entity.selected.address.streetNumber = addr.number;
-                this.entity.selected.writeNew.address = true;
-                this.checkErrors();
-            }
-        },
-        splitAddress(address) {
-            let substr = address.split(",").map((s) => s.trim());
-            if (substr.length === 1) {
-                substr = address.split(" ");
-            }
-            let decimal = [];
-            substr.forEach((s, i) => {
-                decimal[i] = /^\d+$/.test(s);
+    isAddressSelectorOpen() {
+      return this.$refs.addressSelector.$data.isOpen;
+    },
+    isEnteredCustomAddress() {
+      return (
+        this.$data.value !== null &&
+        typeof this.$data.value.text !== "undefined"
+      );
+    },
+    addresses() {
+      return this.entity.loaded.addresses;
+    },
+    street: {
+      set(value) {
+        this.entity.selected.address.street = value;
+      },
+      get() {
+        return this.entity.selected.address.street;
+      },
+    },
+    streetNumber: {
+      set(value) {
+        this.entity.selected.address.streetNumber = value;
+      },
+      get() {
+        return this.entity.selected.address.streetNumber;
+      },
+    },
+  },
+  methods: {
+    transName(value) {
+      return value.streetNumber === undefined
+        ? value.street
+        : `${value.streetNumber}, ${value.street}`;
+    },
+    selectAddress(value) {
+      this.entity.selected.address = value;
+      this.entity.selected.address.addressReference = {
+        id: value.id,
+      };
+      this.entity.selected.address.street = value.street;
+      this.entity.selected.address.streetNumber = value.streetNumber;
+      this.entity.selected.writeNew.address = false;
+      this.updateMapCenter(value.point);
+      this.checkErrors();
+    },
+    remove() {
+      this.entity.selected.address = {};
+      this.checkErrors();
+    },
+    listenInputSearch(query) {
+      //console.log('listenInputSearch', query, this.isAddressSelectorOpen);
+      if (
+        !this.entity.selected.writeNew.postcode &&
+        "id" in this.entity.selected.city
+      ) {
+        if (query.length > 2) {
+          this.isLoading = true;
+          searchReferenceAddresses(query, this.entity.selected.city)
+            .then(
+              (addresses) =>
+                new Promise((resolve, reject) => {
+                  this.entity.loaded.addresses = addresses.results;
+                  this.isLoading = false;
+                  resolve();
+                }),
+            )
+            .catch((error) => {
+              console.log(error); //TODO better error handling
+              this.isLoading = false;
             });
-            if (decimal[0] === true) {
-                return {
-                    number: substr.shift(),
-                    street: substr.join(" "),
-                };
-            } else if (decimal[decimal.length - 1] === true) {
-                return {
-                    number: substr.pop(),
-                    street: substr.join(" "),
-                };
-            }
-            return {
-                number: "",
-                street: substr.join(" "),
-            };
-        },
-        addAddress() {
-            this.entity.selected.writeNew.address = true;
-        },
+        } else {
+          if (query.length === 0) {
+            // Fetch all cities when suppressing the query
+            this.isLoading = true;
+            fetchReferenceAddresses(this.entity.selected.city)
+              .then(
+                (addresses) =>
+                  new Promise((resolve, reject) => {
+                    this.entity.loaded.addresses = addresses.results;
+                    this.isLoading = false;
+                    resolve();
+                  }),
+              )
+              .catch((error) => {
+                console.log(error);
+                this.isLoading = false;
+              });
+          }
+        }
+      }
+
+      if (this.isAddressSelectorOpen) {
+        this.$data.value = { text: query };
+      } else if (this.isEnteredCustomAddress) {
+        let addr = this.splitAddress(this.$data.value.text);
+        this.entity.selected.address.street = addr.street;
+        this.entity.selected.address.streetNumber = addr.number;
+        this.entity.selected.writeNew.address = true;
+        this.checkErrors();
+      }
     },
+    splitAddress(address) {
+      let substr = address.split(",").map((s) => s.trim());
+      if (substr.length === 1) {
+        substr = address.split(" ");
+      }
+      let decimal = [];
+      substr.forEach((s, i) => {
+        decimal[i] = /^\d+$/.test(s);
+      });
+      if (decimal[0] === true) {
+        return {
+          number: substr.shift(),
+          street: substr.join(" "),
+        };
+      } else if (decimal[decimal.length - 1] === true) {
+        return {
+          number: substr.pop(),
+          street: substr.join(" "),
+        };
+      }
+      return {
+        number: "",
+        street: substr.join(" "),
+      };
+    },
+    addAddress() {
+      this.entity.selected.writeNew.address = true;
+    },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
index 0d85c69f9..74520310e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
@@ -1,60 +1,60 @@
 <template>
-    <div class="my-1">
-        <label class="col-form-label">{{ $t("city") }}</label>
-        <VueMultiselect
-            id="citySelector"
-            v-model="value"
-            @search-change="listenInputSearch"
-            ref="citySelector"
-            @select="selectCity"
-            @remove="remove"
-            name="field"
-            track-by="id"
-            label="value"
-            :custom-label="transName"
-            :placeholder="$t('select_city')"
-            :select-label="$t('multiselect.select_label')"
-            :deselect-label="$t('create_postal_code')"
-            :selected-label="$t('multiselect.selected_label')"
-            :taggable="true"
-            :multiple="false"
-            :internal-search="false"
-            @tag="addPostcode"
-            :tag-placeholder="$t('create_postal_code')"
-            :loading="isLoading"
-            :options="cities"
-        />
-    </div>
+  <div class="my-1">
+    <label class="col-form-label">{{ $t("city") }}</label>
+    <VueMultiselect
+      id="citySelector"
+      v-model="value"
+      @search-change="listenInputSearch"
+      ref="citySelector"
+      @select="selectCity"
+      @remove="remove"
+      name="field"
+      track-by="id"
+      label="value"
+      :custom-label="transName"
+      :placeholder="$t('select_city')"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('create_postal_code')"
+      :selected-label="$t('multiselect.selected_label')"
+      :taggable="true"
+      :multiple="false"
+      :internal-search="false"
+      @tag="addPostcode"
+      :tag-placeholder="$t('create_postal_code')"
+      :loading="isLoading"
+      :options="cities"
+    />
+  </div>
 
-    <div
-        class="custom-postcode row g-1"
-        v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)"
-    >
-        <div class="col-4">
-            <div class="form-floating">
-                <input
-                    class="form-control"
-                    type="text"
-                    id="code"
-                    :placeholder="$t('postalCode_code')"
-                    v-model="code"
-                />
-                <label for="code">{{ $t("postalCode_code") }}</label>
-            </div>
-        </div>
-        <div class="col-8">
-            <div class="form-floating">
-                <input
-                    class="form-control"
-                    type="text"
-                    id="name"
-                    :placeholder="$t('postalCode_name')"
-                    v-model="name"
-                />
-                <label for="name">{{ $t("postalCode_name") }}</label>
-            </div>
-        </div>
+  <div
+    class="custom-postcode row g-1"
+    v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)"
+  >
+    <div class="col-4">
+      <div class="form-floating">
+        <input
+          class="form-control"
+          type="text"
+          id="code"
+          :placeholder="$t('postalCode_code')"
+          v-model="code"
+        />
+        <label for="code">{{ $t("postalCode_code") }}</label>
+      </div>
     </div>
+    <div class="col-8">
+      <div class="form-floating">
+        <input
+          class="form-control"
+          type="text"
+          id="name"
+          :placeholder="$t('postalCode_name')"
+          v-model="name"
+        />
+        <label for="name">{{ $t("postalCode_name") }}</label>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -62,190 +62,185 @@ import VueMultiselect from "vue-multiselect";
 import { searchCities, fetchCities } from "../../api.js";
 
 export default {
-    name: "CitySelection",
-    components: { VueMultiselect },
-    props: [
-        "entity",
-        "context",
-        "focusOnAddress",
-        "updateMapCenter",
-        "flag",
-        "checkErrors",
-    ],
-    emits: ["getReferenceAddresses"],
-    data() {
-        return {
-            value: this.context.edit ? this.entity.address.postcode : null,
-            isLoading: false,
-        };
+  name: "CitySelection",
+  components: { VueMultiselect },
+  props: [
+    "entity",
+    "context",
+    "focusOnAddress",
+    "updateMapCenter",
+    "flag",
+    "checkErrors",
+  ],
+  emits: ["getReferenceAddresses"],
+  data() {
+    return {
+      value: this.context.edit ? this.entity.address.postcode : null,
+      isLoading: false,
+    };
+  },
+  computed: {
+    writeNewPostcode() {
+      return this.entity.selected.writeNew.postcode;
     },
-    computed: {
-        writeNewPostcode() {
-            return this.entity.selected.writeNew.postcode;
-        },
-        isCitySelectorOpen() {
-            return this.$refs.citySelector.$data.isOpen;
-        },
-        isEnteredCustomCity() {
-            return (
-                this.$data.value !== null &&
-                typeof this.$data.value.text !== "undefined"
-            );
-        },
-        cities() {
-            return this.entity.loaded.cities.sort(
-                (a, b) => Number(a.code) - Number(b.code) || a.name > b.name,
-            );
-        },
-        name: {
-            set(value) {
-                this.entity.selected.postcode.name = value;
-            },
-            get() {
-                return this.entity.selected.postcode.name;
-            },
-        },
-        code: {
-            set(value) {
-                this.entity.selected.postcode.code = value;
-            },
-            get() {
-                return this.entity.selected.postcode.code;
-            },
-        },
+    isCitySelectorOpen() {
+      return this.$refs.citySelector.$data.isOpen;
     },
-    mounted() {
-        console.log(
-            "writeNew.postcode",
-            this.entity.selected.writeNew.postcode,
-            "in mounted",
-        );
-        if (this.context.edit) {
-            this.entity.selected.city = this.value;
-            this.entity.selected.postcode.name = this.value.name;
-            this.entity.selected.postcode.code = this.value.code;
-            this.$emit("getReferenceAddresses", this.value);
-            if (typeof this.value.center !== "undefined") {
-                this.updateMapCenter(this.value.center);
-                if (this.value.center.coordinates) {
-                    this.entity.selected.postcode.coordinates =
-                        this.value.center.coordinates;
-                }
-            }
+    isEnteredCustomCity() {
+      return (
+        this.$data.value !== null &&
+        typeof this.$data.value.text !== "undefined"
+      );
+    },
+    cities() {
+      return this.entity.loaded.cities.sort(
+        (a, b) => Number(a.code) - Number(b.code) || a.name > b.name,
+      );
+    },
+    name: {
+      set(value) {
+        this.entity.selected.postcode.name = value;
+      },
+      get() {
+        return this.entity.selected.postcode.name;
+      },
+    },
+    code: {
+      set(value) {
+        this.entity.selected.postcode.code = value;
+      },
+      get() {
+        return this.entity.selected.postcode.code;
+      },
+    },
+  },
+  mounted() {
+    console.log(
+      "writeNew.postcode",
+      this.entity.selected.writeNew.postcode,
+      "in mounted",
+    );
+    if (this.context.edit) {
+      this.entity.selected.city = this.value;
+      this.entity.selected.postcode.name = this.value.name;
+      this.entity.selected.postcode.code = this.value.code;
+      this.$emit("getReferenceAddresses", this.value);
+      if (typeof this.value.center !== "undefined") {
+        this.updateMapCenter(this.value.center);
+        if (this.value.center.coordinates) {
+          this.entity.selected.postcode.coordinates =
+            this.value.center.coordinates;
         }
+      }
+    }
+  },
+  methods: {
+    transName(value) {
+      return value.code && value.name ? `${value.name} (${value.code})` : "";
     },
-    methods: {
-        transName(value) {
-            return value.code && value.name
-                ? `${value.name} (${value.code})`
-                : "";
-        },
-        selectCity(value) {
-            console.log(value);
-            this.entity.selected.city = value;
-            this.entity.selected.postcode.name = value.name;
-            this.entity.selected.postcode.code = value.code;
-            if (value.center) {
-                this.entity.selected.postcode.coordinates =
-                    value.center.coordinates;
-            }
-            this.entity.selected.writeNew.postcode = false;
-            this.$emit("getReferenceAddresses", value);
-            this.focusOnAddress();
-            if (value.center) {
-                this.updateMapCenter(value.center);
-            }
-            this.checkErrors();
-        },
-        remove() {
-            this.entity.selected.city = {};
-            this.checkErrors();
-        },
-        listenInputSearch(query) {
-            if (query.length > 2) {
-                this.isLoading = true;
-                searchCities(query, this.entity.selected.country)
-                    .then(
-                        (cities) =>
-                            new Promise((resolve, reject) => {
-                                this.entity.loaded.cities =
-                                    cities.results.filter(
-                                        (c) => c.origin !== 3,
-                                    ); // filter out user-defined cities
-                                this.isLoading = false;
-                                resolve();
-                            }),
-                    )
-                    .catch((error) => {
-                        console.log(error); //TODO better error handling
-                        this.isLoading = false;
-                    });
-            } else {
-                if (query.length === 0) {
-                    // Fetch all cities when suppressing the query
-                    this.isLoading = true;
-                    fetchCities(this.entity.selected.country)
-                        .then(
-                            (cities) =>
-                                new Promise((resolve, reject) => {
-                                    this.entity.loaded.cities =
-                                        cities.results.filter(
-                                            (c) => c.origin !== 3,
-                                        ); // filter out user-defined cities
-                                    this.isLoading = false;
-                                    resolve();
-                                }),
-                        )
-                        .catch((error) => {
-                            console.log(error);
-                            this.isLoading = false;
-                        });
-                }
-            }
-            if (this.isCitySelectorOpen) {
-                this.$data.value = { text: query };
-            } else if (this.isEnteredCustomCity) {
-                let city = this.splitCity(this.$data.value.text);
-                this.$refs.citySelector.currentOptionLabel = "";
-                this.entity.selected.city = city;
-                this.entity.selected.postcode.name = city.name;
-                this.entity.selected.postcode.code = city.code;
-                this.entity.selected.writeNew.postcode = true;
-                console.log("writeNew.postcode true, in listenInputSearch");
-            }
-        },
-        splitCity(city) {
-            let substr = city.split("-").map((s) => s.trim());
-            if (substr.length === 1) {
-                substr = city.split(" ");
-            }
-            //console.log('substr', substr);
-            let decimal = [];
-            substr.forEach((s, i) => {
-                decimal[i] = /^\d+$/.test(s);
+    selectCity(value) {
+      console.log(value);
+      this.entity.selected.city = value;
+      this.entity.selected.postcode.name = value.name;
+      this.entity.selected.postcode.code = value.code;
+      if (value.center) {
+        this.entity.selected.postcode.coordinates = value.center.coordinates;
+      }
+      this.entity.selected.writeNew.postcode = false;
+      this.$emit("getReferenceAddresses", value);
+      this.focusOnAddress();
+      if (value.center) {
+        this.updateMapCenter(value.center);
+      }
+      this.checkErrors();
+    },
+    remove() {
+      this.entity.selected.city = {};
+      this.checkErrors();
+    },
+    listenInputSearch(query) {
+      if (query.length > 2) {
+        this.isLoading = true;
+        searchCities(query, this.entity.selected.country)
+          .then(
+            (cities) =>
+              new Promise((resolve, reject) => {
+                this.entity.loaded.cities = cities.results.filter(
+                  (c) => c.origin !== 3,
+                ); // filter out user-defined cities
+                this.isLoading = false;
+                resolve();
+              }),
+          )
+          .catch((error) => {
+            console.log(error); //TODO better error handling
+            this.isLoading = false;
+          });
+      } else {
+        if (query.length === 0) {
+          // Fetch all cities when suppressing the query
+          this.isLoading = true;
+          fetchCities(this.entity.selected.country)
+            .then(
+              (cities) =>
+                new Promise((resolve, reject) => {
+                  this.entity.loaded.cities = cities.results.filter(
+                    (c) => c.origin !== 3,
+                  ); // filter out user-defined cities
+                  this.isLoading = false;
+                  resolve();
+                }),
+            )
+            .catch((error) => {
+              console.log(error);
+              this.isLoading = false;
             });
-            if (decimal[0] === true) {
-                return {
-                    code: substr.shift(),
-                    name: substr.join(" "),
-                };
-            } else if (decimal[decimal.length - 1] === true) {
-                return {
-                    code: substr.pop(),
-                    name: substr.join(" "),
-                };
-            }
-            return {
-                code: "",
-                name: substr.join(" "),
-            };
-        },
-        addPostcode() {
-            console.log("addPostcode: pass here ?? never, it seems");
-            this.entity.selected.writeNew.postcode = true;
-            console.log("writeNew.postcode true, in addPostcode");
-        },
+        }
+      }
+      if (this.isCitySelectorOpen) {
+        this.$data.value = { text: query };
+      } else if (this.isEnteredCustomCity) {
+        let city = this.splitCity(this.$data.value.text);
+        this.$refs.citySelector.currentOptionLabel = "";
+        this.entity.selected.city = city;
+        this.entity.selected.postcode.name = city.name;
+        this.entity.selected.postcode.code = city.code;
+        this.entity.selected.writeNew.postcode = true;
+        console.log("writeNew.postcode true, in listenInputSearch");
+      }
     },
+    splitCity(city) {
+      let substr = city.split("-").map((s) => s.trim());
+      if (substr.length === 1) {
+        substr = city.split(" ");
+      }
+      //console.log('substr', substr);
+      let decimal = [];
+      substr.forEach((s, i) => {
+        decimal[i] = /^\d+$/.test(s);
+      });
+      if (decimal[0] === true) {
+        return {
+          code: substr.shift(),
+          name: substr.join(" "),
+        };
+      } else if (decimal[decimal.length - 1] === true) {
+        return {
+          code: substr.pop(),
+          name: substr.join(" "),
+        };
+      }
+      return {
+        code: "",
+        name: substr.join(" "),
+      };
+    },
+    addPostcode() {
+      console.log("addPostcode: pass here ?? never, it seems");
+      this.entity.selected.writeNew.postcode = true;
+      console.log("writeNew.postcode true, in addPostcode");
+    },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
index 37decf15e..47feab563 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
@@ -1,23 +1,23 @@
 <template>
-    <div class="my-1">
-        <label class="col-form-label" for="countrySelect">{{
-            $t("country")
-        }}</label>
-        <VueMultiselect
-            id="countrySelect"
-            label="name"
-            track-by="id"
-            :custom-label="transName"
-            :placeholder="$t('select_country')"
-            :options="sortedCountries"
-            v-model="value"
-            :select-label="$t('multiselect.select_label')"
-            :deselect-label="$t('multiselect.deselect_label')"
-            :selected-label="$t('multiselect.selected_label')"
-            @select="selectCountry"
-            @remove="remove"
-        />
-    </div>
+  <div class="my-1">
+    <label class="col-form-label" for="countrySelect">{{
+      $t("country")
+    }}</label>
+    <VueMultiselect
+      id="countrySelect"
+      label="name"
+      track-by="id"
+      :custom-label="transName"
+      :placeholder="$t('select_country')"
+      :options="sortedCountries"
+      v-model="value"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('multiselect.deselect_label')"
+      :selected-label="$t('multiselect.selected_label')"
+      @select="selectCountry"
+      @remove="remove"
+    />
+  </div>
 </template>
 
 <script>
@@ -25,63 +25,59 @@ import VueMultiselect from "vue-multiselect";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 export default {
-    name: "CountrySelection",
-    components: { VueMultiselect },
-    props: ["context", "entity", "flag", "checkErrors"],
-    emits: ["getCities"],
-    data() {
-        return {
-            value: this.selectCountryByCode(
-                this.context.edit
-                    ? this.entity.selected.country.code
-                    : this.context.defaults.default_country,
-            ),
-        };
+  name: "CountrySelection",
+  components: { VueMultiselect },
+  props: ["context", "entity", "flag", "checkErrors"],
+  emits: ["getCities"],
+  data() {
+    return {
+      value: this.selectCountryByCode(
+        this.context.edit
+          ? this.entity.selected.country.code
+          : this.context.defaults.default_country,
+      ),
+    };
+  },
+  computed: {
+    sortedCountries() {
+      const countries = this.entity.loaded.countries;
+      let sortedCountries = [];
+      sortedCountries.push(...countries.filter((c) => c.countryCode === "FR"));
+      sortedCountries.push(...countries.filter((c) => c.countryCode === "BE"));
+      sortedCountries.push(
+        ...countries
+          .filter((c) => c.countryCode !== "FR")
+          .filter((c) => c.countryCode !== "BE"),
+      );
+      return sortedCountries;
     },
-    computed: {
-        sortedCountries() {
-            const countries = this.entity.loaded.countries;
-            let sortedCountries = [];
-            sortedCountries.push(
-                ...countries.filter((c) => c.countryCode === "FR"),
-            );
-            sortedCountries.push(
-                ...countries.filter((c) => c.countryCode === "BE"),
-            );
-            sortedCountries.push(
-                ...countries
-                    .filter((c) => c.countryCode !== "FR")
-                    .filter((c) => c.countryCode !== "BE"),
-            );
-            return sortedCountries;
-        },
+  },
+  mounted() {
+    console.log("country selection mounted", this.value);
+    if (this.value !== undefined) {
+      this.selectCountry(this.value);
+    }
+  },
+  methods: {
+    selectCountryByCode(countryCode) {
+      return this.entity.loaded.countries.filter(
+        (c) => c.countryCode === countryCode,
+      )[0];
     },
-    mounted() {
-        console.log("country selection mounted", this.value);
-        if (this.value !== undefined) {
-            this.selectCountry(this.value);
-        }
+    transName({ name }) {
+      return localizeString(name);
     },
-    methods: {
-        selectCountryByCode(countryCode) {
-            return this.entity.loaded.countries.filter(
-                (c) => c.countryCode === countryCode,
-            )[0];
-        },
-        transName({ name }) {
-            return localizeString(name);
-        },
-        selectCountry(value) {
-            //console.log('select country', value);
-            this.entity.selected.country = value;
-            this.$emit("getCities", value);
-            this.checkErrors();
-        },
-        remove() {
-            this.entity.selected.country = null;
-            this.checkErrors();
-        },
+    selectCountry(value) {
+      //console.log('select country', value);
+      this.entity.selected.country = value;
+      this.$emit("getCities", value);
+      this.checkErrors();
     },
+    remove() {
+      this.entity.selected.country = null;
+      this.checkErrors();
+    },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
index 96e67f952..3e8e1f4bb 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
@@ -1,69 +1,66 @@
 <template>
-    <div v-if="insideModal === false" class="loading">
-        <i
-            v-if="flag.loading"
-            class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
+  <div v-if="insideModal === false" class="loading">
+    <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
+    <span class="sr-only">{{ $t("loading") }}</span>
+  </div>
+
+  <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
+    {{ errorMsg }}
+  </div>
+
+  <address-render-box :address="selectedAddress" />
+
+  <div class="row">
+    <div v-if="showDateFrom" class="col-lg-6 address-valid date-since">
+      <h3>{{ $t(getValidFromDateText) }}</h3>
+      <div class="input-group mb-3">
+        <span class="input-group-text" id="validFrom"
+          ><i class="fa fa-fw fa-calendar"
+        /></span>
+        <input
+          type="date"
+          class="form-control form-control-lg"
+          name="validFrom"
+          :placeholder="$t(getValidFromDateText)"
+          v-model="validFrom"
+          aria-describedby="validFrom"
         />
-        <span class="sr-only">{{ $t("loading") }}</span>
+      </div>
     </div>
 
-    <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
-        {{ errorMsg }}
+    <div v-if="showDateTo" class="col-lg-6 address-valid date-until">
+      <h3>{{ $t(getValidToDateText) }}</h3>
+      <div class="input-group mb-3">
+        <span class="input-group-text" id="validTo"
+          ><i class="fa fa-fw fa-calendar"
+        /></span>
+        <input
+          type="date"
+          class="form-control form-control-lg"
+          name="validTo"
+          :placeholder="$t(getValidToDateText)"
+          v-model="validTo"
+          aria-describedby="validTo"
+        />
+      </div>
     </div>
+  </div>
 
-    <address-render-box :address="selectedAddress" />
-
-    <div class="row">
-        <div v-if="showDateFrom" class="col-lg-6 address-valid date-since">
-            <h3>{{ $t(getValidFromDateText) }}</h3>
-            <div class="input-group mb-3">
-                <span class="input-group-text" id="validFrom"
-                    ><i class="fa fa-fw fa-calendar"
-                /></span>
-                <input
-                    type="date"
-                    class="form-control form-control-lg"
-                    name="validFrom"
-                    :placeholder="$t(getValidFromDateText)"
-                    v-model="validFrom"
-                    aria-describedby="validFrom"
-                />
-            </div>
-        </div>
-
-        <div v-if="showDateTo" class="col-lg-6 address-valid date-until">
-            <h3>{{ $t(getValidToDateText) }}</h3>
-            <div class="input-group mb-3">
-                <span class="input-group-text" id="validTo"
-                    ><i class="fa fa-fw fa-calendar"
-                /></span>
-                <input
-                    type="date"
-                    class="form-control form-control-lg"
-                    name="validTo"
-                    :placeholder="$t(getValidToDateText)"
-                    v-model="validTo"
-                    aria-describedby="validTo"
-                />
-            </div>
-        </div>
-    </div>
-
-    <action-buttons
-        v-if="insideModal === false"
-        :options="this.options"
-        :defaultz="this.defaultz"
-    >
-        <template #before>
-            <slot name="before" />
-        </template>
-        <template #action>
-            <slot name="action" />
-        </template>
-        <template #after>
-            <slot name="after" />
-        </template>
-    </action-buttons>
+  <action-buttons
+    v-if="insideModal === false"
+    :options="this.options"
+    :defaultz="this.defaultz"
+  >
+    <template #before>
+      <slot name="before" />
+    </template>
+    <template #action>
+      <slot name="action" />
+    </template>
+    <template #after>
+      <slot name="after" />
+    </template>
+  </action-buttons>
 </template>
 
 <script>
@@ -72,116 +69,113 @@ import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRe
 import ActionButtons from "./ActionButtons.vue";
 
 export default {
-    name: "DatePane",
-    components: {
-        AddressRenderBox,
-        ActionButtons,
+  name: "DatePane",
+  components: {
+    AddressRenderBox,
+    ActionButtons,
+  },
+  props: [
+    "context",
+    "options",
+    "defaultz",
+    "flag",
+    "entity",
+    "errorMsg",
+    "insideModal",
+  ],
+  computed: {
+    address() {
+      return this.entity.address;
     },
-    props: [
-        "context",
-        "options",
-        "defaultz",
-        "flag",
-        "entity",
-        "errorMsg",
-        "insideModal",
-    ],
-    computed: {
-        address() {
-            return this.entity.address;
-        },
-        validFrom: {
-            set(value) {
-                this.entity.selected.valid.from = ISOToDate(value);
-            },
-            get() {
-                return dateToISO(this.entity.selected.valid.from);
-            },
-        },
-        validTo: {
-            set(value) {
-                this.entity.selected.valid.to = ISOToDate(value);
-            },
-            get() {
-                return dateToISO(this.entity.selected.valid.to);
-            },
-        },
-        getValidFromDateText() {
-            return this.context.target.name === "household"
-                ? "move_date"
-                : "validFrom";
-        },
-        getValidToDateText() {
-            return "validTo";
-        },
-        showDateFrom() {
-            return !this.context.edit && this.options.useDate.validFrom;
-        },
-        showDateTo() {
-            return !this.context.edit && this.options.useDate.validTo;
-        },
-        selectedAddress() {
-            let address = {};
-
-            address["country"] = this.entity.selected.country
-                ? this.entity.selected.country
-                : null;
-            address["postcode"] = this.entity.selected.postcode
-                ? this.entity.selected.postcode
-                : null;
-
-            if (this.entity.selected.address) {
-                let number = this.entity.selected.address.streetNumber
-                    ? this.entity.selected.address.streetNumber
-                    : null;
-                let street = this.entity.selected.address.street
-                    ? this.entity.selected.address.street
-                    : null;
-                address["text"] = number + ", " + street;
-
-                address["street"] = this.entity.selected.address.street
-                    ? this.entity.selected.address.street
-                    : null;
-                address["streetNumber"] = this.entity.selected.address
-                    .streetNumber
-                    ? this.entity.selected.address.streetNumber
-                    : null;
-                address["floor"] = this.entity.selected.address.floor
-                    ? this.entity.selected.address.floor
-                    : null;
-                address["corridor"] = this.entity.selected.address.corridor
-                    ? this.entity.selected.address.corridor
-                    : null;
-                address["steps"] = this.entity.selected.address.steps
-                    ? this.entity.selected.address.steps
-                    : null;
-                address["flat"] = this.entity.selected.address.flat
-                    ? this.entity.selected.address.flat
-                    : null;
-                address["buildingName"] = this.entity.selected.address
-                    .buildingName
-                    ? this.entity.selected.address.buildingName
-                    : null;
-                address["distribution"] = this.entity.selected.address
-                    .distribution
-                    ? this.entity.selected.address.distribution
-                    : null;
-                address["extra"] = this.entity.selected.address.extra
-                    ? this.entity.selected.address.extra
-                    : null;
-            }
-
-            if (this.entity.selected.valid) {
-                address["validFrom"] = this.entity.selected.valid.from
-                    ? dateToISO(this.entity.selected.valid.from)
-                    : null;
-                address["validTo"] = this.entity.selected.valid.to
-                    ? dateToISO(this.entity.selected.valid.to)
-                    : null;
-            }
-
-            return address;
-        },
+    validFrom: {
+      set(value) {
+        this.entity.selected.valid.from = ISOToDate(value);
+      },
+      get() {
+        return dateToISO(this.entity.selected.valid.from);
+      },
     },
+    validTo: {
+      set(value) {
+        this.entity.selected.valid.to = ISOToDate(value);
+      },
+      get() {
+        return dateToISO(this.entity.selected.valid.to);
+      },
+    },
+    getValidFromDateText() {
+      return this.context.target.name === "household"
+        ? "move_date"
+        : "validFrom";
+    },
+    getValidToDateText() {
+      return "validTo";
+    },
+    showDateFrom() {
+      return !this.context.edit && this.options.useDate.validFrom;
+    },
+    showDateTo() {
+      return !this.context.edit && this.options.useDate.validTo;
+    },
+    selectedAddress() {
+      let address = {};
+
+      address["country"] = this.entity.selected.country
+        ? this.entity.selected.country
+        : null;
+      address["postcode"] = this.entity.selected.postcode
+        ? this.entity.selected.postcode
+        : null;
+
+      if (this.entity.selected.address) {
+        let number = this.entity.selected.address.streetNumber
+          ? this.entity.selected.address.streetNumber
+          : null;
+        let street = this.entity.selected.address.street
+          ? this.entity.selected.address.street
+          : null;
+        address["text"] = number + ", " + street;
+
+        address["street"] = this.entity.selected.address.street
+          ? this.entity.selected.address.street
+          : null;
+        address["streetNumber"] = this.entity.selected.address.streetNumber
+          ? this.entity.selected.address.streetNumber
+          : null;
+        address["floor"] = this.entity.selected.address.floor
+          ? this.entity.selected.address.floor
+          : null;
+        address["corridor"] = this.entity.selected.address.corridor
+          ? this.entity.selected.address.corridor
+          : null;
+        address["steps"] = this.entity.selected.address.steps
+          ? this.entity.selected.address.steps
+          : null;
+        address["flat"] = this.entity.selected.address.flat
+          ? this.entity.selected.address.flat
+          : null;
+        address["buildingName"] = this.entity.selected.address.buildingName
+          ? this.entity.selected.address.buildingName
+          : null;
+        address["distribution"] = this.entity.selected.address.distribution
+          ? this.entity.selected.address.distribution
+          : null;
+        address["extra"] = this.entity.selected.address.extra
+          ? this.entity.selected.address.extra
+          : null;
+      }
+
+      if (this.entity.selected.valid) {
+        address["validFrom"] = this.entity.selected.valid.from
+          ? dateToISO(this.entity.selected.valid.from)
+          : null;
+        address["validTo"] = this.entity.selected.valid.to
+          ? dateToISO(this.entity.selected.valid.to)
+          : null;
+      }
+
+      return address;
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
index df5ea56dc..cf808ed2a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
@@ -1,104 +1,101 @@
 <template>
-    <div class="address-form">
-        <!-- Not display in modal -->
-        <div v-if="insideModal === false" class="loading">
-            <i
-                v-if="flag.loading"
-                class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
-            />
-            <span class="sr-only">Loading...</span>
-        </div>
-
-        <div v-if="errors.length" class="alert alert-warning">
-            <ul>
-                <li v-for="(e, i) in errors" :key="i">
-                    {{ e }}
-                </li>
-            </ul>
-        </div>
-
-        <h4 class="h3">
-            {{ $t("select_an_address_title") }}
-        </h4>
-        <div class="row my-3">
-            <div class="col-lg-6">
-                <div class="form-check">
-                    <input
-                        type="checkbox"
-                        class="form-check-input"
-                        id="isConfidential"
-                        v-model="isConfidential"
-                        :value="valueConfidential"
-                    />
-                    <label class="form-check-label" for="isConfidential">
-                        {{ $t("isConfidential") }}
-                    </label>
-                </div>
-                <div class="form-check">
-                    <input
-                        type="checkbox"
-                        class="form-check-input"
-                        id="isNoAddress"
-                        v-model="isNoAddress"
-                        :value="value"
-                    />
-                    <label class="form-check-label" for="isNoAddress">
-                        {{ $t("isNoAddress") }}
-                    </label>
-                </div>
-
-                <country-selection
-                    :context="context"
-                    :entity="entity"
-                    :flag="flag"
-                    :check-errors="checkErrors"
-                    @get-cities="$emit('getCities', selected.country)"
-                />
-
-                <city-selection
-                    :entity="entity"
-                    :context="context"
-                    :focus-on-address="focusOnAddress"
-                    :update-map-center="updateMapCenter"
-                    :flag="flag"
-                    :check-errors="checkErrors"
-                    @get-reference-addresses="
-                        $emit('getReferenceAddresses', selected.city)
-                    "
-                />
-
-                <address-selection
-                    v-if="!isNoAddress"
-                    :entity="entity"
-                    :context="context"
-                    :update-map-center="updateMapCenter"
-                    :flag="flag"
-                    :check-errors="checkErrors"
-                />
-            </div>
-            <div class="col-lg-6 mt-3 mt-lg-0">
-                <address-map :entity="entity" ref="addressMap" />
-            </div>
-        </div>
-
-        <address-more :entity="entity" :is-no-address="isNoAddress" />
-
-        <action-buttons
-            v-if="insideModal === false"
-            :options="this.options"
-            :defaultz="this.defaultz"
-        >
-            <template #before>
-                <slot name="before" />
-            </template>
-            <template #action>
-                <slot name="action" />
-            </template>
-            <template #after>
-                <slot name="after" />
-            </template>
-        </action-buttons>
+  <div class="address-form">
+    <!-- Not display in modal -->
+    <div v-if="insideModal === false" class="loading">
+      <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
+      <span class="sr-only">Loading...</span>
     </div>
+
+    <div v-if="errors.length" class="alert alert-warning">
+      <ul>
+        <li v-for="(e, i) in errors" :key="i">
+          {{ e }}
+        </li>
+      </ul>
+    </div>
+
+    <h4 class="h3">
+      {{ $t("select_an_address_title") }}
+    </h4>
+    <div class="row my-3">
+      <div class="col-lg-6">
+        <div class="form-check">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="isConfidential"
+            v-model="isConfidential"
+            :value="valueConfidential"
+          />
+          <label class="form-check-label" for="isConfidential">
+            {{ $t("isConfidential") }}
+          </label>
+        </div>
+        <div class="form-check">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="isNoAddress"
+            v-model="isNoAddress"
+            :value="value"
+          />
+          <label class="form-check-label" for="isNoAddress">
+            {{ $t("isNoAddress") }}
+          </label>
+        </div>
+
+        <country-selection
+          :context="context"
+          :entity="entity"
+          :flag="flag"
+          :check-errors="checkErrors"
+          @get-cities="$emit('getCities', selected.country)"
+        />
+
+        <city-selection
+          :entity="entity"
+          :context="context"
+          :focus-on-address="focusOnAddress"
+          :update-map-center="updateMapCenter"
+          :flag="flag"
+          :check-errors="checkErrors"
+          @get-reference-addresses="
+            $emit('getReferenceAddresses', selected.city)
+          "
+        />
+
+        <address-selection
+          v-if="!isNoAddress"
+          :entity="entity"
+          :context="context"
+          :update-map-center="updateMapCenter"
+          :flag="flag"
+          :check-errors="checkErrors"
+        />
+      </div>
+      <div class="col-lg-6 mt-3 mt-lg-0">
+        <address-map :entity="entity" ref="addressMap" />
+      </div>
+    </div>
+
+    <address-more :entity="entity" :is-no-address="isNoAddress" />
+
+    <action-buttons
+      v-if="insideModal === false"
+      :options="this.options"
+      :defaultz="this.defaultz"
+    >
+      <template #before>
+        <slot name="before" />
+      </template>
+      <template #action>
+        <slot name="action" />
+      </template>
+      <template #after>
+        <slot name="after" />
+      </template>
+    </action-buttons>
+  </div>
 </template>
 
 <script>
@@ -110,88 +107,88 @@ import AddressMore from "./AddAddress/AddressMore";
 import ActionButtons from "./ActionButtons.vue";
 
 export default {
-    name: "EditPane",
-    components: {
-        CountrySelection,
-        CitySelection,
-        AddressSelection,
-        AddressMap,
-        AddressMore,
-        ActionButtons,
+  name: "EditPane",
+  components: {
+    CountrySelection,
+    CitySelection,
+    AddressSelection,
+    AddressMap,
+    AddressMore,
+    ActionButtons,
+  },
+  props: [
+    "context",
+    "options",
+    "defaultz",
+    "flag",
+    "entity",
+    "errorMsg",
+    "insideModal",
+    "errors",
+    "checkErrors",
+  ],
+  emits: ["getCities", "getReferenceAddresses"],
+  data() {
+    return {
+      value: false,
+      valueConfidential: false,
+    };
+  },
+  computed: {
+    address() {
+      return this.entity.address;
     },
-    props: [
-        "context",
-        "options",
-        "defaultz",
-        "flag",
-        "entity",
-        "errorMsg",
-        "insideModal",
-        "errors",
-        "checkErrors",
-    ],
-    emits: ["getCities", "getReferenceAddresses"],
-    data() {
-        return {
-            value: false,
-            valueConfidential: false,
-        };
+    loaded() {
+      return this.entity.loaded;
     },
-    computed: {
-        address() {
-            return this.entity.address;
-        },
-        loaded() {
-            return this.entity.loaded;
-        },
-        selected() {
-            return this.entity.selected;
-        },
-        addressMap() {
-            return this.entity.addressMap;
-        },
-        isConfidential: {
-            set(value) {
-                this.entity.selected.confidential = value;
-            },
-            get() {
-                return this.entity.selected.confidential;
-            },
-        },
-        isNoAddress: {
-            set(value) {
-                console.log("isNoAddress value", value);
-                this.entity.selected.isNoAddress = value;
-                this.checkErrors();
-            },
-            get() {
-                return this.entity.selected.isNoAddress;
-            },
-        },
+    selected() {
+      return this.entity.selected;
     },
-    methods: {
-        focusOnAddress() {
-            const addressSelector = document.getElementById("addressSelector");
-            if (addressSelector !== null) {
-                addressSelector.focus();
-            }
-        },
-        updateMapCenter(point) {
-            console.log("point", point);
-            this.addressMap.center[0] = point.coordinates[0];
-            this.addressMap.center[1] = point.coordinates[1];
-            this.$refs.addressMap.update(); // cast child methods
-        },
+    addressMap() {
+      return this.entity.addressMap;
     },
+    isConfidential: {
+      set(value) {
+        this.entity.selected.confidential = value;
+      },
+      get() {
+        return this.entity.selected.confidential;
+      },
+    },
+    isNoAddress: {
+      set(value) {
+        console.log("isNoAddress value", value);
+        this.entity.selected.isNoAddress = value;
+        this.checkErrors();
+      },
+      get() {
+        return this.entity.selected.isNoAddress;
+      },
+    },
+  },
+  methods: {
+    focusOnAddress() {
+      const addressSelector = document.getElementById("addressSelector");
+      if (addressSelector !== null) {
+        addressSelector.focus();
+      }
+    },
+    updateMapCenter(point) {
+      console.log("point", point);
+      this.addressMap.center[0] = point.coordinates[0];
+      this.addressMap.center[1] = point.coordinates[1];
+      this.$refs.addressMap.update(); // cast child methods
+    },
+  },
 };
 </script>
 
 <style lang="scss">
 div.address-form {
-    div#address_map {
-        height: 400px;
-        width: 100%;
-        z-index: 1;
-    }
+  div#address_map {
+    height: 400px;
+    width: 100%;
+    z-index: 1;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
index a17ce719d..d0796bc0d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
@@ -1,109 +1,98 @@
 <template>
-    <div v-if="!onlyButton" class="mt-4 flex-grow-1">
-        <div class="loading">
-            <i
-                v-if="flag.loading"
-                class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
-            />
-            <span class="sr-only">{{ $t("loading") }}</span>
-        </div>
-
-        <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
-            {{ errorMsg }}
-        </div>
-
-        <div v-if="flag.success" class="alert alert-success">
-            {{ $t(getSuccessText) }}
-            <span v-if="forceRedirect">{{ $t("wait_redirection") }}</span>
-        </div>
-
-        <div
-            v-if="
-                !this.context.edit &&
-                !this.flag.success &&
-                this.context.target.name !== 'household'
-            "
-            class="mt-5"
-        >
-            <div class="no-address-yet">
-                <i class="fa fa-map-marker" aria-hidden="true" />
-                <p class="chill-no-data-statement">
-                    {{ $t("not_yet_address") }}
-                </p>
-
-                <action-buttons
-                    :options="this.options"
-                    :defaultz="this.defaultz"
-                    class="add-address-btn"
-                >
-                    <template #action>
-                        <button
-                            @click.prevent="$emit('openEditPane')"
-                            class="btn"
-                            :class="getClassButton"
-                            type="button"
-                            name="button"
-                            :title="$t(getTextButton)"
-                        >
-                            <span v-if="displayTextButton">{{
-                                $t(getTextButton)
-                            }}</span>
-                        </button>
-                    </template>
-                </action-buttons>
-            </div>
-        </div>
-
-        <address-render-box
-            :address="address"
-            :is-multiline="false"
-            :use-date-pane="useDatePane"
-        />
-
-        <div
-            v-if="this.context.target.name === 'household' || this.context.edit"
-        >
-            <action-buttons :options="this.options" :defaultz="this.defaultz">
-                <template #action>
-                    <button
-                        @click.prevent="$emit('openEditPane')"
-                        class="btn"
-                        :class="getClassButton"
-                        type="button"
-                        name="button"
-                        :title="$t(getTextButton)"
-                    >
-                        <span v-if="displayTextButton">{{
-                            $t(getTextButton)
-                        }}</span>
-                    </button>
-                </template>
-            </action-buttons>
-        </div>
+  <div v-if="!onlyButton" class="mt-4 flex-grow-1">
+    <div class="loading">
+      <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
+      <span class="sr-only">{{ $t("loading") }}</span>
     </div>
 
-    <div v-if="onlyButton">
+    <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
+      {{ errorMsg }}
+    </div>
+
+    <div v-if="flag.success" class="alert alert-success">
+      {{ $t(getSuccessText) }}
+      <span v-if="forceRedirect">{{ $t("wait_redirection") }}</span>
+    </div>
+
+    <div
+      v-if="
+        !this.context.edit &&
+        !this.flag.success &&
+        this.context.target.name !== 'household'
+      "
+      class="mt-5"
+    >
+      <div class="no-address-yet">
+        <i class="fa fa-map-marker" aria-hidden="true" />
+        <p class="chill-no-data-statement">
+          {{ $t("not_yet_address") }}
+        </p>
+
         <action-buttons
-            :options="this.options"
-            :defaultz="this.defaultz"
-            class="add-address-btn"
+          :options="this.options"
+          :defaultz="this.defaultz"
+          class="add-address-btn"
         >
-            <template #action>
-                <button
-                    @click.prevent="$emit('openEditPane')"
-                    class="btn"
-                    :class="getClassButton"
-                    type="button"
-                    name="button"
-                    :title="$t(getTextButton)"
-                >
-                    <span v-if="displayTextButton">{{
-                        $t(getTextButton)
-                    }}</span>
-                </button>
-            </template>
+          <template #action>
+            <button
+              @click.prevent="$emit('openEditPane')"
+              class="btn"
+              :class="getClassButton"
+              type="button"
+              name="button"
+              :title="$t(getTextButton)"
+            >
+              <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+            </button>
+          </template>
         </action-buttons>
+      </div>
     </div>
+
+    <address-render-box
+      :address="address"
+      :is-multiline="false"
+      :use-date-pane="useDatePane"
+    />
+
+    <div v-if="this.context.target.name === 'household' || this.context.edit">
+      <action-buttons :options="this.options" :defaultz="this.defaultz">
+        <template #action>
+          <button
+            @click.prevent="$emit('openEditPane')"
+            class="btn"
+            :class="getClassButton"
+            type="button"
+            name="button"
+            :title="$t(getTextButton)"
+          >
+            <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+          </button>
+        </template>
+      </action-buttons>
+    </div>
+  </div>
+
+  <div v-if="onlyButton">
+    <action-buttons
+      :options="this.options"
+      :defaultz="this.defaultz"
+      class="add-address-btn"
+    >
+      <template #action>
+        <button
+          @click.prevent="$emit('openEditPane')"
+          class="btn"
+          :class="getClassButton"
+          type="button"
+          name="button"
+          :title="$t(getTextButton)"
+        >
+          <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+        </button>
+      </template>
+    </action-buttons>
+  </div>
 </template>
 
 <script>
@@ -111,103 +100,101 @@ import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRe
 import ActionButtons from "./ActionButtons.vue";
 
 export default {
-    name: "ShowPane",
-    components: {
-        AddressRenderBox,
-        ActionButtons,
+  name: "ShowPane",
+  components: {
+    AddressRenderBox,
+    ActionButtons,
+  },
+  props: [
+    "context",
+    "defaultz",
+    "options",
+    "flag",
+    "entity",
+    "errorMsg",
+    "useDatePane",
+  ],
+  emits: ["openEditPane"],
+  mounted() {
+    //console.log('context', this.context)
+  },
+  computed: {
+    address() {
+      return this.entity.address;
     },
-    props: [
-        "context",
-        "defaultz",
-        "options",
-        "flag",
-        "entity",
-        "errorMsg",
-        "useDatePane",
-    ],
-    emits: ["openEditPane"],
-    mounted() {
-        //console.log('context', this.context)
+    displayTextButton() {
+      return typeof this.options.button !== "undefined" &&
+        typeof this.options.button.displayText !== "undefined"
+        ? this.options.button.displayText
+        : this.defaultz.button.displayText;
     },
-    computed: {
-        address() {
-            return this.entity.address;
-        },
-        displayTextButton() {
-            return typeof this.options.button !== "undefined" &&
-                typeof this.options.button.displayText !== "undefined"
-                ? this.options.button.displayText
-                : this.defaultz.button.displayText;
-        },
-        getClassButton() {
-            let type = this.context.edit
-                ? this.defaultz.button.type.edit
-                : this.defaultz.button.type.create;
-            let size =
-                typeof this.options.button !== "undefined" &&
-                this.options.button.size !== null
-                    ? `${this.options.button.size} `
-                    : "";
-            return `${size}${type}`;
-        },
-        getTextButton() {
-            if (
-                typeof this.options.button.text !== "undefined" &&
-                (this.options.button.text.edit !== null ||
-                    this.options.button.text.create !== null)
-            ) {
-                return this.context.edit
-                    ? this.options.button.text.edit
-                    : this.options.button.text.create;
-            }
-            return this.context.edit
-                ? this.defaultz.button.text.edit
-                : this.defaultz.button.text.create;
-        },
-        getSuccessText() {
-            return this.context.edit
-                ? "address_edit_success"
-                : "address_new_success";
-        },
-        onlyButton() {
-            return typeof this.options.onlyButton !== "undefined"
-                ? this.options.onlyButton
-                : this.defaultz.onlyButton;
-        },
-        forceRedirect() {
-            return !(
-                this.context.backUrl === null ||
-                typeof this.context.backUrl === "undefined"
-            );
-        },
-        // showMessageWhenNoAddress() {
-        //     let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
-        //     if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
-        //         return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
-        //     }
-        //    return !this.context.edit && !this.address.id && this.options.stickyActions;
-        // }
+    getClassButton() {
+      let type = this.context.edit
+        ? this.defaultz.button.type.edit
+        : this.defaultz.button.type.create;
+      let size =
+        typeof this.options.button !== "undefined" &&
+        this.options.button.size !== null
+          ? `${this.options.button.size} `
+          : "";
+      return `${size}${type}`;
     },
+    getTextButton() {
+      if (
+        typeof this.options.button.text !== "undefined" &&
+        (this.options.button.text.edit !== null ||
+          this.options.button.text.create !== null)
+      ) {
+        return this.context.edit
+          ? this.options.button.text.edit
+          : this.options.button.text.create;
+      }
+      return this.context.edit
+        ? this.defaultz.button.text.edit
+        : this.defaultz.button.text.create;
+    },
+    getSuccessText() {
+      return this.context.edit ? "address_edit_success" : "address_new_success";
+    },
+    onlyButton() {
+      return typeof this.options.onlyButton !== "undefined"
+        ? this.options.onlyButton
+        : this.defaultz.onlyButton;
+    },
+    forceRedirect() {
+      return !(
+        this.context.backUrl === null ||
+        typeof this.context.backUrl === "undefined"
+      );
+    },
+    // showMessageWhenNoAddress() {
+    //     let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
+    //     if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
+    //         return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
+    //     }
+    //    return !this.context.edit && !this.address.id && this.options.stickyActions;
+    // }
+  },
 };
 </script>
 
 <style lang="scss">
 .address-container {
-    display: flex;
-    justify-content: flex-end;
-    border-radius: 5px;
+  display: flex;
+  justify-content: flex-end;
+  border-radius: 5px;
 }
 .no-address-yet {
-    text-align: center;
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-    padding: 1.5rem;
+  text-align: center;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  i {
+    font-size: 2rem;
     margin-bottom: 2rem;
-    i {
-        font-size: 2rem;
-        margin-bottom: 2rem;
-    }
-    .add-address-btn {
-        display: block;
-    }
+  }
+  .add-address-btn {
+    display: block;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
index ddaed6219..2e62b5963 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
@@ -1,67 +1,64 @@
 <template>
-    <div v-if="insideModal === false" class="loading">
-        <i
-            v-if="flag.loading"
-            class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
-        />
-        <span class="sr-only">{{ $t("loading") }}</span>
-    </div>
+  <div v-if="insideModal === false" class="loading">
+    <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
+    <span class="sr-only">{{ $t("loading") }}</span>
+  </div>
 
-    <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
-        {{ errorMsg }}
-    </div>
+  <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
+    {{ errorMsg }}
+  </div>
 
-    <h4 class="h3">
-        {{ $t("address_suggestions") }}
-    </h4>
+  <h4 class="h3">
+    {{ $t("address_suggestions") }}
+  </h4>
 
-    <div class="flex-table AddressSuggestionList">
-        <div
-            v-for="(a, i) in context.suggestions"
-            class="item-bloc"
-            :key="`suggestions-${i}`"
-        >
-            <div class="float-button bottom">
-                <div class="box">
-                    <div class="action">
-                        <!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
-                        <ul class="record_actions">
-                            <li>
-                                <button
-                                    class="btn btn-sm btn-choose"
-                                    @click="this.pickAddress(a)"
-                                >
-                                    {{ $t("use_this_address") }}
-                                </button>
-                            </li>
-                        </ul>
-                    </div>
-                    <ul class="list-content fa-ul">
-                        <li>
-                            <i class="fa fa-li fa-map-marker" />
-                            <address-render-box :address="a" />
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <action-buttons
-        v-if="insideModal === false"
-        :options="this.options"
-        :defaultz="this.defaultz"
+  <div class="flex-table AddressSuggestionList">
+    <div
+      v-for="(a, i) in context.suggestions"
+      class="item-bloc"
+      :key="`suggestions-${i}`"
     >
-        <template #before>
-            <slot name="before" />
-        </template>
-        <template #action>
-            <slot name="action" />
-        </template>
-        <template #after>
-            <slot name="after" />
-        </template>
-    </action-buttons>
+      <div class="float-button bottom">
+        <div class="box">
+          <div class="action">
+            <!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
+            <ul class="record_actions">
+              <li>
+                <button
+                  class="btn btn-sm btn-choose"
+                  @click="this.pickAddress(a)"
+                >
+                  {{ $t("use_this_address") }}
+                </button>
+              </li>
+            </ul>
+          </div>
+          <ul class="list-content fa-ul">
+            <li>
+              <i class="fa fa-li fa-map-marker" />
+              <address-render-box :address="a" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <action-buttons
+    v-if="insideModal === false"
+    :options="this.options"
+    :defaultz="this.defaultz"
+  >
+    <template #before>
+      <slot name="before" />
+    </template>
+    <template #action>
+      <slot name="action" />
+    </template>
+    <template #after>
+      <slot name="after" />
+    </template>
+  </action-buttons>
 </template>
 
 <script>
@@ -69,26 +66,26 @@ import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRe
 import ActionButtons from "./ActionButtons.vue";
 
 export default {
-    name: "SuggestPane",
-    components: {
-        AddressRenderBox,
-        ActionButtons,
-    },
-    props: [
-        "context",
-        "options",
-        "defaultz",
-        "flag",
-        "entity",
-        "errorMsg",
-        "insideModal",
-    ],
-    computed: {},
-    methods: {
-        pickAddress(address) {
-            console.log("pickAddress in suggest pane", address);
-            this.$emit("pickAddress", address);
-        },
+  name: "SuggestPane",
+  components: {
+    AddressRenderBox,
+    ActionButtons,
+  },
+  props: [
+    "context",
+    "options",
+    "defaultz",
+    "flag",
+    "entity",
+    "errorMsg",
+    "insideModal",
+  ],
+  computed: {},
+  methods: {
+    pickAddress(address) {
+      console.log("pickAddress in suggest pane", address);
+      this.$emit("pickAddress", address);
     },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/App.vue
index 033eb6cac..d1389a748 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/App.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {
-    trans,
-    EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING,
-    EXPORT_GENERATION_TOO_MANY_RETRIES,
-    EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
-    EXPORT_GENERATION_EXPORT_READY,
+  trans,
+  EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING,
+  EXPORT_GENERATION_TOO_MANY_RETRIES,
+  EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
+  EXPORT_GENERATION_EXPORT_READY,
 } from "translator";
 import { computed, onMounted, ref } from "vue";
 import { StoredObject, StoredObjectStatus } from "ChillDocStoreAssets/types";
@@ -13,9 +13,9 @@ import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentAction
 import { ExportGeneration } from "ChillMainAssets/types";
 
 interface AppProps {
-    exportGenerationId: string;
-    title: string;
-    createdDate: string;
+  exportGenerationId: string;
+  title: string;
+  createdDate: string;
 }
 
 const props = defineProps<AppProps>();
@@ -23,19 +23,19 @@ const props = defineProps<AppProps>();
 const exportGeneration = ref<ExportGeneration | null>(null);
 
 const status = computed<StoredObjectStatus>(
-    () => exportGeneration.value?.status ?? "pending",
+  () => exportGeneration.value?.status ?? "pending",
 );
 const storedObject = computed<null | StoredObject>(() => {
-    if (exportGeneration.value === null) {
-        return null;
-    }
+  if (exportGeneration.value === null) {
+    return null;
+  }
 
-    return exportGeneration.value?.storedObject;
+  return exportGeneration.value?.storedObject;
 });
 
 const isPending = computed<boolean>(() => status.value === "pending");
 const isFetching = computed<boolean>(
-    () => tryiesForReady.value < maxTryiesForReady,
+  () => tryiesForReady.value < maxTryiesForReady,
 );
 const isReady = computed<boolean>(() => status.value === "ready");
 const isFailure = computed<boolean>(() => status.value === "failure");
@@ -52,90 +52,87 @@ let tryiesForReady = ref<number>(0);
 const maxTryiesForReady = 120;
 
 const checkForReady = function (): void {
-    if (
-        "ready" === status.value ||
-        "empty" === status.value ||
-        "failure" === status.value ||
-        // stop reloading if the page stays opened for a long time
-        tryiesForReady.value > maxTryiesForReady
-    ) {
-        return;
-    }
+  if (
+    "ready" === status.value ||
+    "empty" === status.value ||
+    "failure" === status.value ||
+    // stop reloading if the page stays opened for a long time
+    tryiesForReady.value > maxTryiesForReady
+  ) {
+    return;
+  }
 
-    tryiesForReady.value = tryiesForReady.value + 1;
-    setTimeout(onObjectNewStatusCallback, 5000);
+  tryiesForReady.value = tryiesForReady.value + 1;
+  setTimeout(onObjectNewStatusCallback, 5000);
 };
 
 const onObjectNewStatusCallback = async function (): Promise<void> {
-    exportGeneration.value = await fetchExportGenerationStatus(
-        props.exportGenerationId,
-    );
-
-    if (isPending.value) {
-        checkForReady();
-        return Promise.resolve();
-    }
+  exportGeneration.value = await fetchExportGenerationStatus(
+    props.exportGenerationId,
+  );
 
+  if (isPending.value) {
+    checkForReady();
     return Promise.resolve();
+  }
+
+  return Promise.resolve();
 };
 
 onMounted(() => {
-    onObjectNewStatusCallback();
+  onObjectNewStatusCallback();
 });
 </script>
 
 <template>
-    <div id="waiting-screen">
-        <div
-            v-if="isPending && isFetching"
-            class="alert alert-danger text-center"
-        >
-            <div>
-                <p>
-                    {{ trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING) }}
-                </p>
-            </div>
+  <div id="waiting-screen">
+    <div v-if="isPending && isFetching" class="alert alert-danger text-center">
+      <div>
+        <p>
+          {{ trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING) }}
+        </p>
+      </div>
 
-            <div>
-                <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
-                <span class="sr-only">Loading...</span>
-            </div>
-        </div>
-        <div v-if="isPending && !isFetching" class="alert alert-info">
-            <div>
-                <p>
-                    {{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}
-                </p>
-            </div>
-        </div>
-        <div v-if="isFailure" class="alert alert-danger text-center">
-            <div>
-                <p>
-                    {{ trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT) }}
-                </p>
-            </div>
-        </div>
-        <div v-if="isReady" class="alert alert-success text-center">
-            <div>
-                <p>
-                    {{ trans(EXPORT_GENERATION_EXPORT_READY) }}
-                </p>
-
-                <p v-if="storedObject !== null">
-                    <document-action-buttons-group
-                        :stored-object="storedObject"
-                        :filename="filename"
-                    ></document-action-buttons-group>
-                </p>
-            </div>
-        </div>
+      <div>
+        <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
+        <span class="sr-only">Loading...</span>
+      </div>
     </div>
+    <div v-if="isPending && !isFetching" class="alert alert-info">
+      <div>
+        <p>
+          {{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}
+        </p>
+      </div>
+    </div>
+    <div v-if="isFailure" class="alert alert-danger text-center">
+      <div>
+        <p>
+          {{ trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT) }}
+        </p>
+      </div>
+    </div>
+    <div v-if="isReady" class="alert alert-success text-center">
+      <div>
+        <p>
+          {{ trans(EXPORT_GENERATION_EXPORT_READY) }}
+        </p>
+
+        <p v-if="storedObject !== null">
+          <document-action-buttons-group
+            :stored-object="storedObject"
+            :filename="filename"
+          ></document-action-buttons-group>
+        </p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 #waiting-screen {
-    > .alert {
-        min-height: 350px;
-    }
+  > .alert {
+    min-height: 350px;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/index.ts b/src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/index.ts
index e970e51b9..ae77fbb08 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/index.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/index.ts
@@ -4,8 +4,8 @@ import App from "./App.vue";
 const el = document.getElementById("app");
 
 if (null === el) {
-    console.error("div element app was not found");
-    throw new Error("div element app was not found");
+  console.error("div element app was not found");
+  throw new Error("div element app was not found");
 }
 
 const exportGenerationId = el?.dataset.exportGenerationId as string;
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
index 8686b59a7..c550d1c0d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
@@ -1,36 +1,36 @@
 <template>
-    <h2>{{ $t("main_title") }}</h2>
+  <h2>{{ $t("main_title") }}</h2>
 
-    <ul class="nav nav-tabs">
-        <li class="nav-item">
-            <a
-                class="nav-link"
-                :class="{ active: activeTab === 'MyCustoms' }"
-                @click="selectTab('MyCustoms')"
-            >
-                <i class="fa fa-dashboard" />
-            </a>
-        </li>
-        <li class="nav-item">
-            <a
-                class="nav-link"
-                :class="{ active: activeTab === 'MyNotifications' }"
-                @click="selectTab('MyNotifications')"
-            >
-                {{ $t("my_notifications.tab") }}
-                <tab-counter :count="state.notifications.count" />
-            </a>
-        </li>
-        <li class="nav-item">
-            <a
-                class="nav-link"
-                :class="{ active: activeTab === 'MyAccompanyingCourses' }"
-                @click="selectTab('MyAccompanyingCourses')"
-            >
-                {{ $t("my_accompanying_courses.tab") }}
-            </a>
-        </li>
-        <!-- <li class="nav-item">
+  <ul class="nav nav-tabs">
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{ active: activeTab === 'MyCustoms' }"
+        @click="selectTab('MyCustoms')"
+      >
+        <i class="fa fa-dashboard" />
+      </a>
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{ active: activeTab === 'MyNotifications' }"
+        @click="selectTab('MyNotifications')"
+      >
+        {{ $t("my_notifications.tab") }}
+        <tab-counter :count="state.notifications.count" />
+      </a>
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{ active: activeTab === 'MyAccompanyingCourses' }"
+        @click="selectTab('MyAccompanyingCourses')"
+      >
+        {{ $t("my_accompanying_courses.tab") }}
+      </a>
+    </li>
+    <!-- <li class="nav-item">
          <a class="nav-link"
             :class="{'active': activeTab === 'MyWorks'}"
             @click="selectTab('MyWorks')">
@@ -38,59 +38,57 @@
             <tab-counter :count="state.works.count"></tab-counter>
          </a>
       </li> -->
-        <li class="nav-item">
-            <a
-                class="nav-link"
-                :class="{ active: activeTab === 'MyEvaluations' }"
-                @click="selectTab('MyEvaluations')"
-            >
-                {{ $t("my_evaluations.tab") }}
-                <tab-counter :count="state.evaluations.count" />
-            </a>
-        </li>
-        <li class="nav-item">
-            <a
-                class="nav-link"
-                :class="{ active: activeTab === 'MyTasks' }"
-                @click="selectTab('MyTasks')"
-            >
-                {{ $t("my_tasks.tab") }}
-                <tab-counter
-                    :count="state.tasks.warning.count + state.tasks.alert.count"
-                />
-            </a>
-        </li>
-        <li class="nav-item">
-            <a
-                class="nav-link"
-                :class="{ active: activeTab === 'MyWorkflows' }"
-                @click="selectTab('MyWorkflows')"
-            >
-                {{ $t("my_workflows.tab") }}
-                <tab-counter
-                    :count="state.workflows.count + state.workflowsCc.count"
-                />
-            </a>
-        </li>
-        <li class="nav-item loading ms-auto py-2" v-if="loading">
-            <i
-                class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray"
-                :title="$t('loading')"
-            />
-        </li>
-    </ul>
-
-    <div class="my-4">
-        <my-customs v-if="activeTab === 'MyCustoms'" />
-        <my-works v-else-if="activeTab === 'MyWorks'" />
-        <my-evaluations v-else-if="activeTab === 'MyEvaluations'" />
-        <my-tasks v-else-if="activeTab === 'MyTasks'" />
-        <my-accompanying-courses
-            v-else-if="activeTab === 'MyAccompanyingCourses'"
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{ active: activeTab === 'MyEvaluations' }"
+        @click="selectTab('MyEvaluations')"
+      >
+        {{ $t("my_evaluations.tab") }}
+        <tab-counter :count="state.evaluations.count" />
+      </a>
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{ active: activeTab === 'MyTasks' }"
+        @click="selectTab('MyTasks')"
+      >
+        {{ $t("my_tasks.tab") }}
+        <tab-counter
+          :count="state.tasks.warning.count + state.tasks.alert.count"
         />
-        <my-notifications v-else-if="activeTab === 'MyNotifications'" />
-        <my-workflows v-else-if="activeTab === 'MyWorkflows'" />
-    </div>
+      </a>
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{ active: activeTab === 'MyWorkflows' }"
+        @click="selectTab('MyWorkflows')"
+      >
+        {{ $t("my_workflows.tab") }}
+        <tab-counter :count="state.workflows.count + state.workflowsCc.count" />
+      </a>
+    </li>
+    <li class="nav-item loading ms-auto py-2" v-if="loading">
+      <i
+        class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray"
+        :title="$t('loading')"
+      />
+    </li>
+  </ul>
+
+  <div class="my-4">
+    <my-customs v-if="activeTab === 'MyCustoms'" />
+    <my-works v-else-if="activeTab === 'MyWorks'" />
+    <my-evaluations v-else-if="activeTab === 'MyEvaluations'" />
+    <my-tasks v-else-if="activeTab === 'MyTasks'" />
+    <my-accompanying-courses
+      v-else-if="activeTab === 'MyAccompanyingCourses'"
+    />
+    <my-notifications v-else-if="activeTab === 'MyNotifications'" />
+    <my-workflows v-else-if="activeTab === 'MyWorkflows'" />
+  </div>
 </template>
 
 <script>
@@ -105,55 +103,55 @@ import TabCounter from "./TabCounter";
 import { mapState } from "vuex";
 
 export default {
-    name: "App",
-    components: {
-        MyCustoms,
-        MyWorks,
-        MyEvaluations,
-        MyTasks,
-        MyWorkflows,
-        MyAccompanyingCourses,
-        MyNotifications,
-        TabCounter,
-    },
-    data() {
-        return {
-            activeTab: "MyCustoms",
-        };
-    },
-    computed: {
-        ...mapState(["loading"]),
-        // just to see all in devtool :
-        ...mapState({
-            state: (state) => state,
-        }),
-    },
-    methods: {
-        selectTab(tab) {
-            if (tab !== "MyCustoms") {
-                this.$store.dispatch("getByTab", { tab: tab });
-            }
-            this.activeTab = tab;
-            console.log(this.activeTab);
-        },
-    },
-    mounted() {
-        for (const m of [
-            "MyNotifications",
-            "MyAccompanyingCourses",
-            // 'MyWorks',
-            "MyEvaluations",
-            "MyTasks",
-            "MyWorkflows",
-        ]) {
-            this.$store.dispatch("getByTab", { tab: m, param: "countOnly=1" });
-        }
+  name: "App",
+  components: {
+    MyCustoms,
+    MyWorks,
+    MyEvaluations,
+    MyTasks,
+    MyWorkflows,
+    MyAccompanyingCourses,
+    MyNotifications,
+    TabCounter,
+  },
+  data() {
+    return {
+      activeTab: "MyCustoms",
+    };
+  },
+  computed: {
+    ...mapState(["loading"]),
+    // just to see all in devtool :
+    ...mapState({
+      state: (state) => state,
+    }),
+  },
+  methods: {
+    selectTab(tab) {
+      if (tab !== "MyCustoms") {
+        this.$store.dispatch("getByTab", { tab: tab });
+      }
+      this.activeTab = tab;
+      console.log(this.activeTab);
     },
+  },
+  mounted() {
+    for (const m of [
+      "MyNotifications",
+      "MyAccompanyingCourses",
+      // 'MyWorks',
+      "MyEvaluations",
+      "MyTasks",
+      "MyWorkflows",
+    ]) {
+      this.$store.dispatch("getByTab", { tab: m, param: "countOnly=1" });
+    }
+  },
 };
 </script>
 
 <style scoped>
 a.nav-link {
-    cursor: pointer;
+  cursor: pointer;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue
index 5633d3133..4f664d6a5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue
@@ -1,13 +1,13 @@
 <template>
-    <div>
-        <h1>{{ $t("widget.news.title") }}</h1>
-        <ul v-if="newsItems.length > 0" class="scrollable">
-            <NewsItem v-for="item in newsItems" :item="item" :key="item.id" />
-        </ul>
-        <p v-if="newsItems.length === 0" class="chill-no-data-statement">
-            {{ $t("widget.news.none") }}
-        </p>
-    </div>
+  <div>
+    <h1>{{ $t("widget.news.title") }}</h1>
+    <ul v-if="newsItems.length > 0" class="scrollable">
+      <NewsItem v-for="item in newsItems" :item="item" :key="item.id" />
+    </ul>
+    <p v-if="newsItems.length === 0" class="chill-no-data-statement">
+      {{ $t("widget.news.none") }}
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -19,26 +19,26 @@ import NewsItem from "./NewsItem.vue";
 const newsItems = ref<NewsItemType[]>([]);
 
 onMounted(() => {
-    fetchResults<NewsItemType>("/api/1.0/main/news/current.json")
-        .then((news): Promise<void> => {
-            // console.log('news articles', response.results)
-            newsItems.value = news;
+  fetchResults<NewsItemType>("/api/1.0/main/news/current.json")
+    .then((news): Promise<void> => {
+      // console.log('news articles', response.results)
+      newsItems.value = news;
 
-            return Promise.resolve();
-        })
-        .catch((error: string) => {
-            console.error("Error fetching news items", error);
-        });
+      return Promise.resolve();
+    })
+    .catch((error: string) => {
+      console.error("Error fetching news items", error);
+    });
 });
 </script>
 
 <style scoped>
 ul {
-    list-style: none;
-    padding: 0;
+  list-style: none;
+  padding: 0;
 }
 
 h1 {
-    text-align: center;
+  text-align: center;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue
index 997eae58b..5cbd33712 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue
@@ -1,40 +1,38 @@
 <template>
-    <li>
-        <h2>{{ props.item.title }}</h2>
-        <time class="createdBy" datetime="{{item.startDate.datetime}}">{{
-            $d(newsItemStartDate(), "text")
-        }}</time>
-        <div class="content" v-if="shouldTruncate(item.content)">
-            <div v-html="prepareContent(item.content)"></div>
-            <div class="float-end">
-                <button
-                    class="btn btn-sm btn-show read-more"
-                    @click="() => openModal(item)"
-                >
-                    {{ $t("widget.news.readMore") }}
-                </button>
-            </div>
-        </div>
-        <div class="content" v-else>
-            <div v-html="convertMarkdownToHtml(item.content)"></div>
-        </div>
+  <li>
+    <h2>{{ props.item.title }}</h2>
+    <time class="createdBy" datetime="{{item.startDate.datetime}}">{{
+      $d(newsItemStartDate(), "text")
+    }}</time>
+    <div class="content" v-if="shouldTruncate(item.content)">
+      <div v-html="prepareContent(item.content)"></div>
+      <div class="float-end">
+        <button
+          class="btn btn-sm btn-show read-more"
+          @click="() => openModal(item)"
+        >
+          {{ $t("widget.news.readMore") }}
+        </button>
+      </div>
+    </div>
+    <div class="content" v-else>
+      <div v-html="convertMarkdownToHtml(item.content)"></div>
+    </div>
 
-        <modal v-if="showModal" @close="closeModal">
-            <template #header>
-                <p class="news-title">{{ item.title }}</p>
-            </template>
-            <template #body>
-                <p class="news-date">
-                    <time
-                        class="createdBy"
-                        datetime="{{item.startDate.datetime}}"
-                        >{{ $d(newsItemStartDate(), "text") }}</time
-                    >
-                </p>
-                <div v-html="convertMarkdownToHtml(item.content)"></div>
-            </template>
-        </modal>
-    </li>
+    <modal v-if="showModal" @close="closeModal">
+      <template #header>
+        <p class="news-title">{{ item.title }}</p>
+      </template>
+      <template #body>
+        <p class="news-date">
+          <time class="createdBy" datetime="{{item.startDate.datetime}}">{{
+            $d(newsItemStartDate(), "text")
+          }}</time>
+        </p>
+        <div v-html="convertMarkdownToHtml(item.content)"></div>
+      </template>
+    </modal>
+  </li>
 </template>
 
 <script setup lang="ts">
@@ -47,151 +45,147 @@ import { ref } from "vue";
 import { ISOToDatetime } from "../../../chill/js/date";
 
 const props = defineProps({
-    item: {
-        type: Object as PropType<NewsItemType>,
-        required: true,
-    },
-    maxLength: {
-        type: Number,
-        required: false,
-        default: 350,
-    },
-    maxLines: {
-        type: Number,
-        required: false,
-        default: 3,
-    },
+  item: {
+    type: Object as PropType<NewsItemType>,
+    required: true,
+  },
+  maxLength: {
+    type: Number,
+    required: false,
+    default: 350,
+  },
+  maxLines: {
+    type: Number,
+    required: false,
+    default: 3,
+  },
 });
 
 const selectedArticle = ref<NewsItemType | null>(null);
 const showModal = ref(false);
 
 const openModal = (item: NewsItemType) => {
-    selectedArticle.value = item;
-    showModal.value = true;
+  selectedArticle.value = item;
+  showModal.value = true;
 };
 
 const closeModal = () => {
-    selectedArticle.value = null;
-    showModal.value = false;
+  selectedArticle.value = null;
+  showModal.value = false;
 };
 
 const shouldTruncate = (content: string): boolean => {
-    const lines = content.split("\n");
+  const lines = content.split("\n");
 
-    // Check if any line exceeds the maximum length
-    const tooManyLines = lines.length > props.maxLines;
+  // Check if any line exceeds the maximum length
+  const tooManyLines = lines.length > props.maxLines;
 
-    return content.length > props.maxLength || tooManyLines;
+  return content.length > props.maxLength || tooManyLines;
 };
 
 const truncateContent = (content: string): string => {
-    let truncatedContent = content.slice(0, props.maxLength);
-    let linkDepth = 0;
-    let linkStartIndex = -1;
-    const lines = content.split("\n");
+  let truncatedContent = content.slice(0, props.maxLength);
+  let linkDepth = 0;
+  let linkStartIndex = -1;
+  const lines = content.split("\n");
 
-    // Truncate if amount of lines are too many
-    if (lines.length > props.maxLines && content.length < props.maxLength) {
-        const truncatedContent = lines
-            .slice(0, props.maxLines)
-            .join("\n")
-            .trim();
-        return truncatedContent + "...";
+  // Truncate if amount of lines are too many
+  if (lines.length > props.maxLines && content.length < props.maxLength) {
+    const truncatedContent = lines.slice(0, props.maxLines).join("\n").trim();
+    return truncatedContent + "...";
+  }
+
+  for (let i = 0; i < truncatedContent.length; i++) {
+    const char = truncatedContent[i];
+
+    if (char === "[") {
+      linkDepth++;
+      if (linkDepth === 1) {
+        linkStartIndex = i;
+      }
+    } else if (char === "]") {
+      linkDepth = Math.max(0, linkDepth - 1);
+    } else if (char === "(" && linkDepth === 0) {
+      truncatedContent = truncatedContent.slice(0, i);
+      break;
     }
+  }
 
-    for (let i = 0; i < truncatedContent.length; i++) {
-        const char = truncatedContent[i];
+  while (linkDepth > 0) {
+    truncatedContent += "]";
+    linkDepth--;
+  }
 
-        if (char === "[") {
-            linkDepth++;
-            if (linkDepth === 1) {
-                linkStartIndex = i;
-            }
-        } else if (char === "]") {
-            linkDepth = Math.max(0, linkDepth - 1);
-        } else if (char === "(" && linkDepth === 0) {
-            truncatedContent = truncatedContent.slice(0, i);
-            break;
-        }
-    }
+  // If a link was found, append the URL inside the parentheses
+  if (linkStartIndex !== -1) {
+    const linkEndIndex = content.indexOf(")", linkStartIndex);
+    const url = content.slice(linkStartIndex + 1, linkEndIndex);
+    truncatedContent = truncatedContent.slice(0, linkStartIndex) + `(${url})`;
+  }
 
-    while (linkDepth > 0) {
-        truncatedContent += "]";
-        linkDepth--;
-    }
+  truncatedContent += "...";
 
-    // If a link was found, append the URL inside the parentheses
-    if (linkStartIndex !== -1) {
-        const linkEndIndex = content.indexOf(")", linkStartIndex);
-        const url = content.slice(linkStartIndex + 1, linkEndIndex);
-        truncatedContent =
-            truncatedContent.slice(0, linkStartIndex) + `(${url})`;
-    }
-
-    truncatedContent += "...";
-
-    return truncatedContent;
+  return truncatedContent;
 };
 
 const preprocess = (markdown: string): string => {
-    return markdown;
+  return markdown;
 };
 
 const postprocess = (html: string): string => {
-    DOMPurify.addHook("afterSanitizeAttributes", (node: any) => {
-        if ("target" in node) {
-            node.setAttribute("target", "_blank");
-            node.setAttribute("rel", "noopener noreferrer");
-        }
-        if (
-            !node.hasAttribute("target") &&
-            (node.hasAttribute("xlink:href") || node.hasAttribute("href"))
-        ) {
-            node.setAttribute("xlink:show", "new");
-        }
-    });
+  DOMPurify.addHook("afterSanitizeAttributes", (node: any) => {
+    if ("target" in node) {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+    if (
+      !node.hasAttribute("target") &&
+      (node.hasAttribute("xlink:href") || node.hasAttribute("href"))
+    ) {
+      node.setAttribute("xlink:show", "new");
+    }
+  });
 
-    return DOMPurify.sanitize(html);
+  return DOMPurify.sanitize(html);
 };
 
 const convertMarkdownToHtml = (markdown: string): string => {
-    marked.use({ hooks: { postprocess, preprocess }, async: false });
-    const rawHtml = marked(markdown) as string;
-    return rawHtml;
+  marked.use({ hooks: { postprocess, preprocess }, async: false });
+  const rawHtml = marked(markdown) as string;
+  return rawHtml;
 };
 
 const prepareContent = (content: string): string => {
-    const htmlContent = convertMarkdownToHtml(content);
-    return truncateContent(htmlContent);
+  const htmlContent = convertMarkdownToHtml(content);
+  return truncateContent(htmlContent);
 };
 
 const newsItemStartDate = (): null | Date => {
-    return ISOToDatetime(props.item?.startDate.datetime);
+  return ISOToDatetime(props.item?.startDate.datetime);
 };
 </script>
 
 <style scoped>
 li {
-    margin-bottom: 20px;
-    overflow: hidden;
-    padding: 0.8rem;
-    background-color: #fbfbfb;
-    border-radius: 4px;
+  margin-bottom: 20px;
+  overflow: hidden;
+  padding: 0.8rem;
+  background-color: #fbfbfb;
+  border-radius: 4px;
 }
 
 h2 {
-    font-size: 1rem !important;
-    text-transform: uppercase;
+  font-size: 1rem !important;
+  text-transform: uppercase;
 }
 
 .content {
-    overflow: hidden;
-    font-size: 0.9rem;
-    position: relative;
+  overflow: hidden;
+  font-size: 0.9rem;
+  position: relative;
 }
 
 .news-title {
-    font-weight: bold;
+  font-weight: bold;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
index 9f7edf8e7..bd3b5cdf8 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
@@ -1,76 +1,65 @@
 <template>
-    <div class="alert alert-light">
-        {{ $t("my_accompanying_courses.description") }}
-    </div>
-    <span v-if="noResults" class="chill-no-data-statement">{{
-        $t("no_data")
-    }}</span>
-    <tab-table v-else>
-        <template #thead>
-            <th scope="col">
-                {{ $t("opening_date") }}
-            </th>
-            <th scope="col">
-                {{ $t("social_issues") }}
-            </th>
-            <th scope="col">
-                {{ $t("concerned_persons") }}
-            </th>
-            <th scope="col" />
-            <th scope="col" />
-        </template>
-        <template #tbody>
-            <tr
-                v-for="(c, i) in accompanyingCourses.results"
-                :key="`course-${i}`"
-            >
-                <td>{{ $d(c.openingDate.datetime, "short") }}</td>
-                <td>
-                    <span
-                        v-for="(i, index) in c.socialIssues"
-                        :key="index"
-                        class="chill-entity entity-social-issue"
-                    >
-                        <span class="badge bg-chill-l-gray text-dark">
-                            {{ localizeString(i.title) }}
-                        </span>
-                    </span>
-                </td>
-                <td>
-                    <span
-                        v-for="p in c.participations"
-                        class="me-1"
-                        :key="p.person.id"
-                    >
-                        <on-the-fly
-                            :type="p.person.type"
-                            :id="p.person.id"
-                            :button-text="p.person.textAge"
-                            :display-badge="'true' === 'true'"
-                            action="show"
-                        />
-                    </span>
-                </td>
-                <td>
-                    <span
-                        v-if="c.emergency"
-                        class="badge rounded-pill bg-danger me-1"
-                        >{{ $t("emergency") }}</span
-                    >
-                    <span
-                        v-if="c.confidential"
-                        class="badge rounded-pill bg-danger"
-                        >{{ $t("confidential") }}</span
-                    >
-                </td>
-                <td>
-                    <a class="btn btn-sm btn-show" :href="getUrl(c)">
-                        {{ $t("show_entity", { entity: $t("the_course") }) }}
-                    </a>
-                </td>
-            </tr>
-        </template>
-    </tab-table>
+  <div class="alert alert-light">
+    {{ $t("my_accompanying_courses.description") }}
+  </div>
+  <span v-if="noResults" class="chill-no-data-statement">{{
+    $t("no_data")
+  }}</span>
+  <tab-table v-else>
+    <template #thead>
+      <th scope="col">
+        {{ $t("opening_date") }}
+      </th>
+      <th scope="col">
+        {{ $t("social_issues") }}
+      </th>
+      <th scope="col">
+        {{ $t("concerned_persons") }}
+      </th>
+      <th scope="col" />
+      <th scope="col" />
+    </template>
+    <template #tbody>
+      <tr v-for="(c, i) in accompanyingCourses.results" :key="`course-${i}`">
+        <td>{{ $d(c.openingDate.datetime, "short") }}</td>
+        <td>
+          <span
+            v-for="(i, index) in c.socialIssues"
+            :key="index"
+            class="chill-entity entity-social-issue"
+          >
+            <span class="badge bg-chill-l-gray text-dark">
+              {{ localizeString(i.title) }}
+            </span>
+          </span>
+        </td>
+        <td>
+          <span v-for="p in c.participations" class="me-1" :key="p.person.id">
+            <on-the-fly
+              :type="p.person.type"
+              :id="p.person.id"
+              :button-text="p.person.textAge"
+              :display-badge="'true' === 'true'"
+              action="show"
+            />
+          </span>
+        </td>
+        <td>
+          <span v-if="c.emergency" class="badge rounded-pill bg-danger me-1">{{
+            $t("emergency")
+          }}</span>
+          <span v-if="c.confidential" class="badge rounded-pill bg-danger">{{
+            $t("confidential")
+          }}</span>
+        </td>
+        <td>
+          <a class="btn btn-sm btn-show" :href="getUrl(c)">
+            {{ $t("show_entity", { entity: $t("the_course") }) }}
+          </a>
+        </td>
+      </tr>
+    </template>
+  </tab-table>
 </template>
 
 <script>
@@ -80,33 +69,33 @@ import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 export default {
-    name: "MyAccompanyingCourses",
-    components: {
-        TabTable,
-        OnTheFly,
+  name: "MyAccompanyingCourses",
+  components: {
+    TabTable,
+    OnTheFly,
+  },
+  computed: {
+    ...mapState(["accompanyingCourses"]),
+    ...mapGetters(["isAccompanyingCoursesLoaded"]),
+    noResults() {
+      if (!this.isAccompanyingCoursesLoaded) {
+        return false;
+      } else {
+        return this.accompanyingCourses.count === 0;
+      }
     },
-    computed: {
-        ...mapState(["accompanyingCourses"]),
-        ...mapGetters(["isAccompanyingCoursesLoaded"]),
-        noResults() {
-            if (!this.isAccompanyingCoursesLoaded) {
-                return false;
-            } else {
-                return this.accompanyingCourses.count === 0;
-            }
-        },
-    },
-    methods: {
-        localizeString,
-        getUrl(c) {
-            return `/fr/parcours/${c.id}`;
-        },
+  },
+  methods: {
+    localizeString,
+    getUrl(c) {
+      return `/fr/parcours/${c.id}`;
     },
+  },
 };
 </script>
 
 <style scoped>
 span.badge.rounded-pill.bg-danger {
-    text-transform: uppercase;
+  text-transform: uppercase;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
index 1f76a5a0a..5b10dc89c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
@@ -1,105 +1,103 @@
 <template>
-    <span v-if="noResults" class="chill-no-data-statement">{{
-        $t("no_dashboard")
-    }}</span>
-    <div v-else id="dashboards" class="container g-3">
-        <div class="row">
-            <div class="mbloc col-xs-12 col-sm-4">
-                <div class="custom1">
-                    <ul class="list-unstyled">
-                        <li v-if="counter.notifications > 0">
-                            <i18n-t
-                                keypath="counter.unread_notifications"
-                                tag="span"
-                                :class="counterClass"
-                                :plural="counter.notifications"
-                            >
-                                <template #n>
-                                    <span>{{ counter.notifications }}</span>
-                                </template>
-                            </i18n-t>
-                        </li>
-                        <li v-if="counter.accompanyingCourses > 0">
-                            <i18n-t
-                                keypath="counter.assignated_courses"
-                                tag="span"
-                                :class="counterClass"
-                                :plural="counter.accompanyingCourses"
-                            >
-                                <template #n>
-                                    <span>{{
-                                        counter.accompanyingCourses
-                                    }}</span>
-                                </template>
-                            </i18n-t>
-                        </li>
-                        <li v-if="counter.works > 0">
-                            <i18n-t
-                                keypath="counter.assignated_actions"
-                                tag="span"
-                                :class="counterClass"
-                                :plural="counter.works"
-                            >
-                                <template #n>
-                                    <span>{{ counter.works }}</span>
-                                </template>
-                            </i18n-t>
-                        </li>
-                        <li v-if="counter.evaluations > 0">
-                            <i18n-t
-                                keypath="counter.assignated_evaluations"
-                                tag="span"
-                                :class="counterClass"
-                                :plural="counter.evaluations"
-                            >
-                                <template #n>
-                                    <span>{{ counter.evaluations }}</span>
-                                </template>
-                            </i18n-t>
-                        </li>
-                        <li v-if="counter.tasksAlert > 0">
-                            <i18n-t
-                                keypath="counter.alert_tasks"
-                                tag="span"
-                                :class="counterClass"
-                                :plural="counter.tasksAlert"
-                            >
-                                <template #n>
-                                    <span>{{ counter.tasksAlert }}</span>
-                                </template>
-                            </i18n-t>
-                        </li>
-                        <li v-if="counter.tasksWarning > 0">
-                            <i18n-t
-                                keypath="counter.warning_tasks"
-                                tag="span"
-                                :class="counterClass"
-                                :plural="counter.tasksWarning"
-                            >
-                                <template #n>
-                                    <span>{{ counter.tasksWarning }}</span>
-                                </template>
-                            </i18n-t>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-
-            <template v-if="this.hasDashboardItems">
-                <template
-                    v-for="(dashboardItem, index) in this.dashboardItems"
-                    :key="index"
-                >
-                    <div
-                        class="mbloc col-xs-12 col-sm-8 news"
-                        v-if="dashboardItem.type === 'news'"
-                    >
-                        <News />
-                    </div>
+  <span v-if="noResults" class="chill-no-data-statement">{{
+    $t("no_dashboard")
+  }}</span>
+  <div v-else id="dashboards" class="container g-3">
+    <div class="row">
+      <div class="mbloc col-xs-12 col-sm-4">
+        <div class="custom1">
+          <ul class="list-unstyled">
+            <li v-if="counter.notifications > 0">
+              <i18n-t
+                keypath="counter.unread_notifications"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.notifications"
+              >
+                <template #n>
+                  <span>{{ counter.notifications }}</span>
                 </template>
-            </template>
+              </i18n-t>
+            </li>
+            <li v-if="counter.accompanyingCourses > 0">
+              <i18n-t
+                keypath="counter.assignated_courses"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.accompanyingCourses"
+              >
+                <template #n>
+                  <span>{{ counter.accompanyingCourses }}</span>
+                </template>
+              </i18n-t>
+            </li>
+            <li v-if="counter.works > 0">
+              <i18n-t
+                keypath="counter.assignated_actions"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.works"
+              >
+                <template #n>
+                  <span>{{ counter.works }}</span>
+                </template>
+              </i18n-t>
+            </li>
+            <li v-if="counter.evaluations > 0">
+              <i18n-t
+                keypath="counter.assignated_evaluations"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.evaluations"
+              >
+                <template #n>
+                  <span>{{ counter.evaluations }}</span>
+                </template>
+              </i18n-t>
+            </li>
+            <li v-if="counter.tasksAlert > 0">
+              <i18n-t
+                keypath="counter.alert_tasks"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.tasksAlert"
+              >
+                <template #n>
+                  <span>{{ counter.tasksAlert }}</span>
+                </template>
+              </i18n-t>
+            </li>
+            <li v-if="counter.tasksWarning > 0">
+              <i18n-t
+                keypath="counter.warning_tasks"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.tasksWarning"
+              >
+                <template #n>
+                  <span>{{ counter.tasksWarning }}</span>
+                </template>
+              </i18n-t>
+            </li>
+          </ul>
         </div>
+      </div>
+
+      <template v-if="this.hasDashboardItems">
+        <template
+          v-for="(dashboardItem, index) in this.dashboardItems"
+          :key="index"
+        >
+          <div
+            class="mbloc col-xs-12 col-sm-8 news"
+            v-if="dashboardItem.type === 'news'"
+          >
+            <News />
+          </div>
+        </template>
+      </template>
     </div>
+  </div>
 </template>
 
 <script>
@@ -108,37 +106,37 @@ import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import News from "./DashboardWidgets/News.vue";
 
 export default {
-    name: "MyCustoms",
-    components: {
-        News,
+  name: "MyCustoms",
+  components: {
+    News,
+  },
+  data() {
+    return {
+      counterClass: {
+        counter: true, //hack to pass class 'counter' in i18n-t
+      },
+      dashboardItems: [],
+      masonry: null,
+    };
+  },
+  computed: {
+    ...mapGetters(["counter"]),
+    noResults() {
+      return false;
     },
-    data() {
-        return {
-            counterClass: {
-                counter: true, //hack to pass class 'counter' in i18n-t
-            },
-            dashboardItems: [],
-            masonry: null,
-        };
-    },
-    computed: {
-        ...mapGetters(["counter"]),
-        noResults() {
-            return false;
-        },
-        hasDashboardItems() {
-            return this.dashboardItems.length > 0;
-        },
-    },
-    mounted() {
-        makeFetch("GET", "/api/1.0/main/dashboard-config-item.json")
-            .then((response) => {
-                this.dashboardItems = response;
-            })
-            .catch((error) => {
-                throw error;
-            });
+    hasDashboardItems() {
+      return this.dashboardItems.length > 0;
     },
+  },
+  mounted() {
+    makeFetch("GET", "/api/1.0/main/dashboard-config-item.json")
+      .then((response) => {
+        this.dashboardItems = response;
+      })
+      .catch((error) => {
+        throw error;
+      });
+  },
 };
 </script>
 
@@ -146,18 +144,18 @@ export default {
 div.custom4,
 div.custom3,
 div.custom2 {
-    font-style: italic;
-    color: var(--bs-chill-gray);
+  font-style: italic;
+  color: var(--bs-chill-gray);
 }
 span.counter {
-    & > span {
-        background-color: unset;
-    }
+  & > span {
+    background-color: unset;
+  }
 }
 
 div.news {
-    max-height: 22rem;
-    overflow: hidden;
-    overflow-y: scroll;
+  max-height: 22rem;
+  overflow: hidden;
+  overflow-y: scroll;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
index 71bf654e7..b7db53a53 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
@@ -1,96 +1,81 @@
 <template>
-    <div class="accompanying-course-work">
-        <div class="alert alert-light">
-            {{ $t("my_evaluations.description") }}
-        </div>
-        <span v-if="noResults" class="chill-no-data-statement">{{
-            $t("no_data")
-        }}</span>
-        <tab-table v-else>
-            <template #thead>
-                <th scope="col">
-                    {{ $t("max_date") }}
-                </th>
-                <th scope="col">
-                    {{ $t("evaluation") }}
-                </th>
-                <th scope="col">
-                    {{ $t("SocialAction") }}
-                </th>
-                <th scope="col" />
-            </template>
-            <template #tbody>
-                <tr
-                    v-for="(e, i) in evaluations.results"
-                    :key="`evaluation-${i}`"
-                >
-                    <td>{{ $d(e.maxDate.datetime, "short") }}</td>
-                    <td>
-                        {{ localizeString(e.evaluation.title) }}
-                    </td>
-                    <td>
-                        <span class="chill-entity entity-social-issue">
-                            <span class="badge bg-chill-l-gray text-dark">
-                                {{
-                                    e.accompanyingPeriodWork.socialAction.issue
-                                        .text
-                                }}
-                            </span>
-                        </span>
-                        <h4 class="badge-title">
-                            <span class="title_label" />
-                            <span class="title_action">
-                                {{ e.accompanyingPeriodWork.socialAction.text }}
-                            </span>
-                        </h4>
-                        <span
-                            v-for="person in e.accompanyingPeriodWork.persons"
-                            class="me-1"
-                            :key="person.id"
-                        >
-                            <on-the-fly
-                                :type="person.type"
-                                :id="person.id"
-                                :button-text="person.textAge"
-                                :display-badge="'true' === 'true'"
-                                action="show"
-                            />
-                        </span>
-                    </td>
-                    <td>
-                        <div
-                            class="btn-group-vertical"
-                            role="group"
-                            aria-label="Actions"
-                        >
-                            <a class="btn btn-sm btn-show" :href="getUrl(e)">
-                                {{
-                                    $t("show_entity", {
-                                        entity: $t("the_evaluation"),
-                                    })
-                                }}
-                            </a>
-                            <a
-                                class="btn btn-sm btn-show"
-                                :href="
-                                    getUrl(
-                                        e.accompanyingPeriodWork
-                                            .accompanyingPeriod,
-                                    )
-                                "
-                            >
-                                {{
-                                    $t("show_entity", {
-                                        entity: $t("the_course"),
-                                    })
-                                }}
-                            </a>
-                        </div>
-                    </td>
-                </tr>
-            </template>
-        </tab-table>
+  <div class="accompanying-course-work">
+    <div class="alert alert-light">
+      {{ $t("my_evaluations.description") }}
     </div>
+    <span v-if="noResults" class="chill-no-data-statement">{{
+      $t("no_data")
+    }}</span>
+    <tab-table v-else>
+      <template #thead>
+        <th scope="col">
+          {{ $t("max_date") }}
+        </th>
+        <th scope="col">
+          {{ $t("evaluation") }}
+        </th>
+        <th scope="col">
+          {{ $t("SocialAction") }}
+        </th>
+        <th scope="col" />
+      </template>
+      <template #tbody>
+        <tr v-for="(e, i) in evaluations.results" :key="`evaluation-${i}`">
+          <td>{{ $d(e.maxDate.datetime, "short") }}</td>
+          <td>
+            {{ localizeString(e.evaluation.title) }}
+          </td>
+          <td>
+            <span class="chill-entity entity-social-issue">
+              <span class="badge bg-chill-l-gray text-dark">
+                {{ e.accompanyingPeriodWork.socialAction.issue.text }}
+              </span>
+            </span>
+            <h4 class="badge-title">
+              <span class="title_label" />
+              <span class="title_action">
+                {{ e.accompanyingPeriodWork.socialAction.text }}
+              </span>
+            </h4>
+            <span
+              v-for="person in e.accompanyingPeriodWork.persons"
+              class="me-1"
+              :key="person.id"
+            >
+              <on-the-fly
+                :type="person.type"
+                :id="person.id"
+                :button-text="person.textAge"
+                :display-badge="'true' === 'true'"
+                action="show"
+              />
+            </span>
+          </td>
+          <td>
+            <div class="btn-group-vertical" role="group" aria-label="Actions">
+              <a class="btn btn-sm btn-show" :href="getUrl(e)">
+                {{
+                  $t("show_entity", {
+                    entity: $t("the_evaluation"),
+                  })
+                }}
+              </a>
+              <a
+                class="btn btn-sm btn-show"
+                :href="getUrl(e.accompanyingPeriodWork.accompanyingPeriod)"
+              >
+                {{
+                  $t("show_entity", {
+                    entity: $t("the_course"),
+                  })
+                }}
+              </a>
+            </div>
+          </td>
+        </tr>
+      </template>
+    </tab-table>
+  </div>
 </template>
 
 <script>
@@ -100,38 +85,38 @@ import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
 import { localizeString } from "../../lib/localizationHelper/localizationHelper";
 
 export default {
-    name: "MyEvaluations",
-    components: {
-        TabTable,
-        OnTheFly,
+  name: "MyEvaluations",
+  components: {
+    TabTable,
+    OnTheFly,
+  },
+  computed: {
+    ...mapState(["evaluations"]),
+    ...mapGetters(["isEvaluationsLoaded"]),
+    noResults() {
+      if (!this.isEvaluationsLoaded) {
+        return false;
+      } else {
+        return this.evaluations.count === 0;
+      }
     },
-    computed: {
-        ...mapState(["evaluations"]),
-        ...mapGetters(["isEvaluationsLoaded"]),
-        noResults() {
-            if (!this.isEvaluationsLoaded) {
-                return false;
-            } else {
-                return this.evaluations.count === 0;
-            }
-        },
-    },
-    methods: {
-        localizeString,
-        getUrl(e) {
-            switch (e.type) {
-                case "accompanying_period_work_evaluation":
-                    let anchor = "#evaluations";
-                    return `/fr/person/accompanying-period/work/${e.accompanyingPeriodWork.id}/edit${anchor}`;
-                case "accompanying_period_work":
-                    return `/fr/person/accompanying-period/work/${e.id}/edit`;
-                case "accompanying_period":
-                    return `/fr/parcours/${e.id}`;
-                default:
-                    throw "entity type unknown";
-            }
-        },
+  },
+  methods: {
+    localizeString,
+    getUrl(e) {
+      switch (e.type) {
+        case "accompanying_period_work_evaluation":
+          let anchor = "#evaluations";
+          return `/fr/person/accompanying-period/work/${e.accompanyingPeriodWork.id}/edit${anchor}`;
+        case "accompanying_period_work":
+          return `/fr/person/accompanying-period/work/${e.id}/edit`;
+        case "accompanying_period":
+          return `/fr/parcours/${e.id}`;
+        default:
+          throw "entity type unknown";
+      }
     },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
index 377903c01..21fd1a9b7 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
@@ -1,46 +1,46 @@
 <template>
-    <div class="alert alert-light">
-        {{ $t("my_notifications.description") }}
-    </div>
-    <span v-if="noResults" class="chill-no-data-statement">{{
-        $t("no_data")
-    }}</span>
-    <tab-table v-else>
-        <template #thead>
-            <th scope="col">
-                {{ $t("Date") }}
-            </th>
-            <th scope="col">
-                {{ $t("Subject") }}
-            </th>
-            <th scope="col">
-                {{ $t("From") }}
-            </th>
-            <th scope="col" />
-        </template>
-        <template #tbody>
-            <tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
-                <td>{{ $d(n.date.datetime, "long") }}</td>
-                <td>
-                    <span class="unread">
-                        <i class="fa fa-envelope-o" />
-                        <a :href="getNotificationUrl(n)">{{ n.title }}</a>
-                    </span>
-                </td>
-                <td v-if="n.sender != null">
-                    {{ n.sender.text }}
-                </td>
-                <td v-else>
-                    {{ $t("automatic_notification") }}
-                </td>
-                <td>
-                    <a class="btn btn-sm btn-show" :href="getEntityUrl(n)">
-                        {{ $t("show_entity", { entity: getEntityName(n) }) }}
-                    </a>
-                </td>
-            </tr>
-        </template>
-    </tab-table>
+  <div class="alert alert-light">
+    {{ $t("my_notifications.description") }}
+  </div>
+  <span v-if="noResults" class="chill-no-data-statement">{{
+    $t("no_data")
+  }}</span>
+  <tab-table v-else>
+    <template #thead>
+      <th scope="col">
+        {{ $t("Date") }}
+      </th>
+      <th scope="col">
+        {{ $t("Subject") }}
+      </th>
+      <th scope="col">
+        {{ $t("From") }}
+      </th>
+      <th scope="col" />
+    </template>
+    <template #tbody>
+      <tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
+        <td>{{ $d(n.date.datetime, "long") }}</td>
+        <td>
+          <span class="unread">
+            <i class="fa fa-envelope-o" />
+            <a :href="getNotificationUrl(n)">{{ n.title }}</a>
+          </span>
+        </td>
+        <td v-if="n.sender != null">
+          {{ n.sender.text }}
+        </td>
+        <td v-else>
+          {{ $t("automatic_notification") }}
+        </td>
+        <td>
+          <a class="btn btn-sm btn-show" :href="getEntityUrl(n)">
+            {{ $t("show_entity", { entity: getEntityName(n) }) }}
+          </a>
+        </td>
+      </tr>
+    </template>
+  </tab-table>
 </template>
 
 <script>
@@ -49,69 +49,69 @@ import TabTable from "./TabTable";
 import { appMessages } from "ChillMainAssets/vuejs/HomepageWidget/js/i18n";
 
 export default {
-    name: "MyNotifications",
-    components: {
-        TabTable,
+  name: "MyNotifications",
+  components: {
+    TabTable,
+  },
+  computed: {
+    ...mapState(["notifications"]),
+    ...mapGetters(["isNotificationsLoaded"]),
+    noResults() {
+      if (!this.isNotificationsLoaded) {
+        return false;
+      } else {
+        return this.notifications.count === 0;
+      }
     },
-    computed: {
-        ...mapState(["notifications"]),
-        ...mapGetters(["isNotificationsLoaded"]),
-        noResults() {
-            if (!this.isNotificationsLoaded) {
-                return false;
-            } else {
-                return this.notifications.count === 0;
-            }
-        },
+  },
+  methods: {
+    getNotificationUrl(n) {
+      return `/fr/notification/${n.id}/show`;
     },
-    methods: {
-        getNotificationUrl(n) {
-            return `/fr/notification/${n.id}/show`;
-        },
-        getEntityName(n) {
-            switch (n.relatedEntityClass) {
-                case "Chill\\ActivityBundle\\Entity\\Activity":
-                    return appMessages.fr.the_activity;
-                case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
-                    return appMessages.fr.the_course;
-                case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
-                    return appMessages.fr.the_action;
-                case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
-                    return appMessages.fr.the_evaluation_document;
-                case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
-                    return appMessages.fr.the_workflow;
-                default:
-                    throw "notification type unknown";
-            }
-        },
-        getEntityUrl(n) {
-            switch (n.relatedEntityClass) {
-                case "Chill\\ActivityBundle\\Entity\\Activity":
-                    return `/fr/activity/${n.relatedEntityId}/show`;
-                case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
-                    return `/fr/parcours/${n.relatedEntityId}`;
-                case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
-                    return `/fr/person/accompanying-period/work/${n.relatedEntityId}/show`;
-                case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
-                    return `/fr/person/accompanying-period/work/evaluation/document/${n.relatedEntityId}/show`;
-                case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
-                    return `/fr/main/workflow/${n.relatedEntityId}/show`;
-                default:
-                    throw "notification type unknown";
-            }
-        },
+    getEntityName(n) {
+      switch (n.relatedEntityClass) {
+        case "Chill\\ActivityBundle\\Entity\\Activity":
+          return appMessages.fr.the_activity;
+        case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
+          return appMessages.fr.the_course;
+        case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
+          return appMessages.fr.the_action;
+        case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
+          return appMessages.fr.the_evaluation_document;
+        case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
+          return appMessages.fr.the_workflow;
+        default:
+          throw "notification type unknown";
+      }
     },
+    getEntityUrl(n) {
+      switch (n.relatedEntityClass) {
+        case "Chill\\ActivityBundle\\Entity\\Activity":
+          return `/fr/activity/${n.relatedEntityId}/show`;
+        case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
+          return `/fr/parcours/${n.relatedEntityId}`;
+        case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
+          return `/fr/person/accompanying-period/work/${n.relatedEntityId}/show`;
+        case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
+          return `/fr/person/accompanying-period/work/evaluation/document/${n.relatedEntityId}/show`;
+        case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
+          return `/fr/main/workflow/${n.relatedEntityId}/show`;
+        default:
+          throw "notification type unknown";
+      }
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 span.unread {
-    font-weight: bold;
-    i {
-        margin-right: 0.5em;
-    }
-    a {
-        text-decoration: unset;
-    }
+  font-weight: bold;
+  i {
+    margin-right: 0.5em;
+  }
+  a {
+    text-decoration: unset;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
index ca30197a8..cc043461e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
@@ -1,83 +1,78 @@
 <template>
-    <div class="alert alert-light">
-        {{ $t("my_tasks.description_warning") }}
-    </div>
-    <span v-if="noResultsAlert" class="chill-no-data-statement">{{
-        $t("no_data")
-    }}</span>
-    <tab-table v-else>
-        <template #thead>
-            <th scope="col">
-                {{ $t("warning_date") }}
-            </th>
-            <th scope="col">
-                {{ $t("max_date") }}
-            </th>
-            <th scope="col">
-                {{ $t("task") }}
-            </th>
-            <th scope="col" />
-        </template>
-        <template #tbody>
-            <tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
-                <td v-if="null !== t.warningDate">
-                    {{ $d(t.warningDate.datetime, "short") }}
-                </td>
-                <td v-else />
-                <td>
-                    <span class="outdated">{{
-                        $d(t.endDate.datetime, "short")
-                    }}</span>
-                </td>
-                <td>{{ t.title }}</td>
-                <td>
-                    <a class="btn btn-sm btn-show" :href="getUrl(t)">
-                        {{ $t("show_entity", { entity: $t("the_task") }) }}
-                    </a>
-                </td>
-            </tr>
-        </template>
-    </tab-table>
+  <div class="alert alert-light">
+    {{ $t("my_tasks.description_warning") }}
+  </div>
+  <span v-if="noResultsAlert" class="chill-no-data-statement">{{
+    $t("no_data")
+  }}</span>
+  <tab-table v-else>
+    <template #thead>
+      <th scope="col">
+        {{ $t("warning_date") }}
+      </th>
+      <th scope="col">
+        {{ $t("max_date") }}
+      </th>
+      <th scope="col">
+        {{ $t("task") }}
+      </th>
+      <th scope="col" />
+    </template>
+    <template #tbody>
+      <tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
+        <td v-if="null !== t.warningDate">
+          {{ $d(t.warningDate.datetime, "short") }}
+        </td>
+        <td v-else />
+        <td>
+          <span class="outdated">{{ $d(t.endDate.datetime, "short") }}</span>
+        </td>
+        <td>{{ t.title }}</td>
+        <td>
+          <a class="btn btn-sm btn-show" :href="getUrl(t)">
+            {{ $t("show_entity", { entity: $t("the_task") }) }}
+          </a>
+        </td>
+      </tr>
+    </template>
+  </tab-table>
 
-    <div class="alert alert-light">
-        {{ $t("my_tasks.description_alert") }}
-    </div>
-    <span v-if="noResultsWarning" class="chill-no-data-statement">{{
-        $t("no_data")
-    }}</span>
-    <tab-table v-else>
-        <template #thead>
-            <th scope="col">
-                {{ $t("warning_date") }}
-            </th>
-            <th scope="col">
-                {{ $t("max_date") }}
-            </th>
-            <th scope="col">
-                {{ $t("task") }}
-            </th>
-            <th scope="col" />
-        </template>
-        <template #tbody>
-            <tr
-                v-for="(t, i) in tasks.warning.results"
-                :key="`task-warning-${i}`"
-            >
-                <td>
-                    <span class="outdated">{{
-                        $d(t.warningDate.datetime, "short")
-                    }}</span>
-                </td>
-                <td>{{ $d(t.endDate.datetime, "short") }}</td>
-                <td>{{ t.title }}</td>
-                <td>
-                    <a class="btn btn-sm btn-show" :href="getUrl(t)">
-                        {{ $t("show_entity", { entity: $t("the_task") }) }}
-                    </a>
-                </td>
-            </tr>
-        </template>
-    </tab-table>
+  <div class="alert alert-light">
+    {{ $t("my_tasks.description_alert") }}
+  </div>
+  <span v-if="noResultsWarning" class="chill-no-data-statement">{{
+    $t("no_data")
+  }}</span>
+  <tab-table v-else>
+    <template #thead>
+      <th scope="col">
+        {{ $t("warning_date") }}
+      </th>
+      <th scope="col">
+        {{ $t("max_date") }}
+      </th>
+      <th scope="col">
+        {{ $t("task") }}
+      </th>
+      <th scope="col" />
+    </template>
+    <template #tbody>
+      <tr v-for="(t, i) in tasks.warning.results" :key="`task-warning-${i}`">
+        <td>
+          <span class="outdated">{{
+            $d(t.warningDate.datetime, "short")
+          }}</span>
+        </td>
+        <td>{{ $d(t.endDate.datetime, "short") }}</td>
+        <td>{{ t.title }}</td>
+        <td>
+          <a class="btn btn-sm btn-show" :href="getUrl(t)">
+            {{ $t("show_entity", { entity: $t("the_task") }) }}
+          </a>
+        </td>
+      </tr>
+    </template>
+  </tab-table>
 </template>
 
 <script>
@@ -85,39 +80,39 @@ import { mapState, mapGetters } from "vuex";
 import TabTable from "./TabTable";
 
 export default {
-    name: "MyTasks",
-    components: {
-        TabTable,
+  name: "MyTasks",
+  components: {
+    TabTable,
+  },
+  computed: {
+    ...mapState(["tasks"]),
+    ...mapGetters(["isTasksWarningLoaded", "isTasksAlertLoaded"]),
+    noResultsAlert() {
+      if (!this.isTasksAlertLoaded) {
+        return false;
+      } else {
+        return this.tasks.alert.count === 0;
+      }
     },
-    computed: {
-        ...mapState(["tasks"]),
-        ...mapGetters(["isTasksWarningLoaded", "isTasksAlertLoaded"]),
-        noResultsAlert() {
-            if (!this.isTasksAlertLoaded) {
-                return false;
-            } else {
-                return this.tasks.alert.count === 0;
-            }
-        },
-        noResultsWarning() {
-            if (!this.isTasksWarningLoaded) {
-                return false;
-            } else {
-                return this.tasks.warning.count === 0;
-            }
-        },
+    noResultsWarning() {
+      if (!this.isTasksWarningLoaded) {
+        return false;
+      } else {
+        return this.tasks.warning.count === 0;
+      }
     },
-    methods: {
-        getUrl(t) {
-            return `/fr/task/single-task/${t.id}/show`;
-        },
+  },
+  methods: {
+    getUrl(t) {
+      return `/fr/task/single-task/${t.id}/show`;
     },
+  },
 };
 </script>
 
 <style scoped>
 span.outdated {
-    font-weight: bold;
-    color: var(--bs-warning);
+  font-weight: bold;
+  color: var(--bs-warning);
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue
index 68ac0bc1e..453ed19b4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue
@@ -1,13 +1,13 @@
 <template>
-    <div class="alert alert-light">
-        {{ $t("my_workflows.description") }}
-    </div>
-    <my-workflows-table :workflows="workflows" />
+  <div class="alert alert-light">
+    {{ $t("my_workflows.description") }}
+  </div>
+  <my-workflows-table :workflows="workflows" />
 
-    <div class="alert alert-light">
-        {{ $t("my_workflows.description_cc") }}
-    </div>
-    <my-workflows-table :workflows="workflowsCc" />
+  <div class="alert alert-light">
+    {{ $t("my_workflows.description_cc") }}
+  </div>
+  <my-workflows-table :workflows="workflowsCc" />
 </template>
 
 <script>
@@ -15,12 +15,12 @@ import { mapState } from "vuex";
 import MyWorkflowsTable from "./MyWorkflowsTable.vue";
 
 export default {
-    name: "MyWorkflows",
-    components: {
-        MyWorkflowsTable,
-    },
-    computed: {
-        ...mapState(["workflows", "workflowsCc"]),
-    },
+  name: "MyWorkflows",
+  components: {
+    MyWorkflowsTable,
+  },
+  computed: {
+    ...mapState(["workflows", "workflowsCc"]),
+  },
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue
index 61dfa420d..b10cbacfe 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue
@@ -1,59 +1,57 @@
 <template>
-    <span v-if="hasNoResults(workflows)" class="chill-no-data-statement">{{
-        $t("no_data")
-    }}</span>
-    <tab-table v-else>
-        <template #thead>
-            <th scope="col">
-                {{ $t("Object_workflow") }}
-            </th>
-            <th scope="col">
-                {{ $t("Step") }}
-            </th>
-            <th scope="col">
-                {{ $t("concerned_users") }}
-            </th>
-            <th scope="col" />
-        </template>
-        <template #tbody>
-            <tr v-for="(w, i) in workflows.results" :key="`workflow-${i}`">
-                <td>
-                    {{ w.title }}
-                </td>
-                <td>
-                    <div class="workflow">
-                        <div class="breadcrumb">
-                            <i
-                                class="fa fa-circle me-1 text-chill-yellow mx-2"
-                            />
-                            <span class="mx-2">{{ getStep(w) }}</span>
-                        </div>
-                        <span
-                            v-if="w.isOnHoldAtCurrentStep"
-                            class="badge bg-success rounded-pill"
-                            >{{ $t("on_hold") }}</span
-                        >
-                    </div>
-                </td>
-                <td v-if="w.datas.persons !== null">
-                    <span v-for="p in w.datas.persons" class="me-1" :key="p.id">
-                        <on-the-fly
-                            :type="p.type"
-                            :id="p.id"
-                            :button-text="p.textAge"
-                            :display-badge="'true' === 'true'"
-                            action="show"
-                        />
-                    </span>
-                </td>
-                <td>
-                    <a class="btn btn-sm btn-show" :href="getUrl(w)">
-                        {{ $t("show_entity", { entity: $t("the_workflow") }) }}
-                    </a>
-                </td>
-            </tr>
-        </template>
-    </tab-table>
+  <span v-if="hasNoResults(workflows)" class="chill-no-data-statement">{{
+    $t("no_data")
+  }}</span>
+  <tab-table v-else>
+    <template #thead>
+      <th scope="col">
+        {{ $t("Object_workflow") }}
+      </th>
+      <th scope="col">
+        {{ $t("Step") }}
+      </th>
+      <th scope="col">
+        {{ $t("concerned_users") }}
+      </th>
+      <th scope="col" />
+    </template>
+    <template #tbody>
+      <tr v-for="(w, i) in workflows.results" :key="`workflow-${i}`">
+        <td>
+          {{ w.title }}
+        </td>
+        <td>
+          <div class="workflow">
+            <div class="breadcrumb">
+              <i class="fa fa-circle me-1 text-chill-yellow mx-2" />
+              <span class="mx-2">{{ getStep(w) }}</span>
+            </div>
+            <span
+              v-if="w.isOnHoldAtCurrentStep"
+              class="badge bg-success rounded-pill"
+              >{{ $t("on_hold") }}</span
+            >
+          </div>
+        </td>
+        <td v-if="w.datas.persons !== null">
+          <span v-for="p in w.datas.persons" class="me-1" :key="p.id">
+            <on-the-fly
+              :type="p.type"
+              :id="p.id"
+              :button-text="p.textAge"
+              :display-badge="'true' === 'true'"
+              action="show"
+            />
+          </span>
+        </td>
+        <td>
+          <a class="btn btn-sm btn-show" :href="getUrl(w)">
+            {{ $t("show_entity", { entity: $t("the_workflow") }) }}
+          </a>
+        </td>
+      </tr>
+    </template>
+  </tab-table>
 </template>
 
 <script>
@@ -62,37 +60,37 @@ import TabTable from "./TabTable";
 import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
 
 export default {
-    name: "MyWorkflows",
-    components: {
-        TabTable,
-        OnTheFly,
+  name: "MyWorkflows",
+  components: {
+    TabTable,
+    OnTheFly,
+  },
+  props: ["workflows"],
+  computed: {
+    ...mapGetters(["isWorkflowsLoaded"]),
+  },
+  methods: {
+    hasNoResults(workflows) {
+      if (!this.isWorkflowsLoaded) {
+        return false;
+      } else {
+        return workflows.count === 0;
+      }
     },
-    props: ["workflows"],
-    computed: {
-        ...mapGetters(["isWorkflowsLoaded"]),
+    getUrl(w) {
+      return `/fr/main/workflow/${w.id}/show`;
     },
-    methods: {
-        hasNoResults(workflows) {
-            if (!this.isWorkflowsLoaded) {
-                return false;
-            } else {
-                return workflows.count === 0;
-            }
-        },
-        getUrl(w) {
-            return `/fr/main/workflow/${w.id}/show`;
-        },
-        getStep(w) {
-            const lastStep = w.steps.length - 1;
-            return w.steps[lastStep].currentStep.text;
-        },
+    getStep(w) {
+      const lastStep = w.steps.length - 1;
+      return w.steps[lastStep].currentStep.text;
     },
+  },
 };
 </script>
 
 <style scoped>
 span.outdated {
-    font-weight: bold;
-    color: var(--bs-warning);
+  font-weight: bold;
+  color: var(--bs-warning);
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
index 8f7dea7ef..84400dfc2 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
@@ -1,85 +1,77 @@
 // CURRENTLY NOT IN USE
 <template>
-    <div class="accompanying-course-work">
-        <div class="alert alert-light">
-            {{ $t("my_works.description") }}
-        </div>
-        <span v-if="noResults" class="chill-no-data-statement">{{
-            $t("no_data")
-        }}</span>
-        <tab-table v-else>
-            <template #thead>
-                <th scope="col">
-                    {{ $t("StartDate") }}
-                </th>
-                <th scope="col">
-                    {{ $t("SocialAction") }}
-                </th>
-                <th scope="col">
-                    {{ $t("concerned_persons") }}
-                </th>
-                <th scope="col" />
-            </template>
-            <template #tbody>
-                <tr v-for="(w, i) in works.results" :key="`works-${i}`">
-                    <td>{{ $d(w.startDate.datetime, "short") }}</td>
-                    <td>
-                        <span class="chill-entity entity-social-issue">
-                            <span class="badge bg-chill-l-gray text-dark">
-                                {{ w.socialAction.issue.text }}
-                            </span>
-                        </span>
-                        <h4 class="badge-title">
-                            <span class="title_label" />
-                            <span class="title_action">
-                                {{ w.socialAction.text }}
-                            </span>
-                        </h4>
-                    </td>
-                    <td>
-                        <span
-                            v-for="person in w.persons"
-                            class="me-1"
-                            :key="person.id"
-                        >
-                            <on-the-fly
-                                :type="person.type"
-                                :id="person.id"
-                                :button-text="person.textAge"
-                                :display-badge="'true' === 'true'"
-                                action="show"
-                            />
-                        </span>
-                    </td>
-                    <td>
-                        <div
-                            class="btn-group-vertical"
-                            role="group"
-                            aria-label="Actions"
-                        >
-                            <a class="btn btn-sm btn-update" :href="getUrl(w)">
-                                {{
-                                    $t("show_entity", {
-                                        entity: $t("the_action"),
-                                    })
-                                }}
-                            </a>
-                            <a
-                                class="btn btn-sm btn-show"
-                                :href="getUrl(w.accompanyingPeriod)"
-                            >
-                                {{
-                                    $t("show_entity", {
-                                        entity: $t("the_course"),
-                                    })
-                                }}
-                            </a>
-                        </div>
-                    </td>
-                </tr>
-            </template>
-        </tab-table>
+  <div class="accompanying-course-work">
+    <div class="alert alert-light">
+      {{ $t("my_works.description") }}
     </div>
+    <span v-if="noResults" class="chill-no-data-statement">{{
+      $t("no_data")
+    }}</span>
+    <tab-table v-else>
+      <template #thead>
+        <th scope="col">
+          {{ $t("StartDate") }}
+        </th>
+        <th scope="col">
+          {{ $t("SocialAction") }}
+        </th>
+        <th scope="col">
+          {{ $t("concerned_persons") }}
+        </th>
+        <th scope="col" />
+      </template>
+      <template #tbody>
+        <tr v-for="(w, i) in works.results" :key="`works-${i}`">
+          <td>{{ $d(w.startDate.datetime, "short") }}</td>
+          <td>
+            <span class="chill-entity entity-social-issue">
+              <span class="badge bg-chill-l-gray text-dark">
+                {{ w.socialAction.issue.text }}
+              </span>
+            </span>
+            <h4 class="badge-title">
+              <span class="title_label" />
+              <span class="title_action">
+                {{ w.socialAction.text }}
+              </span>
+            </h4>
+          </td>
+          <td>
+            <span v-for="person in w.persons" class="me-1" :key="person.id">
+              <on-the-fly
+                :type="person.type"
+                :id="person.id"
+                :button-text="person.textAge"
+                :display-badge="'true' === 'true'"
+                action="show"
+              />
+            </span>
+          </td>
+          <td>
+            <div class="btn-group-vertical" role="group" aria-label="Actions">
+              <a class="btn btn-sm btn-update" :href="getUrl(w)">
+                {{
+                  $t("show_entity", {
+                    entity: $t("the_action"),
+                  })
+                }}
+              </a>
+              <a
+                class="btn btn-sm btn-show"
+                :href="getUrl(w.accompanyingPeriod)"
+              >
+                {{
+                  $t("show_entity", {
+                    entity: $t("the_course"),
+                  })
+                }}
+              </a>
+            </div>
+          </td>
+        </tr>
+      </template>
+    </tab-table>
+  </div>
 </template>
 
 <script>
@@ -88,34 +80,34 @@ import TabTable from "./TabTable";
 import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
 
 export default {
-    name: "MyWorks",
-    components: {
-        TabTable,
-        OnTheFly,
+  name: "MyWorks",
+  components: {
+    TabTable,
+    OnTheFly,
+  },
+  computed: {
+    ...mapState(["works"]),
+    ...mapGetters(["isWorksLoaded"]),
+    noResults() {
+      if (!this.isWorksLoaded) {
+        return false;
+      } else {
+        return this.works.count === 0;
+      }
     },
-    computed: {
-        ...mapState(["works"]),
-        ...mapGetters(["isWorksLoaded"]),
-        noResults() {
-            if (!this.isWorksLoaded) {
-                return false;
-            } else {
-                return this.works.count === 0;
-            }
-        },
-    },
-    methods: {
-        getUrl(e) {
-            switch (e.type) {
-                case "accompanying_period_work":
-                    return `/fr/person/accompanying-period/work/${e.id}/edit`;
-                case "accompanying_period":
-                    return `/fr/parcours/${e.id}`;
-                default:
-                    throw "entity type unknown";
-            }
-        },
+  },
+  methods: {
+    getUrl(e) {
+      switch (e.type) {
+        case "accompanying_period_work":
+          return `/fr/person/accompanying-period/work/${e.id}/edit`;
+        case "accompanying_period":
+          return `/fr/parcours/${e.id}`;
+        default:
+          throw "entity type unknown";
+      }
     },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
index daec6db4a..231d101bf 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
@@ -1,17 +1,17 @@
 <template>
-    <span v-if="isCounterAvailable" class="badge rounded-pill bg-danger">
-        {{ count }}
-    </span>
+  <span v-if="isCounterAvailable" class="badge rounded-pill bg-danger">
+    {{ count }}
+  </span>
 </template>
 
 <script>
 export default {
-    name: "TabCounter",
-    props: ["count"],
-    computed: {
-        isCounterAvailable() {
-            return typeof this.count !== "undefined" && this.count > 0;
-        },
+  name: "TabCounter",
+  props: ["count"],
+  computed: {
+    isCounterAvailable() {
+      return typeof this.count !== "undefined" && this.count > 0;
     },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue
index c8899aa86..d96f88dc5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue
@@ -1,20 +1,20 @@
 <template>
-    <table class="table table-striped table-hover">
-        <thead>
-            <tr>
-                <slot name="thead" />
-            </tr>
-        </thead>
-        <tbody>
-            <slot name="tbody" />
-        </tbody>
-    </table>
+  <table class="table table-striped table-hover">
+    <thead>
+      <tr>
+        <slot name="thead" />
+      </tr>
+    </thead>
+    <tbody>
+      <slot name="tbody" />
+    </tbody>
+  </table>
 </template>
 
 <script>
 export default {
-    name: "TabTable",
-    props: [],
+  name: "TabTable",
+  props: [],
 };
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
index 24c5421a8..ca60c23c7 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
@@ -1,42 +1,42 @@
 <template>
-    <on-the-fly
-        :type="context.type"
-        :id="context.id"
-        :action="context.action"
-        :button-text="options.buttonText"
-        :display-badge="options.displayBadge === 'true'"
-        :is-dead="options.isDead"
-        :parent="options.parent"
-        @save-form-on-the-fly="saveFormOnTheFly"
-    />
+  <on-the-fly
+    :type="context.type"
+    :id="context.id"
+    :action="context.action"
+    :button-text="options.buttonText"
+    :display-badge="options.displayBadge === 'true'"
+    :is-dead="options.isDead"
+    :parent="options.parent"
+    @save-form-on-the-fly="saveFormOnTheFly"
+  />
 </template>
 
 <script>
 import OnTheFly from "./components/OnTheFly.vue";
 
 export default {
-    name: "App",
-    components: {
-        OnTheFly,
+  name: "App",
+  components: {
+    OnTheFly,
+  },
+  props: ["onTheFly"],
+  computed: {
+    context() {
+      return this.onTheFly.context;
     },
-    props: ["onTheFly"],
-    computed: {
-        context() {
-            return this.onTheFly.context;
-        },
-        options() {
-            return this.onTheFly.options;
-        },
+    options() {
+      return this.onTheFly.options;
     },
-    mounted() {
-        //console.log('OnTheFly mounted');
-        //console.log('OnTheFly: data context', this.context);
-        //console.log('OnTheFly: data options', this.options);
-    },
-    methods: {
-        saveFormOnTheFly(payload) {
-            console.log("saveFormOnTheFly", payload);
-        },
+  },
+  mounted() {
+    //console.log('OnTheFly mounted');
+    //console.log('OnTheFly: data context', this.context);
+    //console.log('OnTheFly: data options', this.options);
+  },
+  methods: {
+    saveFormOnTheFly(payload) {
+      console.log("saveFormOnTheFly", payload);
     },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
index f05080fba..b4f972b2c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
@@ -1,116 +1,115 @@
 <template>
-    <ul class="nav nav-tabs">
-        <li v-if="allowedTypes.includes('person')" class="nav-item">
-            <a class="nav-link" :class="{ active: isActive('person') }">
-                <label for="person">
-                    <input
-                        type="radio"
-                        name="person"
-                        id="person"
-                        v-model="radioType"
-                        value="person"
-                    />
-                    {{ trans(ONTHEFLY_CREATE_PERSON) }}
-                </label>
-            </a>
-        </li>
-        <li v-if="allowedTypes.includes('thirdparty')" class="nav-item">
-            <a class="nav-link" :class="{ active: isActive('thirdparty') }">
-                <label for="thirdparty">
-                    <input
-                        type="radio"
-                        name="thirdparty"
-                        id="thirdparty"
-                        v-model="radioType"
-                        value="thirdparty"
-                    />
-                    {{ trans(ONTHEFLY_CREATE_THIRDPARTY) }}
-                </label>
-            </a>
-        </li>
-    </ul>
+  <ul class="nav nav-tabs">
+    <li v-if="allowedTypes.includes('person')" class="nav-item">
+      <a class="nav-link" :class="{ active: isActive('person') }">
+        <label for="person">
+          <input
+            type="radio"
+            name="person"
+            id="person"
+            v-model="radioType"
+            value="person"
+          />
+          {{ trans(ONTHEFLY_CREATE_PERSON) }}
+        </label>
+      </a>
+    </li>
+    <li v-if="allowedTypes.includes('thirdparty')" class="nav-item">
+      <a class="nav-link" :class="{ active: isActive('thirdparty') }">
+        <label for="thirdparty">
+          <input
+            type="radio"
+            name="thirdparty"
+            id="thirdparty"
+            v-model="radioType"
+            value="thirdparty"
+          />
+          {{ trans(ONTHEFLY_CREATE_THIRDPARTY) }}
+        </label>
+      </a>
+    </li>
+  </ul>
 
-    <div class="my-4">
-        <on-the-fly-person
-            v-if="type === 'person'"
-            :action="action"
-            :query="query"
-            ref="castPerson"
-        />
+  <div class="my-4">
+    <on-the-fly-person
+      v-if="type === 'person'"
+      :action="action"
+      :query="query"
+      ref="castPerson"
+    />
 
-        <on-the-fly-thirdparty
-            v-if="type === 'thirdparty'"
-            :action="action"
-            :query="query"
-            ref="castThirdparty"
-        />
-    </div>
+    <on-the-fly-thirdparty
+      v-if="type === 'thirdparty'"
+      :action="action"
+      :query="query"
+      ref="castThirdparty"
+    />
+  </div>
 </template>
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import OnTheFlyPerson from "ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue";
 import OnTheFlyThirdparty from "ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue";
 import {
-    trans,
-    ONTHEFLY_CREATE_PERSON,
-    ONTHEFLY_CREATE_THIRDPARTY,
+  trans,
+  ONTHEFLY_CREATE_PERSON,
+  ONTHEFLY_CREATE_THIRDPARTY,
 } from "translator";
 
 const props = defineProps({
-    action: String,
-    allowedTypes: Array,
-    query: String,
+  action: String,
+  allowedTypes: Array,
+  query: String,
 });
 
 const type = ref(null);
 
 const radioType = computed({
-    get: () => type.value,
-    set: (val) => {
-        type.value = val;
-        console.log("## type:", val, ", action:", props.action);
-    },
+  get: () => type.value,
+  set: (val) => {
+    type.value = val;
+    console.log("## type:", val, ", action:", props.action);
+  },
 });
 
 const castPerson = ref(null);
 const castThirdparty = ref(null);
 
 onMounted(() => {
-    type.value =
-        props.allowedTypes.length === 1 &&
-        props.allowedTypes.includes("thirdparty")
-            ? "thirdparty"
-            : "person";
+  type.value =
+    props.allowedTypes.length === 1 && props.allowedTypes.includes("thirdparty")
+      ? "thirdparty"
+      : "person";
 });
 
 function isActive(tab) {
-    return type.value === tab;
+  return type.value === tab;
 }
 
 function castDataByType() {
-    switch (radioType.value) {
-        case "person":
-            return castPerson.value.$data.person;
-        case "thirdparty":
-            let data = castThirdparty.value.$data.thirdparty;
-            if (data.address !== undefined && data.address !== null) {
-                data.address = { id: data.address.address_id };
-            } else {
-                data.address = null;
-            }
-            return data;
-        default:
-            throw Error("Invalid type of entity");
-    }
+  switch (radioType.value) {
+    case "person":
+      return castPerson.value.$data.person;
+    case "thirdparty":
+      let data = castThirdparty.value.$data.thirdparty;
+      if (data.address !== undefined && data.address !== null) {
+        data.address = { id: data.address.address_id };
+      } else {
+        data.address = null;
+      }
+      return data;
+    default:
+      throw Error("Invalid type of entity");
+  }
 }
 
 defineExpose({
-    castDataByType,
+  castDataByType,
 });
 </script>
 
 <style lang="css" scoped>
 label {
-    cursor: pointer;
+  cursor: pointer;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue
index 191bafc76..fe5fcbe17 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue
@@ -1,27 +1,27 @@
 <template>
-    <div class="PickPostalCode">
-        <vue-multiselect
-            id="citySelector"
-            @search-change="listenInputSearch"
-            ref="citySelector"
-            v-model="internalPicked"
-            @select="selectCity"
-            @remove="remove"
-            name=""
-            track-by="id"
-            label="value"
-            :custom-label="transName"
-            :placeholder="$t('select_city')"
-            :select-label="$t('multiselect.select_label')"
-            :deselect-label="$t('multiselect.deselect_label')"
-            :selected-label="$t('multiselect.selected_label')"
-            :taggable="true"
-            :multiple="false"
-            :internal-search="false"
-            :loading="isLoading"
-            :options="cities"
-        />
-    </div>
+  <div class="PickPostalCode">
+    <vue-multiselect
+      id="citySelector"
+      @search-change="listenInputSearch"
+      ref="citySelector"
+      v-model="internalPicked"
+      @select="selectCity"
+      @remove="remove"
+      name=""
+      track-by="id"
+      label="value"
+      :custom-label="transName"
+      :placeholder="$t('select_city')"
+      :select-label="$t('multiselect.select_label')"
+      :deselect-label="$t('multiselect.deselect_label')"
+      :selected-label="$t('multiselect.selected_label')"
+      :taggable="true"
+      :multiple="false"
+      :internal-search="false"
+      :loading="isLoading"
+      :options="cities"
+    />
+  </div>
 </template>
 
 <script lang="js">
@@ -29,81 +29,77 @@ import VueMultiselect from "vue-multiselect";
 import { searchCities } from "./api";
 
 export default {
-    components: {
-        VueMultiselect,
+  components: {
+    VueMultiselect,
+  },
+  data() {
+    return {
+      cities: [],
+      internalPicked: null,
+      isLoading: false,
+      abortControllers: [],
+    };
+  },
+  emits: ["pickCity", "removeCity"],
+  props: {
+    picked: {
+      type: Object,
+      required: false,
+      default: null,
     },
-    data() {
-        return {
-            cities: [],
-            internalPicked: null,
-            isLoading: false,
-            abortControllers: [],
-        };
+    country: {
+      type: Object,
+      required: false,
+      default: null,
     },
-    emits: ["pickCity", "removeCity"],
-    props: {
-        picked: {
-            type: Object,
-            required: false,
-            default: null,
-        },
-        country: {
-            type: Object,
-            required: false,
-            default: null,
-        },
+  },
+  mounted() {
+    if (this.picked !== null) {
+      this.internalPicked = this.picked;
+      this.cities.push(this.picked);
+    }
+  },
+  methods: {
+    transName(value) {
+      return value.code && value.name ? `${value.name} (${value.code})` : "";
     },
-    mounted() {
-        if (this.picked !== null) {
-            this.internalPicked = this.picked;
-            this.cities.push(this.picked);
-        }
+    selectCity(city) {
+      this.$emit("selectCity", city);
     },
-    methods: {
-        transName(value) {
-            return value.code && value.name
-                ? `${value.name} (${value.code})`
-                : "";
-        },
-        selectCity(city) {
-            this.$emit("selectCity", city);
-        },
-        listenInputSearch(query) {
-            if (query.length <= 2) {
-                return;
-            }
+    listenInputSearch(query) {
+      if (query.length <= 2) {
+        return;
+      }
 
-            let c = this.abortControllers.pop();
+      let c = this.abortControllers.pop();
 
-            while (typeof c !== "undefined") {
-                c.abort();
-                c = this.abortControllers.pop();
-            }
+      while (typeof c !== "undefined") {
+        c.abort();
+        c = this.abortControllers.pop();
+      }
 
-            this.isLoading = true;
-            let controller = new AbortController();
-            this.abortControllers.push(controller);
+      this.isLoading = true;
+      let controller = new AbortController();
+      this.abortControllers.push(controller);
 
-            searchCities(query, this.country, controller)
-                .then((newCities) => {
-                    this.cities = this.cities.filter(
-                        (city) => city.id === this.picked,
-                    );
-                    newCities.forEach((item) => {
-                        this.cities.push(item);
-                    });
-                    this.isLoading = false;
+      searchCities(query, this.country, controller)
+        .then((newCities) => {
+          this.cities = this.cities.filter((city) => city.id === this.picked);
+          newCities.forEach((item) => {
+            this.cities.push(item);
+          });
+          this.isLoading = false;
 
-                    return Promise.resolve();
-                })
-                .catch((error) => {
-                    console.log(error); //TODO better error handling
-                    this.isLoading = false;
-                });
-        },
-        remove(item) {
-            this.$emit("removeCity", item);
-        },
+          return Promise.resolve();
+        })
+        .catch((error) => {
+          console.log(error); //TODO better error handling
+          this.isLoading = false;
+        });
     },
+    remove(item) {
+      this.$emit("removeCity", item);
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/App.vue
index 6f021ac80..bef3028dc 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/App.vue
@@ -2,17 +2,15 @@
 import GenerateButton from "ChillMainAssets/vuejs/SavedExportButtons/Component/GenerateButton.vue";
 
 interface SavedExportButtonsConfig {
-    savedExportUuid: string;
-    savedExportAlias: string;
+  savedExportUuid: string;
+  savedExportAlias: string;
 }
 
 const props = defineProps<SavedExportButtonsConfig>();
 </script>
 
 <template>
-    <generate-button
-        :saved-export-uuid="props.savedExportUuid"
-    ></generate-button>
+  <generate-button :saved-export-uuid="props.savedExportUuid"></generate-button>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/Component/GenerateButton.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/Component/GenerateButton.vue
index f4dafd006..99fa852c9 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/Component/GenerateButton.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/Component/GenerateButton.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import {
-    trans,
-    SAVED_EXPORT_EXECUTE,
-    EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING_SHORT,
-    EXPORT_GENERATION_TOO_MANY_RETRIES,
-    EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
-    EXPORT_GENERATION_EXPORT_READY,
+  trans,
+  SAVED_EXPORT_EXECUTE,
+  EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING_SHORT,
+  EXPORT_GENERATION_TOO_MANY_RETRIES,
+  EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
+  EXPORT_GENERATION_EXPORT_READY,
 } from "translator";
 import {
-    fetchExportGenerationStatus,
-    generateFromSavedExport,
+  fetchExportGenerationStatus,
+  generateFromSavedExport,
 } from "ChillMainAssets/lib/api/export";
 import { computed, ref } from "vue";
 import { ExportGeneration } from "ChillMainAssets/types";
@@ -19,50 +19,50 @@ import { useToast } from "vue-toast-notification";
 import "vue-toast-notification/dist/theme-sugar.css";
 
 interface SavedExportButtonGenerateConfig {
-    savedExportUuid: string;
+  savedExportUuid: string;
 }
 
 const props = defineProps<SavedExportButtonGenerateConfig>();
 const emits = defineEmits<{
-    (e: "generate");
+  (e: "generate");
 }>();
 
 const toast = useToast();
 const exportGeneration = ref<ExportGeneration | null>(null);
 
 const status = computed<StoredObjectStatus | "inactive">(
-    () => exportGeneration.value?.status ?? "inactive",
+  () => exportGeneration.value?.status ?? "inactive",
 );
 const storedObject = computed<null | StoredObject>(() => {
-    if (exportGeneration.value === null) {
-        return null;
-    }
+  if (exportGeneration.value === null) {
+    return null;
+  }
 
-    return exportGeneration.value?.storedObject;
+  return exportGeneration.value?.storedObject;
 });
 
 const isInactive = computed<boolean>(() => status.value === "inactive");
 const isPending = computed<boolean>(() => status.value === "pending");
 const isFetching = computed<boolean>(
-    () => tryiesForReady.value < maxTryiesForReady,
+  () => tryiesForReady.value < maxTryiesForReady,
 );
 const isReady = computed<boolean>(() => status.value === "ready");
 const isFailure = computed<boolean>(() => status.value === "failure");
 const filename = computed<string>(() => {
-    if (null === exportGeneration.value) {
-        return "";
-    }
+  if (null === exportGeneration.value) {
+    return "";
+  }
 
-    return `${exportGeneration.value?.storedObject.title}-${exportGeneration.value?.createdAt?.datetime8601}`;
+  return `${exportGeneration.value?.storedObject.title}-${exportGeneration.value?.createdAt?.datetime8601}`;
 });
 const externalDownloadLink = computed<string>(
-    () => `/fr/main/export-generation/${exportGeneration.value?.id}/wait`,
+  () => `/fr/main/export-generation/${exportGeneration.value?.id}/wait`,
 );
 const classes = computed<Record<string, boolean>>(() => {
-    return {};
+  return {};
 });
 const buttonClasses = computed<Record<string, boolean>>(() => {
-    return { btn: true, "btn-outline-primary": true };
+  return { btn: true, "btn-outline-primary": true };
 });
 
 /**
@@ -76,111 +76,109 @@ let tryiesForReady = ref<number>(0);
 const maxTryiesForReady = 120;
 
 const checkForReady = function (): void {
-    if (
-        "ready" === status.value ||
-        "empty" === status.value ||
-        "failure" === status.value ||
-        // stop reloading if the page stays opened for a long time
-        tryiesForReady.value > maxTryiesForReady
-    ) {
-        return;
-    }
+  if (
+    "ready" === status.value ||
+    "empty" === status.value ||
+    "failure" === status.value ||
+    // stop reloading if the page stays opened for a long time
+    tryiesForReady.value > maxTryiesForReady
+  ) {
+    return;
+  }
 
-    tryiesForReady.value = tryiesForReady.value + 1;
-    setTimeout(
-        onObjectNewStatusCallback,
-        tryiesForReady.value < 10 ? 1500 : 5000,
-    );
+  tryiesForReady.value = tryiesForReady.value + 1;
+  setTimeout(
+    onObjectNewStatusCallback,
+    tryiesForReady.value < 10 ? 1500 : 5000,
+  );
 };
 
 const onExportGenerationSuccess = function (): void {
-    toast.success(trans(EXPORT_GENERATION_EXPORT_READY));
+  toast.success(trans(EXPORT_GENERATION_EXPORT_READY));
 };
 
 const onObjectNewStatusCallback = async function (): Promise<void> {
-    if (null === exportGeneration.value) {
-        checkForReady();
-        return Promise.resolve();
-    }
-
-    const newExportGeneration = await fetchExportGenerationStatus(
-        exportGeneration.value?.id,
-    );
-
-    if (newExportGeneration.status !== exportGeneration.value.status) {
-        if (newExportGeneration.status === "ready") {
-            onExportGenerationSuccess();
-        }
-    }
-
-    exportGeneration.value = newExportGeneration;
-
-    if (isPending.value) {
-        checkForReady();
-        return Promise.resolve();
-    }
-
+  if (null === exportGeneration.value) {
+    checkForReady();
     return Promise.resolve();
+  }
+
+  const newExportGeneration = await fetchExportGenerationStatus(
+    exportGeneration.value?.id,
+  );
+
+  if (newExportGeneration.status !== exportGeneration.value.status) {
+    if (newExportGeneration.status === "ready") {
+      onExportGenerationSuccess();
+    }
+  }
+
+  exportGeneration.value = newExportGeneration;
+
+  if (isPending.value) {
+    checkForReady();
+    return Promise.resolve();
+  }
+
+  return Promise.resolve();
 };
 
 const onClickGenerate = async (): Promise<void> => {
-    emits("generate");
-    exportGeneration.value = await generateFromSavedExport(
-        props.savedExportUuid,
-    );
+  emits("generate");
+  exportGeneration.value = await generateFromSavedExport(props.savedExportUuid);
 
-    onObjectNewStatusCallback();
+  onObjectNewStatusCallback();
 
-    return Promise.resolve();
+  return Promise.resolve();
 };
 </script>
 
 <template>
-    <button
-        v-if="isInactive"
-        :class="buttonClasses"
-        type="button"
-        @click="onClickGenerate"
-    >
-        <i class="fa fa-cog"></i> {{ trans(SAVED_EXPORT_EXECUTE) }}
-    </button>
-    <template v-if="isPending && isFetching">
-        <span class="btn">
-            <i class="fa fa-cog fa-spin fa-fw"></i>
-            <span class="pending-message">{{
-                trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING_SHORT)
-            }}</span>
-            <a :href="externalDownloadLink" class="externalDownloadLink">
-                <i class="bi bi-box-arrow-up-right"></i>
-            </a>
-        </span>
-    </template>
-    <div v-if="isPending && !isFetching" :class="buttonClasses">
-        <span>{{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}</span>
-    </div>
-    <download-button
-        v-else-if="isReady && storedObject?.currentVersion !== null"
-        :classes="buttonClasses"
-        :stored-object="storedObject"
-        :at-version="storedObject?.currentVersion"
-        :filename="filename"
-    ></download-button>
-    <div v-else-if="isFailure" :class="classes">
-        <span class="btn">
-            <i class="bi bi-exclamation-triangle"></i>
-            <span class="pending-message">{{
-                trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT)
-            }}</span>
-        </span>
-    </div>
+  <button
+    v-if="isInactive"
+    :class="buttonClasses"
+    type="button"
+    @click="onClickGenerate"
+  >
+    <i class="fa fa-cog"></i> {{ trans(SAVED_EXPORT_EXECUTE) }}
+  </button>
+  <template v-if="isPending && isFetching">
+    <span class="btn">
+      <i class="fa fa-cog fa-spin fa-fw"></i>
+      <span class="pending-message">{{
+        trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING_SHORT)
+      }}</span>
+      <a :href="externalDownloadLink" class="externalDownloadLink">
+        <i class="bi bi-box-arrow-up-right"></i>
+      </a>
+    </span>
+  </template>
+  <div v-if="isPending && !isFetching" :class="buttonClasses">
+    <span>{{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}</span>
+  </div>
+  <download-button
+    v-else-if="isReady && storedObject?.currentVersion !== null"
+    :classes="buttonClasses"
+    :stored-object="storedObject"
+    :at-version="storedObject?.currentVersion"
+    :filename="filename"
+  ></download-button>
+  <div v-else-if="isFailure" :class="classes">
+    <span class="btn">
+      <i class="bi bi-exclamation-triangle"></i>
+      <span class="pending-message">{{
+        trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT)
+      }}</span>
+    </span>
+  </div>
 </template>
 
 <style scoped lang="scss">
 .pending-message {
-    font-style: italic;
+  font-style: italic;
 }
 
 .externalDownloadLink {
-    margin-left: 1rem;
+  margin-left: 1rem;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/index.ts b/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/index.ts
index 518746dea..a7d0105e8 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/index.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/index.ts
@@ -3,11 +3,11 @@ import { createApp } from "vue";
 import App from "./App.vue";
 
 const buttons = document.querySelectorAll<HTMLDivElement>(
-    "[data-generate-export-button]",
+  "[data-generate-export-button]",
 );
 
 buttons.forEach((button) => {
-    const savedExportUuid = button.dataset.savedExportUuid as string;
+  const savedExportUuid = button.dataset.savedExportUuid as string;
 
-    createApp(App, { savedExportUuid, savedExportAlias: "" }).mount(button);
+  createApp(App, { savedExportUuid, savedExportAlias: "" }).mount(button);
 });
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/App.vue
index 9164e134b..ac061782a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/App.vue
@@ -7,17 +7,17 @@ import AttachmentList from "ChillMainAssets/vuejs/WorkflowAttachment/Component/A
 import { GenericDoc } from "ChillDocStoreAssets/types";
 
 interface AppConfig {
-    workflowId: number;
-    accompanyingPeriodId: number;
-    attachments: WorkflowAttachment[];
+  workflowId: number;
+  accompanyingPeriodId: number;
+  attachments: WorkflowAttachment[];
 }
 
 const emit = defineEmits<{
-    (
-        e: "pickGenericDoc",
-        payload: { genericDoc: GenericDocForAccompanyingPeriod },
-    ): void;
-    (e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
+  (
+    e: "pickGenericDoc",
+    payload: { genericDoc: GenericDocForAccompanyingPeriod },
+  ): void;
+  (e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
 }>();
 
 type PickGenericModalType = InstanceType<typeof PickGenericDocModal>;
@@ -26,49 +26,49 @@ const pickDocModal = useTemplateRef<PickGenericModalType>("pickDocModal");
 const props = defineProps<AppConfig>();
 
 const attachedGenericDoc = computed<GenericDocForAccompanyingPeriod[]>(
-    () =>
-        props.attachments
-            .map((a: WorkflowAttachment) => a.genericDoc)
-            .filter(
-                (g: GenericDoc | null) => g !== null,
-            ) as GenericDocForAccompanyingPeriod[],
+  () =>
+    props.attachments
+      .map((a: WorkflowAttachment) => a.genericDoc)
+      .filter(
+        (g: GenericDoc | null) => g !== null,
+      ) as GenericDocForAccompanyingPeriod[],
 );
 
 const openModal = function () {
-    pickDocModal.value?.openModal();
+  pickDocModal.value?.openModal();
 };
 
 const onPickGenericDoc = ({
-    genericDoc,
+  genericDoc,
 }: {
-    genericDoc: GenericDocForAccompanyingPeriod;
+  genericDoc: GenericDocForAccompanyingPeriod;
 }) => {
-    emit("pickGenericDoc", { genericDoc });
+  emit("pickGenericDoc", { genericDoc });
 };
 
 const onRemoveAttachment = (payload: { attachment: WorkflowAttachment }) => {
-    emit("removeAttachment", payload);
+  emit("removeAttachment", payload);
 };
 </script>
 
 <template>
-    <pick-generic-doc-modal
-        :accompanying-period-id="props.accompanyingPeriodId"
-        :to-remove="attachedGenericDoc"
-        ref="pickDocModal"
-        @pickGenericDoc="onPickGenericDoc"
-    ></pick-generic-doc-modal>
-    <attachment-list
-        :attachments="props.attachments"
-        @removeAttachment="onRemoveAttachment"
-    ></attachment-list>
-    <ul class="record_actions">
-        <li>
-            <button type="button" class="btn btn-create" @click="openModal">
-                Ajouter une pièce jointe
-            </button>
-        </li>
-    </ul>
+  <pick-generic-doc-modal
+    :accompanying-period-id="props.accompanyingPeriodId"
+    :to-remove="attachedGenericDoc"
+    ref="pickDocModal"
+    @pickGenericDoc="onPickGenericDoc"
+  ></pick-generic-doc-modal>
+  <attachment-list
+    :attachments="props.attachments"
+    @removeAttachment="onRemoveAttachment"
+  ></attachment-list>
+  <ul class="record_actions">
+    <li>
+      <button type="button" class="btn btn-create" @click="openModal">
+        Ajouter une pièce jointe
+      </button>
+    </li>
+  </ul>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/AttachmentList.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/AttachmentList.vue
index 06e6ca6f4..59705642a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/AttachmentList.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/AttachmentList.vue
@@ -4,49 +4,49 @@ import GenericDocItemBox from "ChillMainAssets/vuejs/WorkflowAttachment/Componen
 import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
 
 interface AttachmentListProps {
-    attachments: WorkflowAttachment[];
+  attachments: WorkflowAttachment[];
 }
 
 const emit = defineEmits<{
-    // eslint-disable-next-line @typescript-eslint/prefer-function-type
-    (e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
+  // eslint-disable-next-line @typescript-eslint/prefer-function-type
+  (e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
 }>();
 
 const props = defineProps<AttachmentListProps>();
 </script>
 
 <template>
-    <p
-        v-if="props.attachments.length === 0"
-        class="chill-no-data-statement text-center"
-    >
-        Aucune pièce jointe
-    </p>
-    <!-- TODO translate -->
-    <div else class="flex-table">
-        <div v-for="a in props.attachments" :key="a.id" class="item-bloc">
-            <generic-doc-item-box
-                v-if="a.genericDoc !== null"
-                :generic-doc="a.genericDoc"
-            ></generic-doc-item-box>
-            <div class="item-row separator">
-                <ul class="record_actions">
-                    <li v-if="a.genericDoc?.storedObject !== null">
-                        <document-action-buttons-group
-                            :stored-object="a.genericDoc.storedObject"
-                        ></document-action-buttons-group>
-                    </li>
-                    <li>
-                        <button
-                            type="button"
-                            class="btn btn-delete"
-                            @click="emit('removeAttachment', { attachment: a })"
-                        ></button>
-                    </li>
-                </ul>
-            </div>
-        </div>
+  <p
+    v-if="props.attachments.length === 0"
+    class="chill-no-data-statement text-center"
+  >
+    Aucune pièce jointe
+  </p>
+  <!-- TODO translate -->
+  <div else class="flex-table">
+    <div v-for="a in props.attachments" :key="a.id" class="item-bloc">
+      <generic-doc-item-box
+        v-if="a.genericDoc !== null"
+        :generic-doc="a.genericDoc"
+      ></generic-doc-item-box>
+      <div class="item-row separator">
+        <ul class="record_actions">
+          <li v-if="a.genericDoc?.storedObject !== null">
+            <document-action-buttons-group
+              :stored-object="a.genericDoc.storedObject"
+            ></document-action-buttons-group>
+          </li>
+          <li>
+            <button
+              type="button"
+              class="btn btn-delete"
+              @click="emit('removeAttachment', { attachment: a })"
+            ></button>
+          </li>
+        </ul>
+      </div>
     </div>
+  </div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/GenericDocItemBox.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/GenericDocItemBox.vue
index 8b96b4eea..32b76bdcd 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/GenericDocItemBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/GenericDocItemBox.vue
@@ -2,17 +2,17 @@
 import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
 
 interface GenericDocItemBoxProps {
-    genericDoc: GenericDocForAccompanyingPeriod;
+  genericDoc: GenericDocForAccompanyingPeriod;
 }
 
 const props = defineProps<GenericDocItemBoxProps>();
 </script>
 
 <template>
-    <div
-        v-if="'html' in props.genericDoc.metadata"
-        v-html="props.genericDoc.metadata.html"
-    ></div>
+  <div
+    v-if="'html' in props.genericDoc.metadata"
+    v-html="props.genericDoc.metadata.html"
+  ></div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDoc.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDoc.vue
index 01e9c3a0e..f2a587cd1 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDoc.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDoc.vue
@@ -1,45 +1,45 @@
 <script setup lang="ts">
 import {
-    GenericDoc,
-    GenericDocForAccompanyingPeriod,
+  GenericDoc,
+  GenericDocForAccompanyingPeriod,
 } from "ChillDocStoreAssets/types/generic_doc";
 import PickGenericDocItem from "ChillMainAssets/vuejs/WorkflowAttachment/Component/PickGenericDocItem.vue";
 import { fetch_generic_docs_by_accompanying_period } from "ChillDocStoreAssets/js/generic-doc-api";
 import { computed, onMounted, ref } from "vue";
 
 interface PickGenericDocProps {
-    accompanyingPeriodId: number;
-    pickedList: GenericDocForAccompanyingPeriod[];
-    toRemove: GenericDocForAccompanyingPeriod[];
+  accompanyingPeriodId: number;
+  pickedList: GenericDocForAccompanyingPeriod[];
+  toRemove: GenericDocForAccompanyingPeriod[];
 }
 
 const props = defineProps<PickGenericDocProps>();
 const emit = defineEmits<{
-    (
-        e: "pickGenericDoc",
-        payload: { genericDoc: GenericDocForAccompanyingPeriod },
-    ): void;
+  (
+    e: "pickGenericDoc",
+    payload: { genericDoc: GenericDocForAccompanyingPeriod },
+  ): void;
 
-    (
-        e: "removeGenericDoc",
-        payload: { genericDoc: GenericDocForAccompanyingPeriod },
-    ): void;
+  (
+    e: "removeGenericDoc",
+    payload: { genericDoc: GenericDocForAccompanyingPeriod },
+  ): void;
 }>();
 
 const genericDocs = ref<GenericDocForAccompanyingPeriod[]>([]);
 const loaded = ref(false);
 
 const isPicked = (genericDoc: GenericDocForAccompanyingPeriod): boolean =>
-    props.pickedList.findIndex(
-        (element: GenericDocForAccompanyingPeriod) =>
-            element.uniqueKey === genericDoc.uniqueKey,
-    ) !== -1;
+  props.pickedList.findIndex(
+    (element: GenericDocForAccompanyingPeriod) =>
+      element.uniqueKey === genericDoc.uniqueKey,
+  ) !== -1;
 
 onMounted(async () => {
-    genericDocs.value = await fetch_generic_docs_by_accompanying_period(
-        props.accompanyingPeriodId,
-    );
-    loaded.value = true;
+  genericDocs.value = await fetch_generic_docs_by_accompanying_period(
+    props.accompanyingPeriodId,
+  );
+  loaded.value = true;
 });
 
 const textFilter = ref<string>("");
@@ -48,229 +48,213 @@ const dateToFilter = ref<string | null>(null);
 const placesFilter = ref<string[]>([]);
 
 const availablePlaces = computed<string[]>(() => {
-    const places = new Set<string>(
-        genericDocs.value.map((genericDoc: GenericDoc) => genericDoc.key),
-    );
+  const places = new Set<string>(
+    genericDocs.value.map((genericDoc: GenericDoc) => genericDoc.key),
+  );
 
-    return Array.from(places).sort((a, b) => (a < b ? -1 : a === b ? 0 : 1));
+  return Array.from(places).sort((a, b) => (a < b ? -1 : a === b ? 0 : 1));
 });
 
 const placeTrans = (str: string): string => {
-    switch (str) {
-        case "accompanying_course_document":
-            return "Documents du parcours";
-        case "person_document":
-            return "Documents de l'usager";
-        case "accompanying_period_calendar_document":
-            return "Document des rendez-vous des parcours";
-        case "accompanying_period_activity_document":
-            return "Document des échanges des parcours";
-        case "accompanying_period_work_evaluation_document":
-            return "Document des actions d'accompagnement";
-        default:
-            return str;
-    }
+  switch (str) {
+    case "accompanying_course_document":
+      return "Documents du parcours";
+    case "person_document":
+      return "Documents de l'usager";
+    case "accompanying_period_calendar_document":
+      return "Document des rendez-vous des parcours";
+    case "accompanying_period_activity_document":
+      return "Document des échanges des parcours";
+    case "accompanying_period_work_evaluation_document":
+      return "Document des actions d'accompagnement";
+    default:
+      return str;
+  }
 };
 
 const onPickDocument = (payload: {
-    genericDoc: GenericDocForAccompanyingPeriod;
+  genericDoc: GenericDocForAccompanyingPeriod;
 }) => emit("pickGenericDoc", payload);
 
 const onRemoveGenericDoc = (payload: {
-    genericDoc: GenericDocForAccompanyingPeriod;
+  genericDoc: GenericDocForAccompanyingPeriod;
 }) => emit("removeGenericDoc", payload);
 
 const filteredDocuments = computed<GenericDocForAccompanyingPeriod[]>(() => {
-    if (false === loaded.value) {
-        return [];
-    }
+  if (false === loaded.value) {
+    return [];
+  }
 
-    return genericDocs.value
-        .filter(
-            (genericDoc: GenericDocForAccompanyingPeriod) =>
-                !props.toRemove
-                    .map((g: GenericDocForAccompanyingPeriod) => g.uniqueKey)
-                    .includes(genericDoc.uniqueKey),
-        )
-        .filter((genericDoc: GenericDocForAccompanyingPeriod) => {
-            if (textFilter.value === "") {
-                return true;
-            }
+  return genericDocs.value
+    .filter(
+      (genericDoc: GenericDocForAccompanyingPeriod) =>
+        !props.toRemove
+          .map((g: GenericDocForAccompanyingPeriod) => g.uniqueKey)
+          .includes(genericDoc.uniqueKey),
+    )
+    .filter((genericDoc: GenericDocForAccompanyingPeriod) => {
+      if (textFilter.value === "") {
+        return true;
+      }
 
-            const needles = textFilter.value
-                .trim()
-                .split(" ")
-                .map((str: string) => str.trim().toLowerCase())
-                .filter((str: string) => str.length > 0);
-            const title: string =
-                "title" in genericDoc.metadata
-                    ? (genericDoc.metadata.title as string)
-                    : "";
-            if (title === "") {
-                return false;
-            }
+      const needles = textFilter.value
+        .trim()
+        .split(" ")
+        .map((str: string) => str.trim().toLowerCase())
+        .filter((str: string) => str.length > 0);
+      const title: string =
+        "title" in genericDoc.metadata
+          ? (genericDoc.metadata.title as string)
+          : "";
+      if (title === "") {
+        return false;
+      }
 
-            return needles.every((n: string) =>
-                title.toLowerCase().includes(n),
-            );
-        })
-        .filter((genericDoc: GenericDocForAccompanyingPeriod) => {
-            if (placesFilter.value.length === 0) {
-                return true;
-            }
+      return needles.every((n: string) => title.toLowerCase().includes(n));
+    })
+    .filter((genericDoc: GenericDocForAccompanyingPeriod) => {
+      if (placesFilter.value.length === 0) {
+        return true;
+      }
 
-            return placesFilter.value.includes(genericDoc.key);
-        })
-        .filter((genericDoc: GenericDocForAccompanyingPeriod) => {
-            if (dateToFilter.value === null) {
-                return true;
-            }
+      return placesFilter.value.includes(genericDoc.key);
+    })
+    .filter((genericDoc: GenericDocForAccompanyingPeriod) => {
+      if (dateToFilter.value === null) {
+        return true;
+      }
 
-            return genericDoc.doc_date.datetime8601 < dateToFilter.value;
-        })
-        .filter((genericDoc: GenericDocForAccompanyingPeriod) => {
-            if (dateFromFilter.value === null) {
-                return true;
-            }
+      return genericDoc.doc_date.datetime8601 < dateToFilter.value;
+    })
+    .filter((genericDoc: GenericDocForAccompanyingPeriod) => {
+      if (dateFromFilter.value === null) {
+        return true;
+      }
 
-            return genericDoc.doc_date.datetime8601 > dateFromFilter.value;
-        });
+      return genericDoc.doc_date.datetime8601 > dateFromFilter.value;
+    });
 });
 </script>
 
 <template>
-    <div v-if="loaded">
-        <div>
-            <form name="f" method="get">
-                <div class="accordion my-3" id="filterOrderAccordion">
-                    <h2 class="accordion-header" id="filterOrderHeading">
-                        <button
-                            class="accordion-button"
-                            type="button"
-                            data-bs-toggle="collapse"
-                            data-bs-target="#filterOrderCollapse"
-                            aria-expanded="true"
-                            aria-controls="filterOrderCollapse"
-                        >
-                            <strong
-                                ><i class="fa fa-fw fa-filter"></i>Filtrer la
-                                liste</strong
-                            >
-                        </button>
-                    </h2>
-                    <div
-                        class="accordion-collapse collapse"
-                        id="filterOrderCollapse"
-                        aria-labelledby="filterOrderHeading"
-                        data-bs-parent="#filterOrderAccordion"
-                        style=""
-                    >
-                        <div
-                            class="accordion-body chill_filter_order container-xxl p-5 py-2"
-                        >
-                            <div class="row my-2">
-                                <div class="col-sm-12">
-                                    <div class="input-group">
-                                        <input
-                                            v-model="textFilter"
-                                            type="search"
-                                            id="f_q"
-                                            name="f[q]"
-                                            placeholder="Chercher dans la liste"
-                                            class="form-control"
-                                        />
-                                        <button
-                                            type="submit"
-                                            class="btn btn-misc"
-                                        >
-                                            <i class="fa fa-search"></i>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="row my-2">
-                                <legend
-                                    class="col-form-label col-sm-4 required"
-                                >
-                                    Date du document
-                                </legend>
-                                <div class="col-sm-8 pt-1">
-                                    <div class="input-group">
-                                        <span class="input-group-text">Du</span>
-                                        <input
-                                            v-model="dateFromFilter"
-                                            type="date"
-                                            id="f_dateRanges_dateRange_from"
-                                            name="f[dateRanges][dateRange][from]"
-                                            class="form-control"
-                                        />
-                                        <span class="input-group-text">Au</span>
-                                        <input
-                                            v-model="dateToFilter"
-                                            type="date"
-                                            id="f_dateRanges_dateRange_to"
-                                            name="f[dateRanges][dateRange][to]"
-                                            class="form-control"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="row my-2">
-                                <div class="col-sm-4 col-form-label">
-                                    Filtrer par
-                                </div>
-                                <div class="col-sm-8 pt-2">
-                                    <div
-                                        class="form-check"
-                                        v-for="p in availablePlaces"
-                                        :key="p"
-                                    >
-                                        <input
-                                            type="checkbox"
-                                            v-model="placesFilter"
-                                            name="f[checkboxes][places][]"
-                                            class="form-check-input"
-                                            :value="p"
-                                        />
-                                        <label class="form-check-label">{{
-                                            placeTrans(p)
-                                        }}</label>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </div>
-
-        <div v-if="genericDocs.length > 0" class="flex-table chill-task-list">
-            <pick-generic-doc-item
-                v-for="g in filteredDocuments"
-                :key="g.uniqueKey"
-                :accompanying-period-id="accompanyingPeriodId"
-                :genericDoc="g"
-                :is-picked="isPicked(g)"
-                @pickGenericDoc="onPickDocument"
-                @removeGenericDoc="onRemoveGenericDoc"
-            ></pick-generic-doc-item>
-        </div>
-        <div v-else class="text-center chill-no-data-statement">
-            Aucun document dans ce parcours
-        </div>
-    </div>
-    <div v-else>
-        <div class="d-flex align-items-center">
-            <strong>Chargement…</strong>
+  <div v-if="loaded">
+    <div>
+      <form name="f" method="get">
+        <div class="accordion my-3" id="filterOrderAccordion">
+          <h2 class="accordion-header" id="filterOrderHeading">
+            <button
+              class="accordion-button"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#filterOrderCollapse"
+              aria-expanded="true"
+              aria-controls="filterOrderCollapse"
+            >
+              <strong
+                ><i class="fa fa-fw fa-filter"></i>Filtrer la liste</strong
+              >
+            </button>
+          </h2>
+          <div
+            class="accordion-collapse collapse"
+            id="filterOrderCollapse"
+            aria-labelledby="filterOrderHeading"
+            data-bs-parent="#filterOrderAccordion"
+            style=""
+          >
             <div
-                class="spinner-border ms-auto"
-                role="status"
-                aria-hidden="true"
-            ></div>
+              class="accordion-body chill_filter_order container-xxl p-5 py-2"
+            >
+              <div class="row my-2">
+                <div class="col-sm-12">
+                  <div class="input-group">
+                    <input
+                      v-model="textFilter"
+                      type="search"
+                      id="f_q"
+                      name="f[q]"
+                      placeholder="Chercher dans la liste"
+                      class="form-control"
+                    />
+                    <button type="submit" class="btn btn-misc">
+                      <i class="fa fa-search"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="row my-2">
+                <legend class="col-form-label col-sm-4 required">
+                  Date du document
+                </legend>
+                <div class="col-sm-8 pt-1">
+                  <div class="input-group">
+                    <span class="input-group-text">Du</span>
+                    <input
+                      v-model="dateFromFilter"
+                      type="date"
+                      id="f_dateRanges_dateRange_from"
+                      name="f[dateRanges][dateRange][from]"
+                      class="form-control"
+                    />
+                    <span class="input-group-text">Au</span>
+                    <input
+                      v-model="dateToFilter"
+                      type="date"
+                      id="f_dateRanges_dateRange_to"
+                      name="f[dateRanges][dateRange][to]"
+                      class="form-control"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div class="row my-2">
+                <div class="col-sm-4 col-form-label">Filtrer par</div>
+                <div class="col-sm-8 pt-2">
+                  <div class="form-check" v-for="p in availablePlaces" :key="p">
+                    <input
+                      type="checkbox"
+                      v-model="placesFilter"
+                      name="f[checkboxes][places][]"
+                      class="form-check-input"
+                      :value="p"
+                    />
+                    <label class="form-check-label">{{ placeTrans(p) }}</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+      </form>
     </div>
+
+    <div v-if="genericDocs.length > 0" class="flex-table chill-task-list">
+      <pick-generic-doc-item
+        v-for="g in filteredDocuments"
+        :key="g.uniqueKey"
+        :accompanying-period-id="accompanyingPeriodId"
+        :genericDoc="g"
+        :is-picked="isPicked(g)"
+        @pickGenericDoc="onPickDocument"
+        @removeGenericDoc="onRemoveGenericDoc"
+      ></pick-generic-doc-item>
+    </div>
+    <div v-else class="text-center chill-no-data-statement">
+      Aucun document dans ce parcours
+    </div>
+  </div>
+  <div v-else>
+    <div class="d-flex align-items-center">
+      <strong>Chargement…</strong>
+      <div
+        class="spinner-border ms-auto"
+        role="status"
+        aria-hidden="true"
+      ></div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDocItem.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDocItem.vue
index 2e1cf6d04..51c7dbc4b 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDocItem.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDocItem.vue
@@ -4,93 +4,85 @@ import GenericDocItemBox from "ChillMainAssets/vuejs/WorkflowAttachment/Componen
 import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
 
 interface PickGenericDocItemProps {
-    genericDoc: GenericDocForAccompanyingPeriod;
-    accompanyingPeriodId: number;
-    isPicked: boolean;
+  genericDoc: GenericDocForAccompanyingPeriod;
+  accompanyingPeriodId: number;
+  isPicked: boolean;
 }
 
 const props = defineProps<PickGenericDocItemProps>();
 const emit = defineEmits<{
-    (
-        e: "pickGenericDoc",
-        payload: { genericDoc: GenericDocForAccompanyingPeriod },
-    ): void;
+  (
+    e: "pickGenericDoc",
+    payload: { genericDoc: GenericDocForAccompanyingPeriod },
+  ): void;
 
-    (
-        e: "removeGenericDoc",
-        payload: { genericDoc: GenericDocForAccompanyingPeriod },
-    ): void;
+  (
+    e: "removeGenericDoc",
+    payload: { genericDoc: GenericDocForAccompanyingPeriod },
+  ): void;
 }>();
 
 const clickOnAddButton = () => {
-    emit("pickGenericDoc", { genericDoc: props.genericDoc });
+  emit("pickGenericDoc", { genericDoc: props.genericDoc });
 };
 </script>
 
 <template>
-    <div class="item-bloc" :class="{ isPicked: isPicked }">
-        <generic-doc-item-box
-            :generic-doc="props.genericDoc"
-        ></generic-doc-item-box>
+  <div class="item-bloc" :class="{ isPicked: isPicked }">
+    <generic-doc-item-box
+      :generic-doc="props.genericDoc"
+    ></generic-doc-item-box>
 
-        <div class="item-row separator">
-            <ul class="record_actions">
-                <li v-if="props.genericDoc.storedObject !== null">
-                    <document-action-buttons-group
-                        :stored-object="props.genericDoc.storedObject"
-                    ></document-action-buttons-group>
-                </li>
-                <li>
-                    <button
-                        v-if="!isPicked"
-                        type="button"
-                        class="btn btn-chill-green text-white"
-                        @click="clickOnAddButton"
-                    >
-                        <i class="bi bi-cart-plus"></i>
-                    </button>
-                    <button
-                        v-else
-                        type="button"
-                        class="btn btn-chill-red text-white"
-                        @click="
-                            emit('removeGenericDoc', {
-                                genericDoc: props.genericDoc,
-                            })
-                        "
-                    >
-                        <i class="bi bi-cart-dash"></i>
-                    </button>
-                </li>
-            </ul>
-        </div>
+    <div class="item-row separator">
+      <ul class="record_actions">
+        <li v-if="props.genericDoc.storedObject !== null">
+          <document-action-buttons-group
+            :stored-object="props.genericDoc.storedObject"
+          ></document-action-buttons-group>
+        </li>
+        <li>
+          <button
+            v-if="!isPicked"
+            type="button"
+            class="btn btn-chill-green text-white"
+            @click="clickOnAddButton"
+          >
+            <i class="bi bi-cart-plus"></i>
+          </button>
+          <button
+            v-else
+            type="button"
+            class="btn btn-chill-red text-white"
+            @click="
+              emit('removeGenericDoc', {
+                genericDoc: props.genericDoc,
+              })
+            "
+          >
+            <i class="bi bi-cart-dash"></i>
+          </button>
+        </li>
+      </ul>
     </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 .item-bloc {
-    &.isPicked {
-        background:
-            linear-gradient(
-                180deg,
-                rgba(25, 135, 84, 1) 0px,
-                rgba(25, 135, 84, 0) 9px
-            ),
-            linear-gradient(
-                270deg,
-                rgba(25, 135, 84, 1) 0px,
-                rgba(25, 135, 84, 0) 9px
-            ),
-            linear-gradient(
-                0deg,
-                rgba(25, 135, 84, 1) 0px,
-                rgba(25, 135, 84, 0) 9px
-            ),
-            linear-gradient(
-                90deg,
-                rgba(25, 135, 84, 1) 0px,
-                rgba(25, 135, 84, 0) 9px
-            );
-    }
+  &.isPicked {
+    background:
+      linear-gradient(
+        180deg,
+        rgba(25, 135, 84, 1) 0px,
+        rgba(25, 135, 84, 0) 9px
+      ),
+      linear-gradient(
+        270deg,
+        rgba(25, 135, 84, 1) 0px,
+        rgba(25, 135, 84, 0) 9px
+      ),
+      linear-gradient(0deg, rgba(25, 135, 84, 1) 0px, rgba(25, 135, 84, 0) 9px),
+      linear-gradient(90deg, rgba(25, 135, 84, 1) 0px, rgba(25, 135, 84, 0) 9px);
+  }
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDocModal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDocModal.vue
index cd3e9253d..cb3c8df00 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDocModal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDocModal.vue
@@ -5,19 +5,19 @@ import PickGenericDoc from "ChillMainAssets/vuejs/WorkflowAttachment/Component/P
 import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
 
 interface PickGenericDocModalProps {
-    accompanyingPeriodId: number;
-    toRemove: GenericDocForAccompanyingPeriod[];
+  accompanyingPeriodId: number;
+  toRemove: GenericDocForAccompanyingPeriod[];
 }
 
 type PickGenericDocType = InstanceType<typeof PickGenericDoc>;
 
 const props = defineProps<PickGenericDocModalProps>();
 const emit = defineEmits<{
-    // eslint-disable-next-line @typescript-eslint/prefer-function-type
-    (
-        e: "pickGenericDoc",
-        payload: { genericDoc: GenericDocForAccompanyingPeriod },
-    ): void;
+  // eslint-disable-next-line @typescript-eslint/prefer-function-type
+  (
+    e: "pickGenericDoc",
+    payload: { genericDoc: GenericDocForAccompanyingPeriod },
+  ): void;
 }>();
 const picker = useTemplateRef<PickGenericDocType>("picker");
 const modalOpened = ref<boolean>(false);
@@ -27,87 +27,87 @@ const modalClasses = { "modal-xl": true, "modal-dialog-scrollable": true };
 const numberOfPicked = computed<number>(() => pickeds.value.length);
 
 const onPicked = ({
-    genericDoc,
+  genericDoc,
 }: {
-    genericDoc: GenericDocForAccompanyingPeriod;
+  genericDoc: GenericDocForAccompanyingPeriod;
 }) => {
-    pickeds.value.push(genericDoc);
+  pickeds.value.push(genericDoc);
 };
 
 const onRemove = ({
-    genericDoc,
+  genericDoc,
 }: {
-    genericDoc: GenericDocForAccompanyingPeriod;
+  genericDoc: GenericDocForAccompanyingPeriod;
 }) => {
-    const index = pickeds.value.findIndex(
-        (item) => item.uniqueKey === genericDoc.uniqueKey,
-    );
+  const index = pickeds.value.findIndex(
+    (item) => item.uniqueKey === genericDoc.uniqueKey,
+  );
 
-    if (index === -1) {
-        throw new Error("Remove generic doc that doesn't exist");
-    }
+  if (index === -1) {
+    throw new Error("Remove generic doc that doesn't exist");
+  }
 
-    pickeds.value.splice(index, 1);
+  pickeds.value.splice(index, 1);
 };
 
 const onConfirm = () => {
-    for (let genericDoc of pickeds.value) {
-        emit("pickGenericDoc", { genericDoc });
-    }
-    pickeds.value = [];
-    closeModal();
+  for (let genericDoc of pickeds.value) {
+    emit("pickGenericDoc", { genericDoc });
+  }
+  pickeds.value = [];
+  closeModal();
 };
 
 const closeModal = function () {
-    modalOpened.value = false;
+  modalOpened.value = false;
 };
 
 const openModal = function () {
-    modalOpened.value = true;
+  modalOpened.value = true;
 };
 
 defineExpose({ openModal, closeModal });
 </script>
 
 <template>
-    <modal
-        v-if="modalOpened"
-        @close="closeModal"
-        :modal-dialog-class="modalClasses"
-    >
-        <template v-slot:header>
-            <h2 class="modal-title">Ajouter une pièce jointe</h2>
-        </template>
-        <template v-slot:body>
-            <pick-generic-doc
-                :accompanying-period-id="props.accompanyingPeriodId"
-                :to-remove="props.toRemove"
-                :picked-list="pickeds"
-                ref="picker"
-                @pickGenericDoc="onPicked"
-                @removeGenericDoc="onRemove"
-            ></pick-generic-doc>
-        </template>
-        <template v-slot:footer>
-            <ul v-if="numberOfPicked > 0" class="record_actions">
-                <li>
-                    <button
-                        type="button"
-                        class="btn btn-chill-green text-white"
-                        @click="onConfirm"
-                    >
-                        <template v-if="numberOfPicked > 1">
-                            <i class="fa fa-plus"></i> Ajouter
-                            {{ numberOfPicked }} pièces jointes
-                        </template>
-                        <template v-else>
-                            <i class="fa fa-plus"></i> Ajouter une pièce jointe
-                        </template>
-                    </button>
-                </li>
-            </ul>
-        </template>
-    </modal>
+  <modal
+    v-if="modalOpened"
+    @close="closeModal"
+    :modal-dialog-class="modalClasses"
+  >
+    <template v-slot:header>
+      <h2 class="modal-title">Ajouter une pièce jointe</h2>
+    </template>
+    <template v-slot:body>
+      <pick-generic-doc
+        :accompanying-period-id="props.accompanyingPeriodId"
+        :to-remove="props.toRemove"
+        :picked-list="pickeds"
+        ref="picker"
+        @pickGenericDoc="onPicked"
+        @removeGenericDoc="onRemove"
+      ></pick-generic-doc>
+    </template>
+    <template v-slot:footer>
+      <ul v-if="numberOfPicked > 0" class="record_actions">
+        <li>
+          <button
+            type="button"
+            class="btn btn-chill-green text-white"
+            @click="onConfirm"
+          >
+            <template v-if="numberOfPicked > 1">
+              <i class="fa fa-plus"></i> Ajouter {{ numberOfPicked }} pièces
+              jointes
+            </template>
+            <template v-else>
+              <i class="fa fa-plus"></i> Ajouter une pièce jointe
+            </template>
+          </button>
+        </li>
+      </ul>
+    </template>
+  </modal>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/index.ts b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/index.ts
index 872e6c251..de3d2e3ef 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/index.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/index.ts
@@ -3,107 +3,102 @@ import App from "./App.vue";
 import { _createI18n } from "../_js/i18n";
 import { WorkflowAttachment } from "ChillMainAssets/types";
 import {
-    create_attachment,
-    delete_attachment,
-    find_attachments_by_workflow,
+  create_attachment,
+  delete_attachment,
+  find_attachments_by_workflow,
 } from "ChillMainAssets/lib/workflow/attachments";
 import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
 import ToastPlugin from "vue-toast-notification";
 import "vue-toast-notification/dist/theme-bootstrap.css";
 
 window.addEventListener("DOMContentLoaded", () => {
-    const attachments = document.querySelectorAll<HTMLDivElement>(
-        'div[data-app="workflow_attachments"]',
+  const attachments = document.querySelectorAll<HTMLDivElement>(
+    'div[data-app="workflow_attachments"]',
+  );
+
+  attachments.forEach(async (el) => {
+    const workflowId = parseInt(el.dataset.entityWorkflowId || "");
+    const accompanyingPeriodId = parseInt(
+      el.dataset.relatedAccompanyingPeriodId || "",
     );
+    const attachments = await find_attachments_by_workflow(workflowId);
 
-    attachments.forEach(async (el) => {
-        const workflowId = parseInt(el.dataset.entityWorkflowId || "");
-        const accompanyingPeriodId = parseInt(
-            el.dataset.relatedAccompanyingPeriodId || "",
-        );
-        const attachments = await find_attachments_by_workflow(workflowId);
+    const app = createApp({
+      template:
+        '<app :workflowId="workflowId" :accompanyingPeriodId="accompanyingPeriodId" :attachments="attachments" @pickGenericDoc="onPickGenericDoc" @removeAttachment="onRemoveAttachment"></app>',
+      components: { App },
+      data: function () {
+        return { workflowId, accompanyingPeriodId, attachments };
+      },
+      methods: {
+        onRemoveAttachment: async function ({
+          attachment,
+        }: {
+          attachment: WorkflowAttachment;
+        }): Promise<void> {
+          const index = this.$data.attachments.findIndex(
+            (el: WorkflowAttachment) => el.id === attachment.id,
+          );
+          if (-1 === index) {
+            console.warn(
+              "this attachment is not associated with the workflow",
+              attachment,
+            );
+            this.$toast.error(
+              "This attachment is not associated with the workflow",
+            );
+            return;
+          }
 
-        const app = createApp({
-            template:
-                '<app :workflowId="workflowId" :accompanyingPeriodId="accompanyingPeriodId" :attachments="attachments" @pickGenericDoc="onPickGenericDoc" @removeAttachment="onRemoveAttachment"></app>',
-            components: { App },
-            data: function () {
-                return { workflowId, accompanyingPeriodId, attachments };
-            },
-            methods: {
-                onRemoveAttachment: async function ({
-                    attachment,
-                }: {
-                    attachment: WorkflowAttachment;
-                }): Promise<void> {
-                    const index = this.$data.attachments.findIndex(
-                        (el: WorkflowAttachment) => el.id === attachment.id,
-                    );
-                    if (-1 === index) {
-                        console.warn(
-                            "this attachment is not associated with the workflow",
-                            attachment,
-                        );
-                        this.$toast.error(
-                            "This attachment is not associated with the workflow",
-                        );
-                        return;
-                    }
+          try {
+            await delete_attachment(attachment);
+          } catch (error) {
+            console.error(error);
+            this.$toast.error("Error while removing element");
+            throw error;
+          }
+          this.$data.attachments.splice(index, 1);
+          this.$toast.success("Pièce jointe supprimée");
+        },
+        onPickGenericDoc: async function ({
+          genericDoc,
+        }: {
+          genericDoc: GenericDocForAccompanyingPeriod;
+        }): Promise<void> {
+          console.log("picked generic doc", genericDoc);
 
-                    try {
-                        await delete_attachment(attachment);
-                    } catch (error) {
-                        console.error(error);
-                        this.$toast.error("Error while removing element");
-                        throw error;
-                    }
-                    this.$data.attachments.splice(index, 1);
-                    this.$toast.success("Pièce jointe supprimée");
-                },
-                onPickGenericDoc: async function ({
-                    genericDoc,
-                }: {
-                    genericDoc: GenericDocForAccompanyingPeriod;
-                }): Promise<void> {
-                    console.log("picked generic doc", genericDoc);
+          // prevent to create double attachment:
+          if (
+            -1 !==
+            this.$data.attachments.findIndex(
+              (el: WorkflowAttachment) =>
+                el.genericDoc?.key === genericDoc.key &&
+                JSON.stringify(el.genericDoc?.identifiers) ==
+                  JSON.stringify(genericDoc.identifiers),
+            )
+          ) {
+            console.warn(
+              "this document is already attached to the workflow",
+              genericDoc,
+            );
+            this.$toast.error("Ce document est déjà attaché au workflow");
+            return;
+          }
 
-                    // prevent to create double attachment:
-                    if (
-                        -1 !==
-                        this.$data.attachments.findIndex(
-                            (el: WorkflowAttachment) =>
-                                el.genericDoc?.key === genericDoc.key &&
-                                JSON.stringify(el.genericDoc?.identifiers) ==
-                                    JSON.stringify(genericDoc.identifiers),
-                        )
-                    ) {
-                        console.warn(
-                            "this document is already attached to the workflow",
-                            genericDoc,
-                        );
-                        this.$toast.error(
-                            "Ce document est déjà attaché au workflow",
-                        );
-                        return;
-                    }
-
-                    try {
-                        const attachment = await create_attachment(
-                            workflowId,
-                            genericDoc,
-                        );
-                        this.$data.attachments.push(attachment);
-                    } catch (error) {
-                        console.error(error);
-                        throw error;
-                    }
-                },
-            },
-        });
-        const i18n = _createI18n({});
-        app.use(i18n);
-        app.use(ToastPlugin);
-
-        app.mount(el);
+          try {
+            const attachment = await create_attachment(workflowId, genericDoc);
+            this.$data.attachments.push(attachment);
+          } catch (error) {
+            console.error(error);
+            throw error;
+          }
+        },
+      },
     });
+    const i18n = _createI18n({});
+    app.use(i18n);
+    app.use(ToastPlugin);
+
+    app.mount(el);
+  });
 });
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue
index e5838089e..eb26ff738 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue
@@ -1,23 +1,23 @@
 <template>
-    <span
-        v-if="data.working_ref_status === 'to_review'"
-        class="badge bg-danger address-details-button-warning"
-        >L'adresse de référence a été modifiée</span
-    >
-    <a
-        v-if="data.loading === false"
-        @click.prevent="clickOrOpen"
-        class="btn btn-sm address-details-button"
-        title="Plus de détails"
-    >
-        <span class="fa fa-map-o"></span>
-    </a>
-    <span v-if="data.loading" class="fa fa-spin fa-spinner"></span>
-    <AddressModal
-        :address="data.working_address"
-        @update-address="onUpdateAddress"
-        ref="address_modal"
-    ></AddressModal>
+  <span
+    v-if="data.working_ref_status === 'to_review'"
+    class="badge bg-danger address-details-button-warning"
+    >L'adresse de référence a été modifiée</span
+  >
+  <a
+    v-if="data.loading === false"
+    @click.prevent="clickOrOpen"
+    class="btn btn-sm address-details-button"
+    title="Plus de détails"
+  >
+    <span class="fa fa-map-o"></span>
+  </a>
+  <span v-if="data.loading" class="fa fa-spin fa-spinner"></span>
+  <AddressModal
+    :address="data.working_address"
+    @update-address="onUpdateAddress"
+    ref="address_modal"
+  ></AddressModal>
 </template>
 
 <script lang="ts" setup>
@@ -27,20 +27,20 @@ import { getAddressById } from "../../../lib/api/address";
 import AddressModal from "./AddressModal.vue";
 
 export interface AddressModalContentProps {
-    address_id: number;
-    address_ref_status: AddressRefStatus;
+  address_id: number;
+  address_ref_status: AddressRefStatus;
 }
 
 interface AddressModalData {
-    loading: boolean;
-    working_address: Address | null;
-    working_ref_status: AddressRefStatus | null;
+  loading: boolean;
+  working_address: Address | null;
+  working_ref_status: AddressRefStatus | null;
 }
 
 const data: AddressModalData = reactive({
-    loading: false,
-    working_address: null,
-    working_ref_status: null,
+  loading: false,
+  working_address: null,
+  working_ref_status: null,
 } as AddressModalData);
 
 const props = defineProps<AddressModalContentProps>();
@@ -50,31 +50,31 @@ const emit = defineEmits<(e: "update-address", value: Address) => void>();
 const address_modal = ref<InstanceType<typeof AddressModal> | null>(null);
 
 onMounted(() => {
-    data.working_ref_status = props.address_ref_status;
+  data.working_ref_status = props.address_ref_status;
 });
 
 async function clickOrOpen(): Promise<void> {
-    if (data.working_address === null) {
-        data.loading = true;
-        data.working_address = await getAddressById(props.address_id);
-        data.working_ref_status = data.working_address.refStatus;
-        data.loading = false;
-    }
+  if (data.working_address === null) {
+    data.loading = true;
+    data.working_address = await getAddressById(props.address_id);
+    data.working_ref_status = data.working_address.refStatus;
+    data.loading = false;
+  }
 
-    // open the modal
-    address_modal.value?.open();
+  // open the modal
+  address_modal.value?.open();
 }
 
 const onUpdateAddress = (address: Address): void => {
-    data.working_address = address;
-    data.working_ref_status = address.refStatus;
-    emit("update-address", address);
+  data.working_address = address;
+  data.working_ref_status = address.refStatus;
+  emit("update-address", address);
 };
 </script>
 
 <style scoped lang="scss">
 .address-details-button-warning {
-    display: inline-block;
-    margin-right: 0.3rem;
+  display: inline-block;
+  margin-right: 0.3rem;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue
index 41bb00025..46ec986aa 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue
@@ -1,16 +1,16 @@
 <template>
-    <address-render-box
-        :address="props.address"
-        :show-button-details="false"
-    ></address-render-box>
-    <address-details-ref-matching
-        :address="props.address"
-        @update-address="onUpdateAddress"
-    ></address-details-ref-matching>
-    <address-details-map :address="props.address"></address-details-map>
-    <address-details-geographical-layers
-        :address="props.address"
-    ></address-details-geographical-layers>
+  <address-render-box
+    :address="props.address"
+    :show-button-details="false"
+  ></address-render-box>
+  <address-details-ref-matching
+    :address="props.address"
+    @update-address="onUpdateAddress"
+  ></address-details-ref-matching>
+  <address-details-map :address="props.address"></address-details-map>
+  <address-details-geographical-layers
+    :address="props.address"
+  ></address-details-geographical-layers>
 </template>
 
 <script lang="ts" setup>
@@ -21,7 +21,7 @@ import AddressDetailsGeographicalLayers from "./Parts/AddressDetailsGeographical
 import AddressDetailsRefMatching from "./Parts/AddressDetailsRefMatching.vue";
 
 interface AddressModalContentProps {
-    address: Address;
+  address: Address;
 }
 
 const props = defineProps<AddressModalContentProps>();
@@ -29,7 +29,7 @@ const props = defineProps<AddressModalContentProps>();
 const emit = defineEmits<(e: "update-address", value: Address) => void>();
 
 const onUpdateAddress = (address: Address): void => {
-    emit("update-address", address);
+  emit("update-address", address);
 };
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressModal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressModal.vue
index 7c00066be..96e32ba04 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressModal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressModal.vue
@@ -1,17 +1,17 @@
 <template>
-    <teleport to="body">
-        <modal v-if="state.show_modal" @close="close">
-            <template v-slot:header>
-                <h2>Détails d'une adresse</h2>
-            </template>
-            <template v-slot:body>
-                <address-details-content
-                    :address="props.address"
-                    @update-address="onUpdateAddress"
-                ></address-details-content>
-            </template>
-        </modal>
-    </teleport>
+  <teleport to="body">
+    <modal v-if="state.show_modal" @close="close">
+      <template v-slot:header>
+        <h2>Détails d'une adresse</h2>
+      </template>
+      <template v-slot:body>
+        <address-details-content
+          :address="props.address"
+          @update-address="onUpdateAddress"
+        ></address-details-content>
+      </template>
+    </modal>
+  </teleport>
 </template>
 
 <script lang="ts" setup>
@@ -21,11 +21,11 @@ import { Address } from "../../../types";
 import AddressDetailsContent from "./AddressDetailsContent.vue";
 
 interface AddressModalProps {
-    address: Address;
+  address: Address;
 }
 
 interface AddressModalState {
-    show_modal: boolean;
+  show_modal: boolean;
 }
 
 const props = defineProps<AddressModalProps>();
@@ -35,20 +35,20 @@ const emit = defineEmits<(e: "update-address", value: Address) => void>();
 const state: AddressModalState = reactive({ show_modal: false });
 
 const open = (): void => {
-    state.show_modal = true;
+  state.show_modal = true;
 };
 
 const close = (): void => {
-    state.show_modal = false;
+  state.show_modal = false;
 };
 
 const onUpdateAddress = (address: Address): void => {
-    emit("update-address", address);
+  emit("update-address", address);
 };
 
 defineExpose({
-    close,
-    open,
+  close,
+  open,
 });
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsGeographicalLayers.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsGeographicalLayers.vue
index c104df1dc..e740cce17 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsGeographicalLayers.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsGeographicalLayers.vue
@@ -1,59 +1,59 @@
 <template>
-    <template v-for="(container, index) in data.containers" :key="index">
-        <h4>{{ localizeString(container.layer.name) }}</h4>
-        <ul>
-            <li v-for="(unit, index) in container.units" :key="index">
-                {{ unit.unitName }} ({{ unit.unitRefId }})
-            </li>
-        </ul>
-    </template>
+  <template v-for="(container, index) in data.containers" :key="index">
+    <h4>{{ localizeString(container.layer.name) }}</h4>
+    <ul>
+      <li v-for="(unit, index) in container.units" :key="index">
+        {{ unit.unitName }} ({{ unit.unitRefId }})
+      </li>
+    </ul>
+  </template>
 </template>
 
 <script lang="ts" setup>
 import {
-    Address,
-    GeographicalUnitLayer,
-    SimpleGeographicalUnit,
+  Address,
+  GeographicalUnitLayer,
+  SimpleGeographicalUnit,
 } from "../../../../types";
 import {
-    getGeographicalUnitsByAddress,
-    getAllGeographicalUnitLayers,
+  getGeographicalUnitsByAddress,
+  getAllGeographicalUnitLayers,
 } from "../../../../lib/api/address";
 import { onMounted, reactive } from "vue";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 export interface AddressDetailsGeographicalLayersProp {
-    address: Address;
+  address: Address;
 }
 
 interface GeographicalUnitContainer {
-    layer: GeographicalUnitLayer;
-    units: SimpleGeographicalUnit[];
+  layer: GeographicalUnitLayer;
+  units: SimpleGeographicalUnit[];
 }
 
 const props = defineProps<AddressDetailsGeographicalLayersProp>();
 
 const data: {
-    containers: GeographicalUnitContainer[];
+  containers: GeographicalUnitContainer[];
 } = reactive({
-    containers: [],
+  containers: [],
 });
 
 onMounted(async () => {
-    const [units, layers] = (await Promise.all([
-        getGeographicalUnitsByAddress(props.address),
-        getAllGeographicalUnitLayers(),
-    ])) as [SimpleGeographicalUnit[], GeographicalUnitLayer[]];
+  const [units, layers] = (await Promise.all([
+    getGeographicalUnitsByAddress(props.address),
+    getAllGeographicalUnitLayers(),
+  ])) as [SimpleGeographicalUnit[], GeographicalUnitLayer[]];
 
-    for (let layer of layers) {
-        let us = units.filter((u) => u.layerId === layer.id);
-        if (us.length > 0) {
-            data.containers.push({
-                layer,
-                units: us,
-            });
-        }
+  for (let layer of layers) {
+    let us = units.filter((u) => u.layerId === layer.id);
+    if (us.length > 0) {
+      data.containers.push({
+        layer,
+        units: us,
+      });
     }
+  }
 });
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue
index 3fe075fcc..e3503c9e4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue
@@ -1,20 +1,17 @@
 <template>
-    <div v-if="props.address.isNoAddress" class="alert alert-info">
-        Cette adresse est incomplète. La position géographique est
-        approximative.
-    </div>
-    <div
-        v-if="props.address.point !== null"
-        class="address_details_map"
-        ref="map_div"
-    ></div>
-    <p>
-        Voir sur
-        <a :href="makeUrlGoogleMap(props.address)" target="_blank"
-            >Google Maps</a
-        >
-        <a :href="makeUrlOsm(props.address)" target="_blank">OSM</a>
-    </p>
+  <div v-if="props.address.isNoAddress" class="alert alert-info">
+    Cette adresse est incomplète. La position géographique est approximative.
+  </div>
+  <div
+    v-if="props.address.point !== null"
+    class="address_details_map"
+    ref="map_div"
+  ></div>
+  <p>
+    Voir sur
+    <a :href="makeUrlGoogleMap(props.address)" target="_blank">Google Maps</a>
+    <a :href="makeUrlOsm(props.address)" target="_blank">OSM</a>
+  </p>
 </template>
 
 <script lang="ts" setup>
@@ -25,11 +22,11 @@ import L, { LatLngExpression, LatLngTuple } from "leaflet";
 import { Address, Point } from "../../../../types";
 
 const lonLatForLeaflet = (point: Point): LatLngTuple => {
-    return [point.coordinates[1], point.coordinates[0]];
+  return [point.coordinates[1], point.coordinates[0]];
 };
 
 export interface MapProps {
-    address: Address;
+  address: Address;
 }
 
 const props = defineProps<MapProps>();
@@ -39,70 +36,70 @@ let map: L.Map | null = null;
 let marker: L.Marker | null = null;
 
 onMounted(() => {
-    if (map_div.value === null) {
-        // there is no map div when the address does not have any Point
-        return;
-    }
+  if (map_div.value === null) {
+    // there is no map div when the address does not have any Point
+    return;
+  }
 
-    if (props.address.point !== null) {
-        map = L.map(map_div.value);
-        map.setView(lonLatForLeaflet(props.address.point), 18);
+  if (props.address.point !== null) {
+    map = L.map(map_div.value);
+    map.setView(lonLatForLeaflet(props.address.point), 18);
 
-        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-            attribution:
-                '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-        }).addTo(map);
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
 
-        const markerIcon = L.icon({
-            iconUrl: markerIconPng,
-            iconAnchor: [12, 41],
-        });
+    const markerIcon = L.icon({
+      iconUrl: markerIconPng,
+      iconAnchor: [12, 41],
+    });
 
-        marker = L.marker(lonLatForLeaflet(props.address.point), {
-            icon: markerIcon,
-        });
-        marker.addTo(map);
-    }
+    marker = L.marker(lonLatForLeaflet(props.address.point), {
+      icon: markerIcon,
+    });
+    marker.addTo(map);
+  }
 });
 
 const makeUrlGoogleMap = (address: Address): string => {
-    const params = new URLSearchParams();
-    params.append("api", "1");
-    if (address.point !== null && address.addressReference !== null) {
-        params.append(
-            "query",
-            `${address.point.coordinates[1]} ${address.point.coordinates[0]}`,
-        );
-    } else {
-        params.append("query", address.lines.join(", "));
-    }
+  const params = new URLSearchParams();
+  params.append("api", "1");
+  if (address.point !== null && address.addressReference !== null) {
+    params.append(
+      "query",
+      `${address.point.coordinates[1]} ${address.point.coordinates[0]}`,
+    );
+  } else {
+    params.append("query", address.lines.join(", "));
+  }
 
-    return `https://www.google.com/maps/search/?${params.toString()}`;
+  return `https://www.google.com/maps/search/?${params.toString()}`;
 };
 
 const makeUrlOsm = (address: Address): string => {
-    if (address.point !== null && address.addressReference !== null) {
-        const params = new URLSearchParams();
-        params.append("mlat", `${address.point.coordinates[1]}`);
-        params.append("mlon", `${address.point.coordinates[0]}`);
-        const hashParams = new URLSearchParams();
-        hashParams.append(
-            "map",
-            `18/${address.point.coordinates[1]}/${address.point.coordinates[0]}`,
-        );
-
-        return `https://www.openstreetmap.org/?${params.toString()}#${hashParams.toString()}`;
-    }
-
+  if (address.point !== null && address.addressReference !== null) {
     const params = new URLSearchParams();
-    params.append("query", address.lines.join(", "));
+    params.append("mlat", `${address.point.coordinates[1]}`);
+    params.append("mlon", `${address.point.coordinates[0]}`);
+    const hashParams = new URLSearchParams();
+    hashParams.append(
+      "map",
+      `18/${address.point.coordinates[1]}/${address.point.coordinates[0]}`,
+    );
 
-    return `https://www.openstreetmap.org/search?${params.toString()}`;
+    return `https://www.openstreetmap.org/?${params.toString()}#${hashParams.toString()}`;
+  }
+
+  const params = new URLSearchParams();
+  params.append("query", address.lines.join(", "));
+
+  return `https://www.openstreetmap.org/search?${params.toString()}`;
 };
 </script>
 
 <style scoped>
 div.address_details_map {
-    height: 250px;
+  height: 250px;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsRefMatching.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsRefMatching.vue
index c3d421411..43dea5d4b 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsRefMatching.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsRefMatching.vue
@@ -1,140 +1,124 @@
 <template>
-    <template v-if="props.address.refStatus !== 'match'">
-        <div
-            v-if="
-                props.address.refStatus === 'to_review' ||
-                props.address.refStatus === 'reviewed'
-            "
-            :class="{
-                alert: true,
-                'alert-danger': props.address.refStatus === 'to_review',
-                'alert-warning': props.address.refStatus === 'reviewed',
-            }"
-        >
-            <p v-if="props.address.refStatus === 'to_review'">
-                <i class="fa fa-warning"></i> L'adresse de référence a été
-                modifiée.
-            </p>
-            <p v-if="props.address.refStatus === 'reviewed'">
-                L'adresse est conservée, mais diffère de l'adresse de référence.
-            </p>
+  <template v-if="props.address.refStatus !== 'match'">
+    <div
+      v-if="
+        props.address.refStatus === 'to_review' ||
+        props.address.refStatus === 'reviewed'
+      "
+      :class="{
+        alert: true,
+        'alert-danger': props.address.refStatus === 'to_review',
+        'alert-warning': props.address.refStatus === 'reviewed',
+      }"
+    >
+      <p v-if="props.address.refStatus === 'to_review'">
+        <i class="fa fa-warning"></i> L'adresse de référence a été modifiée.
+      </p>
+      <p v-if="props.address.refStatus === 'reviewed'">
+        L'adresse est conservée, mais diffère de l'adresse de référence.
+      </p>
 
-            <template
-                v-if="
-                    props.address.addressReference.street !==
-                        props.address.street ||
-                    props.address.addressReference.streetNumber !==
-                        props.address.streetNumber
-                "
+      <template
+        v-if="
+          props.address.addressReference.street !== props.address.street ||
+          props.address.addressReference.streetNumber !==
+            props.address.streetNumber
+        "
+      >
+        <template v-if="props.address.country.code === 'BE'">
+          <div class="difference">
+            <span class="old"
+              >{{ props.address.street }} {{ props.address.streetNumber }}</span
             >
-                <template v-if="props.address.country.code === 'BE'">
-                    <div class="difference">
-                        <span class="old"
-                            >{{ props.address.street }}
-                            {{ props.address.streetNumber }}</span
-                        >
-                        <span class="new"
-                            >{{ props.address.addressReference.street }}
-                            {{
-                                props.address.addressReference.streetNumber
-                            }}</span
-                        >
-                    </div>
-                </template>
-                <template v-else>
-                    <div class="difference">
-                        <span class="old"
-                            >{{ props.address.streetNumber }}
-                            {{ props.address.street }}</span
-                        >
-                        <span class="new"
-                            >{{ props.address.addressReference.streetNumber }}
-                            {{ props.address.addressReference.street }}</span
-                        >
-                    </div>
-                </template>
-            </template>
-
-            <template
-                v-if="
-                    props.address.addressReference.postcode.id !==
-                    props.address.postcode.id
-                "
+            <span class="new"
+              >{{ props.address.addressReference.street }}
+              {{ props.address.addressReference.streetNumber }}</span
             >
-                <div class="difference">
-                    <span class="old"
-                        >{{ props.address.postcode.code }}
-                        {{ props.address.postcode.name }}</span
-                    >
-                    <span class="new"
-                        >{{ props.address.addressReference.postcode.code }}
-                        {{ props.address.addressReference.postcode.name }}</span
-                    >
-                </div>
-            </template>
-
-            <template
-                v-if="
-                    props.address.point !== null &&
-                    (props.address.point.coordinates[0] !==
-                        props.address.addressReference.point.coordinates[0] ||
-                        props.address.point.coordinates[1] !==
-                            props.address.addressReference.point.coordinates[1])
-                "
+          </div>
+        </template>
+        <template v-else>
+          <div class="difference">
+            <span class="old"
+              >{{ props.address.streetNumber }} {{ props.address.street }}</span
             >
-                <div class="difference">
-                    <span class="old"
-                        >{{ props.address.point.coordinates[0] }}
-                        {{ props.address.point.coordinates[1] }}</span
-                    >
-                    <span class="new"
-                        >{{
-                            props.address.addressReference.point.coordinates[0]
-                        }}
-                        {{
-                            props.address.addressReference.point.coordinates[1]
-                        }}</span
-                    >
-                </div>
-            </template>
+            <span class="new"
+              >{{ props.address.addressReference.streetNumber }}
+              {{ props.address.addressReference.street }}</span
+            >
+          </div>
+        </template>
+      </template>
 
-            <ul class="record_actions">
-                <li v-if="props.address.refStatus === 'to_review'">
-                    <button class="btn btn-sm btn-update" @click="applyUpdate">
-                        Appliquer les modifications
-                    </button>
-                </li>
-                <li v-if="props.address.refStatus === 'to_review'">
-                    <button
-                        class="btn btn-sm btn-primary"
-                        @click="keepCurrentAddress"
-                    >
-                        Conserver
-                    </button>
-                </li>
-                <li v-if="props.address.refStatus === 'reviewed'">
-                    <button
-                        class="btn btn-sm btn-primary"
-                        @click="backToReview"
-                    >
-                        Ré-examiner
-                    </button>
-                </li>
-            </ul>
+      <template
+        v-if="
+          props.address.addressReference.postcode.id !==
+          props.address.postcode.id
+        "
+      >
+        <div class="difference">
+          <span class="old"
+            >{{ props.address.postcode.code }}
+            {{ props.address.postcode.name }}</span
+          >
+          <span class="new"
+            >{{ props.address.addressReference.postcode.code }}
+            {{ props.address.addressReference.postcode.name }}</span
+          >
         </div>
-    </template>
+      </template>
+
+      <template
+        v-if="
+          props.address.point !== null &&
+          (props.address.point.coordinates[0] !==
+            props.address.addressReference.point.coordinates[0] ||
+            props.address.point.coordinates[1] !==
+              props.address.addressReference.point.coordinates[1])
+        "
+      >
+        <div class="difference">
+          <span class="old"
+            >{{ props.address.point.coordinates[0] }}
+            {{ props.address.point.coordinates[1] }}</span
+          >
+          <span class="new"
+            >{{ props.address.addressReference.point.coordinates[0] }}
+            {{ props.address.addressReference.point.coordinates[1] }}</span
+          >
+        </div>
+      </template>
+
+      <ul class="record_actions">
+        <li v-if="props.address.refStatus === 'to_review'">
+          <button class="btn btn-sm btn-update" @click="applyUpdate">
+            Appliquer les modifications
+          </button>
+        </li>
+        <li v-if="props.address.refStatus === 'to_review'">
+          <button class="btn btn-sm btn-primary" @click="keepCurrentAddress">
+            Conserver
+          </button>
+        </li>
+        <li v-if="props.address.refStatus === 'reviewed'">
+          <button class="btn btn-sm btn-primary" @click="backToReview">
+            Ré-examiner
+          </button>
+        </li>
+      </ul>
+    </div>
+  </template>
 </template>
 
 <script lang="ts" setup>
 import { Address } from "../../../../types";
 import {
-    markAddressReviewed,
-    markAddressToReview,
-    syncAddressWithReference,
+  markAddressReviewed,
+  markAddressToReview,
+  syncAddressWithReference,
 } from "../../../../lib/api/address";
 
 export interface AddressDetailsRefMatchingProps {
-    address: Address;
+  address: Address;
 }
 
 const props = defineProps<AddressDetailsRefMatchingProps>();
@@ -142,38 +126,38 @@ const props = defineProps<AddressDetailsRefMatchingProps>();
 const emit = defineEmits<(e: "update-address", value: Address) => void>();
 
 const applyUpdate = async () => {
-    const new_address = await syncAddressWithReference(props.address);
+  const new_address = await syncAddressWithReference(props.address);
 
-    emit("update-address", new_address);
+  emit("update-address", new_address);
 };
 
 const keepCurrentAddress = async () => {
-    const new_address = await markAddressReviewed(props.address);
+  const new_address = await markAddressReviewed(props.address);
 
-    emit("update-address", new_address);
+  emit("update-address", new_address);
 };
 
 const backToReview = async () => {
-    const new_address = await markAddressToReview(props.address);
+  const new_address = await markAddressToReview(props.address);
 
-    emit("update-address", new_address);
+  emit("update-address", new_address);
 };
 </script>
 
 <style scoped lang="scss">
 .difference {
-    margin-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
 
-    span {
-        display: block;
-    }
+  span {
+    display: block;
+  }
 
-    .old {
-        text-decoration: red line-through;
-    }
-    .new {
-        font-weight: bold;
-        color: green;
-    }
+  .old {
+    text-decoration: red line-through;
+  }
+  .new {
+    font-weight: bold;
+    color: green;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
index 1c5d2b6da..b74b64054 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
@@ -1,66 +1,63 @@
 <template>
-    <span
-        v-if="props.entity.type === 'person'"
-        class="badge rounded-pill bg-person"
-    >
-        {{ trans(PERSON) }}
-    </span>
+  <span
+    v-if="props.entity.type === 'person'"
+    class="badge rounded-pill bg-person"
+  >
+    {{ trans(PERSON) }}
+  </span>
 
-    <span
-        v-if="props.entity.type === 'thirdparty'"
-        class="badge rounded-pill bg-thirdparty"
-    >
-        <template v-if="props.options.displayLong !== true">
-            {{ trans(THIRDPARTY) }}
-        </template>
+  <span
+    v-if="props.entity.type === 'thirdparty'"
+    class="badge rounded-pill bg-thirdparty"
+  >
+    <template v-if="props.options.displayLong !== true">
+      {{ trans(THIRDPARTY) }}
+    </template>
 
-        <i class="fa fa-fw fa-user" v-if="props.entity.kind === 'child'" />
-        <i
-            class="fa fa-fw fa-hospital-o"
-            v-else-if="props.entity.kind === 'company'"
-        />
-        <i class="fa fa-fw fa-user-md" v-else />
+    <i class="fa fa-fw fa-user" v-if="props.entity.kind === 'child'" />
+    <i
+      class="fa fa-fw fa-hospital-o"
+      v-else-if="props.entity.kind === 'company'"
+    />
+    <i class="fa fa-fw fa-user-md" v-else />
 
-        <template v-if="props.options.displayLong === true">
-            <span v-if="props.entity.kind === 'child'">{{
-                trans(THIRDPARTY_CONTACT_OF)
-            }}</span>
-            <span v-else-if="props.entity.kind === 'company'">{{
-                trans(THIRDPARTY_A_COMPANY)
-            }}</span>
-            <span v-else>{{ trans(THIRDPARTY_A_CONTACT) }}</span>
-        </template>
-    </span>
+    <template v-if="props.options.displayLong === true">
+      <span v-if="props.entity.kind === 'child'">{{
+        trans(THIRDPARTY_CONTACT_OF)
+      }}</span>
+      <span v-else-if="props.entity.kind === 'company'">{{
+        trans(THIRDPARTY_A_COMPANY)
+      }}</span>
+      <span v-else>{{ trans(THIRDPARTY_A_CONTACT) }}</span>
+    </template>
+  </span>
 
-    <span
-        v-if="props.entity.type === 'user'"
-        class="badge rounded-pill bg-user"
-    >
-        {{ trans(ACCEPTED_USERS) }}
-    </span>
+  <span v-if="props.entity.type === 'user'" class="badge rounded-pill bg-user">
+    {{ trans(ACCEPTED_USERS) }}
+  </span>
 
-    <span
-        v-if="props.entity.type === 'household'"
-        class="badge rounded-pill bg-user"
-    >
-        {{ trans(HOUSEHOLD) }}
-    </span>
+  <span
+    v-if="props.entity.type === 'household'"
+    class="badge rounded-pill bg-user"
+  >
+    {{ trans(HOUSEHOLD) }}
+  </span>
 </template>
 
 <script setup>
 import {
-    trans,
-    HOUSEHOLD,
-    ACCEPTED_USERS,
-    THIRDPARTY_A_CONTACT,
-    THIRDPARTY_CONTACT_OF,
-    THIRDPARTY_A_COMPANY,
-    PERSON,
-    THIRDPARTY,
+  trans,
+  HOUSEHOLD,
+  ACCEPTED_USERS,
+  THIRDPARTY_A_CONTACT,
+  THIRDPARTY_CONTACT_OF,
+  THIRDPARTY_A_COMPANY,
+  PERSON,
+  THIRDPARTY,
 } from "translator";
 
 const props = defineProps({
-    options: Object,
-    entity: Object,
+  options: Object,
+  entity: Object,
 });
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue
index d6019fabe..97242ffa2 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue
@@ -4,9 +4,9 @@ import { Ckeditor } from "@ckeditor/ckeditor5-vue";
 import { ClassicEditor } from "ckeditor5";
 import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
 import {
-    trans,
-    EDITOR_SWITCH_TO_SIMPLE,
-    EDITOR_SWITCH_TO_COMPLEX,
+  trans,
+  EDITOR_SWITCH_TO_SIMPLE,
+  EDITOR_SWITCH_TO_COMPLEX,
 } from "translator";
 
 const EDITOR_MODE_KEY = "editorMode";
@@ -16,107 +16,101 @@ const value = defineModel({ required: true });
 const isSimple = computed(() => kind.value === "simple");
 
 const toggleButtonClass = computed(() => {
-    return {
-        ["toggle-button"]: true,
-        onEditor: !isSimple.value,
-        onSimple: isSimple.value,
-    };
+  return {
+    ["toggle-button"]: true,
+    onEditor: !isSimple.value,
+    onSimple: isSimple.value,
+  };
 });
 
 const toggleEditor = () => {
-    let newValue;
+  let newValue;
 
-    newValue = kind.value === "simple" ? "rich" : "simple";
-    kind.value = "rich";
-    window.localStorage.setItem(EDITOR_MODE_KEY, newValue);
+  newValue = kind.value === "simple" ? "rich" : "simple";
+  kind.value = "rich";
+  window.localStorage.setItem(EDITOR_MODE_KEY, newValue);
 
-    window.dispatchEvent(new Event("toggleEditorKind"));
+  window.dispatchEvent(new Event("toggleEditorKind"));
 };
 
 const onKindChange = function (/* event: StorageEvent | Event */) {
-    const newValue = window.localStorage.getItem(EDITOR_MODE_KEY);
+  const newValue = window.localStorage.getItem(EDITOR_MODE_KEY);
 
-    if (null === newValue || !(newValue === "rich" || newValue === "simple")) {
-        throw "invalid new value: " + newValue;
-    }
+  if (null === newValue || !(newValue === "rich" || newValue === "simple")) {
+    throw "invalid new value: " + newValue;
+  }
 
-    if (kind.value !== newValue) {
-        kind.value = newValue;
-    }
+  if (kind.value !== newValue) {
+    kind.value = newValue;
+  }
 };
 
 onMounted(function () {
-    const storage = window.localStorage;
-    const savedKind = storage.getItem(EDITOR_MODE_KEY);
+  const storage = window.localStorage;
+  const savedKind = storage.getItem(EDITOR_MODE_KEY);
 
-    if (
-        null !== kind.value &&
-        (savedKind === "simple" || savedKind === "rich")
-    ) {
-        kind.value = savedKind;
-    }
+  if (null !== kind.value && (savedKind === "simple" || savedKind === "rich")) {
+    kind.value = savedKind;
+  }
 
-    window.addEventListener("storage", onKindChange);
-    window.addEventListener("toggleEditorKind", onKindChange);
+  window.addEventListener("storage", onKindChange);
+  window.addEventListener("toggleEditorKind", onKindChange);
 });
 
 onUnmounted(function () {
-    window.removeEventListener("storage", onKindChange);
-    window.removeEventListener("toggleEditorKind", onKindChange);
+  window.removeEventListener("storage", onKindChange);
+  window.removeEventListener("toggleEditorKind", onKindChange);
 });
 </script>
 
 <template>
-    <div>
-        <div v-if="'rich' === kind">
-            <Ckeditor
-                :editor="ClassicEditor"
-                :config="classicEditorConfig"
-                v-model="value"
-            />
-        </div>
-        <div v-else>
-            <textarea
-                v-model="value"
-                class="form-control simple-editor"
-            ></textarea>
-        </div>
-
-        <button :class="toggleButtonClass" type="button" @click="toggleEditor">
-            {{
-                isSimple
-                    ? trans(EDITOR_SWITCH_TO_COMPLEX)
-                    : trans(EDITOR_SWITCH_TO_SIMPLE)
-            }}
-        </button>
+  <div>
+    <div v-if="'rich' === kind">
+      <Ckeditor
+        :editor="ClassicEditor"
+        :config="classicEditorConfig"
+        v-model="value"
+      />
     </div>
+    <div v-else>
+      <textarea v-model="value" class="form-control simple-editor"></textarea>
+    </div>
+
+    <button :class="toggleButtonClass" type="button" @click="toggleEditor">
+      {{
+        isSimple
+          ? trans(EDITOR_SWITCH_TO_COMPLEX)
+          : trans(EDITOR_SWITCH_TO_SIMPLE)
+      }}
+    </button>
+  </div>
 </template>
 
 <style scoped lang="scss">
 @import "ChillMainAssets/module/bootstrap/bootstrap";
 
 .toggle-button {
-    background: white;
-    border: none;
-    padding: 0.15rem;
-    color: #069;
-    cursor: pointer;
+  background: white;
+  border: none;
+  padding: 0.15rem;
+  color: #069;
+  cursor: pointer;
 
-    @include media-breakpoint-up(md) {
-        &.onEditor {
-            position: relative;
-            left: 1rem;
-            top: -1.5rem;
-        }
-        &.onSimple {
-            position: relative;
-            top: -0.75rem;
-            left: 1rem;
-        }
+  @include media-breakpoint-up(md) {
+    &.onEditor {
+      position: relative;
+      left: 1rem;
+      top: -1.5rem;
     }
+    &.onSimple {
+      position: relative;
+      top: -0.75rem;
+      left: 1rem;
+    }
+  }
 }
 
 .simple-editor {
-    min-height: 190px;
+  min-height: 190px;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
index 13459b390..9c010e8d1 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
@@ -1,40 +1,40 @@
 <template>
-    <div class="confidential">
-        <div :class="{ blur: isBlurred }">
-            <slot name="confidential-content" />
-        </div>
-        <div class="toggle-container">
-            <i
-                class="fa toggle"
-                :class="toggleIcon"
-                aria-hidden="true"
-                @click="toggleBlur"
-            />
-        </div>
+  <div class="confidential">
+    <div :class="{ blur: isBlurred }">
+      <slot name="confidential-content" />
     </div>
+    <div class="toggle-container">
+      <i
+        class="fa toggle"
+        :class="toggleIcon"
+        aria-hidden="true"
+        @click="toggleBlur"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "Confidential",
-    data() {
-        return {
-            isBlurred: true,
-            toggleIcon: "fa-eye",
-        };
-    },
-    methods: {
-        toggleBlur() {
-            console.log(this.positionBtnFar);
-            this.isBlurred = !this.isBlurred;
-            this.toggleIcon = this.isBlurred ? "fa-eye" : "fa-eye-slash";
-        },
+  name: "Confidential",
+  data() {
+    return {
+      isBlurred: true,
+      toggleIcon: "fa-eye",
+    };
+  },
+  methods: {
+    toggleBlur() {
+      console.log(this.positionBtnFar);
+      this.isBlurred = !this.isBlurred;
+      this.toggleIcon = this.isBlurred ? "fa-eye" : "fa-eye-slash";
     },
+  },
 };
 </script>
 
 <style scoped lang="scss">
 .confidential {
-    align-content: center;
+  align-content: center;
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
index 86f4155b6..7085b3b18 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
@@ -1,83 +1,77 @@
 <template>
-    <component :is="component" class="chill-entity entity-address">
-        <component :is="component" class="address" :class="multiline">
-            <div v-if="isConfidential">
-                <confidential :position-btn-far="true">
-                    <template #confidential-content>
-                        <div v-if="isMultiline === true">
-                            <p
-                                v-for="(l, i) in address.lines"
-                                :key="`line-${i}`"
-                            >
-                                {{ l }}
-                            </p>
-                            <p v-if="showButtonDetails">
-                                <address-details-button
-                                    :address_id="address.address_id"
-                                    :address_ref_status="address.refStatus"
-                                />
-                            </p>
-                        </div>
-                        <div v-else>
-                            <p v-if="'' !== address.text" class="street">
-                                {{ address.text }}
-                            </p>
-                            <p
-                                v-if="null !== address.postcode"
-                                class="postcode"
-                            >
-                                {{ address.postcode.code }}
-                                {{ address.postcode.name }}
-                            </p>
-                            <p v-if="null !== address.country" class="country">
-                                {{ localizeString(address.country.name) }}
-                            </p>
-                        </div>
-                    </template>
-                </confidential>
+  <component :is="component" class="chill-entity entity-address">
+    <component :is="component" class="address" :class="multiline">
+      <div v-if="isConfidential">
+        <confidential :position-btn-far="true">
+          <template #confidential-content>
+            <div v-if="isMultiline === true">
+              <p v-for="(l, i) in address.lines" :key="`line-${i}`">
+                {{ l }}
+              </p>
+              <p v-if="showButtonDetails">
+                <address-details-button
+                  :address_id="address.address_id"
+                  :address_ref_status="address.refStatus"
+                />
+              </p>
             </div>
+            <div v-else>
+              <p v-if="'' !== address.text" class="street">
+                {{ address.text }}
+              </p>
+              <p v-if="null !== address.postcode" class="postcode">
+                {{ address.postcode.code }}
+                {{ address.postcode.name }}
+              </p>
+              <p v-if="null !== address.country" class="country">
+                {{ localizeString(address.country.name) }}
+              </p>
+            </div>
+          </template>
+        </confidential>
+      </div>
 
-            <div v-if="!isConfidential">
-                <div v-if="isMultiline === true">
-                    <p v-for="(l, i) in address.lines" :key="`line-${i}`">
-                        {{ l }}
-                    </p>
-                    <p v-if="showButtonDetails">
-                        <address-details-button
-                            :address_id="address.address_id"
-                            :address_ref_status="address.refStatus"
-                        />
-                    </p>
-                </div>
-                <div v-else>
-                    <p v-if="address.text" class="street">
-                        {{ address.text }}
-                        <template v-if="showButtonDetails">
-                            <address-details-button
-                                :address_id="address.address_id"
-                                :address_ref_status="address.refStatus"
-                            />
-                        </template>
-                    </p>
-                </div>
-            </div>
-        </component>
-
-        <div v-if="useDatePane === true" class="address-more">
-            <div v-if="address.validFrom">
-                <span class="validFrom">
-                    <b>{{ trans(ADDRESS_VALID_FROM) }}</b
-                    >: {{ $d(address.validFrom.date) }}
-                </span>
-            </div>
-            <div v-if="address.validTo">
-                <span class="validTo">
-                    <b>{{ trans(ADDRESS_VALID_TO) }}</b
-                    >: {{ $d(address.validTo.date) }}
-                </span>
-            </div>
+      <div v-if="!isConfidential">
+        <div v-if="isMultiline === true">
+          <p v-for="(l, i) in address.lines" :key="`line-${i}`">
+            {{ l }}
+          </p>
+          <p v-if="showButtonDetails">
+            <address-details-button
+              :address_id="address.address_id"
+              :address_ref_status="address.refStatus"
+            />
+          </p>
         </div>
+        <div v-else>
+          <p v-if="address.text" class="street">
+            {{ address.text }}
+            <template v-if="showButtonDetails">
+              <address-details-button
+                :address_id="address.address_id"
+                :address_ref_status="address.refStatus"
+              />
+            </template>
+          </p>
+        </div>
+      </div>
     </component>
+
+    <div v-if="useDatePane === true" class="address-more">
+      <div v-if="address.validFrom">
+        <span class="validFrom">
+          <b>{{ trans(ADDRESS_VALID_FROM) }}</b
+          >: {{ $d(address.validFrom.date) }}
+        </span>
+      </div>
+      <div v-if="address.validTo">
+        <span class="validTo">
+          <b>{{ trans(ADDRESS_VALID_TO) }}</b
+          >: {{ $d(address.validTo.date) }}
+        </span>
+      </div>
+    </div>
+  </component>
 </template>
 
 <script>
@@ -87,51 +81,51 @@ import { trans, ADDRESS_VALID_FROM, ADDRESS_VALID_TO } from "translator";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 export default {
-    name: "AddressRenderBox",
-    methods: { localizeString },
-    components: {
-        Confidential,
-        AddressDetailsButton,
+  name: "AddressRenderBox",
+  methods: { localizeString },
+  components: {
+    Confidential,
+    AddressDetailsButton,
+  },
+  props: {
+    address: {
+      type: Object,
     },
-    props: {
-        address: {
-            type: Object,
-        },
-        isMultiline: {
-            default: true,
-            type: Boolean,
-        },
-        useDatePane: {
-            default: false,
-            type: Boolean,
-        },
-        showButtonDetails: {
-            default: true,
-            type: Boolean,
-        },
+    isMultiline: {
+      default: true,
+      type: Boolean,
     },
-    setup() {
-        return { trans, ADDRESS_VALID_FROM, ADDRESS_VALID_TO };
+    useDatePane: {
+      default: false,
+      type: Boolean,
     },
-    computed: {
-        component() {
-            return this.isMultiline === true ? "div" : "span";
-        },
-        multiline() {
-            return this.isMultiline === true ? "multiline" : "";
-        },
-        isConfidential() {
-            return this.address.confidential;
-        },
+    showButtonDetails: {
+      default: true,
+      type: Boolean,
     },
+  },
+  setup() {
+    return { trans, ADDRESS_VALID_FROM, ADDRESS_VALID_TO };
+  },
+  computed: {
+    component() {
+      return this.isMultiline === true ? "div" : "span";
+    },
+    multiline() {
+      return this.isMultiline === true ? "multiline" : "";
+    },
+    isConfidential() {
+      return this.address.confidential;
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 p {
-    &:after {
-        content: " ";
-        margin-right: 0.3em;
-    }
+  &:after {
+    content: " ";
+    margin-right: 0.3em;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue
index 0579b4c5f..794771014 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue
@@ -1,28 +1,28 @@
 <template>
-    <i :class="['fa', genderClass, 'px-1']" />
+  <i :class="['fa', genderClass, 'px-1']" />
 </template>
 
 <script setup>
 import { computed } from "vue";
 const props = defineProps({
-    gender: {
-        type: Object,
-        required: true,
-    },
+  gender: {
+    type: Object,
+    required: true,
+  },
 });
 
 const genderClass = computed(() => {
-    switch (props.gender.genderTranslation) {
-        case "woman":
-            return "fa-venus";
-        case "man":
-            return "fa-mars";
-        case "both":
-            return "fa-neuter";
-        case "unknown":
-            return "fa-genderless";
-        default:
-            return "fa-genderless";
-    }
+  switch (props.gender.genderTranslation) {
+    case "woman":
+      return "fa-venus";
+    case "man":
+      return "fa-mars";
+    case "both":
+      return "fa-neuter";
+    case "unknown":
+      return "fa-genderless";
+    default:
+      return "fa-genderless";
+  }
 });
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserGroupRenderBox.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserGroupRenderBox.vue
index 7c37e98a9..81f836c62 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserGroupRenderBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserGroupRenderBox.vue
@@ -4,23 +4,23 @@ import { computed } from "vue";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 interface UserGroupRenderBoxProps {
-    userGroup: UserGroup;
+  userGroup: UserGroup;
 }
 
 const props = defineProps<UserGroupRenderBoxProps>();
 
 const styles = computed<{ color: string; "background-color": string }>(() => {
-    return {
-        color: props.userGroup.foregroundColor,
-        "background-color": props.userGroup.backgroundColor,
-    };
+  return {
+    color: props.userGroup.foregroundColor,
+    "background-color": props.userGroup.backgroundColor,
+  };
 });
 </script>
 
 <template>
-    <span class="badge-user-group" :style="styles">{{
-        localizeString(userGroup.label)
-    }}</span>
+  <span class="badge-user-group" :style="styles">{{
+    localizeString(userGroup.label)
+  }}</span>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
index 63c43c37f..4bae3b541 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
@@ -1,31 +1,31 @@
 <template>
-    <span class="chill-entity entity-user">
-        {{ user.label }}
-        <span class="user-job" v-if="user.user_job !== null">
-            ({{ localizeString(user.user_job.label) }})</span
-        >
-        <span class="main-scope" v-if="user.main_scope !== null">
-            ({{ localizeString(user.main_scope.name) }})</span
-        >
-        <span
-            v-if="user.isAbsent"
-            class="badge bg-danger rounded-pill"
-            :title="Absent"
-            >A</span
-        >
-    </span>
+  <span class="chill-entity entity-user">
+    {{ user.label }}
+    <span class="user-job" v-if="user.user_job !== null">
+      ({{ localizeString(user.user_job.label) }})</span
+    >
+    <span class="main-scope" v-if="user.main_scope !== null">
+      ({{ localizeString(user.main_scope.name) }})</span
+    >
+    <span
+      v-if="user.isAbsent"
+      class="badge bg-danger rounded-pill"
+      :title="Absent"
+      >A</span
+    >
+  </span>
 </template>
 
 <script>
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 export default {
-    name: "UserRenderBoxBadge",
-    methods: {
-        localizeString(label) {
-            return localizeString(label);
-        },
+  name: "UserRenderBoxBadge",
+  methods: {
+    localizeString(label) {
+      return localizeString(label);
     },
-    props: ["user"],
+  },
+  props: ["user"],
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
index 332849ef5..4d817a2f9 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
@@ -1,83 +1,83 @@
 <template>
-    <div class="d-grid gap-2 my-3">
-        <button
-            class="btn btn-misc"
-            type="button"
-            v-if="!subscriberFinal"
-            @click="subscribeTo('subscribe', 'final')"
-        >
-            <i class="fa fa-check fa-fw"></i>
-            {{ trans(WORKFLOW_SUBSCRIBE_FINAL) }}
-        </button>
-        <button
-            class="btn btn-misc"
-            type="button"
-            v-if="subscriberFinal"
-            @click="subscribeTo('unsubscribe', 'final')"
-        >
-            <i class="fa fa-times fa-fw"></i>
-            {{ trans(WORKFLOW_UNSUBSCRIBE_FINAL) }}
-        </button>
-        <button
-            class="btn btn-misc"
-            type="button"
-            v-if="!subscriberStep"
-            @click="subscribeTo('subscribe', 'step')"
-        >
-            <i class="fa fa-check fa-fw"></i>
-            {{ trans(WORKFLOW_SUBSCRIBE_ALL_STEPS) }}
-        </button>
-        <button
-            class="btn btn-misc"
-            type="button"
-            v-if="subscriberStep"
-            @click="subscribeTo('unsubscribe', 'step')"
-        >
-            <i class="fa fa-times fa-fw"></i>
-            {{ trans(WORKFLOW_UNSUBSCRIBE_ALL_STEPS) }}
-        </button>
-    </div>
+  <div class="d-grid gap-2 my-3">
+    <button
+      class="btn btn-misc"
+      type="button"
+      v-if="!subscriberFinal"
+      @click="subscribeTo('subscribe', 'final')"
+    >
+      <i class="fa fa-check fa-fw"></i>
+      {{ trans(WORKFLOW_SUBSCRIBE_FINAL) }}
+    </button>
+    <button
+      class="btn btn-misc"
+      type="button"
+      v-if="subscriberFinal"
+      @click="subscribeTo('unsubscribe', 'final')"
+    >
+      <i class="fa fa-times fa-fw"></i>
+      {{ trans(WORKFLOW_UNSUBSCRIBE_FINAL) }}
+    </button>
+    <button
+      class="btn btn-misc"
+      type="button"
+      v-if="!subscriberStep"
+      @click="subscribeTo('subscribe', 'step')"
+    >
+      <i class="fa fa-check fa-fw"></i>
+      {{ trans(WORKFLOW_SUBSCRIBE_ALL_STEPS) }}
+    </button>
+    <button
+      class="btn btn-misc"
+      type="button"
+      v-if="subscriberStep"
+      @click="subscribeTo('unsubscribe', 'step')"
+    >
+      <i class="fa fa-times fa-fw"></i>
+      {{ trans(WORKFLOW_UNSUBSCRIBE_ALL_STEPS) }}
+    </button>
+  </div>
 </template>
 
 <script setup>
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
 import { defineProps, defineEmits } from "vue";
 import {
-    trans,
-    WORKFLOW_SUBSCRIBE_FINAL,
-    WORKFLOW_UNSUBSCRIBE_FINAL,
-    WORKFLOW_SUBSCRIBE_ALL_STEPS,
-    WORKFLOW_UNSUBSCRIBE_ALL_STEPS,
+  trans,
+  WORKFLOW_SUBSCRIBE_FINAL,
+  WORKFLOW_UNSUBSCRIBE_FINAL,
+  WORKFLOW_SUBSCRIBE_ALL_STEPS,
+  WORKFLOW_UNSUBSCRIBE_ALL_STEPS,
 } from "translator";
 
 // props
 const props = defineProps({
-    entityWorkflowId: {
-        type: Number,
-        required: true,
-    },
-    subscriberStep: {
-        type: Boolean,
-        required: true,
-    },
-    subscriberFinal: {
-        type: Boolean,
-        required: true,
-    },
+  entityWorkflowId: {
+    type: Number,
+    required: true,
+  },
+  subscriberStep: {
+    type: Boolean,
+    required: true,
+  },
+  subscriberFinal: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 //methods
 const subscribeTo = (step, to) => {
-    let params = new URLSearchParams();
-    params.set("subscribe", to);
+  let params = new URLSearchParams();
+  params.set("subscribe", to);
 
-    const url =
-        `/api/1.0/main/workflow/${props.entityWorkflowId}/${step}?` +
-        params.toString();
+  const url =
+    `/api/1.0/main/workflow/${props.entityWorkflowId}/${step}?` +
+    params.toString();
 
-    makeFetch("POST", url).then((response) => {
-        emit("subscriptionUpdated", response);
-    });
+  makeFetch("POST", url).then((response) => {
+    emit("subscriptionUpdated", response);
+  });
 };
 
 // emit
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
index ebcc5128c..30b2a81da 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
@@ -1,143 +1,138 @@
 <template>
-    <div class="flex-table workflow" id="workflow-list">
-        <div
-            v-for="(w, i) in props.workflows"
-            :key="`workflow-${i}`"
-            class="item-bloc"
-        >
-            <div>
-                <div class="item-row col">
-                    <h2>{{ w.title }}</h2>
-                    <div class="flex-grow-1 ms-3 h3">
-                        <div class="visually-hidden">
-                            {{ w.relatedEntityClass }}
-                            {{ w.relatedEntityId }}
-                        </div>
-                    </div>
-                </div>
-
-                <div class="breadcrumb">
-                    <template v-for="(step, j) in w.steps" :key="`step-${j}`">
-                        <span
-                            class="mx-2"
-                            tabindex="0"
-                            data-bs-trigger="focus hover"
-                            data-bs-toggle="popover"
-                            data-bs-placement="bottom"
-                            data-bs-custom-class="workflow-transition"
-                            :title="getPopTitle(step)"
-                            :data-bs-content="getPopContent(step)"
-                        >
-                            <i
-                                v-if="step.currentStep.name === 'initial'"
-                                class="fa fa-circle me-1 text-chill-yellow"
-                            >
-                            </i>
-                            <i
-                                v-if="step.isFreezed"
-                                class="fa fa-snowflake-o fa-sm me-1"
-                            >
-                            </i>
-                            {{ step.currentStep.text }}
-                        </span>
-                        <span v-if="j !== Object.keys(w.steps).length - 1">
-                            →
-                        </span>
-                    </template>
-                </div>
-                <span
-                    v-if="w.isOnHoldAtCurrentStep"
-                    class="badge bg-success rounded-pill"
-                    >{{ trans(WORKFLOW_ON_HOLD) }}</span
-                >
-            </div>
-
-            <div class="item-row">
-                <div class="item-col flex-grow-1">
-                    <p v-if="isUserSubscribedToStep(w)">
-                        <i class="fa fa-check fa-fw"></i>
-                        {{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS) }}
-                    </p>
-                    <p v-if="isUserSubscribedToFinal(w)">
-                        <i class="fa fa-check fa-fw"></i>
-                        {{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP) }}
-                    </p>
-                </div>
-                <div class="item-col">
-                    <ul class="record_actions">
-                        <li>
-                            <a
-                                :href="goToUrl(w)"
-                                class="btn btn-sm btn-show"
-                                :title="trans(SEE)"
-                            ></a>
-                        </li>
-                    </ul>
-                </div>
+  <div class="flex-table workflow" id="workflow-list">
+    <div
+      v-for="(w, i) in props.workflows"
+      :key="`workflow-${i}`"
+      class="item-bloc"
+    >
+      <div>
+        <div class="item-row col">
+          <h2>{{ w.title }}</h2>
+          <div class="flex-grow-1 ms-3 h3">
+            <div class="visually-hidden">
+              {{ w.relatedEntityClass }}
+              {{ w.relatedEntityId }}
             </div>
+          </div>
         </div>
+
+        <div class="breadcrumb">
+          <template v-for="(step, j) in w.steps" :key="`step-${j}`">
+            <span
+              class="mx-2"
+              tabindex="0"
+              data-bs-trigger="focus hover"
+              data-bs-toggle="popover"
+              data-bs-placement="bottom"
+              data-bs-custom-class="workflow-transition"
+              :title="getPopTitle(step)"
+              :data-bs-content="getPopContent(step)"
+            >
+              <i
+                v-if="step.currentStep.name === 'initial'"
+                class="fa fa-circle me-1 text-chill-yellow"
+              >
+              </i>
+              <i v-if="step.isFreezed" class="fa fa-snowflake-o fa-sm me-1">
+              </i>
+              {{ step.currentStep.text }}
+            </span>
+            <span v-if="j !== Object.keys(w.steps).length - 1"> → </span>
+          </template>
+        </div>
+        <span
+          v-if="w.isOnHoldAtCurrentStep"
+          class="badge bg-success rounded-pill"
+          >{{ trans(WORKFLOW_ON_HOLD) }}</span
+        >
+      </div>
+
+      <div class="item-row">
+        <div class="item-col flex-grow-1">
+          <p v-if="isUserSubscribedToStep(w)">
+            <i class="fa fa-check fa-fw"></i>
+            {{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS) }}
+          </p>
+          <p v-if="isUserSubscribedToFinal(w)">
+            <i class="fa fa-check fa-fw"></i>
+            {{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP) }}
+          </p>
+        </div>
+        <div class="item-col">
+          <ul class="record_actions">
+            <li>
+              <a
+                :href="goToUrl(w)"
+                class="btn btn-sm btn-show"
+                :title="trans(SEE)"
+              ></a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
 import Popover from "bootstrap/js/src/popover";
 import { onMounted } from "vue";
 import {
-    trans,
-    BY_USER,
-    SEE,
-    WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS,
-    WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP,
-    WORKFLOW_ON_HOLD,
-    WORKFLOW_AT,
+  trans,
+  BY_USER,
+  SEE,
+  WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS,
+  WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP,
+  WORKFLOW_ON_HOLD,
+  WORKFLOW_AT,
 } from "translator";
 
 // props
 const props = defineProps({
-    workflows: {
-        type: Array,
-        required: true,
-    },
+  workflows: {
+    type: Array,
+    required: true,
+  },
 });
 
 // methods
 const goToUrl = (w) => `/fr/main/workflow/${w.id}/show`;
 const getPopTitle = (step) => {
-    if (step.transitionPrevious != null) {
-        //console.log(step.transitionPrevious.text);
-        let freezed = step.isFreezed
-            ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>`
-            : ``;
-        return `${freezed}${step.transitionPrevious.text}`;
-    }
+  if (step.transitionPrevious != null) {
+    //console.log(step.transitionPrevious.text);
+    let freezed = step.isFreezed
+      ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>`
+      : ``;
+    return `${freezed}${step.transitionPrevious.text}`;
+  }
 };
 const getPopContent = (step) => {
-    if (step.transitionPrevious != null) {
-        if (step.transitionPreviousBy !== null) {
-            return `<ul class="small_in_title">
+  if (step.transitionPrevious != null) {
+    if (step.transitionPreviousBy !== null) {
+      return `<ul class="small_in_title">
               <li><span class="item-key">${trans(BY_USER)} : </span><b>${step.transitionPreviousBy.text}</b></li>
               <li><span class="item-key">${trans(WORKFLOW_AT)} : </span><b>${formatDate(step.transitionPreviousAt.datetime)}</b></li>
               </ul>`;
-        } else {
-            return `<ul class="small_in_title">
+    } else {
+      return `<ul class="small_in_title">
                       <li><span class="item-key">${trans(WORKFLOW_AT)} : </span><b>${formatDate(step.transitionPreviousAt.datetime)}</b></li>
                   </ul>`;
-        }
     }
+  }
 };
 const formatDate = (datetime) =>
-    datetime.split("T")[0] + " " + datetime.split("T")[1].substring(0, 5);
+  datetime.split("T")[0] + " " + datetime.split("T")[1].substring(0, 5);
 const isUserSubscribedToStep = () => false;
 const isUserSubscribedToFinal = () => false;
 
 onMounted(() => {
-    const triggerList = [].slice.call(
-        document.querySelectorAll('[data-bs-toggle="popover"]'),
-    );
-    triggerList.map(function (el) {
-        return new Popover(el, {
-            html: true,
-        });
+  const triggerList = [].slice.call(
+    document.querySelectorAll('[data-bs-toggle="popover"]'),
+  );
+  triggerList.map(function (el) {
+    return new Popover(el, {
+      html: true,
     });
+  });
 });
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
index 59dcd80f4..658c0f9e9 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
@@ -1,49 +1,45 @@
 <template>
-    <Pick-workflow
-        :relatedEntityClass="props.relatedEntityClass"
-        :relatedEntityId="props.relatedEntityId"
-        :workflowsAvailables="props.workflowsAvailables"
-        :preventDefaultMoveToGenerate="props.preventDefaultMoveToGenerate"
-        :goToGenerateWorkflowPayload="props.goToGenerateWorkflowPayload"
-        :countExistingWorkflows="countWorkflows"
-        :embedded-within-list-modal="false"
-        @go-to-generate-workflow="goToGenerateWorkflow"
-        @click-open-list="openModal"
-    ></Pick-workflow>
+  <Pick-workflow
+    :relatedEntityClass="props.relatedEntityClass"
+    :relatedEntityId="props.relatedEntityId"
+    :workflowsAvailables="props.workflowsAvailables"
+    :preventDefaultMoveToGenerate="props.preventDefaultMoveToGenerate"
+    :goToGenerateWorkflowPayload="props.goToGenerateWorkflowPayload"
+    :countExistingWorkflows="countWorkflows"
+    :embedded-within-list-modal="false"
+    @go-to-generate-workflow="goToGenerateWorkflow"
+    @click-open-list="openModal"
+  ></Pick-workflow>
 
-    <teleport to="body">
-        <Modal
-            v-if="modal.showModal"
-            :modalDialogClass="modal.modalDialogClass"
-            @close="modal.showModal = false"
-        >
-            <template v-slot:header>
-                <h2 class="modal-title">{{ trans(WORKFLOW_LIST) }}</h2>
-            </template>
+  <teleport to="body">
+    <Modal
+      v-if="modal.showModal"
+      :modalDialogClass="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template v-slot:header>
+        <h2 class="modal-title">{{ trans(WORKFLOW_LIST) }}</h2>
+      </template>
 
-            <template v-slot:body>
-                <list-workflow-vue :workflows="workflows"></list-workflow-vue>
-            </template>
+      <template v-slot:body>
+        <list-workflow-vue :workflows="workflows"></list-workflow-vue>
+      </template>
 
-            <template v-slot:footer>
-                <pick-workflow
-                    v-if="allowCreate"
-                    :relatedEntityClass="props.relatedEntityClass"
-                    :relatedEntityId="props.relatedEntityId"
-                    :workflowsAvailables="props.workflowsAvailables"
-                    :preventDefaultMoveToGenerate="
-                        props.preventDefaultMoveToGenerate
-                    "
-                    :goToGenerateWorkflowPayload="
-                        props.goToGenerateWorkflowPayload
-                    "
-                    :countExistingWorkflows="countWorkflows"
-                    :embedded-within-list-modal="true"
-                    @go-to-generate-workflow="goToGenerateWorkflow"
-                ></pick-workflow>
-            </template>
-        </Modal>
-    </teleport>
+      <template v-slot:footer>
+        <pick-workflow
+          v-if="allowCreate"
+          :relatedEntityClass="props.relatedEntityClass"
+          :relatedEntityId="props.relatedEntityId"
+          :workflowsAvailables="props.workflowsAvailables"
+          :preventDefaultMoveToGenerate="props.preventDefaultMoveToGenerate"
+          :goToGenerateWorkflowPayload="props.goToGenerateWorkflowPayload"
+          :countExistingWorkflows="countWorkflows"
+          :embedded-within-list-modal="true"
+          @go-to-generate-workflow="goToGenerateWorkflow"
+        ></pick-workflow>
+      </template>
+    </Modal>
+  </teleport>
 </template>
 
 <script setup>
@@ -55,35 +51,35 @@ import { trans, WORKFLOW_LIST } from "translator";
 
 // Define props
 const props = defineProps({
-    workflows: {
-        type: Array,
-        required: true,
-    },
-    allowCreate: {
-        type: Boolean,
-        required: true,
-    },
-    relatedEntityClass: {
-        type: String,
-        required: true,
-    },
-    relatedEntityId: {
-        type: Number,
-        required: false,
-    },
-    workflowsAvailables: {
-        type: Array,
-        required: true,
-    },
-    preventDefaultMoveToGenerate: {
-        type: Boolean,
-        required: false,
-        default: false,
-    },
-    goToGenerateWorkflowPayload: {
-        required: false,
-        default: () => ({}),
-    },
+  workflows: {
+    type: Array,
+    required: true,
+  },
+  allowCreate: {
+    type: Boolean,
+    required: true,
+  },
+  relatedEntityClass: {
+    type: String,
+    required: true,
+  },
+  relatedEntityId: {
+    type: Number,
+    required: false,
+  },
+  workflowsAvailables: {
+    type: Array,
+    required: true,
+  },
+  preventDefaultMoveToGenerate: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  goToGenerateWorkflowPayload: {
+    required: false,
+    default: () => ({}),
+  },
 });
 
 // Define emits
@@ -91,8 +87,8 @@ const emit = defineEmits(["goToGenerateWorkflow"]);
 
 // Reactive data
 const modal = ref({
-    showModal: false,
-    modalDialogClass: "modal-dialog-scrollable modal-xl",
+  showModal: false,
+  modalDialogClass: "modal-dialog-scrollable modal-xl",
 });
 
 // Computed properties
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
index f82a6fd33..7f26ab40b 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
@@ -1,89 +1,82 @@
 <template>
-    <template v-if="props.workflowsAvailables.length >= 1">
-        <div
-            v-if="countExistingWorkflows == 0 || embeddedWithinListModal"
-            class="dropdown d-grid gap-2"
+  <template v-if="props.workflowsAvailables.length >= 1">
+    <div
+      v-if="countExistingWorkflows == 0 || embeddedWithinListModal"
+      class="dropdown d-grid gap-2"
+    >
+      <button
+        class="btn btn-primary dropdown-toggle"
+        type="button"
+        id="createWorkflowButton"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        Créer un workflow
+      </button>
+      <ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
+        <li v-for="w in props.workflowsAvailables" :key="w.name">
+          <button
+            class="dropdown-item"
+            type="button"
+            @click.prevent="goToGenerateWorkflow($event, w.name)"
+          >
+            {{ w.text }}
+          </button>
+        </li>
+      </ul>
+    </div>
+    <div v-else>
+      <div class="btn-group">
+        <button @click="emit('clickOpenList')" class="btn btn-primary">
+          <template v-if="countExistingWorkflows === 1">
+            1 workflow associé
+          </template>
+          <template v-else>
+            {{ countExistingWorkflows }} workflows associés
+          </template>
+        </button>
+        <button
+          class="btn btn-primary dropdown-toggle dropdown-toggle-split"
+          type="button"
+          id="createWorkflowButton"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
         >
+          <span class="visually-hidden">Liste des workflows disponibles</span>
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
+          <li v-for="w in props.workflowsAvailables" :key="w.name">
             <button
-                class="btn btn-primary dropdown-toggle"
-                type="button"
-                id="createWorkflowButton"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
+              class="dropdown-item"
+              type="button"
+              @click.prevent="goToGenerateWorkflow($event, w.name)"
             >
-                Créer un workflow
+              {{ w.text }}
             </button>
-            <ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
-                <li v-for="w in props.workflowsAvailables" :key="w.name">
-                    <button
-                        class="dropdown-item"
-                        type="button"
-                        @click.prevent="goToGenerateWorkflow($event, w.name)"
-                    >
-                        {{ w.text }}
-                    </button>
-                </li>
-            </ul>
-        </div>
-        <div v-else>
-            <div class="btn-group">
-                <button @click="emit('clickOpenList')" class="btn btn-primary">
-                    <template v-if="countExistingWorkflows === 1">
-                        1 workflow associé
-                    </template>
-                    <template v-else>
-                        {{ countExistingWorkflows }} workflows associés
-                    </template>
-                </button>
-                <button
-                    class="btn btn-primary dropdown-toggle dropdown-toggle-split"
-                    type="button"
-                    id="createWorkflowButton"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                >
-                    <span class="visually-hidden"
-                        >Liste des workflows disponibles</span
-                    >
-                </button>
-                <ul
-                    class="dropdown-menu"
-                    aria-labelledby="createWorkflowButton"
-                >
-                    <li v-for="w in props.workflowsAvailables" :key="w.name">
-                        <button
-                            class="dropdown-item"
-                            type="button"
-                            @click.prevent="
-                                goToGenerateWorkflow($event, w.name)
-                            "
-                        >
-                            {{ w.text }}
-                        </button>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </template>
-    <template v-else>
-        <div v-if="countExistingWorkflows > 0" class="dropdown d-grid gap-2">
-            <button
-                @click="emit('clickOpenList')"
-                class="btn btn-primary"
-                type="button"
-                id="createWorkflowButton"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-            >
-                <template v-if="countExistingWorkflows === 1">
-                    1 workflow associé
-                </template>
-                <template v-else>
-                    {{ countExistingWorkflows }} workflows associés
-                </template>
-            </button>
-        </div>
-    </template>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </template>
+  <template v-else>
+    <div v-if="countExistingWorkflows > 0" class="dropdown d-grid gap-2">
+      <button
+        @click="emit('clickOpenList')"
+        class="btn btn-primary"
+        type="button"
+        id="createWorkflowButton"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <template v-if="countExistingWorkflows === 1">
+          1 workflow associé
+        </template>
+        <template v-else>
+          {{ countExistingWorkflows }} workflows associés
+        </template>
+      </button>
+    </div>
+  </template>
 </template>
 
 <script setup lang="ts">
@@ -91,85 +84,85 @@ import { buildLinkCreate } from "../../../lib/entity-workflow/api";
 import { WorkflowAvailable } from "../../../types";
 
 interface PickWorkflowConfig {
-    relatedEntityClass: string;
-    /**
-     * Represents the identifier of a related entity.
-     * This variable can store either a numerical value representing the entity's ID or an undefined value
-     * if the related entity is not specified or available, for instance when the entity is created within
-     * the interface and the id will be available later
-     */
-    relatedEntityId: number | undefined;
-    workflowsAvailables: WorkflowAvailable[];
-    preventDefaultMoveToGenerate: boolean;
-    goToGenerateWorkflowPayload: object;
-    countExistingWorkflows: number;
-    /**
-     * if true, this button will not present a splitted button
-     */
-    embeddedWithinListModal: boolean;
+  relatedEntityClass: string;
+  /**
+   * Represents the identifier of a related entity.
+   * This variable can store either a numerical value representing the entity's ID or an undefined value
+   * if the related entity is not specified or available, for instance when the entity is created within
+   * the interface and the id will be available later
+   */
+  relatedEntityId: number | undefined;
+  workflowsAvailables: WorkflowAvailable[];
+  preventDefaultMoveToGenerate: boolean;
+  goToGenerateWorkflowPayload: object;
+  countExistingWorkflows: number;
+  /**
+   * if true, this button will not present a splitted button
+   */
+  embeddedWithinListModal: boolean;
 }
 
 const props = withDefaults(defineProps<PickWorkflowConfig>(), {
-    preventDefaultMoveToGenerate: false,
-    goToGenerateWorkflowPayload: {},
-    allowCreateWorkflow: false,
+  preventDefaultMoveToGenerate: false,
+  goToGenerateWorkflowPayload: {},
+  allowCreateWorkflow: false,
 });
 
 const emit = defineEmits<{
-    (
-        e: "goToGenerateWorkflow",
-        {
-            event: MouseEvent,
-            workflowName: string,
-            isLinkValid: boolean,
-            link: string,
-            payload: object,
-        },
-    ): void;
-    (e: "clickOpenList"): void;
+  (
+    e: "goToGenerateWorkflow",
+    {
+      event: MouseEvent,
+      workflowName: string,
+      isLinkValid: boolean,
+      link: string,
+      payload: object,
+    },
+  ): void;
+  (e: "clickOpenList"): void;
 }>();
 
 const makeLink = (workflowName: string): string =>
-    buildLinkCreate(
-        workflowName,
-        props.relatedEntityClass,
-        props.relatedEntityId,
-    );
+  buildLinkCreate(
+    workflowName,
+    props.relatedEntityClass,
+    props.relatedEntityId,
+  );
 
 const goToGenerateWorkflow = (
-    event: MouseEvent,
-    workflowName: string,
+  event: MouseEvent,
+  workflowName: string,
 ): void => {
-    console.log("goToGenerateWorkflow", event, workflowName);
-    let link = "";
-    let isLinkValid = false;
+  console.log("goToGenerateWorkflow", event, workflowName);
+  let link = "";
+  let isLinkValid = false;
 
-    try {
-        link = makeLink(workflowName);
-        isLinkValid = true;
-    } catch (e) {
-        console.info(
-            "could not generate link to create workflow, maybe the relatedEntityId is not yet known",
-            e,
-        );
-    }
+  try {
+    link = makeLink(workflowName);
+    isLinkValid = true;
+  } catch (e) {
+    console.info(
+      "could not generate link to create workflow, maybe the relatedEntityId is not yet known",
+      e,
+    );
+  }
 
-    if (!props.preventDefaultMoveToGenerate) {
-        window.location.assign(link);
-    }
+  if (!props.preventDefaultMoveToGenerate) {
+    window.location.assign(link);
+  }
 
-    emit("goToGenerateWorkflow", {
-        event,
-        workflowName,
-        link,
-        isLinkValid,
-        payload: props.goToGenerateWorkflowPayload,
-    });
+  emit("goToGenerateWorkflow", {
+    event,
+    workflowName,
+    link,
+    isLinkValid,
+    payload: props.goToGenerateWorkflowPayload,
+  });
 };
 
 const goToDuplicateRelatedEntity = (
-    event: MouseEvent,
-    workflowName: string,
+  event: MouseEvent,
+  workflowName: string,
 ): void => {};
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
index 9350fc897..4808e2bda 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
@@ -1,42 +1,39 @@
 <template>
-    <transition name="modal">
-        <div class="modal-mask" v-if="show">
-            <!-- :: styles bootstrap :: -->
-            <div
-                class="modal fade show"
-                style="display: block"
-                aria-modal="true"
-                role="dialog"
-            >
-                <div class="modal-dialog" :class="modalDialogClass || {}">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <slot name="header"></slot>
-                            <button class="close btn" @click="emits('close')">
-                                <i class="fa fa-times" aria-hidden="true"></i>
-                            </button>
-                        </div>
-                        <div class="modal-body">
-                            <div class="body-head">
-                                <slot name="body-head"></slot>
-                            </div>
-                            <slot name="body"></slot>
-                        </div>
-                        <div class="modal-footer" v-if="!hideFooter">
-                            <button
-                                class="btn btn-cancel"
-                                @click="emits('close')"
-                            >
-                                {{ trans(MODAL_ACTION_CLOSE) }}
-                            </button>
-                            <slot name="footer"></slot>
-                        </div>
-                    </div>
-                </div>
+  <transition name="modal">
+    <div class="modal-mask" v-if="show">
+      <!-- :: styles bootstrap :: -->
+      <div
+        class="modal fade show"
+        style="display: block"
+        aria-modal="true"
+        role="dialog"
+      >
+        <div class="modal-dialog" :class="modalDialogClass || {}">
+          <div class="modal-content">
+            <div class="modal-header">
+              <slot name="header"></slot>
+              <button class="close btn" @click="emits('close')">
+                <i class="fa fa-times" aria-hidden="true"></i>
+              </button>
             </div>
-            <!-- :: end styles bootstrap :: -->
+            <div class="modal-body">
+              <div class="body-head">
+                <slot name="body-head"></slot>
+              </div>
+              <slot name="body"></slot>
+            </div>
+            <div class="modal-footer" v-if="!hideFooter">
+              <button class="btn btn-cancel" @click="emits('close')">
+                {{ trans(MODAL_ACTION_CLOSE) }}
+              </button>
+              <slot name="footer"></slot>
+            </div>
+          </div>
         </div>
-    </transition>
+      </div>
+      <!-- :: end styles bootstrap :: -->
+    </div>
+  </transition>
 </template>
 
 <script lang="ts" setup>
@@ -53,27 +50,27 @@ import { trans, MODAL_ACTION_CLOSE } from "translator";
 import { defineProps } from "vue";
 
 export interface ModalProps {
-    modalDialogClass: string;
-    hideFooter: boolean;
+  modalDialogClass: string;
+  hideFooter: boolean;
 }
 
 defineProps({
-    modalDialogClass: {
-        type: String,
-        default: "",
-    },
-    hideFooter: {
-        type: Boolean,
-        default: false,
-    },
-    show: {
-        type: Boolean,
-        default: true,
-    },
+  modalDialogClass: {
+    type: String,
+    default: "",
+  },
+  hideFooter: {
+    type: Boolean,
+    default: false,
+  },
+  show: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emits = defineEmits<{
-    close: [];
+  close: [];
 }>();
 </script>
 
@@ -82,17 +79,17 @@ const emits = defineEmits<{
     * This is a mask behind the modal.
     */
 .modal-mask {
-    position: fixed;
-    z-index: 9998;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.75);
-    transition: opacity 0.3s ease;
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.75);
+  transition: opacity 0.3s ease;
 }
 .modal-header .close {
-    border-top-right-radius: 0.3rem;
+  border-top-right-radius: 0.3rem;
 }
 /*
    * The following styles are auto-applied to elements with
@@ -103,23 +100,23 @@ const emits = defineEmits<{
    * these styles.
    */
 .modal-enter {
-    opacity: 0;
+  opacity: 0;
 }
 .modal-leave-active {
-    opacity: 0;
+  opacity: 0;
 }
 .modal-enter .modal-container,
 .modal-leave-active .modal-container {
-    -webkit-transform: scale(1.1);
-    transform: scale(1.1);
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
 }
 h3.modal-title {
-    font-size: 1.5rem;
-    font-weight: bold;
+  font-size: 1.5rem;
+  font-weight: bold;
 }
 div.modal-footer {
-    button:first-child {
-        margin-right: auto;
-    }
+  button:first-child {
+    margin-right: auto;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadAllToggle.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadAllToggle.vue
index 57f7fd7f8..bb7a43c92 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadAllToggle.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadAllToggle.vue
@@ -1,17 +1,17 @@
 <template>
-    <div>
-        <button
-            v-if="idsMarkedAsRead.length === 0"
-            class="btn btn-primary"
-            type="button"
-            @click="markAllRead"
-        >
-            <i class="fa fa-sm fa-envelope-open-o"></i> Marquer tout comme lu
-        </button>
-        <button v-else class="btn btn-primary" type="button" @click="undo">
-            <i class="fa fa-sm fa-envelope-open-o"></i> Annuler
-        </button>
-    </div>
+  <div>
+    <button
+      v-if="idsMarkedAsRead.length === 0"
+      class="btn btn-primary"
+      type="button"
+      @click="markAllRead"
+    >
+      <i class="fa fa-sm fa-envelope-open-o"></i> Marquer tout comme lu
+    </button>
+    <button v-else class="btn btn-primary" type="button" @click="undo">
+      <i class="fa fa-sm fa-envelope-open-o"></i> Annuler
+    </button>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -19,36 +19,36 @@ import { makeFetch } from "../../../lib/api/apiMethods";
 import { ref } from "vue";
 
 const emit = defineEmits<{
-    (e: "markAsRead", id: number): void;
-    (e: "markAsUnRead", id: number): void;
+  (e: "markAsRead", id: number): void;
+  (e: "markAsUnRead", id: number): void;
 }>();
 
 const idsMarkedAsRead = ref([] as number[]);
 
 async function markAllRead() {
-    const ids: number[] = await makeFetch(
-        "POST",
-        `/api/1.0/main/notification/mark/allread`,
-        null,
-    );
-    for (let i of ids) {
-        idsMarkedAsRead.value.push(i);
-        emit("markAsRead", i);
-    }
+  const ids: number[] = await makeFetch(
+    "POST",
+    `/api/1.0/main/notification/mark/allread`,
+    null,
+  );
+  for (let i of ids) {
+    idsMarkedAsRead.value.push(i);
+    emit("markAsRead", i);
+  }
 }
 
 async function undo() {
-    const touched: number[] = await makeFetch(
-        "POST",
-        `/api/1.0/main/notification/mark/undoallread`,
-        idsMarkedAsRead.value,
-    );
-    while (idsMarkedAsRead.value.length > 0) {
-        idsMarkedAsRead.value.pop();
-    }
-    for (let t of touched) {
-        emit("markAsUnRead", t);
-    }
+  const touched: number[] = await makeFetch(
+    "POST",
+    `/api/1.0/main/notification/mark/undoallread`,
+    idsMarkedAsRead.value,
+  );
+  while (idsMarkedAsRead.value.length > 0) {
+    idsMarkedAsRead.value.pop();
+  }
+  for (let t of touched) {
+    emit("markAsUnRead", t);
+  }
 }
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
index cc64d4835..fb94af80f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
@@ -1,96 +1,96 @@
 <template>
-    <div
-        :class="{ 'btn-group btn-group-sm float-end': isButtonGroup }"
-        role="group"
-        aria-label="Notification actions"
+  <div
+    :class="{ 'btn-group btn-group-sm float-end': isButtonGroup }"
+    role="group"
+    aria-label="Notification actions"
+  >
+    <button
+      v-if="isRead"
+      class="btn"
+      :class="overrideClass"
+      type="button"
+      :title="trans(NOTIFICATION_MARK_AS_UNREAD)"
+      @click="markAsUnread"
     >
-        <button
-            v-if="isRead"
-            class="btn"
-            :class="overrideClass"
-            type="button"
-            :title="trans(NOTIFICATION_MARK_AS_UNREAD)"
-            @click="markAsUnread"
-        >
-            <i class="fa fa-sm fa-envelope-o"></i>
-            <span v-if="!props.buttonNoText" class="ps-2">
-                {{ trans(NOTIFICATION_MARK_AS_UNREAD) }}
-            </span>
-        </button>
+      <i class="fa fa-sm fa-envelope-o"></i>
+      <span v-if="!props.buttonNoText" class="ps-2">
+        {{ trans(NOTIFICATION_MARK_AS_UNREAD) }}
+      </span>
+    </button>
 
-        <button
-            v-if="!isRead"
-            class="btn"
-            :class="overrideClass"
-            type="button"
-            :title="trans(NOTIFICATION_MARK_AS_READ)"
-            @click="markAsRead"
-        >
-            <i class="fa fa-sm fa-envelope-open-o"></i>
-            <span v-if="!buttonNoText" class="ps-2">
-                {{ trans(NOTIFICATION_MARK_AS_READ) }}
-            </span>
-        </button>
+    <button
+      v-if="!isRead"
+      class="btn"
+      :class="overrideClass"
+      type="button"
+      :title="trans(NOTIFICATION_MARK_AS_READ)"
+      @click="markAsRead"
+    >
+      <i class="fa fa-sm fa-envelope-open-o"></i>
+      <span v-if="!buttonNoText" class="ps-2">
+        {{ trans(NOTIFICATION_MARK_AS_READ) }}
+      </span>
+    </button>
 
-        <a
-            v-if="isButtonGroup"
-            type="button"
-            class="btn btn-outline-primary"
-            :href="showUrl"
-            :title="trans(SEE)"
-        >
-            <i class="fa fa-sm fa-comment-o"></i>
-        </a>
+    <a
+      v-if="isButtonGroup"
+      type="button"
+      class="btn btn-outline-primary"
+      :href="showUrl"
+      :title="trans(SEE)"
+    >
+      <i class="fa fa-sm fa-comment-o"></i>
+    </a>
 
-        <!-- "Mark All Read" button -->
-        <button
-            v-if="showMarkAllButton"
-            class="btn"
-            :class="overrideClass"
-            type="button"
-            :title="$t('markAllRead')"
-            @click="markAllRead"
-        >
-            <i class="fa fa-sm fa-envelope-o"></i>
-            <span v-if="!buttonNoText" class="ps-2">
-                {{ $t("markAllRead") }}
-            </span>
-        </button>
-    </div>
+    <!-- "Mark All Read" button -->
+    <button
+      v-if="showMarkAllButton"
+      class="btn"
+      :class="overrideClass"
+      type="button"
+      :title="$t('markAllRead')"
+      @click="markAllRead"
+    >
+      <i class="fa fa-sm fa-envelope-o"></i>
+      <span v-if="!buttonNoText" class="ps-2">
+        {{ $t("markAllRead") }}
+      </span>
+    </button>
+  </div>
 </template>
 
 <script setup>
 import { computed } from "vue";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
 import {
-    trans,
-    NOTIFICATION_MARK_AS_READ,
-    NOTIFICATION_MARK_AS_UNREAD,
-    SEE,
+  trans,
+  NOTIFICATION_MARK_AS_READ,
+  NOTIFICATION_MARK_AS_UNREAD,
+  SEE,
 } from "translator";
 
 // Props
 const props = defineProps({
-    isRead: {
-        type: Boolean,
-        required: true,
-    },
-    notificationId: {
-        type: Number,
-        required: true,
-    },
-    buttonClass: {
-        type: String,
-        required: false,
-    },
-    buttonNoText: {
-        type: Boolean,
-        required: false,
-    },
-    showUrl: {
-        type: String,
-        required: false,
-    },
+  isRead: {
+    type: Boolean,
+    required: true,
+  },
+  notificationId: {
+    type: Number,
+    required: true,
+  },
+  buttonClass: {
+    type: String,
+    required: false,
+  },
+  buttonNoText: {
+    type: Boolean,
+    required: false,
+  },
+  showUrl: {
+    type: String,
+    required: false,
+  },
 });
 
 // Emits
@@ -102,23 +102,23 @@ const isButtonGroup = computed(() => props.showUrl);
 
 // Methods
 const markAsUnread = () => {
-    makeFetch(
-        "POST",
-        `/api/1.0/main/notification/${props.notificationId}/mark/unread`,
-        [],
-    ).then(() => {
-        emit("markRead", { notificationId: props.notificationId });
-    });
+  makeFetch(
+    "POST",
+    `/api/1.0/main/notification/${props.notificationId}/mark/unread`,
+    [],
+  ).then(() => {
+    emit("markRead", { notificationId: props.notificationId });
+  });
 };
 
 const markAsRead = () => {
-    makeFetch(
-        "POST",
-        `/api/1.0/main/notification/${props.notificationId}/mark/read`,
-        [],
-    ).then(() => {
-        emit("markUnread", { notificationId: props.notificationId });
-    });
+  makeFetch(
+    "POST",
+    `/api/1.0/main/notification/${props.notificationId}/mark/read`,
+    [],
+  ).then(() => {
+    emit("markUnread", { notificationId: props.notificationId });
+  });
 };
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
index db9a37104..cbee6bf25 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
@@ -2,87 +2,86 @@ import { createI18n } from "vue-i18n";
 import datetimeFormats from "../i18n/datetimeFormats";
 
 const messages = {
-    fr: {
-        action: {
-            actions: "Actions",
-            show: "Voir",
-            edit: "Modifier",
-            create: "Créer",
-            remove: "Enlever",
-            delete: "Supprimer",
-            save: "Enregistrer",
-            valid: "Valider",
-            valid_and_see: "Valider et voir",
-            add: "Ajouter",
-            show_modal: "Ouvrir une modale",
-            ok: "OK",
-            cancel: "Annuler",
-            close: "Fermer",
-            back: "Retour",
-            check_all: "cocher tout",
-            reset: "réinitialiser",
-            redirect: {
-                person: "Quitter la page et ouvrir la fiche de l'usager",
-                thirdparty: "Quitter la page et voir le tiers",
-            },
-            refresh: "Rafraîchir",
-            addContact: "Ajouter un contact",
-        },
-        nav: {
-            next: "Suivant",
-            previous: "Précédent",
-            top: "Haut",
-            bottom: "Bas",
-        },
-        renderbox: {
-            person: "Usager",
-            birthday: {
-                man: "Né le",
-                woman: "Née le",
-                neutral: "Né·e le",
-                unknown: "Né·e le",
-            },
-            deathdate: "Date de décès",
-            household_without_address: "Le ménage de l'usager est sans adresse",
-            no_data: "Aucune information renseignée",
-            type: {
-                thirdparty: "Tiers",
-                person: "Usager",
-            },
-            holder: "Titulaire",
-            years_old: "1 an | {n} an | {n} ans",
-            residential_address: "Adresse de résidence",
-            located_at: "réside chez",
-        },
+  fr: {
+    action: {
+      actions: "Actions",
+      show: "Voir",
+      edit: "Modifier",
+      create: "Créer",
+      remove: "Enlever",
+      delete: "Supprimer",
+      save: "Enregistrer",
+      valid: "Valider",
+      valid_and_see: "Valider et voir",
+      add: "Ajouter",
+      show_modal: "Ouvrir une modale",
+      ok: "OK",
+      cancel: "Annuler",
+      close: "Fermer",
+      back: "Retour",
+      check_all: "cocher tout",
+      reset: "réinitialiser",
+      redirect: {
+        person: "Quitter la page et ouvrir la fiche de l'usager",
+        thirdparty: "Quitter la page et voir le tiers",
+      },
+      refresh: "Rafraîchir",
+      addContact: "Ajouter un contact",
     },
+    nav: {
+      next: "Suivant",
+      previous: "Précédent",
+      top: "Haut",
+      bottom: "Bas",
+    },
+    renderbox: {
+      person: "Usager",
+      birthday: {
+        man: "Né le",
+        woman: "Née le",
+        neutral: "Né·e le",
+        unknown: "Né·e le",
+      },
+      deathdate: "Date de décès",
+      household_without_address: "Le ménage de l'usager est sans adresse",
+      no_data: "Aucune information renseignée",
+      type: {
+        thirdparty: "Tiers",
+        person: "Usager",
+      },
+      holder: "Titulaire",
+      years_old: "1 an | {n} an | {n} ans",
+      residential_address: "Adresse de résidence",
+      located_at: "réside chez",
+    },
+  },
 };
 
 const _createI18n = (appMessages: any, legacy?: boolean) => {
-    Object.assign(messages.fr, appMessages.fr);
-    return createI18n({
-        legacy: typeof legacy === undefined ? true : legacy,
-        locale: "fr",
-        fallbackLocale: "fr",
-        // @ts-ignore
-        datetimeFormats,
-        messages,
-    });
+  Object.assign(messages.fr, appMessages.fr);
+  return createI18n({
+    legacy: typeof legacy === undefined ? true : legacy,
+    locale: "fr",
+    fallbackLocale: "fr",
+    // @ts-ignore
+    datetimeFormats,
+    messages,
+  });
 };
 
 export { _createI18n };
 
 export const multiSelectMessages = {
-    fr: {
-        multiselect: {
-            placeholder: "Choisir",
-            tag_placeholder: "Créer un nouvel élément",
-            select_label: '"Entrée" ou cliquez pour sélectionner',
-            deselect_label: '"Entrée" ou cliquez pour désélectionner',
-            select_group_label:
-                'Appuyer sur "Entrée" pour sélectionner ce groupe',
-            deselect_group_label:
-                'Appuyer sur "Entrée" pour désélectionner ce groupe',
-            selected_label: "Sélectionné",
-        },
+  fr: {
+    multiselect: {
+      placeholder: "Choisir",
+      tag_placeholder: "Créer un nouvel élément",
+      select_label: '"Entrée" ou cliquez pour sélectionner',
+      deselect_label: '"Entrée" ou cliquez pour désélectionner',
+      select_group_label: 'Appuyer sur "Entrée" pour sélectionner ce groupe',
+      deselect_group_label:
+        'Appuyer sur "Entrée" pour désélectionner ce groupe',
+      selected_label: "Sélectionné",
     },
+  },
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.ts b/src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.ts
index fe20cb217..aca1328ac 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.ts
@@ -1,27 +1,27 @@
 export default {
-    fr: {
-        short: {
-            year: "numeric",
-            month: "numeric",
-            day: "numeric",
-        },
-        text: {
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-        },
-        long: {
-            year: "numeric",
-            month: "numeric",
-            day: "numeric",
-            hour: "numeric",
-            minute: "numeric",
-            hour12: false,
-        },
-        hoursOnly: {
-            hour: "numeric",
-            minute: "numeric",
-            hour12: false,
-        },
+  fr: {
+    short: {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
     },
+    text: {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    },
+    long: {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: false,
+    },
+    hoursOnly: {
+      hour: "numeric",
+      minute: "numeric",
+      hour12: false,
+    },
+  },
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/mod/DuplicateSelector/AccompanyingPeriodWorkSelector.ts b/src/Bundle/ChillPersonBundle/Resources/public/mod/DuplicateSelector/AccompanyingPeriodWorkSelector.ts
index 8f117d6ef..6ceb64b98 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/mod/DuplicateSelector/AccompanyingPeriodWorkSelector.ts
+++ b/src/Bundle/ChillPersonBundle/Resources/public/mod/DuplicateSelector/AccompanyingPeriodWorkSelector.ts
@@ -3,49 +3,47 @@ import AccompanyingPeriodWorkSelectorModal from "../../vuejs/_components/Accompa
 import { AccompanyingPeriodWork } from "../../types";
 
 document.addEventListener("DOMContentLoaded", () => {
-    const elements = document.querySelectorAll<HTMLDivElement>(
-        'div[data-pick-entities-type="acpw"]',
+  const elements = document.querySelectorAll<HTMLDivElement>(
+    'div[data-pick-entities-type="acpw"]',
+  );
+  elements.forEach((el) => {
+    const uniqid = el.dataset.inputUniqid;
+
+    if (undefined === uniqid) {
+      throw "Uniqid not found on this element";
+    }
+
+    const input = document.querySelector<HTMLInputElement>(
+      `input[data-input-uniqid="${uniqid}"]`,
     );
-    elements.forEach((el) => {
-        const uniqid = el.dataset.inputUniqid;
 
-        if (undefined === uniqid) {
-            throw "Uniqid not found on this element";
-        }
+    if (null === input) {
+      throw "Element with uniqid not found: " + uniqid;
+    }
 
-        const input = document.querySelector<HTMLInputElement>(
-            `input[data-input-uniqid="${uniqid}"]`,
-        );
+    const accompanyingPeriodIdAsString = input.dataset.accompanyingPeriodId;
 
-        if (null === input) {
-            throw "Element with uniqid not found: " + uniqid;
-        }
+    if (undefined === accompanyingPeriodIdAsString) {
+      throw "accompanying period id not found";
+    }
 
-        const accompanyingPeriodIdAsString = input.dataset.accompanyingPeriodId;
+    const accompanyingPeriodId = Number.parseInt(accompanyingPeriodIdAsString);
 
-        if (undefined === accompanyingPeriodIdAsString) {
-            throw "accompanying period id not found";
-        }
-
-        const accompanyingPeriodId = Number.parseInt(
-            accompanyingPeriodIdAsString,
-        );
-
-        const app = createApp({
-            template:
-                '<accompanying-period-work-selector-modal :accompanying-period-id="accompanyingPeriodId" @pickWork="pickWork"></accompanying-period-work-selector-modal>',
-            components: { AccompanyingPeriodWorkSelectorModal },
-            data() {
-                return { accompanyingPeriodId };
-            },
-            methods: {
-                pickWork: function (payload: { work: AccompanyingPeriodWork }) {
-                    console.log("payload", payload);
-                    input.value = payload.work.id.toString();
-                },
-            },
-        });
-
-        app.mount(el);
+    const app = createApp({
+      template:
+        '<accompanying-period-work-selector-modal :accompanying-period-id="accompanyingPeriodId" @pickWork="pickWork"></accompanying-period-work-selector-modal>',
+      components: { AccompanyingPeriodWorkSelectorModal },
+      data() {
+        return { accompanyingPeriodId };
+      },
+      methods: {
+        pickWork: function (payload: { work: AccompanyingPeriodWork }) {
+          console.log("payload", payload);
+          input.value = payload.work.id.toString();
+        },
+      },
     });
+
+    app.mount(el);
+  });
 });
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 85f031a64..e81949711 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -1,28 +1,28 @@
 <template>
-    <banner />
-    <sticky-nav />
+  <banner />
+  <sticky-nav />
 
-    <h1 v-if="accompanyingCourse.step === 'DRAFT'">
-        {{ $t("course.title.draft") }}
-    </h1>
-    <h1 v-else>
-        {{ $t("course.title.active") }}
-    </h1>
+  <h1 v-if="accompanyingCourse.step === 'DRAFT'">
+    {{ $t("course.title.draft") }}
+  </h1>
+  <h1 v-else>
+    {{ $t("course.title.active") }}
+  </h1>
 
-    <persons-associated />
-    <course-location />
-    <origin-demand />
-    <admin-location />
-    <requestor :is-anonymous="accompanyingCourse.requestorAnonymous" />
-    <social-issue />
-    <scopes />
-    <referrer />
-    <resources />
-    <start-date v-if="accompanyingCourse.step.startsWith('CONFIRMED')" />
-    <comment v-if="accompanyingCourse.step === 'DRAFT'" />
-    <confirm v-if="accompanyingCourse.step === 'DRAFT'" />
+  <persons-associated />
+  <course-location />
+  <origin-demand />
+  <admin-location />
+  <requestor :is-anonymous="accompanyingCourse.requestorAnonymous" />
+  <social-issue />
+  <scopes />
+  <referrer />
+  <resources />
+  <start-date v-if="accompanyingCourse.step.startsWith('CONFIRMED')" />
+  <comment v-if="accompanyingCourse.step === 'DRAFT'" />
+  <confirm v-if="accompanyingCourse.step === 'DRAFT'" />
 
-    <!-- <div v-for="error in errorMsg" v-bind:key="error.id" class="vue-component errors alert alert-danger">
+  <!-- <div v-for="error in errorMsg" v-bind:key="error.id" class="vue-component errors alert alert-danger">
        <p>
           <span>{{ error.sta }} {{ error.txt }}</span><br>
           <span>{{ $t(error.msg) }}</span>
@@ -47,26 +47,26 @@ import Confirm from "./components/Confirm.vue";
 import StartDate from "./components/StartDate.vue";
 
 export default {
-    name: "App",
-    components: {
-        Banner,
-        StickyNav,
-        OriginDemand,
-        AdminLocation,
-        PersonsAssociated,
-        Requestor,
-        SocialIssue,
-        CourseLocation,
-        Scopes,
-        Referrer,
-        Resources,
-        Comment,
-        Confirm,
-        StartDate,
-    },
-    computed: {
-        ...mapState(["accompanyingCourse", "addressContext"]),
-    },
+  name: "App",
+  components: {
+    Banner,
+    StickyNav,
+    OriginDemand,
+    AdminLocation,
+    PersonsAssociated,
+    Requestor,
+    SocialIssue,
+    CourseLocation,
+    Scopes,
+    Referrer,
+    Resources,
+    Comment,
+    Confirm,
+    StartDate,
+  },
+  computed: {
+    ...mapState(["accompanyingCourse", "addressContext"]),
+  },
 };
 </script>
 
@@ -75,62 +75,62 @@ export default {
 $chill-accourse-context: #718596;
 
 div#accompanying-course {
-    div.vue-component {
-        h2 {
-            margin: 1em 0.7em;
-            position: relative;
-            &:before {
-                position: absolute;
-                content: "\f142"; //ellipsis-v
-                font-family: "ForkAwesome";
-                color: tint-color($chill-accourse-context, 10%);
-                left: -22px;
-                top: 4px;
-            }
-            a[id^="section"] {
-                position: absolute;
-                top: -2.5em; // reference for stickNav
-            }
-        }
-        padding: 0em 0em;
-        margin: 1em 0;
-        border-radius: 5px;
-        border: 1px dotted tint-color($chill-accourse-context, 10%);
-        border-left: 1px dotted tint-color($chill-accourse-context, 10%);
-        border-right: 1px dotted tint-color($chill-accourse-context, 10%);
-        dd {
-            margin-left: 1em;
-        }
-        & > div {
-            margin: 1em 3em 0;
-
-            &.flex-table,
-            &.flex-bloc {
-                margin: 1em 0 0;
-            }
-            &.alert.to-confirm {
-                margin: 1em 0 0;
-                padding: 1em 3em;
-            }
-        }
-
-        div.flex-table {
-            div.item-row {
-                div.item-col:first-child {
-                    flex-basis: 33%;
-                }
-            }
-        }
-
-        &.errors {
-            //display: flex;
-            //position: sticky;
-            //bottom: 0.3em;
-            //z-index: 1000;
-            margin: 1em 0;
-            padding: 1em;
-            border-radius: 0;
-        }
+  div.vue-component {
+    h2 {
+      margin: 1em 0.7em;
+      position: relative;
+      &:before {
+        position: absolute;
+        content: "\f142"; //ellipsis-v
+        font-family: "ForkAwesome";
+        color: tint-color($chill-accourse-context, 10%);
+        left: -22px;
+        top: 4px;
+      }
+      a[id^="section"] {
+        position: absolute;
+        top: -2.5em; // reference for stickNav
+      }
     }
+    padding: 0em 0em;
+    margin: 1em 0;
+    border-radius: 5px;
+    border: 1px dotted tint-color($chill-accourse-context, 10%);
+    border-left: 1px dotted tint-color($chill-accourse-context, 10%);
+    border-right: 1px dotted tint-color($chill-accourse-context, 10%);
+    dd {
+      margin-left: 1em;
+    }
+    & > div {
+      margin: 1em 3em 0;
+
+      &.flex-table,
+      &.flex-bloc {
+        margin: 1em 0 0;
+      }
+      &.alert.to-confirm {
+        margin: 1em 0 0;
+        padding: 1em 3em;
+      }
+    }
+
+    div.flex-table {
+      div.item-row {
+        div.item-col:first-child {
+          flex-basis: 33%;
+        }
+      }
+    }
+
+    &.errors {
+      //display: flex;
+      //position: sticky;
+      //bottom: 0.3em;
+      //z-index: 1000;
+      margin: 1em 0;
+      padding: 1em;
+      border-radius: 0;
+    }
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AdminLocation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AdminLocation.vue
index 9b1bc632e..a91cd1488 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AdminLocation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AdminLocation.vue
@@ -1,38 +1,35 @@
 <template>
-    <div class="vue-component">
-        <h2><a id="section-40" />{{ $t("admin_location.title") }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-40" />{{ $t("admin_location.title") }}</h2>
 
-        <div class="mb-4">
-            <label for="selectAdminLocation">
-                {{ $t("admin_location.title") }}
-            </label>
+    <div class="mb-4">
+      <label for="selectAdminLocation">
+        {{ $t("admin_location.title") }}
+      </label>
 
-            <VueMultiselect
-                name="selectAdminLocation"
-                label="text"
-                :custom-label="customLabel"
-                track-by="id"
-                :multiple="false"
-                :searchable="true"
-                :placeholder="$t('admin_location.placeholder')"
-                v-model="value"
-                :options="options"
-                group-values="locations"
-                group-label="locationCategories"
-                :select-label="$t('multiselect.select_label')"
-                :deselect-label="$t('multiselect.deselect_label')"
-                :selected-label="$t('multiselect.selected_label')"
-                @select="updateAdminLocation"
-            />
-        </div>
-
-        <div
-            v-if="!isAdminLocationValid"
-            class="alert alert-warning to-confirm"
-        >
-            {{ $t("admin_location.not_valid") }}
-        </div>
+      <VueMultiselect
+        name="selectAdminLocation"
+        label="text"
+        :custom-label="customLabel"
+        track-by="id"
+        :multiple="false"
+        :searchable="true"
+        :placeholder="$t('admin_location.placeholder')"
+        v-model="value"
+        :options="options"
+        group-values="locations"
+        group-label="locationCategories"
+        :select-label="$t('multiselect.select_label')"
+        :deselect-label="$t('multiselect.deselect_label')"
+        :selected-label="$t('multiselect.selected_label')"
+        @select="updateAdminLocation"
+      />
     </div>
+
+    <div v-if="!isAdminLocationValid" class="alert alert-warning to-confirm">
+      {{ $t("admin_location.not_valid") }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -41,72 +38,67 @@ import { fetchResults } from "ChillMainAssets/lib/api/apiMethods";
 import { mapState, mapGetters } from "vuex";
 
 export default {
-    name: "AdminLocation",
-    components: { VueMultiselect },
-    data() {
-        return {
-            options: [],
-        };
+  name: "AdminLocation",
+  components: { VueMultiselect },
+  data() {
+    return {
+      options: [],
+    };
+  },
+  computed: {
+    ...mapState({
+      value: (state) => state.accompanyingCourse.administrativeLocation,
+    }),
+    ...mapGetters(["isAdminLocationValid"]),
+  },
+  mounted() {
+    this.getOptions();
+  },
+  methods: {
+    getOptions() {
+      fetchResults(`/api/1.0/main/location.json`).then((response) => {
+        let uniqueLocationTypeId = [
+          ...new Set(response.map((o) => o.locationType.id)),
+        ];
+        let results = [];
+        for (let id of uniqueLocationTypeId) {
+          results.push({
+            locationCategories: response.filter(
+              (o) => o.locationType.id === id,
+            )[0].locationType.title.fr,
+            locations: response.filter((o) => o.locationType.id === id),
+          });
+        }
+        this.options = results;
+      });
     },
-    computed: {
-        ...mapState({
-            value: (state) => state.accompanyingCourse.administrativeLocation,
-        }),
-        ...mapGetters(["isAdminLocationValid"]),
+    updateAdminLocation(value) {
+      this.$store
+        .dispatch("updateAdminLocation", value)
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
     },
-    mounted() {
-        this.getOptions();
-    },
-    methods: {
-        getOptions() {
-            fetchResults(`/api/1.0/main/location.json`).then((response) => {
-                let uniqueLocationTypeId = [
-                    ...new Set(response.map((o) => o.locationType.id)),
-                ];
-                let results = [];
-                for (let id of uniqueLocationTypeId) {
-                    results.push({
-                        locationCategories: response.filter(
-                            (o) => o.locationType.id === id,
-                        )[0].locationType.title.fr,
-                        locations: response.filter(
-                            (o) => o.locationType.id === id,
-                        ),
-                    });
-                }
-                this.options = results;
-            });
-        },
-        updateAdminLocation(value) {
-            this.$store
-                .dispatch("updateAdminLocation", value)
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        customLabel(value) {
-            return value.locationType
-                ? value.name
-                    ? `${value.name} (${value.locationType.title.fr})`
-                    : value.locationType.title.fr
-                : "";
-        },
+    customLabel(value) {
+      return value.locationType
+        ? value.name
+          ? `${value.name} (${value.locationType.title.fr})`
+          : value.locationType.title.fr
+        : "";
     },
+  },
 };
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="css" scoped>
 label {
-    display: none;
+  display: none;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
index 47a586e7d..7cf697f3c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
@@ -1,132 +1,107 @@
 <template>
-    <teleport to="#header-accompanying_course-name #banner-flags">
-        <toggle-flags />
-    </teleport>
+  <teleport to="#header-accompanying_course-name #banner-flags">
+    <toggle-flags />
+  </teleport>
 
-    <teleport to="#header-accompanying_course-name #banner-status">
-        <span
-            v-if="accompanyingCourse.step === 'DRAFT'"
-            class="text-md-end d-md-block"
-        >
-            <span class="badge bg-secondary">
-                {{ $t("course.step.draft") }}
-            </span>
-        </span>
-        <span
-            v-else-if="
-                accompanyingCourse.step === 'CONFIRMED' ||
-                accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT' ||
-                accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'
-            "
-            class="text-md-end"
-        >
-            <span
-                v-if="accompanyingCourse.step === 'CONFIRMED'"
-                class="d-md-block mb-md-3"
-            >
-                <span class="badge bg-primary">
-                    {{ $t("course.step.active") }}
-                </span>
-            </span>
-            <span
-                v-else-if="
-                    accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT'
-                "
-                class="d-md-block mb-md-3"
-            >
-                <span class="badge bg-chill-yellow text-primary">
-                    {{ $t("course.step.inactive_short") }}
-                </span>
-            </span>
-            <span
-                v-else-if="
-                    accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'
-                "
-                class="d-md-block mb-md-3"
-            >
-                <span class="badge bg-chill-pink">
-                    {{ $t("course.step.inactive_long") }}
-                </span>
-            </span>
-            <span class="d-md-block">
-                <span class="d-md-block ms-3 ms-md-0">
-                    <i
-                        >{{ $t("course.open_at")
-                        }}{{
-                            $d(accompanyingCourse.openingDate.datetime, "text")
-                        }}</i
-                    >
-                </span>
-                <span
-                    v-if="accompanyingCourse.user"
-                    class="d-md-block ms-3 ms-md-0"
-                >
-                    <span class="item-key">{{ $t("course.referrer") }}:</span
-                    >&nbsp;
-                    <b>{{ accompanyingCourse.user.text }}</b>
-                    <template v-if="accompanyingCourse.user.isAbsent">
-                        &nbsp;
-                        <span
-                            class="badge bg-danger rounded-pill"
-                            title="Absent"
-                            >A</span
-                        >
-                    </template>
-                </span>
-            </span>
-        </span>
-        <span v-else class="text-md-end d-md-block">
-            <span class="badge bg-danger">
-                {{ $t("course.step.closed") }}
-            </span>
-            <span class="d-md-block">
-                <span class="d-md-block ms-3 ms-md-0">
-                    <i
-                        >{{
-                            $d(accompanyingCourse.openingDate.datetime, "text")
-                        }}
-                        -
-                        {{
-                            $d(accompanyingCourse.closingDate.datetime, "text")
-                        }}</i
-                    >
-                </span>
-                <span
-                    v-if="accompanyingCourse.user"
-                    class="d-md-block ms-3 ms-md-0"
-                >
-                    <span class="item-key">{{ $t("course.referrer") }}:</span>
-                    <b>{{ accompanyingCourse.user.text }}</b>
-                </span>
-            </span>
-        </span>
-    </teleport>
-
-    <teleport
-        to="#header-accompanying_course-name #persons-associated-shortlist"
+  <teleport to="#header-accompanying_course-name #banner-status">
+    <span
+      v-if="accompanyingCourse.step === 'DRAFT'"
+      class="text-md-end d-md-block"
     >
-        <persons-associated
-            :accompanyingCourse="accompanyingCourse"
-            :shortlist="true"
-        ></persons-associated>
-    </teleport>
-
-    <teleport to="#header-accompanying_course-details #banner-social-issues">
-        <social-issue
-            v-for="issue in accompanyingCourse.socialIssues"
-            :key="issue.id"
-            :issue="issue"
-        />
-    </teleport>
-
-    <teleport
-        to="#header-accompanying_course-details #banner-persons-associated"
+      <span class="badge bg-secondary">
+        {{ $t("course.step.draft") }}
+      </span>
+    </span>
+    <span
+      v-else-if="
+        accompanyingCourse.step === 'CONFIRMED' ||
+        accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT' ||
+        accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'
+      "
+      class="text-md-end"
     >
-        <persons-associated
-            :accompanying-course="accompanyingCourse"
-            :shortlist="false"
-        />
-    </teleport>
+      <span
+        v-if="accompanyingCourse.step === 'CONFIRMED'"
+        class="d-md-block mb-md-3"
+      >
+        <span class="badge bg-primary">
+          {{ $t("course.step.active") }}
+        </span>
+      </span>
+      <span
+        v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT'"
+        class="d-md-block mb-md-3"
+      >
+        <span class="badge bg-chill-yellow text-primary">
+          {{ $t("course.step.inactive_short") }}
+        </span>
+      </span>
+      <span
+        v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'"
+        class="d-md-block mb-md-3"
+      >
+        <span class="badge bg-chill-pink">
+          {{ $t("course.step.inactive_long") }}
+        </span>
+      </span>
+      <span class="d-md-block">
+        <span class="d-md-block ms-3 ms-md-0">
+          <i
+            >{{ $t("course.open_at")
+            }}{{ $d(accompanyingCourse.openingDate.datetime, "text") }}</i
+          >
+        </span>
+        <span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
+          <span class="item-key">{{ $t("course.referrer") }}:</span>&nbsp;
+          <b>{{ accompanyingCourse.user.text }}</b>
+          <template v-if="accompanyingCourse.user.isAbsent">
+            &nbsp;
+            <span class="badge bg-danger rounded-pill" title="Absent">A</span>
+          </template>
+        </span>
+      </span>
+    </span>
+    <span v-else class="text-md-end d-md-block">
+      <span class="badge bg-danger">
+        {{ $t("course.step.closed") }}
+      </span>
+      <span class="d-md-block">
+        <span class="d-md-block ms-3 ms-md-0">
+          <i
+            >{{ $d(accompanyingCourse.openingDate.datetime, "text") }}
+            -
+            {{ $d(accompanyingCourse.closingDate.datetime, "text") }}</i
+          >
+        </span>
+        <span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
+          <span class="item-key">{{ $t("course.referrer") }}:</span>
+          <b>{{ accompanyingCourse.user.text }}</b>
+        </span>
+      </span>
+    </span>
+  </teleport>
+
+  <teleport to="#header-accompanying_course-name #persons-associated-shortlist">
+    <persons-associated
+      :accompanyingCourse="accompanyingCourse"
+      :shortlist="true"
+    ></persons-associated>
+  </teleport>
+
+  <teleport to="#header-accompanying_course-details #banner-social-issues">
+    <social-issue
+      v-for="issue in accompanyingCourse.socialIssues"
+      :key="issue.id"
+      :issue="issue"
+    />
+  </teleport>
+
+  <teleport to="#header-accompanying_course-details #banner-persons-associated">
+    <persons-associated
+      :accompanying-course="accompanyingCourse"
+      :shortlist="false"
+    />
+  </teleport>
 </template>
 
 <script>
@@ -135,30 +110,30 @@ import SocialIssue from "./Banner/SocialIssue.vue";
 import PersonsAssociated from "./Banner/PersonsAssociated.vue";
 
 export default {
-    name: "Banner",
-    components: {
-        ToggleFlags,
-        SocialIssue,
-        PersonsAssociated,
-    },
-    computed: {
-        accompanyingCourse() {
-            return this.$store.state.accompanyingCourse;
-        },
+  name: "Banner",
+  components: {
+    ToggleFlags,
+    SocialIssue,
+    PersonsAssociated,
+  },
+  computed: {
+    accompanyingCourse() {
+      return this.$store.state.accompanyingCourse;
     },
+  },
 };
 </script>
 
 <style lang="scss">
 div#banner-flags,
 div#banner-status {
-    .badge {
-        text-transform: uppercase;
-    }
+  .badge {
+    text-transform: uppercase;
+  }
 }
 div#banner-status {
-    span.badge {
-        font-size: 90%;
-    }
+  span.badge {
+    font-size: 90%;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/PersonsAssociated.vue
index 048dbd1df..a1837effd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/PersonsAssociated.vue
@@ -1,129 +1,127 @@
 <template>
-    <span v-if="shortlist">
-        <span v-for="person in firstPersons" class="me-1" :key="person.id">
-            <on-the-fly
-                :type="person.type"
-                :id="person.id"
-                :buttonText="person.textAge"
-                :displayBadge="'true' === 'true'"
-                action="show"
-            ></on-the-fly>
-        </span>
-        <span v-if="hasMoreThanShortListPerson">
-            <a
-                class="showMore carousel-control"
-                role="button"
-                data-bs-target="#ACHeaderSlider"
-                data-bs-slide="next"
-                >{{ $t("more_x", { x: countMoreThanShortListPerson }) }}</a
-            >
-        </span>
+  <span v-if="shortlist">
+    <span v-for="person in firstPersons" class="me-1" :key="person.id">
+      <on-the-fly
+        :type="person.type"
+        :id="person.id"
+        :buttonText="person.textAge"
+        :displayBadge="'true' === 'true'"
+        action="show"
+      ></on-the-fly>
     </span>
-    <span v-else>
-        <span
-            v-for="([pk, persons], h) in personsByHousehold"
-            :class="{ household: pk > -1, 'no-household': pk === -1 }"
-            :key="h.id"
-        >
-            <a v-if="pk !== -1" :href="householdLink(pk)">
-                <i
-                    class="fa fa-home fa-fw text-light"
-                    :title="
-                        $t('persons_associated.show_household_number', {
-                            id: pk,
-                        })
-                    "
-                ></i>
-            </a>
-            <span v-for="person in persons" class="me-1" :key="person.id">
-                <on-the-fly
-                    :type="person.type"
-                    :id="person.id"
-                    :buttonText="person.textAge"
-                    :displayBadge="true"
-                    action="show"
-                ></on-the-fly>
-            </span>
-        </span>
+    <span v-if="hasMoreThanShortListPerson">
+      <a
+        class="showMore carousel-control"
+        role="button"
+        data-bs-target="#ACHeaderSlider"
+        data-bs-slide="next"
+        >{{ $t("more_x", { x: countMoreThanShortListPerson }) }}</a
+      >
     </span>
+  </span>
+  <span v-else>
+    <span
+      v-for="([pk, persons], h) in personsByHousehold"
+      :class="{ household: pk > -1, 'no-household': pk === -1 }"
+      :key="h.id"
+    >
+      <a v-if="pk !== -1" :href="householdLink(pk)">
+        <i
+          class="fa fa-home fa-fw text-light"
+          :title="
+            $t('persons_associated.show_household_number', {
+              id: pk,
+            })
+          "
+        ></i>
+      </a>
+      <span v-for="person in persons" class="me-1" :key="person.id">
+        <on-the-fly
+          :type="person.type"
+          :id="person.id"
+          :buttonText="person.textAge"
+          :displayBadge="true"
+          action="show"
+        ></on-the-fly>
+      </span>
+    </span>
+  </span>
 </template>
 
 <script>
 import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
 
 export default {
-    name: "PersonsAssociated",
-    components: {
-        OnTheFly,
+  name: "PersonsAssociated",
+  components: {
+    OnTheFly,
+  },
+  props: ["accompanyingCourse", "shortlist"],
+  data() {
+    return {
+      showAllPersons: false,
+      maxTotalPersons: 2,
+      nbShortList: 3,
+    };
+  },
+  computed: {
+    participations() {
+      return this.accompanyingCourse.participations.filter(
+        (p) => p.endDate === null,
+      );
     },
-    props: ["accompanyingCourse", "shortlist"],
-    data() {
-        return {
-            showAllPersons: false,
-            maxTotalPersons: 2,
-            nbShortList: 3,
-        };
+    persons() {
+      return this.participations.map((p) => p.person);
     },
-    computed: {
-        participations() {
-            return this.accompanyingCourse.participations.filter(
-                (p) => p.endDate === null,
-            );
-        },
-        persons() {
-            return this.participations.map((p) => p.person);
-        },
-        firstPersons() {
-            return this.participations.slice(0, 3).map((p) => p.person);
-        },
-        hasMoreThanShortListPerson() {
-            return this.participations.length > 3;
-        },
-        countMoreThanShortListPerson() {
-            return this.participations.length - 3;
-        },
-        resources() {
-            return this.accompanyingCourse.resources;
-        },
-        requestor() {
-            return this.accompanyingCourse.requestor;
-        },
-        personsByHousehold() {
-            const households = new Map();
-            this.accompanyingCourse.participations
-                .filter((part) => part.endDate === null)
-                .map((part) => part.person)
-                .forEach((person) => {
-                    if (!households.has(person.current_household_id || -1)) {
-                        households.set(person.current_household_id || -1, []);
-                    }
-                    households
-                        .get(person.current_household_id || -1)
-                        .push(person);
-                });
+    firstPersons() {
+      return this.participations.slice(0, 3).map((p) => p.person);
+    },
+    hasMoreThanShortListPerson() {
+      return this.participations.length > 3;
+    },
+    countMoreThanShortListPerson() {
+      return this.participations.length - 3;
+    },
+    resources() {
+      return this.accompanyingCourse.resources;
+    },
+    requestor() {
+      return this.accompanyingCourse.requestor;
+    },
+    personsByHousehold() {
+      const households = new Map();
+      this.accompanyingCourse.participations
+        .filter((part) => part.endDate === null)
+        .map((part) => part.person)
+        .forEach((person) => {
+          if (!households.has(person.current_household_id || -1)) {
+            households.set(person.current_household_id || -1, []);
+          }
+          households.get(person.current_household_id || -1).push(person);
+        });
 
-            return households;
-        },
+      return households;
     },
-    methods: {
-        householdLink(id) {
-            return `/fr/person/household/${id}/summary`;
-        },
+  },
+  methods: {
+    householdLink(id) {
+      return `/fr/person/household/${id}/summary`;
     },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .showMore {
-    cursor: pointer;
-    color: white;
+  cursor: pointer;
+  color: white;
 }
 span.household {
-    display: inline-block;
-    border-top: 1px solid rgba(255, 255, 255, 0.3);
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    margin-right: 0.3em;
-    padding: 5px;
+  display: inline-block;
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  margin-right: 0.3em;
+  padding: 5px;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
index 9bbe4e513..2d3c7d031 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
@@ -1,11 +1,11 @@
 <template>
-    <span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
+  <span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
 </template>
 
 <script>
 export default {
-    name: "SocialIssues",
-    props: ["issue"],
+  name: "SocialIssues",
+  props: ["issue"],
 };
 </script>
 
@@ -14,9 +14,9 @@ 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;
+  @include badge_social($social-issue-color);
+  font-size: 95%;
+  margin-bottom: 5px;
+  margin-right: 1em;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
index b759dccd2..555b0b2cd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
@@ -1,158 +1,145 @@
 <template>
-    <div class="text-md-end">
-        <span class="d-block d-sm-inline-block mb-md-2">
-            <a @click="toggleIntensity" class="flag-toggle">
-                <span :class="{ on: !isRegular }">{{
-                    $t("course.occasional")
-                }}</span>
-                <i
-                    class="fa"
-                    :class="{
-                        'fa-toggle-on': isRegular,
-                        'fa-toggle-on fa-flip-horizontal': !isRegular,
-                    }"
-                />
-                <span :class="{ on: isRegular }">{{
-                    $t("course.regular")
-                }}</span>
-            </a>
-        </span>
+  <div class="text-md-end">
+    <span class="d-block d-sm-inline-block mb-md-2">
+      <a @click="toggleIntensity" class="flag-toggle">
+        <span :class="{ on: !isRegular }">{{ $t("course.occasional") }}</span>
+        <i
+          class="fa"
+          :class="{
+            'fa-toggle-on': isRegular,
+            'fa-toggle-on fa-flip-horizontal': !isRegular,
+          }"
+        />
+        <span :class="{ on: isRegular }">{{ $t("course.regular") }}</span>
+      </a>
+    </span>
 
-        <span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
-            <button
-                class="badge rounded-pill me-1"
-                :class="{
-                    'bg-danger': isEmergency,
-                    'bg-secondary': !isEmergency,
-                }"
-                @click="toggleEmergency"
-            >
-                {{ $t("course.emergency") }}
-            </button>
-            <button
-                class="badge rounded-pill"
-                :class="{
-                    'bg-danger': isConfidential,
-                    'bg-secondary': !isConfidential,
-                }"
-                @click="toggleConfidential"
-            >
-                {{ $t("course.confidential") }}
-            </button>
-        </span>
-    </div>
+    <span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
+      <button
+        class="badge rounded-pill me-1"
+        :class="{
+          'bg-danger': isEmergency,
+          'bg-secondary': !isEmergency,
+        }"
+        @click="toggleEmergency"
+      >
+        {{ $t("course.emergency") }}
+      </button>
+      <button
+        class="badge rounded-pill"
+        :class="{
+          'bg-danger': isConfidential,
+          'bg-secondary': !isConfidential,
+        }"
+        @click="toggleConfidential"
+      >
+        {{ $t("course.confidential") }}
+      </button>
+    </span>
+  </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
 
 export default {
-    name: "ToggleFlags",
-    computed: {
-        ...mapState({
-            intensity: (state) => state.accompanyingCourse.intensity,
-            emergency: (state) => state.accompanyingCourse.emergency,
-            confidential: (state) => state.accompanyingCourse.confidential,
-            permissions: (state) => state.permissions,
-        }),
-        isRegular() {
-            return this.intensity === "regular" ? true : false;
-        },
-        isEmergency() {
-            return this.emergency ? true : false;
-        },
-        isConfidential() {
-            return this.confidential ? true : false;
-        },
+  name: "ToggleFlags",
+  computed: {
+    ...mapState({
+      intensity: (state) => state.accompanyingCourse.intensity,
+      emergency: (state) => state.accompanyingCourse.emergency,
+      confidential: (state) => state.accompanyingCourse.confidential,
+      permissions: (state) => state.permissions,
+    }),
+    isRegular() {
+      return this.intensity === "regular" ? true : false;
     },
-    methods: {
-        toggleIntensity() {
-            let value;
-            switch (this.intensity) {
-                case "occasional":
-                    value = "regular";
-                    break;
-                case "regular":
-                    value = "occasional";
-                    break;
-                default:
-                    //temporaire (modif backend)
-                    value = "occasional";
-            }
-            this.$store.dispatch("toggleIntensity", value).catch(({ name }) => {
-                if (
-                    name === "ValidationException" ||
-                    name === "AccessException"
-                ) {
-                    this.$toast.open({
-                        message: this.$t(
-                            "Only the referrer can toggle the intensity of an accompanying course",
-                        ),
-                    });
-                } else {
-                    this.$toast.open({ message: "An error occurred" });
-                }
-            });
-        },
-        toggleEmergency() {
-            this.$store
-                .dispatch("toggleEmergency", !this.isEmergency)
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        toggleConfidential() {
-            this.$store.dispatch("toggleConfidential").catch(({ name }) => {
-                console.log(name);
-                if (
-                    name === "ValidationException" ||
-                    name === "AccessException"
-                ) {
-                    this.$toast.open({
-                        message: this.$t(
-                            "Only the referrer can toggle the confidentiality of an accompanying course",
-                        ),
-                    });
-                } else {
-                    this.$toast.open({ message: "An error occurred" });
-                }
-            });
-        },
+    isEmergency() {
+      return this.emergency ? true : false;
     },
+    isConfidential() {
+      return this.confidential ? true : false;
+    },
+  },
+  methods: {
+    toggleIntensity() {
+      let value;
+      switch (this.intensity) {
+        case "occasional":
+          value = "regular";
+          break;
+        case "regular":
+          value = "occasional";
+          break;
+        default:
+          //temporaire (modif backend)
+          value = "occasional";
+      }
+      this.$store.dispatch("toggleIntensity", value).catch(({ name }) => {
+        if (name === "ValidationException" || name === "AccessException") {
+          this.$toast.open({
+            message: this.$t(
+              "Only the referrer can toggle the intensity of an accompanying course",
+            ),
+          });
+        } else {
+          this.$toast.open({ message: "An error occurred" });
+        }
+      });
+    },
+    toggleEmergency() {
+      this.$store
+        .dispatch("toggleEmergency", !this.isEmergency)
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+    },
+    toggleConfidential() {
+      this.$store.dispatch("toggleConfidential").catch(({ name }) => {
+        console.log(name);
+        if (name === "ValidationException" || name === "AccessException") {
+          this.$toast.open({
+            message: this.$t(
+              "Only the referrer can toggle the confidentiality of an accompanying course",
+            ),
+          });
+        } else {
+          this.$toast.open({ message: "An error occurred" });
+        }
+      });
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 a.flag-toggle {
+  color: white;
+  cursor: pointer;
+  &:hover {
     color: white;
-    cursor: pointer;
-    &:hover {
-        color: white;
-        text-decoration: underline;
-        border-radius: 20px;
-    }
-    i {
-        margin: auto 0.4em;
-    }
-    span.on {
-        font-weight: bolder;
-    }
+    text-decoration: underline;
+    border-radius: 20px;
+  }
+  i {
+    margin: auto 0.4em;
+  }
+  span.on {
+    font-weight: bolder;
+  }
 }
 button.badge {
-    &.bg-secondary {
-        opacity: 0.5;
-        &:hover {
-            opacity: 0.7;
-        }
+  &.bg-secondary {
+    opacity: 0.5;
+    &:hover {
+      opacity: 0.7;
     }
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue
index e84d5a9f2..1e17a1cd2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue
@@ -1,38 +1,36 @@
 <template>
-    <li>
-        <button
-            class="btn btn-sm btn-secondary"
-            @click="modal.showModal = true"
-            :title="$t('courselocation.assign_course_address')"
-        >
-            <i class="fa fa-map-marker" />
-        </button>
-    </li>
+  <li>
+    <button
+      class="btn btn-sm btn-secondary"
+      @click="modal.showModal = true"
+      :title="$t('courselocation.assign_course_address')"
+    >
+      <i class="fa fa-map-marker" />
+    </button>
+  </li>
 
-    <teleport to="body">
-        <modal
-            v-if="modal.showModal"
-            :modal-dialog-class="modal.modalDialogClass"
-            @close="modal.showModal = false"
-        >
-            <template #header>
-                <h2 class="modal-title">
-                    {{ $t("courselocation.sure") }}
-                </h2>
-            </template>
-            <template #body>
-                <address-render-box
-                    :address="person.current_household_address"
-                />
-                <p>{{ $t("courselocation.sure_description") }}</p>
-            </template>
-            <template #footer>
-                <button class="btn btn-danger" @click="assignAddress">
-                    {{ $t("courselocation.ok") }}
-                </button>
-            </template>
-        </modal>
-    </teleport>
+  <teleport to="body">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t("courselocation.sure") }}
+        </h2>
+      </template>
+      <template #body>
+        <address-render-box :address="person.current_household_address" />
+        <p>{{ $t("courselocation.sure_description") }}</p>
+      </template>
+      <template #footer>
+        <button class="btn btn-danger" @click="assignAddress">
+          {{ $t("courselocation.ok") }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
 </template>
 
 <script>
@@ -41,52 +39,49 @@ import Modal from "ChillMainAssets/vuejs/_components/Modal";
 import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
 
 export default {
-    name: "ButtonLocation",
-    components: {
-        AddressRenderBox,
-        Modal,
-    },
-    props: ["person"],
-    data() {
-        return {
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-centered modal-md",
-            },
-        };
-    },
-    computed: {
-        ...mapState({
-            context: (state) => state.addressContext,
-        }),
-    },
-    methods: {
-        assignAddress() {
-            //console.log('assignAddress id', this.person.current_household_address);
-            let payload = {
-                target: this.context.target.name,
-                targetId: this.context.target.id,
-                locationStatusTo: "person",
-                personId: this.person.id,
-            };
-            this.$store
-                .dispatch("updateLocation", 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" });
-                    }
-                });
+  name: "ButtonLocation",
+  components: {
+    AddressRenderBox,
+    Modal,
+  },
+  props: ["person"],
+  data() {
+    return {
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-centered modal-md",
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      context: (state) => state.addressContext,
+    }),
+  },
+  methods: {
+    assignAddress() {
+      //console.log('assignAddress id', this.person.current_household_address);
+      let payload = {
+        target: this.context.target.name,
+        targetId: this.context.target.id,
+        locationStatusTo: "person",
+        personId: this.person.id,
+      };
+      this.$store
+        .dispatch("updateLocation", 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" });
+          }
+        });
 
-            window.location.assign("#section-20");
-            this.modal.showModal = false;
-        },
+      window.location.assign("#section-20");
+      this.modal.showModal = false;
     },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
index b5b2a4466..56f8eb458 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
@@ -1,56 +1,56 @@
 <template>
-    <div class="vue-component">
-        <h2><a id="section-100" />{{ $t("comment.title") }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-100" />{{ $t("comment.title") }}</h2>
 
-        <!--div class="error flash_message" v-if="errors.length > 0">
+    <!--div class="error flash_message" v-if="errors.length > 0">
          {{ errors[0] }}
          TODO fix errors flashbag for app component
       </div-->
 
-        <div>
-            <form @submit.prevent="submitform">
-                <label class="col-form-label" for="content">{{
-                    $t("comment.label")
-                }}</label>
+    <div>
+      <form @submit.prevent="submitform">
+        <label class="col-form-label" for="content">{{
+          $t("comment.label")
+        }}</label>
 
-                <comment-editor v-model="content" />
+        <comment-editor v-model="content" />
 
-                <div class="sub-comment">
-                    <div
-                        v-if="
-                            pinnedComment !== null &&
-                            typeof pinnedComment.creator !== 'undefined'
-                        "
-                        class="metadata"
-                    >
-                        {{
-                            $t("comment.created_by", [
-                                pinnedComment.creator.text,
-                                $d(pinnedComment.updatedAt.datetime, "long"),
-                            ])
-                        }}
-                    </div>
-                    <div class="loading">
-                        <i
-                            v-if="loading"
-                            class="fa fa-circle-o-notch fa-spin"
-                            :title="$t('loading')"
-                        />
-                    </div>
-                </div>
-
-                <div>
-                    <ul class="record_actions">
-                        <li v-if="pinnedComment !== null">
-                            <a class="btn btn-delete" @click="removeComment">
-                                {{ $t("action.delete") }}
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </form>
+        <div class="sub-comment">
+          <div
+            v-if="
+              pinnedComment !== null &&
+              typeof pinnedComment.creator !== 'undefined'
+            "
+            class="metadata"
+          >
+            {{
+              $t("comment.created_by", [
+                pinnedComment.creator.text,
+                $d(pinnedComment.updatedAt.datetime, "long"),
+              ])
+            }}
+          </div>
+          <div class="loading">
+            <i
+              v-if="loading"
+              class="fa fa-circle-o-notch fa-spin"
+              :title="$t('loading')"
+            />
+          </div>
         </div>
+
+        <div>
+          <ul class="record_actions">
+            <li v-if="pinnedComment !== null">
+              <a class="btn btn-delete" @click="removeComment">
+                {{ $t("action.delete") }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </form>
     </div>
+  </div>
 </template>
 
 <script>
@@ -58,127 +58,121 @@ import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/Comme
 import { mapState } from "vuex";
 
 export default {
-    name: "Comment",
-    components: {
-        CommentEditor,
-    },
-    data() {
-        return {
-            loading: false,
-            lastRecordedContent: null,
-        };
-    },
-    computed: {
-        ...mapState({
-            pinnedComment: (state) => state.accompanyingCourse.pinnedComment,
-        }),
-        classicEditor: () => ClassicEditor,
-        editorConfig: () => classicEditorConfig,
-        content: {
-            set(value) {
-                console.log("new comment value", value);
-                console.log("previous value", this.lastRecordedContent);
-                this.lastRecordedContent = value;
+  name: "Comment",
+  components: {
+    CommentEditor,
+  },
+  data() {
+    return {
+      loading: false,
+      lastRecordedContent: null,
+    };
+  },
+  computed: {
+    ...mapState({
+      pinnedComment: (state) => state.accompanyingCourse.pinnedComment,
+    }),
+    classicEditor: () => ClassicEditor,
+    editorConfig: () => classicEditorConfig,
+    content: {
+      set(value) {
+        console.log("new comment value", value);
+        console.log("previous value", this.lastRecordedContent);
+        this.lastRecordedContent = value;
 
-                setTimeout(() => {
-                    console.log("performing test on ", value);
-                    if (this.lastRecordedContent === value) {
-                        this.loading = true;
-                        if (value !== "") {
-                            this.$store
-                                .dispatch("updatePinnedComment", value)
-                                .then(() => {
-                                    this.loading = false;
-                                })
-                                .catch(({ name, violations }) => {
-                                    if (
-                                        name === "ValidationException" ||
-                                        name === "AccessException"
-                                    ) {
-                                        violations.forEach((violation) =>
-                                            this.$toast.open({
-                                                message: violation,
-                                            }),
-                                        );
-                                    } else {
-                                        this.$toast.open({
-                                            message: "An error occurred",
-                                        });
-                                    }
-                                });
-                        } else {
-                            if (
-                                this.$store.state.accompanyingCourse
-                                    .pinnedComment !== null
-                            ) {
-                                this.$store
-                                    .dispatch("removePinnedComment", {
-                                        id: this.pinnedComment.id,
-                                    })
-                                    .then(() => {
-                                        this.loading = false;
-                                        this.lastRecoredContent = null;
-                                    })
-                                    .catch(({ name, violations }) => {
-                                        if (
-                                            name === "ValidationException" ||
-                                            name === "AccessException"
-                                        ) {
-                                            violations.forEach((violation) =>
-                                                this.$toast.open({
-                                                    message: violation,
-                                                }),
-                                            );
-                                        } else {
-                                            this.$toast.open({
-                                                message: "An error occurred",
-                                            });
-                                        }
-                                    });
-                            }
-                        }
-                    }
-                }, 3000);
-            },
-            get() {
-                return this.pinnedComment ? this.pinnedComment.content : "";
-            },
-        },
-        errors() {
-            return this.$store.state.errorMsg;
-        },
-    },
-    methods: {
-        removeComment() {
-            this.$store
-                .dispatch("removePinnedComment", { id: this.pinnedComment.id })
+        setTimeout(() => {
+          console.log("performing test on ", value);
+          if (this.lastRecordedContent === value) {
+            this.loading = true;
+            if (value !== "") {
+              this.$store
+                .dispatch("updatePinnedComment", value)
+                .then(() => {
+                  this.loading = false;
+                })
                 .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
+                  if (
+                    name === "ValidationException" ||
+                    name === "AccessException"
+                  ) {
+                    violations.forEach((violation) =>
+                      this.$toast.open({
+                        message: violation,
+                      }),
+                    );
+                  } else {
+                    this.$toast.open({
+                      message: "An error occurred",
+                    });
+                  }
                 });
-        },
+            } else {
+              if (this.$store.state.accompanyingCourse.pinnedComment !== null) {
+                this.$store
+                  .dispatch("removePinnedComment", {
+                    id: this.pinnedComment.id,
+                  })
+                  .then(() => {
+                    this.loading = false;
+                    this.lastRecoredContent = null;
+                  })
+                  .catch(({ name, violations }) => {
+                    if (
+                      name === "ValidationException" ||
+                      name === "AccessException"
+                    ) {
+                      violations.forEach((violation) =>
+                        this.$toast.open({
+                          message: violation,
+                        }),
+                      );
+                    } else {
+                      this.$toast.open({
+                        message: "An error occurred",
+                      });
+                    }
+                  });
+              }
+            }
+          }
+        }, 3000);
+      },
+      get() {
+        return this.pinnedComment ? this.pinnedComment.content : "";
+      },
     },
+    errors() {
+      return this.$store.state.errorMsg;
+    },
+  },
+  methods: {
+    removeComment() {
+      this.$store
+        .dispatch("removePinnedComment", { id: this.pinnedComment.id })
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+    },
+  },
 };
 </script>
 
 <style lang="scss">
 div.ck-editor.ck-reset {
-    margin: 0.6em 0;
+  margin: 0.6em 0;
 }
 div.sub-comment {
-    display: flex;
-    justify-content: space-between;
-    div.loading {
-        margin-right: 6px;
-        margin-left: 6px;
-    }
+  display: flex;
+  justify-content: space-between;
+  div.loading {
+    margin-right: 6px;
+    margin-left: 6px;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
index 408852711..3ce902daa 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
@@ -1,127 +1,120 @@
 <template>
-    <div class="vue-component">
-        <h2>
-            <a id="section-110" />
-            {{ $t("confirm.title") }}
-        </h2>
-        <div>
-            <p v-html="$t('confirm.text_draft', [$t('course.step.draft')])" />
+  <div class="vue-component">
+    <h2>
+      <a id="section-110" />
+      {{ $t("confirm.title") }}
+    </h2>
+    <div>
+      <p v-html="$t('confirm.text_draft', [$t('course.step.draft')])" />
 
-            <div v-if="!isValidToBeConfirmed">
-                <div class="alert alert-warning">
-                    {{ $t("confirm.alert_validation") }}
-                    <ul class="mt-2">
-                        <li v-for="k in validationKeys" :key="k">
-                            {{ $t(notValidMessages[k].msg) }}
-                            <a :href="notValidMessages[k].anchor">
-                                <i class="fa fa-level-up fa-fw" />
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                <ul class="record_actions">
-                    <li>
-                        <button class="btn btn-save" disabled>
-                            {{ $t("confirm.ok") }}
-                        </button>
-                    </li>
-                    <li>
-                        <a class="btn btn-delete" :href="deleteLink">
-                            {{ $t("confirm.delete") }}
-                        </a>
-                    </li>
-                </ul>
-            </div>
-
-            <div v-else>
-                <p
-                    v-html="
-                        $t('confirm.text_active', [$t('course.step.active')])
-                    "
-                />
-                <ul class="record_actions">
-                    <li>
-                        <button
-                            class="btn btn-save"
-                            @click="modal.showModal = true"
-                        >
-                            {{ $t("confirm.ok") }}
-                        </button>
-                    </li>
-                    <li>
-                        <a class="btn btn-delete" :href="deleteLink">
-                            {{ $t("confirm.delete") }}
-                        </a>
-                    </li>
-                </ul>
-            </div>
+      <div v-if="!isValidToBeConfirmed">
+        <div class="alert alert-warning">
+          {{ $t("confirm.alert_validation") }}
+          <ul class="mt-2">
+            <li v-for="k in validationKeys" :key="k">
+              {{ $t(notValidMessages[k].msg) }}
+              <a :href="notValidMessages[k].anchor">
+                <i class="fa fa-level-up fa-fw" />
+              </a>
+            </li>
+          </ul>
         </div>
+        <ul class="record_actions">
+          <li>
+            <button class="btn btn-save" disabled>
+              {{ $t("confirm.ok") }}
+            </button>
+          </li>
+          <li>
+            <a class="btn btn-delete" :href="deleteLink">
+              {{ $t("confirm.delete") }}
+            </a>
+          </li>
+        </ul>
+      </div>
 
-        <teleport to="body">
-            <modal
-                v-if="modal.showModal"
-                :modal-dialog-class="modal.modalDialogClass"
-                @close="modal.showModal = false"
-            >
-                <template #header>
-                    <h2 class="modal-title">
-                        {{ $t("confirm.sure") }}
-                    </h2>
-                </template>
-                <template #body>
-                    <p>{{ $t("confirm.sure_description") }}</p>
-                    <div v-if="accompanyingCourse.user === null">
-                        <div v-if="usersSuggestedFilteredByJob.length === 0">
-                            <p class="alert alert-warning">
-                                {{ $t("confirm.no_suggested_referrer") }}
-                            </p>
-                        </div>
-                        <div
-                            v-if="usersSuggestedFilteredByJob.length === 1"
-                            class="alert alert-info"
-                        >
-                            <p>{{ $t("confirm.one_suggested_referrer") }}:</p>
-                            <ul class="list-suggest add-items inline">
-                                <li>
-                                    <user-render-box-badge
-                                        :user="usersSuggestedFilteredByJob[0]"
-                                    />
-                                </li>
-                            </ul>
-                            <p>{{ $t("confirm.choose_suggested_referrer") }}</p>
-                            <ul class="record_actions">
-                                <li>
-                                    <button
-                                        class="btn btn-save mr-5"
-                                        @click="chooseSuggestedReferrer"
-                                    >
-                                        {{ $t("confirm.choose_button") }}
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        class="btn btn-secondary"
-                                        @click="doNotChooseSuggestedReferrer"
-                                    >
-                                        {{ $t("confirm.do_not_choose_button") }}
-                                    </button>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </template>
-                <template #footer>
-                    <button
-                        class="btn btn-danger"
-                        :disabled="disableConfirm"
-                        @click="confirmCourse"
-                    >
-                        {{ $t("confirm.ok") }}
-                    </button>
-                </template>
-            </modal>
-        </teleport>
+      <div v-else>
+        <p v-html="$t('confirm.text_active', [$t('course.step.active')])" />
+        <ul class="record_actions">
+          <li>
+            <button class="btn btn-save" @click="modal.showModal = true">
+              {{ $t("confirm.ok") }}
+            </button>
+          </li>
+          <li>
+            <a class="btn btn-delete" :href="deleteLink">
+              {{ $t("confirm.delete") }}
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
+
+    <teleport to="body">
+      <modal
+        v-if="modal.showModal"
+        :modal-dialog-class="modal.modalDialogClass"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <h2 class="modal-title">
+            {{ $t("confirm.sure") }}
+          </h2>
+        </template>
+        <template #body>
+          <p>{{ $t("confirm.sure_description") }}</p>
+          <div v-if="accompanyingCourse.user === null">
+            <div v-if="usersSuggestedFilteredByJob.length === 0">
+              <p class="alert alert-warning">
+                {{ $t("confirm.no_suggested_referrer") }}
+              </p>
+            </div>
+            <div
+              v-if="usersSuggestedFilteredByJob.length === 1"
+              class="alert alert-info"
+            >
+              <p>{{ $t("confirm.one_suggested_referrer") }}:</p>
+              <ul class="list-suggest add-items inline">
+                <li>
+                  <user-render-box-badge
+                    :user="usersSuggestedFilteredByJob[0]"
+                  />
+                </li>
+              </ul>
+              <p>{{ $t("confirm.choose_suggested_referrer") }}</p>
+              <ul class="record_actions">
+                <li>
+                  <button
+                    class="btn btn-save mr-5"
+                    @click="chooseSuggestedReferrer"
+                  >
+                    {{ $t("confirm.choose_button") }}
+                  </button>
+                </li>
+                <li>
+                  <button
+                    class="btn btn-secondary"
+                    @click="doNotChooseSuggestedReferrer"
+                  >
+                    {{ $t("confirm.do_not_choose_button") }}
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </template>
+        <template #footer>
+          <button
+            class="btn btn-danger"
+            :disabled="disableConfirm"
+            @click="confirmCourse"
+          >
+            {{ $t("confirm.ok") }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+  </div>
 </template>
 
 <script>
@@ -130,112 +123,106 @@ import Modal from "ChillMainAssets/vuejs/_components/Modal";
 import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";
 
 export default {
-    name: "Confirm",
-    components: {
-        Modal,
-        UserRenderBoxBadge,
-    },
-    data() {
-        return {
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-centered modal-md",
-            },
-            notValidMessages: {
-                participation: {
-                    msg: "confirm.participation_not_valid",
-                    anchor: "#section-10",
-                },
-                location: {
-                    msg: "confirm.location_not_valid",
-                    anchor: "#section-20",
-                },
-                origin: {
-                    msg: "confirm.origin_not_valid",
-                    anchor: "#section-30",
-                },
-                adminLocation: {
-                    msg: "confirm.adminLocation_not_valid",
-                    anchor: "#section-40",
-                },
-                socialIssue: {
-                    msg: "confirm.socialIssue_not_valid",
-                    anchor: "#section-60",
-                },
-                scopes: {
-                    msg: "confirm.set_a_scope",
-                    anchor: "#section-70",
-                },
-                job: {
-                    msg: "confirm.job_not_valid",
-                    anchor: "#section-80",
-                },
-            },
-            clickedDoNotChooseReferrer: false,
-        };
-    },
-    computed: {
-        ...mapState({
-            accompanyingCourse: (state) => state.accompanyingCourse,
-        }),
-        ...mapGetters([
-            "isParticipationValid",
-            "isSocialIssueValid",
-            "isOriginValid",
-            "isAdminLocationValid",
-            "isLocationValid",
-            "isJobValid",
-            "validationKeys",
-            "isValidToBeConfirmed",
-            "usersSuggestedFilteredByJob",
-        ]),
-        deleteLink() {
-            return `/fr/parcours/${this.accompanyingCourse.id}/delete`; //TODO locale
+  name: "Confirm",
+  components: {
+    Modal,
+    UserRenderBoxBadge,
+  },
+  data() {
+    return {
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-centered modal-md",
+      },
+      notValidMessages: {
+        participation: {
+          msg: "confirm.participation_not_valid",
+          anchor: "#section-10",
         },
-        disableConfirm() {
-            return (
-                this.accompanyingCourse.user === null &&
-                this.usersSuggestedFilteredByJob.length === 1 &&
-                this.clickedDoNotChooseReferrer === false
+        location: {
+          msg: "confirm.location_not_valid",
+          anchor: "#section-20",
+        },
+        origin: {
+          msg: "confirm.origin_not_valid",
+          anchor: "#section-30",
+        },
+        adminLocation: {
+          msg: "confirm.adminLocation_not_valid",
+          anchor: "#section-40",
+        },
+        socialIssue: {
+          msg: "confirm.socialIssue_not_valid",
+          anchor: "#section-60",
+        },
+        scopes: {
+          msg: "confirm.set_a_scope",
+          anchor: "#section-70",
+        },
+        job: {
+          msg: "confirm.job_not_valid",
+          anchor: "#section-80",
+        },
+      },
+      clickedDoNotChooseReferrer: false,
+    };
+  },
+  computed: {
+    ...mapState({
+      accompanyingCourse: (state) => state.accompanyingCourse,
+    }),
+    ...mapGetters([
+      "isParticipationValid",
+      "isSocialIssueValid",
+      "isOriginValid",
+      "isAdminLocationValid",
+      "isLocationValid",
+      "isJobValid",
+      "validationKeys",
+      "isValidToBeConfirmed",
+      "usersSuggestedFilteredByJob",
+    ]),
+    deleteLink() {
+      return `/fr/parcours/${this.accompanyingCourse.id}/delete`; //TODO locale
+    },
+    disableConfirm() {
+      return (
+        this.accompanyingCourse.user === null &&
+        this.usersSuggestedFilteredByJob.length === 1 &&
+        this.clickedDoNotChooseReferrer === false
+      );
+    },
+  },
+  methods: {
+    confirmCourse() {
+      this.$store
+        .dispatch("confirmAccompanyingCourse")
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
             );
-        },
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
     },
-    methods: {
-        confirmCourse() {
-            this.$store
-                .dispatch("confirmAccompanyingCourse")
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        chooseSuggestedReferrer() {
-            this.$store
-                .dispatch("updateReferrer", this.usersSuggestedFilteredByJob[0])
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        doNotChooseSuggestedReferrer() {
-            this.clickedDoNotChooseReferrer = true;
-        },
+    chooseSuggestedReferrer() {
+      this.$store
+        .dispatch("updateReferrer", this.usersSuggestedFilteredByJob[0])
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
     },
+    doNotChooseSuggestedReferrer() {
+      this.clickedDoNotChooseReferrer = true;
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
index f781eca0b..af985e502 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
@@ -1,95 +1,85 @@
 <template>
-    <div class="vue-component">
-        <h2>
-            <a id="section-20" />
-            {{ $t("courselocation.title") }}
-        </h2>
+  <div class="vue-component">
+    <h2>
+      <a id="section-20" />
+      {{ $t("courselocation.title") }}
+    </h2>
 
-        <div
-            v-for="error in displayErrors"
-            class="alert alert-danger my-2"
-            :key="error"
-        >
-            {{ error }}
-        </div>
-
-        <div v-if="hasNoLocation">
-            <label class="chill-no-data-statement">
-                {{ $t("courselocation.no_address") }}
-            </label>
-        </div>
-
-        <div class="flex-table" v-if="accompanyingCourse.location">
-            <div class="item-bloc">
-                <address-render-box :address="accompanyingCourse.location" />
-
-                <div
-                    v-if="isPersonLocation"
-                    class="alert alert-secondary separator"
-                >
-                    <label class="col-form-label">
-                        {{
-                            $t("courselocation.person_locator", [
-                                accompanyingCourse.personLocation.text,
-                            ])
-                        }}
-                    </label>
-                </div>
-
-                <div
-                    v-if="isTemporaryAddress"
-                    class="alert alert-warning separator"
-                >
-                    <p>
-                        {{
-                            $t(
-                                "courselocation.temporary_address_must_be_changed",
-                            )
-                        }}
-                        <i class="fa fa-fw fa-map-marker" />
-                    </p>
-                </div>
-            </div>
-        </div>
-
-        <div
-            v-if="hasNoPersonLocation"
-            class="alert alert-danger no-person-location"
-        >
-            <i class="fa fa-warning fa-2x" />
-            <div>
-                <p>
-                    {{
-                        $t(
-                            "courselocation.associate_at_least_one_person_with_one_household_with_address",
-                        )
-                    }}
-                    <a href="#section-10">
-                        <i class="fa fa-level-up fa-fw" />
-                    </a>
-                </p>
-            </div>
-        </div>
-
-        <div>
-            <ul class="record_actions">
-                <li>
-                    <add-address
-                        v-if="!isPersonLocation"
-                        :key="key"
-                        :context="context"
-                        :options="options"
-                        :address-changed-callback="submitTemporaryAddress"
-                        ref="addAddress"
-                    />
-                </li>
-            </ul>
-        </div>
-
-        <div v-if="!isLocationValid" class="alert alert-warning to-confirm">
-            {{ $t("courselocation.not_valid") }}
-        </div>
+    <div
+      v-for="error in displayErrors"
+      class="alert alert-danger my-2"
+      :key="error"
+    >
+      {{ error }}
     </div>
+
+    <div v-if="hasNoLocation">
+      <label class="chill-no-data-statement">
+        {{ $t("courselocation.no_address") }}
+      </label>
+    </div>
+
+    <div class="flex-table" v-if="accompanyingCourse.location">
+      <div class="item-bloc">
+        <address-render-box :address="accompanyingCourse.location" />
+
+        <div v-if="isPersonLocation" class="alert alert-secondary separator">
+          <label class="col-form-label">
+            {{
+              $t("courselocation.person_locator", [
+                accompanyingCourse.personLocation.text,
+              ])
+            }}
+          </label>
+        </div>
+
+        <div v-if="isTemporaryAddress" class="alert alert-warning separator">
+          <p>
+            {{ $t("courselocation.temporary_address_must_be_changed") }}
+            <i class="fa fa-fw fa-map-marker" />
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="hasNoPersonLocation"
+      class="alert alert-danger no-person-location"
+    >
+      <i class="fa fa-warning fa-2x" />
+      <div>
+        <p>
+          {{
+            $t(
+              "courselocation.associate_at_least_one_person_with_one_household_with_address",
+            )
+          }}
+          <a href="#section-10">
+            <i class="fa fa-level-up fa-fw" />
+          </a>
+        </p>
+      </div>
+    </div>
+
+    <div>
+      <ul class="record_actions">
+        <li>
+          <add-address
+            v-if="!isPersonLocation"
+            :key="key"
+            :context="context"
+            :options="options"
+            :address-changed-callback="submitTemporaryAddress"
+            ref="addAddress"
+          />
+        </li>
+      </ul>
+    </div>
+
+    <div v-if="!isLocationValid" class="alert alert-warning to-confirm">
+      {{ $t("courselocation.not_valid") }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -98,177 +88,171 @@ import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue"
 import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
 
 export default {
-    name: "CourseLocation",
-    components: {
-        AddAddress,
-        AddressRenderBox,
-    },
-    data() {
-        return {
-            addAddress: {
-                options: {
-                    button: {
-                        text: {
-                            create: "courselocation.add_temporary_address",
-                            edit: "courselocation.edit_temporary_address",
-                        },
-                    },
-                    title: {
-                        create: "courselocation.add_temporary_address",
-                        edit: "courselocation.edit_temporary_address",
-                    },
-                    onlyButton: true,
-                },
+  name: "CourseLocation",
+  components: {
+    AddAddress,
+    AddressRenderBox,
+  },
+  data() {
+    return {
+      addAddress: {
+        options: {
+          button: {
+            text: {
+              create: "courselocation.add_temporary_address",
+              edit: "courselocation.edit_temporary_address",
             },
-        };
+          },
+          title: {
+            create: "courselocation.add_temporary_address",
+            edit: "courselocation.edit_temporary_address",
+          },
+          onlyButton: true,
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      accompanyingCourse: (state) => state.accompanyingCourse,
+      context: (state) => state.addressContext,
+    }),
+    ...mapGetters(["isLocationValid"]),
+    options() {
+      return this.addAddress.options;
     },
-    computed: {
-        ...mapState({
-            accompanyingCourse: (state) => state.accompanyingCourse,
-            context: (state) => state.addressContext,
-        }),
-        ...mapGetters(["isLocationValid"]),
-        options() {
-            return this.addAddress.options;
+    key() {
+      return this.context.edit
+        ? "address_" + this.context.addressId
+        : this.accompanyingCourse.type + "_" + this.accompanyingCourse.id;
+    },
+    isTemporaryAddress() {
+      return this.accompanyingCourse.locationStatus === "address";
+    },
+    isPersonLocation() {
+      return this.accompanyingCourse.locationStatus === "person";
+    },
+    hasNoLocation() {
+      return this.accompanyingCourse.locationStatus === "none";
+    },
+    currentParticipations() {
+      return this.accompanyingCourse.participations.filter(
+        (p) => p.enddate !== null,
+      );
+    },
+    hasNoPersonLocation() {
+      let addressInParticipations_ = [];
+      this.currentParticipations.forEach((p) => {
+        addressInParticipations_.push(
+          this.checkHouseholdAddressForParticipation(p),
+        );
+      });
+
+      const booleanReducer = (previousValue, currentValue) =>
+        previousValue || currentValue;
+
+      let addressInParticipations =
+        addressInParticipations_.length > 0
+          ? addressInParticipations_.reduce(booleanReducer)
+          : false;
+
+      //console.log(addressInParticipations_, addressInParticipations);
+      return (
+        this.accompanyingCourse.step !== "DRAFT" &&
+        this.isTemporaryAddress &&
+        !addressInParticipations
+      );
+    },
+    isContextEdit() {
+      return this.context.edit;
+    },
+  },
+  methods: {
+    checkHouseholdAddressForParticipation(participation) {
+      if (participation.person.current_household_id === null) {
+        return false;
+      }
+      return participation.person.current_household_address !== null;
+    },
+    initAddressContext() {
+      let context = {
+        target: {
+          name: this.accompanyingCourse.type,
+          id: this.accompanyingCourse.id,
         },
-        key() {
-            return this.context.edit
-                ? "address_" + this.context.addressId
-                : this.accompanyingCourse.type +
-                      "_" +
-                      this.accompanyingCourse.id;
-        },
-        isTemporaryAddress() {
-            return this.accompanyingCourse.locationStatus === "address";
-        },
-        isPersonLocation() {
-            return this.accompanyingCourse.locationStatus === "person";
-        },
-        hasNoLocation() {
-            return this.accompanyingCourse.locationStatus === "none";
-        },
-        currentParticipations() {
-            return this.accompanyingCourse.participations.filter(
-                (p) => p.enddate !== null,
+        edit: false,
+        addressId: null,
+        defaults: window.addaddress,
+      };
+      if (this.accompanyingCourse.location) {
+        context["edit"] = true;
+        context["addressId"] = this.accompanyingCourse.location.address_id;
+      }
+      this.$store.commit("setAddressContext", context);
+    },
+    displayErrors() {
+      return this.$refs.addAddress.errorMsg;
+    },
+    submitTemporaryAddress(payload) {
+      //console.log('@@@ click on Submit Temporary Address Button', payload);
+      payload["locationStatusTo"] = "address"; // <== temporary, not none, not person
+      this.$store
+        .dispatch("updateLocation", payload)
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
             );
-        },
-        hasNoPersonLocation() {
-            let addressInParticipations_ = [];
-            this.currentParticipations.forEach((p) => {
-                addressInParticipations_.push(
-                    this.checkHouseholdAddressForParticipation(p),
-                );
-            });
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
 
-            const booleanReducer = (previousValue, currentValue) =>
-                previousValue || currentValue;
-
-            let addressInParticipations =
-                addressInParticipations_.length > 0
-                    ? addressInParticipations_.reduce(booleanReducer)
-                    : false;
-
-            //console.log(addressInParticipations_, addressInParticipations);
-            return (
-                this.accompanyingCourse.step !== "DRAFT" &&
-                this.isTemporaryAddress &&
-                !addressInParticipations
-            );
-        },
-        isContextEdit() {
-            return this.context.edit;
-        },
+      this.$store.commit("setEditContextTrue", payload);
     },
-    methods: {
-        checkHouseholdAddressForParticipation(participation) {
-            if (participation.person.current_household_id === null) {
-                return false;
-            }
-            return participation.person.current_household_address !== null;
-        },
-        initAddressContext() {
-            let context = {
-                target: {
-                    name: this.accompanyingCourse.type,
-                    id: this.accompanyingCourse.id,
-                },
-                edit: false,
-                addressId: null,
-                defaults: window.addaddress,
-            };
-            if (this.accompanyingCourse.location) {
-                context["edit"] = true;
-                context["addressId"] =
-                    this.accompanyingCourse.location.address_id;
-            }
-            this.$store.commit("setAddressContext", context);
-        },
-        displayErrors() {
-            return this.$refs.addAddress.errorMsg;
-        },
-        submitTemporaryAddress(payload) {
-            //console.log('@@@ click on Submit Temporary Address Button', payload);
-            payload["locationStatusTo"] = "address"; // <== temporary, not none, not person
-            this.$store
-                .dispatch("updateLocation", 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" });
-                    }
-                });
+  },
+  created() {
+    this.initAddressContext();
 
-            this.$store.commit("setEditContextTrue", payload);
-        },
-    },
-    created() {
-        this.initAddressContext();
-
-        //console.log('ac.locationStatus', this.accompanyingCourse.locationStatus);
-        //console.log('ac.location (temporary location)', this.accompanyingCourse.location);
-        //console.log('ac.personLocation', this.accompanyingCourse.personLocation);
-    },
+    //console.log('ac.locationStatus', this.accompanyingCourse.locationStatus);
+    //console.log('ac.location (temporary location)', this.accompanyingCourse.location);
+    //console.log('ac.personLocation', this.accompanyingCourse.personLocation);
+  },
 };
 </script>
 <style lang="scss" scoped>
 div#accompanying-course {
-    div.vue-component {
-        & > div.alert.no-person-location {
-            margin: 1px 0 0;
-        }
-        div.no-person-location {
-            padding-top: 1.5em;
-            display: flex;
-            flex-direction: row;
-            & > i {
-                flex-basis: 1.5em;
-                flex-grow: 0;
-                flex-shrink: 0;
-                padding-top: 0.2em;
-                opacity: 0.75;
-            }
-            & > div {
-                flex-basis: auto;
-                div.action {
-                    button.btn-update {
-                        margin-right: 2em;
-                    }
-                }
-            }
-        }
-        div.flex-table {
-            div.item-bloc {
-                div.alert {
-                    margin: 0 -0.9em -1em;
-                }
-            }
-        }
+  div.vue-component {
+    & > div.alert.no-person-location {
+      margin: 1px 0 0;
     }
+    div.no-person-location {
+      padding-top: 1.5em;
+      display: flex;
+      flex-direction: row;
+      & > i {
+        flex-basis: 1.5em;
+        flex-grow: 0;
+        flex-shrink: 0;
+        padding-top: 0.2em;
+        opacity: 0.75;
+      }
+      & > div {
+        flex-basis: auto;
+        div.action {
+          button.btn-update {
+            margin-right: 2em;
+          }
+        }
+      }
+    }
+    div.flex-table {
+      div.item-bloc {
+        div.alert {
+          margin: 0 -0.9em -1em;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
index 641c9ef37..053eb058f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
@@ -1,33 +1,33 @@
 <template>
-    <div class="vue-component">
-        <h2><a id="section-30" />{{ $t("origin.title") }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-30" />{{ $t("origin.title") }}</h2>
 
-        <div class="mb-4">
-            <label for="selectOrigin">
-                {{ $t("origin.title") }}
-            </label>
+    <div class="mb-4">
+      <label for="selectOrigin">
+        {{ $t("origin.title") }}
+      </label>
 
-            <VueMultiselect
-                name="selectOrigin"
-                label="text"
-                :custom-label="transText"
-                track-by="id"
-                :multiple="false"
-                :searchable="true"
-                :placeholder="$t('origin.placeholder')"
-                v-model="value"
-                :options="options"
-                :select-label="$t('multiselect.select_label')"
-                :deselect-label="$t('multiselect.deselect_label')"
-                :selected-label="$t('multiselect.selected_label')"
-                @select="updateOrigin"
-            />
-        </div>
-
-        <div v-if="!isOriginValid" class="alert alert-warning to-confirm">
-            {{ $t("origin.not_valid") }}
-        </div>
+      <VueMultiselect
+        name="selectOrigin"
+        label="text"
+        :custom-label="transText"
+        track-by="id"
+        :multiple="false"
+        :searchable="true"
+        :placeholder="$t('origin.placeholder')"
+        v-model="value"
+        :options="options"
+        :select-label="$t('multiselect.select_label')"
+        :deselect-label="$t('multiselect.deselect_label')"
+        :selected-label="$t('multiselect.selected_label')"
+        @select="updateOrigin"
+      />
     </div>
+
+    <div v-if="!isOriginValid" class="alert alert-warning to-confirm">
+      {{ $t("origin.not_valid") }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -36,61 +36,58 @@ import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import { mapState, mapGetters } from "vuex";
 
 export default {
-    name: "OriginDemand",
-    components: { VueMultiselect },
-    data() {
-        return {
-            options: [],
-        };
+  name: "OriginDemand",
+  components: { VueMultiselect },
+  data() {
+    return {
+      options: [],
+    };
+  },
+  computed: {
+    ...mapState({
+      value: (state) => state.accompanyingCourse.origin,
+    }),
+    ...mapGetters(["isOriginValid"]),
+  },
+  mounted() {
+    this.getOptions();
+  },
+  methods: {
+    getOptions() {
+      const url = `/api/1.0/person/accompanying-period/origin.json`;
+      makeFetch("GET", url)
+        .then((response) => {
+          this.options = response.results;
+          return response;
+        })
+        .catch((error) => {
+          commit("catchError", error);
+          this.$toast.open({ message: error.txt });
+        });
     },
-    computed: {
-        ...mapState({
-            value: (state) => state.accompanyingCourse.origin,
-        }),
-        ...mapGetters(["isOriginValid"]),
+    updateOrigin(value) {
+      this.$store
+        .dispatch("updateOrigin", value)
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
     },
-    mounted() {
-        this.getOptions();
-    },
-    methods: {
-        getOptions() {
-            const url = `/api/1.0/person/accompanying-period/origin.json`;
-            makeFetch("GET", url)
-                .then((response) => {
-                    this.options = response.results;
-                    return response;
-                })
-                .catch((error) => {
-                    commit("catchError", error);
-                    this.$toast.open({ message: error.txt });
-                });
-        },
-        updateOrigin(value) {
-            this.$store
-                .dispatch("updateOrigin", value)
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        transText({ text }) {
-            return text.fr;
-        },
+    transText({ text }) {
+      return text.fr;
     },
+  },
 };
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="css" scoped>
 label {
-    display: none;
+  display: none;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
index d6979928b..b4e0e70b8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -1,121 +1,106 @@
 <template>
-    <div class="vue-component">
-        <h2><a id="section-10" />{{ $t("persons_associated.title") }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-10" />{{ $t("persons_associated.title") }}</h2>
 
-        <div v-if="currentParticipations.length > 0">
-            <label class="col-form-label">{{
-                $tc("persons_associated.counter", counter)
-            }}</label>
-        </div>
-        <div v-else>
-            <label class="chill-no-data-statement">{{
-                $tc("persons_associated.counter", counter)
-            }}</label>
-        </div>
-
-        <div
-            v-if="participationWithoutHousehold.length > 0"
-            class="alert alert-warning no-household"
-        >
-            <i class="fa fa-warning fa-2x" />
-            <form method="GET" action="/fr/person/household/members/editor">
-                <div class="float-button bottom">
-                    <div class="box">
-                        <div class="action">
-                            <button class="btn btn-update" type="submit">
-                                {{ $t("persons_associated.update_household") }}
-                            </button>
-                        </div>
-                        <p class="mb-3">
-                            {{
-                                $t(
-                                    "persons_associated.person_without_household_warning",
-                                )
-                            }}
-                        </p>
-                        <div
-                            class="form-check"
-                            v-for="p in participationWithoutHousehold"
-                            :key="p.id"
-                        >
-                            <input
-                                type="checkbox"
-                                class="form-check-input"
-                                name="persons[]"
-                                checked="checked"
-                                :id="p.person.id"
-                                :value="p.person.id"
-                            />
-                            <label class="form-check-label">
-                                <person-text :person="p.person" />
-                            </label>
-                        </div>
-                        <input
-                            type="hidden"
-                            name="expand_suggestions"
-                            value="true"
-                        />
-                        <input
-                            type="hidden"
-                            name="returnPath"
-                            :value="getReturnPath"
-                        />
-                        <input
-                            type="hidden"
-                            name="accompanying_period_id"
-                            :value="courseId"
-                        />
-                    </div>
-                </div>
-            </form>
-        </div>
-
-        <div class="flex-table mb-3">
-            <participation-item
-                v-for="participation in currentParticipations"
-                :participation="participation"
-                :key="participation.id"
-                @remove="removeParticipation"
-                @close="closeParticipation"
-            />
-        </div>
-
-        <div v-if="suggestedPersons.length > 0">
-            <ul class="list-suggest add-items inline">
-                <li
-                    v-for="p in suggestedPersons"
-                    :key="p.id"
-                    @click="addSuggestedPerson(p)"
-                >
-                    <person-text :person="p" />
-                </li>
-            </ul>
-        </div>
-
-        <div>
-            <ul class="record_actions">
-                <li class="add-persons">
-                    <add-persons
-                        button-title="persons_associated.add_persons"
-                        modal-title="add_persons.title"
-                        :key="addPersons.key"
-                        :options="addPersons.options"
-                        @add-new-persons="addNewPersons"
-                        ref="addPersons"
-                    >
-                        <!-- to cast child method -->
-                    </add-persons>
-                </li>
-            </ul>
-        </div>
-
-        <div
-            v-if="!isParticipationValid"
-            class="alert alert-warning to-confirm"
-        >
-            {{ $t("persons_associated.participation_not_valid") }}
-        </div>
+    <div v-if="currentParticipations.length > 0">
+      <label class="col-form-label">{{
+        $tc("persons_associated.counter", counter)
+      }}</label>
     </div>
+    <div v-else>
+      <label class="chill-no-data-statement">{{
+        $tc("persons_associated.counter", counter)
+      }}</label>
+    </div>
+
+    <div
+      v-if="participationWithoutHousehold.length > 0"
+      class="alert alert-warning no-household"
+    >
+      <i class="fa fa-warning fa-2x" />
+      <form method="GET" action="/fr/person/household/members/editor">
+        <div class="float-button bottom">
+          <div class="box">
+            <div class="action">
+              <button class="btn btn-update" type="submit">
+                {{ $t("persons_associated.update_household") }}
+              </button>
+            </div>
+            <p class="mb-3">
+              {{ $t("persons_associated.person_without_household_warning") }}
+            </p>
+            <div
+              class="form-check"
+              v-for="p in participationWithoutHousehold"
+              :key="p.id"
+            >
+              <input
+                type="checkbox"
+                class="form-check-input"
+                name="persons[]"
+                checked="checked"
+                :id="p.person.id"
+                :value="p.person.id"
+              />
+              <label class="form-check-label">
+                <person-text :person="p.person" />
+              </label>
+            </div>
+            <input type="hidden" name="expand_suggestions" value="true" />
+            <input type="hidden" name="returnPath" :value="getReturnPath" />
+            <input
+              type="hidden"
+              name="accompanying_period_id"
+              :value="courseId"
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <div class="flex-table mb-3">
+      <participation-item
+        v-for="participation in currentParticipations"
+        :participation="participation"
+        :key="participation.id"
+        @remove="removeParticipation"
+        @close="closeParticipation"
+      />
+    </div>
+
+    <div v-if="suggestedPersons.length > 0">
+      <ul class="list-suggest add-items inline">
+        <li
+          v-for="p in suggestedPersons"
+          :key="p.id"
+          @click="addSuggestedPerson(p)"
+        >
+          <person-text :person="p" />
+        </li>
+      </ul>
+    </div>
+
+    <div>
+      <ul class="record_actions">
+        <li class="add-persons">
+          <add-persons
+            button-title="persons_associated.add_persons"
+            modal-title="add_persons.title"
+            :key="addPersons.key"
+            :options="addPersons.options"
+            @add-new-persons="addNewPersons"
+            ref="addPersons"
+          >
+            <!-- to cast child method -->
+          </add-persons>
+        </li>
+      </ul>
+    </div>
+
+    <div v-if="!isParticipationValid" class="alert alert-warning to-confirm">
+      {{ $t("persons_associated.participation_not_valid") }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -125,176 +110,160 @@ import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
 import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
 
 export default {
-    name: "PersonsAssociated",
-    components: {
-        ParticipationItem,
-        AddPersons,
-        PersonText,
-    },
-    data() {
-        return {
-            addPersons: {
-                key: "persons_associated",
-                options: {
-                    type: ["person"],
-                    priority: null,
-                    uniq: false,
-                },
-            },
-        };
-    },
-    computed: {
-        ...mapState({
-            courseId: (state) => state.accompanyingCourse.id,
-            participations: (state) => state.accompanyingCourse.participations,
-            suggestedPersons: (state) =>
-                [
-                    state.accompanyingCourse.requestor,
-                    ...state.accompanyingCourse.resources.map(
-                        (r) => r.resource,
-                    ),
-                ]
-                    .filter((e) => e !== null)
-                    .filter((e) => e.type === "person")
-                    .filter(
-                        (p) =>
-                            !state.accompanyingCourse.participations
-                                .filter((pa) => pa.endDate === null)
-                                .map((pa) => pa.person.id)
-                                .includes(p.id),
-                    )
-                    // 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;
-                            }
-                        }
+  name: "PersonsAssociated",
+  components: {
+    ParticipationItem,
+    AddPersons,
+    PersonText,
+  },
+  data() {
+    return {
+      addPersons: {
+        key: "persons_associated",
+        options: {
+          type: ["person"],
+          priority: null,
+          uniq: false,
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      courseId: (state) => state.accompanyingCourse.id,
+      participations: (state) => state.accompanyingCourse.participations,
+      suggestedPersons: (state) =>
+        [
+          state.accompanyingCourse.requestor,
+          ...state.accompanyingCourse.resources.map((r) => r.resource),
+        ]
+          .filter((e) => e !== null)
+          .filter((e) => e.type === "person")
+          .filter(
+            (p) =>
+              !state.accompanyingCourse.participations
+                .filter((pa) => pa.endDate === null)
+                .map((pa) => pa.person.id)
+                .includes(p.id),
+          )
+          // 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;
+              }
+            }
 
-                        return true;
-                    }),
-        }),
-        ...mapGetters(["isParticipationValid"]),
-        currentParticipations() {
-            return this.participations.filter((p) => p.endDate === null);
-        },
-        counter() {
-            return this.currentParticipations.length;
-        },
-        participationWithoutHousehold() {
-            return this.currentParticipations.filter(
-                (p) => p.person.current_household_id === null,
-            );
-        },
-        getReturnPath() {
-            return (
-                window.location.pathname +
-                window.location.search +
-                window.location.hash
-            );
-        },
+            return true;
+          }),
+    }),
+    ...mapGetters(["isParticipationValid"]),
+    currentParticipations() {
+      return this.participations.filter((p) => p.endDate === null);
     },
-    methods: {
-        removeParticipation(item) {
-            this.$store
-                .dispatch("removeParticipation", item)
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        closeParticipation(item) {
-            this.$store
-                .dispatch("closeParticipation", item)
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        addNewPersons({ selected, modal }) {
-            selected.forEach(function (item) {
-                this.$store
-                    .dispatch("addParticipation", item)
-                    .catch(({ name, violations }) => {
-                        if (
-                            name === "ValidationException" ||
-                            name === "AccessException"
-                        ) {
-                            violations.forEach((violation) =>
-                                this.$toast.open({ message: violation }),
-                            );
-                        } else {
-                            this.$toast.open({ message: "An error occurred" });
-                        }
-                    });
-            }, this);
-            this.$refs.addPersons.resetSearch(); // to cast child method
-            modal.showModal = false;
-        },
-        addSuggestedPerson(person) {
-            this.$store
-                .dispatch("addParticipation", {
-                    result: person,
-                    type: "person",
-                })
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
+    counter() {
+      return this.currentParticipations.length;
     },
+    participationWithoutHousehold() {
+      return this.currentParticipations.filter(
+        (p) => p.person.current_household_id === null,
+      );
+    },
+    getReturnPath() {
+      return (
+        window.location.pathname + window.location.search + window.location.hash
+      );
+    },
+  },
+  methods: {
+    removeParticipation(item) {
+      this.$store
+        .dispatch("removeParticipation", item)
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+    },
+    closeParticipation(item) {
+      this.$store
+        .dispatch("closeParticipation", item)
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+    },
+    addNewPersons({ selected, modal }) {
+      selected.forEach(function (item) {
+        this.$store
+          .dispatch("addParticipation", item)
+          .catch(({ name, violations }) => {
+            if (name === "ValidationException" || name === "AccessException") {
+              violations.forEach((violation) =>
+                this.$toast.open({ message: violation }),
+              );
+            } else {
+              this.$toast.open({ message: "An error occurred" });
+            }
+          });
+      }, this);
+      this.$refs.addPersons.resetSearch(); // to cast child method
+      modal.showModal = false;
+    },
+    addSuggestedPerson(person) {
+      this.$store
+        .dispatch("addParticipation", {
+          result: person,
+          type: "person",
+        })
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
 div#accompanying-course {
-    div.vue-component {
-        & > div.alert.no-household {
-            margin: 0 0 -1em;
-        }
-        div.no-household {
-            padding-bottom: 1.5em;
-            display: flex;
-            flex-direction: row;
-            & > i {
-                flex-basis: 1.5em;
-                flex-grow: 0;
-                flex-shrink: 0;
-                padding-top: 0.2em;
-                opacity: 0.75;
-            }
-            & > form {
-                flex-basis: auto;
-                div.action {
-                    button.btn-update {
-                        margin-right: 2em;
-                    }
-                }
-            }
-        }
+  div.vue-component {
+    & > div.alert.no-household {
+      margin: 0 0 -1em;
     }
+    div.no-household {
+      padding-bottom: 1.5em;
+      display: flex;
+      flex-direction: row;
+      & > i {
+        flex-basis: 1.5em;
+        flex-grow: 0;
+        flex-shrink: 0;
+        padding-top: 0.2em;
+        opacity: 0.75;
+      }
+      & > form {
+        flex-basis: auto;
+        div.action {
+          button.btn-update {
+            margin-right: 2em;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
index 61a9d2571..c2dbd6e0c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
@@ -1,98 +1,97 @@
 <template>
-    <person-render-box
-        render="bloc"
-        :options="{
-            addInfo: true,
-            addId: false,
-            addEntity: false,
-            addLink: false,
-            addHouseholdLink: false,
-            addAltNames: true,
-            addAge: true,
-            hLevel: 3,
-            isConfidential: false,
-            isMultiline: true,
-        }"
-        :person="participation.person"
-        :return-path="getAccompanyingCourseReturnPath"
-    >
-        <template #end-bloc>
-            <div class="item-row separator">
-                <ul class="record_actions">
-                    <button-location
-                        v-if="
-                            hasCurrentHouseholdAddress &&
-                            !isPersonLocatingCourse(participation.person)
-                        "
-                        :person="participation.person"
-                    />
-                    <li v-if="participation.person.current_household_id">
-                        <a
-                            class="btn btn-sm btn-chill-beige"
-                            :href="getCurrentHouseholdUrl"
-                            :title="
-                                $t('persons_associated.show_household_number', {
-                                    id: participation.person
-                                        .current_household_id,
-                                })
-                            "
-                        >
-                            <i class="fa fa-fw fa-home" />
-                        </a>
-                    </li>
-                    <li>
-                        <on-the-fly
-                            :type="participation.person.type"
-                            :id="participation.person.id"
-                            action="show"
-                        />
-                    </li>
-                    <li>
-                        <on-the-fly
-                            :type="participation.person.type"
-                            :id="participation.person.id"
-                            action="edit"
-                            @save-form-on-the-fly="saveFormOnTheFly"
-                            ref="onTheFly"
-                        />
-                    </li>
-                    <li>
-                        <button
-                            v-if="!participation.endDate"
-                            class="btn btn-sm btn-remove"
-                            :title="$t('persons_associated.leave_course')"
-                            @click="modal.showModal = true"
-                        />
-                    </li>
-                </ul>
-            </div>
-        </template>
-    </person-render-box>
+  <person-render-box
+    render="bloc"
+    :options="{
+      addInfo: true,
+      addId: false,
+      addEntity: false,
+      addLink: false,
+      addHouseholdLink: false,
+      addAltNames: true,
+      addAge: true,
+      hLevel: 3,
+      isConfidential: false,
+      isMultiline: true,
+    }"
+    :person="participation.person"
+    :return-path="getAccompanyingCourseReturnPath"
+  >
+    <template #end-bloc>
+      <div class="item-row separator">
+        <ul class="record_actions">
+          <button-location
+            v-if="
+              hasCurrentHouseholdAddress &&
+              !isPersonLocatingCourse(participation.person)
+            "
+            :person="participation.person"
+          />
+          <li v-if="participation.person.current_household_id">
+            <a
+              class="btn btn-sm btn-chill-beige"
+              :href="getCurrentHouseholdUrl"
+              :title="
+                $t('persons_associated.show_household_number', {
+                  id: participation.person.current_household_id,
+                })
+              "
+            >
+              <i class="fa fa-fw fa-home" />
+            </a>
+          </li>
+          <li>
+            <on-the-fly
+              :type="participation.person.type"
+              :id="participation.person.id"
+              action="show"
+            />
+          </li>
+          <li>
+            <on-the-fly
+              :type="participation.person.type"
+              :id="participation.person.id"
+              action="edit"
+              @save-form-on-the-fly="saveFormOnTheFly"
+              ref="onTheFly"
+            />
+          </li>
+          <li>
+            <button
+              v-if="!participation.endDate"
+              class="btn btn-sm btn-remove"
+              :title="$t('persons_associated.leave_course')"
+              @click="modal.showModal = true"
+            />
+          </li>
+        </ul>
+      </div>
+    </template>
+  </person-render-box>
 
-    <teleport to="body">
-        <modal
-            v-if="modal.showModal"
-            :modal-dialog-class="modal.modalDialogClass"
-            @close="modal.showModal = false"
+  <teleport to="body">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t("persons_associated.sure") }}
+        </h2>
+      </template>
+      <template #body>
+        <p>{{ $t("persons_associated.sure_description") }}</p>
+      </template>
+      <template #footer>
+        <button
+          class="btn btn-danger"
+          @click.prevent="$emit('close', participation)"
         >
-            <template #header>
-                <h2 class="modal-title">
-                    {{ $t("persons_associated.sure") }}
-                </h2>
-            </template>
-            <template #body>
-                <p>{{ $t("persons_associated.sure_description") }}</p>
-            </template>
-            <template #footer>
-                <button
-                    class="btn btn-danger"
-                    @click.prevent="$emit('close', participation)"
-                >
-                    {{ $t("persons_associated.ok") }}
-                </button>
-            </template>
-        </modal>
-    </teleport>
+          {{ $t("persons_associated.ok") }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
 </template>
 
 <script>
@@ -103,135 +102,135 @@ import Modal from "ChillMainAssets/vuejs/_components/Modal";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 
 export default {
-    name: "ParticipationItem",
-    components: {
-        OnTheFly,
-        ButtonLocation,
-        PersonRenderBox,
-        Modal,
+  name: "ParticipationItem",
+  components: {
+    OnTheFly,
+    ButtonLocation,
+    PersonRenderBox,
+    Modal,
+  },
+  props: ["participation"],
+  emits: ["remove", "close"],
+  data() {
+    return {
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-centered modal-md",
+      },
+      PersonRenderBox: {
+        participation: "participation",
+        options: {
+          addInfo: false,
+          addId: true,
+          addAge: false,
+          hLevel: 1,
+        },
+      },
+    };
+  },
+  computed: {
+    hasCurrentHouseholdAddress() {
+      if (
+        !this.participation.endDate &&
+        this.participation.person.current_household_address !== null
+      ) {
+        return true;
+      }
+      return false;
     },
-    props: ["participation"],
-    emits: ["remove", "close"],
-    data() {
-        return {
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-centered modal-md",
-            },
-            PersonRenderBox: {
-                participation: "participation",
-                options: {
-                    addInfo: false,
-                    addId: true,
-                    addAge: false,
-                    hLevel: 1,
-                },
-            },
+    getAccompanyingCourseReturnPath() {
+      return `fr/parcours/${this.$store.state.accompanyingCourse.id}/edit#section-10`;
+    },
+    getCurrentHouseholdUrl() {
+      return `/fr/person/household/${this.participation.person.current_household_id}/summary?returnPath=${this.getAccompanyingCourseReturnPath}`;
+    },
+  },
+  methods: {
+    isPersonLocatingCourse(person) {
+      return this.$store.getters.isPersonLocatingCourse(person);
+    },
+    saveFormOnTheFly(payload) {
+      console.log(
+        "saveFormOnTheFly: type",
+        payload.type,
+        ", data",
+        payload.data,
+      );
+      payload.target = "participation";
+
+      let body = { type: payload.type };
+      if (payload.type === "person") {
+        body.firstName = payload.data.firstName;
+        body.lastName = payload.data.lastName;
+        if (payload.data.birthdate !== null) {
+          body.birthdate = payload.data.birthdate;
+        }
+        body.phonenumber = payload.data.phonenumber;
+        body.mobilenumber = payload.data.mobilenumber;
+        body.email = payload.data.email;
+        body.altNames = payload.data.altNames;
+        body.gender = {
+          id: payload.data.gender.id,
+          type: payload.data.gender.type,
         };
-    },
-    computed: {
-        hasCurrentHouseholdAddress() {
-            if (
-                !this.participation.endDate &&
-                this.participation.person.current_household_address !== null
-            ) {
-                return true;
+        if (payload.data.civility !== null) {
+          body.civility = {
+            id: payload.data.civility.id,
+            type: payload.data.civility.type,
+          };
+        }
+
+        makeFetch(
+          "PATCH",
+          `/api/1.0/person/person/${payload.data.id}.json`,
+          body,
+        )
+          .then((response) => {
+            this.$store.dispatch("addPerson", {
+              target: payload.target,
+              body: response,
+            });
+            this.$refs.onTheFly.closeModal();
+          })
+          .catch((error) => {
+            if (error.name === "ValidationException") {
+              for (let v of error.violations) {
+                this.$toast.open({ message: v });
+              }
+            } else {
+              this.$toast.open({ message: "An error occurred" });
             }
-            return false;
-        },
-        getAccompanyingCourseReturnPath() {
-            return `fr/parcours/${this.$store.state.accompanyingCourse.id}/edit#section-10`;
-        },
-        getCurrentHouseholdUrl() {
-            return `/fr/person/household/${this.participation.person.current_household_id}/summary?returnPath=${this.getAccompanyingCourseReturnPath}`;
-        },
-    },
-    methods: {
-        isPersonLocatingCourse(person) {
-            return this.$store.getters.isPersonLocatingCourse(person);
-        },
-        saveFormOnTheFly(payload) {
-            console.log(
-                "saveFormOnTheFly: type",
-                payload.type,
-                ", data",
-                payload.data,
-            );
-            payload.target = "participation";
+          });
+      } else if (payload.type === "thirdparty") {
+        body.name = payload.data.text;
+        body.email = payload.data.email;
+        body.telephone = payload.data.telephone;
+        body.telephone2 = payload.data.telephone2;
+        body.address = { id: payload.data.address.address_id };
 
-            let body = { type: payload.type };
-            if (payload.type === "person") {
-                body.firstName = payload.data.firstName;
-                body.lastName = payload.data.lastName;
-                if (payload.data.birthdate !== null) {
-                    body.birthdate = payload.data.birthdate;
-                }
-                body.phonenumber = payload.data.phonenumber;
-                body.mobilenumber = payload.data.mobilenumber;
-                body.email = payload.data.email;
-                body.altNames = payload.data.altNames;
-                body.gender = {
-                    id: payload.data.gender.id,
-                    type: payload.data.gender.type,
-                };
-                if (payload.data.civility !== null) {
-                    body.civility = {
-                        id: payload.data.civility.id,
-                        type: payload.data.civility.type,
-                    };
-                }
-
-                makeFetch(
-                    "PATCH",
-                    `/api/1.0/person/person/${payload.data.id}.json`,
-                    body,
-                )
-                    .then((response) => {
-                        this.$store.dispatch("addPerson", {
-                            target: payload.target,
-                            body: response,
-                        });
-                        this.$refs.onTheFly.closeModal();
-                    })
-                    .catch((error) => {
-                        if (error.name === "ValidationException") {
-                            for (let v of error.violations) {
-                                this.$toast.open({ message: v });
-                            }
-                        } else {
-                            this.$toast.open({ message: "An error occurred" });
-                        }
-                    });
-            } else if (payload.type === "thirdparty") {
-                body.name = payload.data.text;
-                body.email = payload.data.email;
-                body.telephone = payload.data.telephone;
-                body.telephone2 = payload.data.telephone2;
-                body.address = { id: payload.data.address.address_id };
-
-                makeFetch(
-                    "PATCH",
-                    `/api/1.0/thirdparty/thirdparty/${payload.data.id}.json`,
-                    body,
-                )
-                    .then((response) => {
-                        this.$store.dispatch("addThirdparty", {
-                            target: payload.target,
-                            body: response,
-                        });
-                        this.$refs.onTheFly.closeModal();
-                    })
-                    .catch((error) => {
-                        if (error.name === "ValidationException") {
-                            for (let v of error.violations) {
-                                this.$toast.open({ message: v });
-                            }
-                        } else {
-                            this.$toast.open({ message: "An error occurred" });
-                        }
-                    });
+        makeFetch(
+          "PATCH",
+          `/api/1.0/thirdparty/thirdparty/${payload.data.id}.json`,
+          body,
+        )
+          .then((response) => {
+            this.$store.dispatch("addThirdparty", {
+              target: payload.target,
+              body: response,
+            });
+            this.$refs.onTheFly.closeModal();
+          })
+          .catch((error) => {
+            if (error.name === "ValidationException") {
+              for (let v of error.violations) {
+                this.$toast.open({ message: v });
+              }
+            } else {
+              this.$toast.open({ message: "An error occurred" });
             }
-        },
+          });
+      }
     },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
index dbb21fa40..963ff65b5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
@@ -1,116 +1,113 @@
 <template>
-    <div class="vue-component">
-        <h2><a id="section-80" />{{ $t("referrer.title") }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-80" />{{ $t("referrer.title") }}</h2>
 
-        <teleport to="body">
-            <modal
-                v-if="modal.showModal"
-                :modal-dialog-class="modal.modalDialogClass"
-                @close="cancelChange"
-            >
-                <template #header>
-                    <h3 class="modal-title">
-                        {{ $t("confirm.title") }}
-                    </h3>
-                </template>
+    <teleport to="body">
+      <modal
+        v-if="modal.showModal"
+        :modal-dialog-class="modal.modalDialogClass"
+        @close="cancelChange"
+      >
+        <template #header>
+          <h3 class="modal-title">
+            {{ $t("confirm.title") }}
+          </h3>
+        </template>
 
-                <template #body-head>
-                    <div class="modal-body">
-                        <p
-                            v-html="
-                                $t('confirm.sure_referrer', {
-                                    referrer: this.value.text,
-                                })
-                            "
-                        />
-                    </div>
-                </template>
-
-                <template #footer>
-                    <button
-                        class="btn btn-save"
-                        @click.prevent="this.confirmReferrer"
-                    >
-                        {{ $t("confirm.ok_referrer") }}
-                    </button>
-                </template>
-            </modal>
-        </teleport>
-
-        <div>
-            <label class="col-form-label" for="selectJob">
-                {{ $t("job.label") }}
-            </label>
-
-            <VueMultiselect
-                name="selectJob"
-                label="text"
-                :custom-label="customJobLabel"
-                track-by="id"
-                :multiple="false"
-                :searchable="true"
-                :placeholder="$t('job.placeholder')"
-                v-model="valueJob"
-                :options="jobs"
-                :select-label="$t('multiselect.select_label')"
-                :deselect-label="$t('multiselect.deselect_label')"
-                :selected-label="$t('multiselect.selected_label')"
+        <template #body-head>
+          <div class="modal-body">
+            <p
+              v-html="
+                $t('confirm.sure_referrer', {
+                  referrer: this.value.text,
+                })
+              "
             />
+          </div>
+        </template>
 
-            <label class="col-form-label" for="selectReferrer">
-                {{ $t("referrer.label") }}
-            </label>
+        <template #footer>
+          <button class="btn btn-save" @click.prevent="this.confirmReferrer">
+            {{ $t("confirm.ok_referrer") }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
 
-            <VueMultiselect
-                name="selectReferrer"
-                label="text"
-                track-by="id"
-                :multiple="false"
-                :searchable="true"
-                :placeholder="$t('referrer.placeholder')"
-                v-model="value"
-                @select="updateReferrer"
-                @remove="removeReferrer"
-                :options="users"
-                :select-label="$t('multiselect.select_label')"
-                :deselect-label="$t('multiselect.deselect_label')"
-                :selected-label="$t('multiselect.selected_label')"
-            />
+    <div>
+      <label class="col-form-label" for="selectJob">
+        {{ $t("job.label") }}
+      </label>
 
-            <template v-if="usersSuggestedFilteredByJob.length > 0">
-                <ul class="list-suggest add-items inline">
-                    <li
-                        v-for="(u, i) in usersSuggestedFilteredByJob"
-                        @click="updateReferrer(u)"
-                        :key="`referrer-${i}`"
-                    >
-                        <span>
-                            <user-render-box-badge :user="u" />
-                        </span>
-                    </li>
-                </ul>
-            </template>
-        </div>
+      <VueMultiselect
+        name="selectJob"
+        label="text"
+        :custom-label="customJobLabel"
+        track-by="id"
+        :multiple="false"
+        :searchable="true"
+        :placeholder="$t('job.placeholder')"
+        v-model="valueJob"
+        :options="jobs"
+        :select-label="$t('multiselect.select_label')"
+        :deselect-label="$t('multiselect.deselect_label')"
+        :selected-label="$t('multiselect.selected_label')"
+      />
 
-        <div>
-            <ul class="record_actions">
-                <li>
-                    <button
-                        class="btn btn-create"
-                        type="button"
-                        name="button"
-                        @click="assignMe"
-                    >
-                        {{ $t("referrer.assign_me") }}
-                    </button>
-                </li>
-            </ul>
-        </div>
+      <label class="col-form-label" for="selectReferrer">
+        {{ $t("referrer.label") }}
+      </label>
 
-        <div v-if="!isJobValid" class="alert alert-warning to-confirm">
-            {{ $t("job.not_valid") }}
-        </div>
+      <VueMultiselect
+        name="selectReferrer"
+        label="text"
+        track-by="id"
+        :multiple="false"
+        :searchable="true"
+        :placeholder="$t('referrer.placeholder')"
+        v-model="value"
+        @select="updateReferrer"
+        @remove="removeReferrer"
+        :options="users"
+        :select-label="$t('multiselect.select_label')"
+        :deselect-label="$t('multiselect.deselect_label')"
+        :selected-label="$t('multiselect.selected_label')"
+      />
+
+      <template v-if="usersSuggestedFilteredByJob.length > 0">
+        <ul class="list-suggest add-items inline">
+          <li
+            v-for="(u, i) in usersSuggestedFilteredByJob"
+            @click="updateReferrer(u)"
+            :key="`referrer-${i}`"
+          >
+            <span>
+              <user-render-box-badge :user="u" />
+            </span>
+          </li>
+        </ul>
+      </template>
     </div>
+
+    <div>
+      <ul class="record_actions">
+        <li>
+          <button
+            class="btn btn-create"
+            type="button"
+            name="button"
+            @click="assignMe"
+          >
+            {{ $t("referrer.assign_me") }}
+          </button>
+        </li>
+      </ul>
+    </div>
+
+    <div v-if="!isJobValid" class="alert alert-warning to-confirm">
+      {{ $t("job.not_valid") }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -121,134 +118,124 @@ import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRen
 import Modal from "ChillMainAssets/vuejs/_components/Modal";
 
 export default {
-    name: "Referrer",
-    components: {
-        UserRenderBoxBadge,
-        VueMultiselect,
-        Modal,
+  name: "Referrer",
+  components: {
+    UserRenderBoxBadge,
+    VueMultiselect,
+    Modal,
+  },
+  data() {
+    return {
+      jobs: [],
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-scrollable modal-xl",
+      },
+      value: this.$store.state.accompanyingCourse.user,
+      confirmed: false,
+    };
+  },
+  computed: {
+    ...mapState({
+      valueJob: (state) => state.accompanyingCourse.job,
+    }),
+    ...mapGetters(["isJobValid", "usersSuggestedFilteredByJob"]),
+    users: function () {
+      let users = this.$store.getters.usersFilteredByJob;
+      // ensure that the selected user is in the list. add it if necessary
+      if (
+        this.$store.state.accompanyingCourse.user !== null &&
+        users.find(
+          (u) => this.$store.state.accompanyingCourse.user.id === u.id,
+        ) === undefined
+      ) {
+        users.push(this.$store.state.accompanyingCourse.user);
+      }
+      return users;
     },
-    data() {
-        return {
-            jobs: [],
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-scrollable modal-xl",
-            },
-            value: this.$store.state.accompanyingCourse.user,
-            confirmed: false,
-        };
-    },
-    computed: {
-        ...mapState({
-            valueJob: (state) => state.accompanyingCourse.job,
-        }),
-        ...mapGetters(["isJobValid", "usersSuggestedFilteredByJob"]),
-        users: function () {
-            let users = this.$store.getters.usersFilteredByJob;
-            // ensure that the selected user is in the list. add it if necessary
-            if (
-                this.$store.state.accompanyingCourse.user !== null &&
-                users.find(
-                    (u) =>
-                        this.$store.state.accompanyingCourse.user.id === u.id,
-                ) === undefined
-            ) {
-                users.push(this.$store.state.accompanyingCourse.user);
+    valueJob: {
+      get() {
+        return this.$store.state.accompanyingCourse.job;
+      },
+      set(value) {
+        this.$store
+          .dispatch("updateJob", value)
+          .catch(({ name, violations }) => {
+            if (name === "ValidationException" || name === "AccessException") {
+              violations.forEach((violation) =>
+                this.$toast.open({ message: violation }),
+              );
+            } else {
+              this.$toast.open({ message: "An error occurred" });
             }
-            return users;
-        },
-        valueJob: {
-            get() {
-                return this.$store.state.accompanyingCourse.job;
-            },
-            set(value) {
-                this.$store
-                    .dispatch("updateJob", value)
-                    .catch(({ name, violations }) => {
-                        if (
-                            name === "ValidationException" ||
-                            name === "AccessException"
-                        ) {
-                            violations.forEach((violation) =>
-                                this.$toast.open({ message: violation }),
-                            );
-                        } else {
-                            this.$toast.open({ message: "An error occurred" });
-                        }
-                    });
-            },
-        },
+          });
+      },
     },
-    mounted() {
-        this.getJobs();
+  },
+  mounted() {
+    this.getJobs();
+  },
+  methods: {
+    updateReferrer(value) {
+      this.value = value;
+      this.toggleModal();
     },
-    methods: {
-        updateReferrer(value) {
-            this.value = value;
-            this.toggleModal();
-        },
-        getJobs() {
-            const url = "/api/1.0/main/user-job.json";
-            makeFetch("GET", url)
-                .then((response) => {
-                    this.jobs = response.results;
-                })
-                .catch((error) => {
-                    this.$toast.open({ message: error.txt });
-                });
-        },
-        customJobLabel(value) {
-            return value.label.fr;
-        },
-        assignMe() {
-            const url = `/api/1.0/main/whoami.json`;
-            makeFetch("GET", url).then((user) => {
-                // this.value = user
-                this.updateReferrer(user);
-            });
-        },
-        toggleModal() {
-            this.modal.showModal = !this.modal.showModal;
-        },
-        confirmReferrer() {
-            this.$store
-                .dispatch("updateReferrer", this.value)
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-            this.toggleModal();
-        },
-        removeReferrer() {
-            console.log("remove option");
-            this.$store
-                .dispatch("updateReferrer", null)
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        cancelChange() {
-            this.value = this.$store.state.accompanyingCourse.user;
-            this.toggleModal();
-        },
+    getJobs() {
+      const url = "/api/1.0/main/user-job.json";
+      makeFetch("GET", url)
+        .then((response) => {
+          this.jobs = response.results;
+        })
+        .catch((error) => {
+          this.$toast.open({ message: error.txt });
+        });
     },
+    customJobLabel(value) {
+      return value.label.fr;
+    },
+    assignMe() {
+      const url = `/api/1.0/main/whoami.json`;
+      makeFetch("GET", url).then((user) => {
+        // this.value = user
+        this.updateReferrer(user);
+      });
+    },
+    toggleModal() {
+      this.modal.showModal = !this.modal.showModal;
+    },
+    confirmReferrer() {
+      this.$store
+        .dispatch("updateReferrer", this.value)
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+      this.toggleModal();
+    },
+    removeReferrer() {
+      console.log("remove option");
+      this.$store
+        .dispatch("updateReferrer", null)
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+    },
+    cancelChange() {
+      this.value = this.$store.state.accompanyingCourse.user;
+      this.toggleModal();
+    },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
index c2b9acfc4..5858cdb00 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -1,263 +1,239 @@
 <template>
-    <div class="vue-component">
-        <h2><a id="section-50" />{{ $t("requestor.title") }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-50" />{{ $t("requestor.title") }}</h2>
 
-        <div
-            v-if="accompanyingCourse.requestor && isAnonymous"
-            class="flex-table"
-        >
-            <label>
-                <input
-                    type="checkbox"
-                    v-model="requestorIsAnonymous"
-                    class="me-2"
-                />
-                {{ $t("requestor.is_anonymous") }}
-            </label>
-            <confidential
-                v-if="accompanyingCourse.requestor.type === 'thirdparty'"
-            >
-                <template #confidential-content>
-                    <third-party-render-box
-                        :thirdparty="accompanyingCourse.requestor"
-                        :options="{
-                            addLink: false,
-                            addId: false,
-                            addEntity: true,
-                            addInfo: false,
-                            hLevel: 3,
-                            isMultiline: true,
-                            isConfidential: true,
-                        }"
-                    >
-                        <template #record-actions>
-                            <ul class="record_actions">
-                                <li>
-                                    <on-the-fly
-                                        :type="
-                                            accompanyingCourse.requestor.type
-                                        "
-                                        :id="accompanyingCourse.requestor.id"
-                                        action="show"
-                                    />
-                                </li>
-                                <li>
-                                    <on-the-fly
-                                        :type="
-                                            accompanyingCourse.requestor.type
-                                        "
-                                        :id="accompanyingCourse.requestor.id"
-                                        action="edit"
-                                        @save-form-on-the-fly="saveFormOnTheFly"
-                                        ref="onTheFly"
-                                    />
-                                </li>
-                            </ul>
-                        </template>
-                    </third-party-render-box>
-                </template>
-            </confidential>
-
-            <confidential
-                v-else-if="accompanyingCourse.requestor.type === 'person'"
-            >
-                <template #confidential-content>
-                    <person-render-box
-                        render="bloc"
-                        :person="accompanyingCourse.requestor"
-                        :options="{
-                            addLink: false,
-                            addId: false,
-                            addAltNames: false,
-                            addEntity: true,
-                            addInfo: true,
-                            hLevel: 3,
-                            isMultiline: true,
-                            isConfidential: false,
-                            addAge: true,
-                        }"
-                    >
-                        <template #record-actions>
-                            <ul class="record_actions">
-                                <li>
-                                    <on-the-fly
-                                        :type="
-                                            accompanyingCourse.requestor.type
-                                        "
-                                        :id="accompanyingCourse.requestor.id"
-                                        action="show"
-                                    />
-                                </li>
-                                <li>
-                                    <on-the-fly
-                                        :type="
-                                            accompanyingCourse.requestor.type
-                                        "
-                                        :id="accompanyingCourse.requestor.id"
-                                        action="edit"
-                                        @save-form-on-the-fly="saveFormOnTheFly"
-                                        ref="onTheFly"
-                                    />
-                                </li>
-                            </ul>
-                        </template>
-                    </person-render-box>
-                </template>
-            </confidential>
-
-            <ul class="record_actions">
+    <div v-if="accompanyingCourse.requestor && isAnonymous" class="flex-table">
+      <label>
+        <input type="checkbox" v-model="requestorIsAnonymous" class="me-2" />
+        {{ $t("requestor.is_anonymous") }}
+      </label>
+      <confidential v-if="accompanyingCourse.requestor.type === 'thirdparty'">
+        <template #confidential-content>
+          <third-party-render-box
+            :thirdparty="accompanyingCourse.requestor"
+            :options="{
+              addLink: false,
+              addId: false,
+              addEntity: true,
+              addInfo: false,
+              hLevel: 3,
+              isMultiline: true,
+              isConfidential: true,
+            }"
+          >
+            <template #record-actions>
+              <ul class="record_actions">
                 <li>
-                    <button
-                        class="btn btn-remove"
-                        :title="$t('action.remove')"
-                        @click="removeRequestor"
-                    >
-                        {{ $t("action.remove") }}
-                    </button>
+                  <on-the-fly
+                    :type="accompanyingCourse.requestor.type"
+                    :id="accompanyingCourse.requestor.id"
+                    action="show"
+                  />
                 </li>
-            </ul>
-        </div>
-
-        <div
-            v-else-if="accompanyingCourse.requestor && !isAnonymous"
-            class="flex-table"
-        >
-            <label>
-                <input
-                    type="checkbox"
-                    v-model="requestorIsAnonymous"
-                    class="me-2"
-                />
-                {{ $t("requestor.is_anonymous") }}
-            </label>
-
-            <third-party-render-box
-                v-if="accompanyingCourse.requestor.type === 'thirdparty'"
-                :thirdparty="accompanyingCourse.requestor"
-                :options="{
-                    addLink: false,
-                    addId: false,
-                    addEntity: true,
-                    addInfo: false,
-                    hLevel: 3,
-                    isMultiline: true,
-                    isConfidential: true,
-                }"
-            >
-                <template #record-actions>
-                    <ul class="record_actions">
-                        <li>
-                            <on-the-fly
-                                :type="accompanyingCourse.requestor.type"
-                                :id="accompanyingCourse.requestor.id"
-                                action="show"
-                            />
-                        </li>
-                        <li>
-                            <on-the-fly
-                                :type="accompanyingCourse.requestor.type"
-                                :id="accompanyingCourse.requestor.id"
-                                action="edit"
-                                @save-form-on-the-fly="saveFormOnTheFly"
-                                ref="onTheFly"
-                            />
-                        </li>
-                    </ul>
-                </template>
-            </third-party-render-box>
-
-            <person-render-box
-                render="bloc"
-                v-if="accompanyingCourse.requestor.type === 'person'"
-                :person="accompanyingCourse.requestor"
-                :options="{
-                    addLink: false,
-                    addId: false,
-                    addAltNames: false,
-                    addEntity: true,
-                    addInfo: true,
-                    hLevel: 3,
-                    isMultiline: true,
-                    isConfidential: false,
-                }"
-            >
-                <template #record-actions>
-                    <ul class="record_actions">
-                        <li>
-                            <on-the-fly
-                                :type="accompanyingCourse.requestor.type"
-                                :id="accompanyingCourse.requestor.id"
-                                action="show"
-                            />
-                        </li>
-                        <li>
-                            <on-the-fly
-                                :type="accompanyingCourse.requestor.type"
-                                :id="accompanyingCourse.requestor.id"
-                                action="edit"
-                                @save-form-on-the-fly="saveFormOnTheFly"
-                                ref="onTheFly"
-                            />
-                        </li>
-                    </ul>
-                </template>
-            </person-render-box>
-
-            <ul class="record_actions">
                 <li>
-                    <button
-                        class="btn btn-remove"
-                        :title="$t('action.remove')"
-                        @click="removeRequestor"
-                    >
-                        {{ $t("action.remove") }}
-                    </button>
+                  <on-the-fly
+                    :type="accompanyingCourse.requestor.type"
+                    :id="accompanyingCourse.requestor.id"
+                    action="edit"
+                    @save-form-on-the-fly="saveFormOnTheFly"
+                    ref="onTheFly"
+                  />
                 </li>
-            </ul>
-        </div>
+              </ul>
+            </template>
+          </third-party-render-box>
+        </template>
+      </confidential>
 
-        <div v-else>
-            <label class="chill-no-data-statement">{{
-                $t("requestor.counter")
-            }}</label>
-        </div>
-
-        <div
-            v-if="
-                accompanyingCourse.requestor === null &&
-                suggestedEntities.length > 0
-            "
-        >
-            <ul class="list-suggest add-items inline">
-                <li
-                    v-for="p in suggestedEntities"
-                    :key="uniqueId(p)"
-                    @click="addSuggestedEntity(p)"
-                >
-                    <person-text v-if="p.type === 'person'" :person="p" />
-                    <span v-else>{{ p.text }}</span>
+      <confidential v-else-if="accompanyingCourse.requestor.type === 'person'">
+        <template #confidential-content>
+          <person-render-box
+            render="bloc"
+            :person="accompanyingCourse.requestor"
+            :options="{
+              addLink: false,
+              addId: false,
+              addAltNames: false,
+              addEntity: true,
+              addInfo: true,
+              hLevel: 3,
+              isMultiline: true,
+              isConfidential: false,
+              addAge: true,
+            }"
+          >
+            <template #record-actions>
+              <ul class="record_actions">
+                <li>
+                  <on-the-fly
+                    :type="accompanyingCourse.requestor.type"
+                    :id="accompanyingCourse.requestor.id"
+                    action="show"
+                  />
                 </li>
-            </ul>
-        </div>
-
-        <div>
-            <ul class="record_actions">
-                <li class="add-persons">
-                    <add-persons
-                        v-if="accompanyingCourse.requestor === null"
-                        button-title="requestor.add_requestor"
-                        modal-title="requestor.add_requestor"
-                        :key="addPersons.key"
-                        :options="addPersons.options"
-                        @add-new-persons="addNewPersons"
-                        ref="addPersons"
-                    >
-                        <!-- to cast child method -->
-                    </add-persons>
+                <li>
+                  <on-the-fly
+                    :type="accompanyingCourse.requestor.type"
+                    :id="accompanyingCourse.requestor.id"
+                    action="edit"
+                    @save-form-on-the-fly="saveFormOnTheFly"
+                    ref="onTheFly"
+                  />
                 </li>
-            </ul>
-        </div>
+              </ul>
+            </template>
+          </person-render-box>
+        </template>
+      </confidential>
+
+      <ul class="record_actions">
+        <li>
+          <button
+            class="btn btn-remove"
+            :title="$t('action.remove')"
+            @click="removeRequestor"
+          >
+            {{ $t("action.remove") }}
+          </button>
+        </li>
+      </ul>
     </div>
+
+    <div
+      v-else-if="accompanyingCourse.requestor && !isAnonymous"
+      class="flex-table"
+    >
+      <label>
+        <input type="checkbox" v-model="requestorIsAnonymous" class="me-2" />
+        {{ $t("requestor.is_anonymous") }}
+      </label>
+
+      <third-party-render-box
+        v-if="accompanyingCourse.requestor.type === 'thirdparty'"
+        :thirdparty="accompanyingCourse.requestor"
+        :options="{
+          addLink: false,
+          addId: false,
+          addEntity: true,
+          addInfo: false,
+          hLevel: 3,
+          isMultiline: true,
+          isConfidential: true,
+        }"
+      >
+        <template #record-actions>
+          <ul class="record_actions">
+            <li>
+              <on-the-fly
+                :type="accompanyingCourse.requestor.type"
+                :id="accompanyingCourse.requestor.id"
+                action="show"
+              />
+            </li>
+            <li>
+              <on-the-fly
+                :type="accompanyingCourse.requestor.type"
+                :id="accompanyingCourse.requestor.id"
+                action="edit"
+                @save-form-on-the-fly="saveFormOnTheFly"
+                ref="onTheFly"
+              />
+            </li>
+          </ul>
+        </template>
+      </third-party-render-box>
+
+      <person-render-box
+        render="bloc"
+        v-if="accompanyingCourse.requestor.type === 'person'"
+        :person="accompanyingCourse.requestor"
+        :options="{
+          addLink: false,
+          addId: false,
+          addAltNames: false,
+          addEntity: true,
+          addInfo: true,
+          hLevel: 3,
+          isMultiline: true,
+          isConfidential: false,
+        }"
+      >
+        <template #record-actions>
+          <ul class="record_actions">
+            <li>
+              <on-the-fly
+                :type="accompanyingCourse.requestor.type"
+                :id="accompanyingCourse.requestor.id"
+                action="show"
+              />
+            </li>
+            <li>
+              <on-the-fly
+                :type="accompanyingCourse.requestor.type"
+                :id="accompanyingCourse.requestor.id"
+                action="edit"
+                @save-form-on-the-fly="saveFormOnTheFly"
+                ref="onTheFly"
+              />
+            </li>
+          </ul>
+        </template>
+      </person-render-box>
+
+      <ul class="record_actions">
+        <li>
+          <button
+            class="btn btn-remove"
+            :title="$t('action.remove')"
+            @click="removeRequestor"
+          >
+            {{ $t("action.remove") }}
+          </button>
+        </li>
+      </ul>
+    </div>
+
+    <div v-else>
+      <label class="chill-no-data-statement">{{
+        $t("requestor.counter")
+      }}</label>
+    </div>
+
+    <div
+      v-if="
+        accompanyingCourse.requestor === null && suggestedEntities.length > 0
+      "
+    >
+      <ul class="list-suggest add-items inline">
+        <li
+          v-for="p in suggestedEntities"
+          :key="uniqueId(p)"
+          @click="addSuggestedEntity(p)"
+        >
+          <person-text v-if="p.type === 'person'" :person="p" />
+          <span v-else>{{ p.text }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div>
+      <ul class="record_actions">
+        <li class="add-persons">
+          <add-persons
+            v-if="accompanyingCourse.requestor === null"
+            button-title="requestor.add_requestor"
+            modal-title="requestor.add_requestor"
+            :key="addPersons.key"
+            :options="addPersons.options"
+            @add-new-persons="addNewPersons"
+            ref="addPersons"
+          >
+            <!-- to cast child method -->
+          </add-persons>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -271,221 +247,208 @@ import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
 
 export default {
-    name: "Requestor",
-    components: {
-        AddPersons,
-        OnTheFly,
-        PersonRenderBox,
-        ThirdPartyRenderBox,
-        Confidential,
-        PersonText,
-    },
-    props: ["isAnonymous"],
-    data() {
-        return {
-            addPersons: {
-                key: "requestor",
-                options: {
-                    type: ["person", "thirdparty"],
-                    priority: null,
-                    uniq: true,
-                },
-            },
-        };
-    },
-    computed: {
-        ...mapState({
-            suggestedEntities: (state) => {
-                return (
-                    [
-                        ...state.accompanyingCourse.participations
-                            .filter((p) => p.endDate === null)
-                            .map((p) => p.person),
-                        ...state.accompanyingCourse.resources.map(
-                            (r) => r.resource,
-                        ),
-                    ]
-                        .filter((e) => e !== null)
-                        // filter for same entity appearing twice
-                        .filter((e, index, suggested) => {
-                            for (let i = 0; i < suggested.length; i = i + 1) {
-                                if (
-                                    i < index &&
-                                    e.id === suggested[i].id &&
-                                    e.type === suggested[i].type
-                                ) {
-                                    return false;
-                                }
-                            }
+  name: "Requestor",
+  components: {
+    AddPersons,
+    OnTheFly,
+    PersonRenderBox,
+    ThirdPartyRenderBox,
+    Confidential,
+    PersonText,
+  },
+  props: ["isAnonymous"],
+  data() {
+    return {
+      addPersons: {
+        key: "requestor",
+        options: {
+          type: ["person", "thirdparty"],
+          priority: null,
+          uniq: true,
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      suggestedEntities: (state) => {
+        return (
+          [
+            ...state.accompanyingCourse.participations
+              .filter((p) => p.endDate === null)
+              .map((p) => p.person),
+            ...state.accompanyingCourse.resources.map((r) => r.resource),
+          ]
+            .filter((e) => e !== null)
+            // filter for same entity appearing twice
+            .filter((e, index, suggested) => {
+              for (let i = 0; i < suggested.length; i = i + 1) {
+                if (
+                  i < index &&
+                  e.id === suggested[i].id &&
+                  e.type === suggested[i].type
+                ) {
+                  return false;
+                }
+              }
 
-                            return true;
-                        })
-                );
-            },
-        }),
-        accompanyingCourse() {
-            return this.$store.state.accompanyingCourse;
-        },
-        requestorIsAnonymous: {
-            set(value) {
-                this.$store.dispatch("requestorIsAnonymous", value);
-            },
-            get() {
-                return this.$store.state.accompanyingCourse.requestorAnonymous;
-            },
-        },
+              return true;
+            })
+        );
+      },
+    }),
+    accompanyingCourse() {
+      return this.$store.state.accompanyingCourse;
     },
-    methods: {
-        removeRequestor() {
-            //console.log('@@ CLICK remove requestor: item');
-            this.$store
-                .dispatch("removeRequestor")
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        addNewPersons({ selected, modal }) {
-            //console.log('@@@ CLICK button addNewPersons', selected);
-            this.$store
-                .dispatch("addRequestor", selected.shift())
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-
-            this.$refs.addPersons.resetSearch(); // to cast child method
-            modal.showModal = false;
-        },
-        saveFormOnTheFly(payload) {
-            console.log(
-                "saveFormOnTheFly: type",
-                payload.type,
-                ", data",
-                payload.data,
+    requestorIsAnonymous: {
+      set(value) {
+        this.$store.dispatch("requestorIsAnonymous", value);
+      },
+      get() {
+        return this.$store.state.accompanyingCourse.requestorAnonymous;
+      },
+    },
+  },
+  methods: {
+    removeRequestor() {
+      //console.log('@@ CLICK remove requestor: item');
+      this.$store.dispatch("removeRequestor").catch(({ name, violations }) => {
+        if (name === "ValidationException" || name === "AccessException") {
+          violations.forEach((violation) =>
+            this.$toast.open({ message: violation }),
+          );
+        } else {
+          this.$toast.open({ message: "An error occurred" });
+        }
+      });
+    },
+    addNewPersons({ selected, modal }) {
+      //console.log('@@@ CLICK button addNewPersons', selected);
+      this.$store
+        .dispatch("addRequestor", selected.shift())
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
             );
-            payload.target = "requestor";
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
 
-            let body = { type: payload.type };
-            if (payload.type === "person") {
-                body.firstName = payload.data.firstName;
-                body.lastName = payload.data.lastName;
-                if (payload.data.birthdate !== null) {
-                    body.birthdate = payload.data.birthdate;
-                }
-                body.phonenumber = payload.data.phonenumber;
-                body.mobilenumber = payload.data.mobilenumber;
-                body.email = payload.data.email;
-                body.altNames = payload.data.altNames;
-                body.gender = payload.data.gender;
-
-                makeFetch(
-                    "PATCH",
-                    `/api/1.0/person/person/${payload.data.id}.json`,
-                    body,
-                )
-                    .then((response) => {
-                        this.$store.dispatch("addPerson", {
-                            target: payload.target,
-                            body: response,
-                        });
-                        this.$refs.onTheFly.closeModal();
-                    })
-                    .catch((error) => {
-                        if (error.name === "ValidationException") {
-                            for (let v of error.violations) {
-                                this.$toast.open({ message: v });
-                            }
-                        } else {
-                            this.$toast.open({ message: "An error occurred" });
-                        }
-                    });
-            } else if (payload.type === "thirdparty") {
-                body.name = payload.data.text;
-                body.email = payload.data.email;
-                body.telephone = payload.data.telephone;
-                body.telephone2 = payload.data.telephone2;
-                if (payload.data.address) {
-                    body.address = { id: payload.data.address.address_id };
-                }
-
-                makeFetch(
-                    "PATCH",
-                    `/api/1.0/thirdparty/thirdparty/${payload.data.id}.json`,
-                    body,
-                )
-                    .then((response) => {
-                        this.$store.dispatch("addThirdparty", {
-                            target: payload.target,
-                            body: response,
-                        });
-                        this.$refs.onTheFly.closeModal();
-                    })
-                    .catch((error) => {
-                        if (error.name === "ValidationException") {
-                            for (let v of error.violations) {
-                                this.$toast.open({ message: v });
-                            }
-                        } else {
-                            this.$toast.open({ message: "An error occurred" });
-                        }
-                    });
-            }
-        },
-        addSuggestedEntity(e) {
-            this.$store
-                .dispatch("addRequestor", { result: e, type: e.type })
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        uniqueId(e) {
-            return `${e.type}-${e.id}`;
-        },
+      this.$refs.addPersons.resetSearch(); // to cast child method
+      modal.showModal = false;
     },
+    saveFormOnTheFly(payload) {
+      console.log(
+        "saveFormOnTheFly: type",
+        payload.type,
+        ", data",
+        payload.data,
+      );
+      payload.target = "requestor";
+
+      let body = { type: payload.type };
+      if (payload.type === "person") {
+        body.firstName = payload.data.firstName;
+        body.lastName = payload.data.lastName;
+        if (payload.data.birthdate !== null) {
+          body.birthdate = payload.data.birthdate;
+        }
+        body.phonenumber = payload.data.phonenumber;
+        body.mobilenumber = payload.data.mobilenumber;
+        body.email = payload.data.email;
+        body.altNames = payload.data.altNames;
+        body.gender = payload.data.gender;
+
+        makeFetch(
+          "PATCH",
+          `/api/1.0/person/person/${payload.data.id}.json`,
+          body,
+        )
+          .then((response) => {
+            this.$store.dispatch("addPerson", {
+              target: payload.target,
+              body: response,
+            });
+            this.$refs.onTheFly.closeModal();
+          })
+          .catch((error) => {
+            if (error.name === "ValidationException") {
+              for (let v of error.violations) {
+                this.$toast.open({ message: v });
+              }
+            } else {
+              this.$toast.open({ message: "An error occurred" });
+            }
+          });
+      } else if (payload.type === "thirdparty") {
+        body.name = payload.data.text;
+        body.email = payload.data.email;
+        body.telephone = payload.data.telephone;
+        body.telephone2 = payload.data.telephone2;
+        if (payload.data.address) {
+          body.address = { id: payload.data.address.address_id };
+        }
+
+        makeFetch(
+          "PATCH",
+          `/api/1.0/thirdparty/thirdparty/${payload.data.id}.json`,
+          body,
+        )
+          .then((response) => {
+            this.$store.dispatch("addThirdparty", {
+              target: payload.target,
+              body: response,
+            });
+            this.$refs.onTheFly.closeModal();
+          })
+          .catch((error) => {
+            if (error.name === "ValidationException") {
+              for (let v of error.violations) {
+                this.$toast.open({ message: v });
+              }
+            } else {
+              this.$toast.open({ message: "An error occurred" });
+            }
+          });
+      }
+    },
+    addSuggestedEntity(e) {
+      this.$store
+        .dispatch("addRequestor", { result: e, type: e.type })
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+    },
+    uniqueId(e) {
+      return `${e.type}-${e.id}`;
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 div.flex-table {
-    margin: 1em 0 0 !important;
-    & > label,
-    & > ul.record_actions {
-        margin: 1em 3em 0 !important;
-    }
-    div.item-bloc {
-        background-color: white !important;
-        margin-top: 1em;
-    }
+  margin: 1em 0 0 !important;
+  & > label,
+  & > ul.record_actions {
+    margin: 1em 3em 0 !important;
+  }
+  div.item-bloc {
+    background-color: white !important;
+    margin-top: 1em;
+  }
 }
 
 .confidential {
-    display: block;
-    margin-right: 0px !important;
+  display: block;
+  margin-right: 0px !important;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
index 1ef9bfe45..fa600bfdd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
@@ -1,57 +1,57 @@
 <template>
-    <div class="vue-component">
-        <h2><a id="section-90" />{{ $t("resources.title") }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-90" />{{ $t("resources.title") }}</h2>
 
-        <div v-if="resources.length > 0">
-            <label class="col-form-label">{{
-                $tc("resources.counter", counter)
-            }}</label>
-        </div>
-        <div v-else>
-            <label class="chill-no-data-statement">{{
-                $tc("resources.counter", counter)
-            }}</label>
-        </div>
-
-        <div class="flex-table mb-3">
-            <resource-item
-                v-for="resource in resources"
-                :resource="resource"
-                :key="resource.id"
-                @remove="removeResource"
-            />
-        </div>
-
-        <div v-if="suggestedEntities.length > 0">
-            <ul class="list-suggest add-items inline">
-                <li
-                    v-for="p in suggestedEntities"
-                    :key="uniqueId(p)"
-                    @click="addSuggestedEntity(p)"
-                >
-                    <person-text v-if="p.type === 'person'" :person="p" />
-                    <span v-else>{{ p.text }}</span>
-                </li>
-            </ul>
-        </div>
-
-        <div>
-            <ul class="record_actions">
-                <li class="add-persons">
-                    <add-persons
-                        button-title="resources.add_resources"
-                        modal-title="resources.add_resources"
-                        :key="addPersons.key"
-                        :options="addPersons.options"
-                        @add-new-persons="addNewPersons"
-                        ref="addPersons"
-                    >
-                        <!-- to cast child method -->
-                    </add-persons>
-                </li>
-            </ul>
-        </div>
+    <div v-if="resources.length > 0">
+      <label class="col-form-label">{{
+        $tc("resources.counter", counter)
+      }}</label>
     </div>
+    <div v-else>
+      <label class="chill-no-data-statement">{{
+        $tc("resources.counter", counter)
+      }}</label>
+    </div>
+
+    <div class="flex-table mb-3">
+      <resource-item
+        v-for="resource in resources"
+        :resource="resource"
+        :key="resource.id"
+        @remove="removeResource"
+      />
+    </div>
+
+    <div v-if="suggestedEntities.length > 0">
+      <ul class="list-suggest add-items inline">
+        <li
+          v-for="p in suggestedEntities"
+          :key="uniqueId(p)"
+          @click="addSuggestedEntity(p)"
+        >
+          <person-text v-if="p.type === 'person'" :person="p" />
+          <span v-else>{{ p.text }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div>
+      <ul class="record_actions">
+        <li class="add-persons">
+          <add-persons
+            button-title="resources.add_resources"
+            modal-title="resources.add_resources"
+            :key="addPersons.key"
+            :options="addPersons.options"
+            @add-new-persons="addNewPersons"
+            ref="addPersons"
+          >
+            <!-- to cast child method -->
+          </add-persons>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -61,126 +61,117 @@ import ResourceItem from "./Resources/ResourceItem.vue";
 import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
 
 export default {
-    name: "Resources",
-    components: {
-        AddPersons,
-        ResourceItem,
-        PersonText,
-    },
-    data() {
-        return {
-            addPersons: {
-                key: "resources",
-                options: {
-                    type: ["person", "thirdparty"],
-                    priority: null,
-                    uniq: false,
-                },
-            },
-        };
-    },
-    computed: mapState({
-        resources: (state) => state.accompanyingCourse.resources,
-        counter: (state) => state.accompanyingCourse.resources.length,
-        suggestedEntities: (state) =>
-            [
-                state.accompanyingCourse.requestor,
-                ...state.accompanyingCourse.participations
-                    .filter((p) => p.endDate === null)
-                    .map((p) => p.person),
-            ]
-                .filter((e) => e !== null)
-                .filter((e) => {
-                    if (e.type === "person") {
-                        return !state.accompanyingCourse.resources
-                            .filter((r) => r.resource.type === "person")
-                            .map((r) => r.resource.id)
-                            .includes(e.id);
-                    }
-                    if (e.type === "thirdparty") {
-                        return !state.accompanyingCourse.resources
-                            .filter((r) => r.resource.type === "thirdparty")
-                            .map((r) => r.resource.id)
-                            .includes(e.id);
-                    }
-                })
-                // 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;
-                        }
-                    }
+  name: "Resources",
+  components: {
+    AddPersons,
+    ResourceItem,
+    PersonText,
+  },
+  data() {
+    return {
+      addPersons: {
+        key: "resources",
+        options: {
+          type: ["person", "thirdparty"],
+          priority: null,
+          uniq: false,
+        },
+      },
+    };
+  },
+  computed: mapState({
+    resources: (state) => state.accompanyingCourse.resources,
+    counter: (state) => state.accompanyingCourse.resources.length,
+    suggestedEntities: (state) =>
+      [
+        state.accompanyingCourse.requestor,
+        ...state.accompanyingCourse.participations
+          .filter((p) => p.endDate === null)
+          .map((p) => p.person),
+      ]
+        .filter((e) => e !== null)
+        .filter((e) => {
+          if (e.type === "person") {
+            return !state.accompanyingCourse.resources
+              .filter((r) => r.resource.type === "person")
+              .map((r) => r.resource.id)
+              .includes(e.id);
+          }
+          if (e.type === "thirdparty") {
+            return !state.accompanyingCourse.resources
+              .filter((r) => r.resource.type === "thirdparty")
+              .map((r) => r.resource.id)
+              .includes(e.id);
+          }
+        })
+        // 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;
+            }
+          }
 
-                    return true;
-                }),
-    }),
-    methods: {
-        removeResource(item) {
-            //console.log('@@ CLICK remove resource: item', item);
-            this.$store
-                .dispatch("removeResource", item)
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        addNewPersons({ selected, modal }) {
-            //console.log('@@@ CLICK button addNewPersons', selected);
-            selected.forEach(function (item) {
-                this.$store
-                    .dispatch("addResource", item)
-                    .catch(({ name, violations }) => {
-                        if (
-                            name === "ValidationException" ||
-                            name === "AccessException"
-                        ) {
-                            violations.forEach((violation) =>
-                                this.$toast.open({ message: violation }),
-                            );
-                        } else {
-                            this.$toast.open({ message: violations });
-                        }
-                    });
-            }, this);
-            this.$refs.addPersons.resetSearch(); // to cast child method
-            modal.showModal = false;
-        },
-        addSuggestedEntity(e) {
-            this.$store
-                .dispatch("addResource", { result: e, type: e.type })
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        uniqueId(e) {
-            return `${e.type}-${e.id}`;
-        },
+          return true;
+        }),
+  }),
+  methods: {
+    removeResource(item) {
+      //console.log('@@ CLICK remove resource: item', item);
+      this.$store
+        .dispatch("removeResource", item)
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
     },
+    addNewPersons({ selected, modal }) {
+      //console.log('@@@ CLICK button addNewPersons', selected);
+      selected.forEach(function (item) {
+        this.$store
+          .dispatch("addResource", item)
+          .catch(({ name, violations }) => {
+            if (name === "ValidationException" || name === "AccessException") {
+              violations.forEach((violation) =>
+                this.$toast.open({ message: violation }),
+              );
+            } else {
+              this.$toast.open({ message: violations });
+            }
+          });
+      }, this);
+      this.$refs.addPersons.resetSearch(); // to cast child method
+      modal.showModal = false;
+    },
+    addSuggestedEntity(e) {
+      this.$store
+        .dispatch("addResource", { result: e, type: e.type })
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+    },
+    uniqueId(e) {
+      return `${e.type}-${e.id}`;
+    },
+  },
 };
 </script>
 
 <style lang="scss">
 div.flex-bloc {
-    div.item-bloc {
-        flex-basis: 50%;
-    }
+  div.item-bloc {
+    flex-basis: 50%;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
index 8a52748d4..87daacf47 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
@@ -1,107 +1,107 @@
 <template>
-    <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,
-        }"
-    >
-        <template #end-bloc>
-            <div class="item-row separator">
-                <ul class="record_actions">
-                    <li>
-                        <write-comment
-                            :resource="resource"
-                            @update-comment="updateComment"
-                        />
-                    </li>
-                    <li>
-                        <on-the-fly
-                            :parent="parent"
-                            :type="resource.resource.type"
-                            :id="resource.resource.id"
-                            action="show"
-                        />
-                    </li>
-                    <li>
-                        <on-the-fly
-                            :parent="parent"
-                            :type="resource.resource.type"
-                            :id="resource.resource.id"
-                            action="edit"
-                            @save-form-on-the-fly="saveFormOnTheFly"
-                            ref="onTheFly"
-                        />
-                    </li>
-                    <li>
-                        <button
-                            class="btn btn-sm btn-remove"
-                            :title="$t('action.remove')"
-                            @click.prevent="$emit('remove', resource)"
-                        />
-                    </li>
-                </ul>
-            </div>
-        </template>
-    </person-render-box>
+  <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,
+    }"
+  >
+    <template #end-bloc>
+      <div class="item-row separator">
+        <ul class="record_actions">
+          <li>
+            <write-comment
+              :resource="resource"
+              @update-comment="updateComment"
+            />
+          </li>
+          <li>
+            <on-the-fly
+              :parent="parent"
+              :type="resource.resource.type"
+              :id="resource.resource.id"
+              action="show"
+            />
+          </li>
+          <li>
+            <on-the-fly
+              :parent="parent"
+              :type="resource.resource.type"
+              :id="resource.resource.id"
+              action="edit"
+              @save-form-on-the-fly="saveFormOnTheFly"
+              ref="onTheFly"
+            />
+          </li>
+          <li>
+            <button
+              class="btn btn-sm btn-remove"
+              :title="$t('action.remove')"
+              @click.prevent="$emit('remove', resource)"
+            />
+          </li>
+        </ul>
+      </div>
+    </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,
-        }"
-    >
-        <template #end-bloc>
-            <div class="item-row separator">
-                <ul class="record_actions">
-                    <li>
-                        <write-comment
-                            :resource="resource"
-                            @update-comment="updateComment"
-                        />
-                    </li>
-                    <li>
-                        <on-the-fly
-                            :parent="parent"
-                            :type="resource.resource.type"
-                            :id="resource.resource.id"
-                            action="show"
-                        />
-                    </li>
-                    <li>
-                        <on-the-fly
-                            :parent="parent"
-                            :type="resource.resource.type"
-                            :id="resource.resource.id"
-                            action="edit"
-                            @save-form-on-the-fly="saveFormOnTheFly"
-                            ref="onTheFly"
-                        />
-                    </li>
-                    <li>
-                        <button
-                            class="btn btn-sm btn-remove"
-                            :title="$t('action.remove')"
-                            @click.prevent="$emit('remove', resource)"
-                        />
-                    </li>
-                </ul>
-            </div>
-        </template>
-    </third-party-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,
+    }"
+  >
+    <template #end-bloc>
+      <div class="item-row separator">
+        <ul class="record_actions">
+          <li>
+            <write-comment
+              :resource="resource"
+              @update-comment="updateComment"
+            />
+          </li>
+          <li>
+            <on-the-fly
+              :parent="parent"
+              :type="resource.resource.type"
+              :id="resource.resource.id"
+              action="show"
+            />
+          </li>
+          <li>
+            <on-the-fly
+              :parent="parent"
+              :type="resource.resource.type"
+              :id="resource.resource.id"
+              action="edit"
+              @save-form-on-the-fly="saveFormOnTheFly"
+              ref="onTheFly"
+            />
+          </li>
+          <li>
+            <button
+              class="btn btn-sm btn-remove"
+              :title="$t('action.remove')"
+              @click.prevent="$emit('remove', resource)"
+            />
+          </li>
+        </ul>
+      </div>
+    </template>
+  </third-party-render-box>
 </template>
 
 <script>
@@ -112,130 +112,130 @@ import WriteComment from "./WriteComment";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 
 export default {
-    name: "ResourceItem",
-    components: {
-        OnTheFly,
-        PersonRenderBox,
-        ThirdPartyRenderBox,
-        WriteComment,
-    },
-    props: ["resource"],
-    emits: ["remove"],
-    computed: {
-        parent() {
-            return {
-                type: this.resource.type,
-                id: this.resource.id,
-                comment: this.resource.comment,
-                parent: {
-                    type: this.$store.state.accompanyingCourse.type,
-                    id: this.$store.state.accompanyingCourse.id,
-                },
-            };
+  name: "ResourceItem",
+  components: {
+    OnTheFly,
+    PersonRenderBox,
+    ThirdPartyRenderBox,
+    WriteComment,
+  },
+  props: ["resource"],
+  emits: ["remove"],
+  computed: {
+    parent() {
+      return {
+        type: this.resource.type,
+        id: this.resource.id,
+        comment: this.resource.comment,
+        parent: {
+          type: this.$store.state.accompanyingCourse.type,
+          id: this.$store.state.accompanyingCourse.id,
         },
-        hasCurrentHouseholdAddress() {
-            if (this.resource.resource.current_household_address !== null) {
-                return true;
+      };
+    },
+    hasCurrentHouseholdAddress() {
+      if (this.resource.resource.current_household_address !== null) {
+        return true;
+      }
+      return false;
+    },
+  },
+  methods: {
+    saveFormOnTheFly(payload) {
+      // console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
+      payload.target = "resource";
+
+      let body = { type: payload.type };
+      if (payload.type === "person") {
+        body.firstName = payload.data.firstName;
+        body.lastName = payload.data.lastName;
+        if (payload.data.birthdate !== null) {
+          body.birthdate = payload.data.birthdate;
+        }
+        body.phonenumber = payload.data.phonenumber;
+        body.mobilenumber = payload.data.mobilenumber;
+        body.email = payload.data.email;
+        body.altNames = payload.data.altNames;
+        body.gender = {
+          id: payload.data.gender.id,
+          type: payload.data.gender.type,
+        };
+        if (payload.data.civility !== null) {
+          body.civility = {
+            id: payload.data.civility.id,
+            type: payload.data.civility.type,
+          };
+        }
+
+        makeFetch(
+          "PATCH",
+          `/api/1.0/person/person/${payload.data.id}.json`,
+          body,
+        )
+          .then((response) => {
+            this.$store.dispatch("addPerson", {
+              target: payload.target,
+              body: response,
+            });
+            this.$refs.onTheFly.closeModal();
+          })
+          .catch((error) => {
+            if (error.name === "ValidationException") {
+              for (let v of error.violations) {
+                this.$toast.open({ message: v });
+              }
+            } else {
+              this.$toast.open({ message: "An error occurred" });
             }
-            return false;
-        },
-    },
-    methods: {
-        saveFormOnTheFly(payload) {
-            // console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
-            payload.target = "resource";
+          });
+      } else if (payload.type === "thirdparty") {
+        // console.log('data', payload.data)
+        body.firstname = payload.data.firstname;
+        body.name = payload.data.name;
+        body.email = payload.data.email;
+        body.telephone = payload.data.telephone;
+        body.telephone2 = payload.data.telephone2;
+        body.address = payload.data.address
+          ? { id: payload.data.address.address_id }
+          : null;
+        if (null !== payload.data.civility) {
+          body.civility = {
+            type: "chill_main_civility",
+            id: payload.data.civility.id,
+          };
+        }
+        if (null !== payload.data.profession) {
+          body.profession = payload.data.profession;
+        }
+        // console.log('body', body);
 
-            let body = { type: payload.type };
-            if (payload.type === "person") {
-                body.firstName = payload.data.firstName;
-                body.lastName = payload.data.lastName;
-                if (payload.data.birthdate !== null) {
-                    body.birthdate = payload.data.birthdate;
-                }
-                body.phonenumber = payload.data.phonenumber;
-                body.mobilenumber = payload.data.mobilenumber;
-                body.email = payload.data.email;
-                body.altNames = payload.data.altNames;
-                body.gender = {
-                    id: payload.data.gender.id,
-                    type: payload.data.gender.type,
-                };
-                if (payload.data.civility !== null) {
-                    body.civility = {
-                        id: payload.data.civility.id,
-                        type: payload.data.civility.type,
-                    };
-                }
-
-                makeFetch(
-                    "PATCH",
-                    `/api/1.0/person/person/${payload.data.id}.json`,
-                    body,
-                )
-                    .then((response) => {
-                        this.$store.dispatch("addPerson", {
-                            target: payload.target,
-                            body: response,
-                        });
-                        this.$refs.onTheFly.closeModal();
-                    })
-                    .catch((error) => {
-                        if (error.name === "ValidationException") {
-                            for (let v of error.violations) {
-                                this.$toast.open({ message: v });
-                            }
-                        } else {
-                            this.$toast.open({ message: "An error occurred" });
-                        }
-                    });
-            } else if (payload.type === "thirdparty") {
-                // console.log('data', payload.data)
-                body.firstname = payload.data.firstname;
-                body.name = payload.data.name;
-                body.email = payload.data.email;
-                body.telephone = payload.data.telephone;
-                body.telephone2 = payload.data.telephone2;
-                body.address = payload.data.address
-                    ? { id: payload.data.address.address_id }
-                    : null;
-                if (null !== payload.data.civility) {
-                    body.civility = {
-                        type: "chill_main_civility",
-                        id: payload.data.civility.id,
-                    };
-                }
-                if (null !== payload.data.profession) {
-                    body.profession = payload.data.profession;
-                }
-                // console.log('body', body);
-
-                makeFetch(
-                    "PATCH",
-                    `/api/1.0/thirdparty/thirdparty/${payload.data.id}.json`,
-                    body,
-                )
-                    .then((response) => {
-                        this.$store.dispatch("addThirdparty", {
-                            target: payload.target,
-                            body: response,
-                        });
-                        this.$refs.onTheFly.closeModal();
-                    })
-                    .catch((error) => {
-                        if (error.name === "ValidationException") {
-                            for (let v of error.violations) {
-                                this.$toast.open({ message: v });
-                            }
-                        } else {
-                            this.$toast.open({ message: "An error occurred" });
-                        }
-                    });
+        makeFetch(
+          "PATCH",
+          `/api/1.0/thirdparty/thirdparty/${payload.data.id}.json`,
+          body,
+        )
+          .then((response) => {
+            this.$store.dispatch("addThirdparty", {
+              target: payload.target,
+              body: response,
+            });
+            this.$refs.onTheFly.closeModal();
+          })
+          .catch((error) => {
+            if (error.name === "ValidationException") {
+              for (let v of error.violations) {
+                this.$toast.open({ message: v });
+              }
+            } else {
+              this.$toast.open({ message: "An error occurred" });
             }
-        },
-        updateComment(resource) {
-            console.log("updateComment", resource);
-            this.$store.commit("updateResource", resource);
-        },
+          });
+      }
     },
+    updateComment(resource) {
+      console.log("updateComment", resource);
+      this.$store.commit("updateResource", resource);
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue
index 26b561c5d..416c6085c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue
@@ -1,34 +1,32 @@
 <template>
-    <a
-        class="btn btn-sm btn-misc change-icon"
-        :title="$t('write_comment')"
-        @click="openModal"
-        ><i class="fa fa-pencil-square-o" />
-    </a>
+  <a
+    class="btn btn-sm btn-misc change-icon"
+    :title="$t('write_comment')"
+    @click="openModal"
+    ><i class="fa fa-pencil-square-o" />
+  </a>
 
-    <teleport to="body">
-        <modal
-            v-if="modal.showModal"
-            :modal-dialog-class="modal.modalDialogClass"
-            @close="modal.showModal = false"
-        >
-            <template #header>
-                <h3 class="modal-title">
-                    {{
-                        $t("write_comment_about", { r: resource.resource.text })
-                    }}
-                </h3>
-            </template>
-            <template #body>
-                <comment-editor v-model="content" />
-            </template>
-            <template #footer>
-                <a class="btn btn-save" @click="saveAction">
-                    {{ $t("action.save") }}
-                </a>
-            </template>
-        </modal>
-    </teleport>
+  <teleport to="body">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h3 class="modal-title">
+          {{ $t("write_comment_about", { r: resource.resource.text }) }}
+        </h3>
+      </template>
+      <template #body>
+        <comment-editor v-model="content" />
+      </template>
+      <template #footer>
+        <a class="btn btn-save" @click="saveAction">
+          {{ $t("action.save") }}
+        </a>
+      </template>
+    </modal>
+  </teleport>
 </template>
 
 <script>
@@ -37,71 +35,71 @@ import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 export default {
-    name: "WriteComment",
-    components: {
-        Modal,
-        CommentEditor,
+  name: "WriteComment",
+  components: {
+    Modal,
+    CommentEditor,
+  },
+  props: ["resource"],
+  emits: ["updateComment"],
+  data() {
+    return {
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-scrollable modal-xl",
+      },
+      formdata: {
+        content: this.resource.comment,
+      },
+    };
+  },
+  i18n: {
+    messages: {
+      fr: {
+        write_comment: "Écrire un commentaire",
+        write_comment_about: "Écrire un commentaire à propos de {r}",
+        comment_placeholder: "Commencez à écrire...",
+      },
     },
-    props: ["resource"],
-    emits: ["updateComment"],
-    data() {
-        return {
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-scrollable modal-xl",
-            },
-            formdata: {
-                content: this.resource.comment,
-            },
+  },
+  computed: {
+    editor: () => ClassicEditor,
+    editorConfig: () => classicEditorConfig,
+    content: {
+      set(value) {
+        this.formdata.content = value;
+      },
+      get() {
+        return this.formdata.content;
+      },
+    },
+  },
+  methods: {
+    openModal() {
+      //console.log('write comment for', this.resource.resource.type, this.resource.resource.id);
+      this.modal.showModal = true;
+    },
+    saveAction() {
+      //console.log('save comment', this.resource.id, this.formdata.content);
+      this.patchResource(this.resource.id, this.formdata.content);
+    },
+    patchResource(id, comment) {
+      let url = `/api/1.0/person/accompanying-period/resource/${id}.json`,
+        body = {
+          type: "accompanying_period_resource",
+          comment: comment,
         };
+      makeFetch("PATCH", url, body).then((r) => {
+        let resource = {
+          type: "accompanying_period_resource",
+          id: r.id,
+          comment: r.comment,
+          resource: r.resource,
+        };
+        this.$emit("updateComment", resource);
+        this.modal.showModal = false;
+      });
     },
-    i18n: {
-        messages: {
-            fr: {
-                write_comment: "Écrire un commentaire",
-                write_comment_about: "Écrire un commentaire à propos de {r}",
-                comment_placeholder: "Commencez à écrire...",
-            },
-        },
-    },
-    computed: {
-        editor: () => ClassicEditor,
-        editorConfig: () => classicEditorConfig,
-        content: {
-            set(value) {
-                this.formdata.content = value;
-            },
-            get() {
-                return this.formdata.content;
-            },
-        },
-    },
-    methods: {
-        openModal() {
-            //console.log('write comment for', this.resource.resource.type, this.resource.resource.id);
-            this.modal.showModal = true;
-        },
-        saveAction() {
-            //console.log('save comment', this.resource.id, this.formdata.content);
-            this.patchResource(this.resource.id, this.formdata.content);
-        },
-        patchResource(id, comment) {
-            let url = `/api/1.0/person/accompanying-period/resource/${id}.json`,
-                body = {
-                    type: "accompanying_period_resource",
-                    comment: comment,
-                };
-            makeFetch("PATCH", url, body).then((r) => {
-                let resource = {
-                    type: "accompanying_period_resource",
-                    id: r.id,
-                    comment: r.comment,
-                    resource: r.resource,
-                };
-                this.$emit("updateComment", resource);
-                this.modal.showModal = false;
-            });
-        },
-    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue
index 1d05e0bbe..fee6a89ad 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue
@@ -1,25 +1,25 @@
 <template>
-    <div class="vue-component">
-        <h2><a id="section-70" />{{ $t("scopes.title") }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-70" />{{ $t("scopes.title") }}</h2>
 
-        <div class="mb-4">
-            <div class="form-check" v-for="s in scopes" :key="s.id">
-                <input
-                    class="form-check-input"
-                    type="checkbox"
-                    v-model="checkedScopes"
-                    :value="s"
-                />
-                <label class="form-check-label">
-                    {{ localizeString(s.name) }}
-                </label>
-            </div>
-        </div>
-
-        <div v-if="!isScopeValid" class="alert alert-warning to-confirm">
-            {{ $t("scopes.add_at_least_one") }}
-        </div>
+    <div class="mb-4">
+      <div class="form-check" v-for="s in scopes" :key="s.id">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          v-model="checkedScopes"
+          :value="s"
+        />
+        <label class="form-check-label">
+          {{ localizeString(s.name) }}
+        </label>
+      </div>
     </div>
+
+    <div v-if="!isScopeValid" class="alert alert-warning to-confirm">
+      {{ $t("scopes.add_at_least_one") }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -27,38 +27,33 @@ import { mapState, mapGetters } from "vuex";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 export default {
-    name: "Scopes",
-    computed: {
-        ...mapState(["scopes", "scopesAtStart"]),
-        ...mapGetters(["isScopeValid"]),
-        checkedScopes: {
-            get: function () {
-                return this.$store.state.accompanyingCourse.scopes;
-            },
-            set: function (v) {
-                this.$store
-                    .dispatch("setScopes", v)
-                    .catch(({ name, violations }) => {
-                        if (
-                            name === "ValidationException" ||
-                            name === "AccessException"
-                        ) {
-                            violations.forEach((violation) =>
-                                this.$toast.open({ message: violation }),
-                            );
-                        } else {
-                            this.$toast.open({ message: "An error occurred" });
-                        }
-                    });
-            },
-        },
+  name: "Scopes",
+  computed: {
+    ...mapState(["scopes", "scopesAtStart"]),
+    ...mapGetters(["isScopeValid"]),
+    checkedScopes: {
+      get: function () {
+        return this.$store.state.accompanyingCourse.scopes;
+      },
+      set: function (v) {
+        this.$store.dispatch("setScopes", v).catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+      },
     },
-    methods: {
-        localizeString,
-        restore() {
-            console.log("restore");
-        },
+  },
+  methods: {
+    localizeString,
+    restore() {
+      console.log("restore");
     },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index 02d3b0c84..21c290f48 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -1,30 +1,30 @@
 <template>
-    <div class="vue-component">
-        <h2><a id="section-60" />{{ $t("social_issue.title") }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-60" />{{ $t("social_issue.title") }}</h2>
 
-        <div class="my-4">
-            <!--label for="field">{{ $t('social_issue.label') }}</label
+    <div class="my-4">
+      <!--label for="field">{{ $t('social_issue.label') }}</label
         -->
-            <VueMultiselect
-                name="field"
-                :close-on-select="true"
-                :allow-empty="true"
-                :show-labels="false"
-                track-by="id"
-                label="text"
-                :multiple="true"
-                :searchable="true"
-                :placeholder="$t('social_issue.label')"
-                @update:model-value="updateSocialIssues"
-                :model-value="value"
-                :options="options"
-            />
-        </div>
-
-        <div v-if="!isSocialIssueValid" class="alert alert-warning to-confirm">
-            {{ $t("social_issue.not_valid") }}
-        </div>
+      <VueMultiselect
+        name="field"
+        :close-on-select="true"
+        :allow-empty="true"
+        :show-labels="false"
+        track-by="id"
+        label="text"
+        :multiple="true"
+        :searchable="true"
+        :placeholder="$t('social_issue.label')"
+        @update:model-value="updateSocialIssues"
+        :model-value="value"
+        :options="options"
+      />
     </div>
+
+    <div v-if="!isSocialIssueValid" class="alert alert-warning to-confirm">
+      {{ $t("social_issue.not_valid") }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -33,59 +33,54 @@ import { fetchResults } from "ChillMainAssets/lib/api/apiMethods";
 import { mapGetters, mapState } from "vuex";
 
 export default {
-    name: "SocialIssue",
-    components: { VueMultiselect },
-    data() {
-        return {
-            options: [],
-        };
+  name: "SocialIssue",
+  components: { VueMultiselect },
+  data() {
+    return {
+      options: [],
+    };
+  },
+  computed: {
+    ...mapState({
+      value: (state) => state.accompanyingCourse.socialIssues,
+    }),
+    ...mapGetters(["isSocialIssueValid"]),
+  },
+  mounted() {
+    this.getOptions();
+  },
+  methods: {
+    getOptions() {
+      fetchResults(`/api/1.0/person/social-work/social-issue.json`).then(
+        (response) => {
+          this.options = response;
+        },
+      );
     },
-    computed: {
-        ...mapState({
-            value: (state) => state.accompanyingCourse.socialIssues,
-        }),
-        ...mapGetters(["isSocialIssueValid"]),
-    },
-    mounted() {
-        this.getOptions();
-    },
-    methods: {
-        getOptions() {
-            fetchResults(`/api/1.0/person/social-work/social-issue.json`).then(
-                (response) => {
-                    this.options = response;
-                },
+    updateSocialIssues(value) {
+      this.$store
+        .dispatch("updateSocialIssues", this.transformValue(value))
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
             );
-        },
-        updateSocialIssues(value) {
-            this.$store
-                .dispatch("updateSocialIssues", this.transformValue(value))
-                .catch(({ name, violations }) => {
-                    if (
-                        name === "ValidationException" ||
-                        name === "AccessException"
-                    ) {
-                        violations.forEach((violation) =>
-                            this.$toast.open({ message: violation }),
-                        );
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        transformValue(updated) {
-            let stored = this.value;
-            let added = updated.filter((x) => stored.indexOf(x) === -1).shift();
-            let removed = stored
-                .filter((x) => updated.indexOf(x) === -1)
-                .shift();
-            let method = typeof removed === "undefined" ? "POST" : "DELETE";
-            let changed = typeof removed === "undefined" ? added : removed;
-            let body = { type: "social_issue", id: changed.id };
-            let payload = updated;
-            return { payload, body, method };
-        },
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
     },
+    transformValue(updated) {
+      let stored = this.value;
+      let added = updated.filter((x) => stored.indexOf(x) === -1).shift();
+      let removed = stored.filter((x) => updated.indexOf(x) === -1).shift();
+      let method = typeof removed === "undefined" ? "POST" : "DELETE";
+      let changed = typeof removed === "undefined" ? added : removed;
+      let body = { type: "social_issue", id: changed.id };
+      let payload = updated;
+      return { payload, body, method };
+    },
+  },
 };
 </script>
 
@@ -96,20 +91,20 @@ export default {
 @import "ChillPersonAssets/chill/scss/mixins";
 @import "ChillMainAssets/chill/scss/chill_variables";
 div#accompanying-course {
-    span.multiselect__tag {
-        @include badge_social($social-issue-color);
-        background: $chill-l-gray;
-        color: $dark;
+  span.multiselect__tag {
+    @include badge_social($social-issue-color);
+    background: $chill-l-gray;
+    color: $dark;
+  }
+  span.multiselect__option--highlight {
+    &::after {
+      background: $green;
     }
-    span.multiselect__option--highlight {
-        &::after {
-            background: $green;
-        }
-        &.multiselect__option--selected {
-            &::after {
-                background: $red;
-            }
-        }
+    &.multiselect__option--selected {
+      &::after {
+        background: $red;
+      }
     }
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
index 0bfd87b18..d3e9ae97a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
@@ -1,22 +1,22 @@
 <template>
-    <div class="vue-component">
-        <h2>
-            <a id="section-110" />
-            {{ $t("startdate.change") }}
-        </h2>
-        <div>
-            <div class="mb-3 row">
-                <div class="col-sm-12 date-update">
-                    <input
-                        class="form-control"
-                        type="date"
-                        id="startDate"
-                        v-model="startDateInput"
-                    />
-                </div>
-            </div>
+  <div class="vue-component">
+    <h2>
+      <a id="section-110" />
+      {{ $t("startdate.change") }}
+    </h2>
+    <div>
+      <div class="mb-3 row">
+        <div class="col-sm-12 date-update">
+          <input
+            class="form-control"
+            type="date"
+            id="startDate"
+            v-model="startDateInput"
+          />
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -24,69 +24,60 @@ import { dateToISO, ISOToDatetime } from "ChillMainAssets/chill/js/date";
 import { mapState } from "vuex";
 
 export default {
-    name: "StartDate",
-    data() {
-        return {
-            lastRecordedDate: null,
-        };
-    },
-    computed: {
-        ...mapState({
-            startDate: (state) =>
-                dateToISO(
-                    ISOToDatetime(
-                        state.accompanyingCourse.openingDate.datetime,
-                    ),
-                ),
-        }),
-        startDateInput: {
-            get() {
-                return this.startDate;
-            },
-            set(value) {
-                this.lastRecordedDate = value;
+  name: "StartDate",
+  data() {
+    return {
+      lastRecordedDate: null,
+    };
+  },
+  computed: {
+    ...mapState({
+      startDate: (state) =>
+        dateToISO(ISOToDatetime(state.accompanyingCourse.openingDate.datetime)),
+    }),
+    startDateInput: {
+      get() {
+        return this.startDate;
+      },
+      set(value) {
+        this.lastRecordedDate = value;
 
-                setTimeout(() => {
-                    console.log("timeout finished");
-                    if (this.lastRecordedDate === value) {
-                        console.log(
-                            "last recorded",
-                            this.lastRecordedDate,
-                            "value",
-                            value,
-                        );
-                        this.$store
-                            .dispatch("updateStartDate", value)
-                            .catch(({ name, violations }) => {
-                                if (
-                                    name === "ValidationException" ||
-                                    name === "AccessException"
-                                ) {
-                                    violations.forEach((violation) =>
-                                        this.$toast.open({
-                                            message: violation,
-                                        }),
-                                    );
-                                } else {
-                                    this.$toast.open({
-                                        message: "An error occurred",
-                                    });
-                                }
-                            });
-                    }
-                }, 3000);
-            },
-        },
+        setTimeout(() => {
+          console.log("timeout finished");
+          if (this.lastRecordedDate === value) {
+            console.log("last recorded", this.lastRecordedDate, "value", value);
+            this.$store
+              .dispatch("updateStartDate", value)
+              .catch(({ name, violations }) => {
+                if (
+                  name === "ValidationException" ||
+                  name === "AccessException"
+                ) {
+                  violations.forEach((violation) =>
+                    this.$toast.open({
+                      message: violation,
+                    }),
+                  );
+                } else {
+                  this.$toast.open({
+                    message: "An error occurred",
+                  });
+                }
+              });
+          }
+        }, 3000);
+      },
     },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .date-update {
-    display: flex;
-    justify-content: space-between;
-    &-btn {
-        margin-left: 1rem;
-    }
+  display: flex;
+  justify-content: space-between;
+  &-btn {
+    margin-left: 1rem;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
index 890aa5153..3ff18f03a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
@@ -1,207 +1,195 @@
 <template>
-    <teleport to="#content">
-        <div id="navmap">
-            <nav>
-                <a class="top" href="#top">
-                    <i class="fa fa-fw fa-square" />
-                    <span>{{ $t("nav.top") }}</span>
-                </a>
-                <item
-                    v-for="item of items"
-                    :key="item.key"
-                    :item="item"
-                    :step="step"
-                />
-            </nav>
-        </div>
-    </teleport>
+  <teleport to="#content">
+    <div id="navmap">
+      <nav>
+        <a class="top" href="#top">
+          <i class="fa fa-fw fa-square" />
+          <span>{{ $t("nav.top") }}</span>
+        </a>
+        <item v-for="item of items" :key="item.key" :item="item" :step="step" />
+      </nav>
+    </div>
+  </teleport>
 </template>
 
 <script>
 import Item from "./StickyNav/Item.vue";
 
 export default {
-    name: "StickyNav",
-    components: {
-        Item,
+  name: "StickyNav",
+  components: {
+    Item,
+  },
+  data() {
+    return {
+      header: document.querySelector("header nav.navbar"),
+      bannerName: document.querySelector("#header-accompanying_course-name"),
+      bannerDetails: document.querySelector(
+        "#header-accompanying_course-details",
+      ),
+      container: null,
+      heightSum: null,
+      stickyNav: null,
+      limit: 25,
+      anchors: null,
+      items: [],
+    };
+  },
+  computed: {
+    accompanyingCourse() {
+      return this.$store.state.accompanyingCourse;
     },
-    data() {
-        return {
-            header: document.querySelector("header nav.navbar"),
-            bannerName: document.querySelector(
-                "#header-accompanying_course-name",
-            ),
-            bannerDetails: document.querySelector(
-                "#header-accompanying_course-details",
-            ),
-            container: null,
-            heightSum: null,
-            stickyNav: null,
-            limit: 25,
-            anchors: null,
-            items: [],
-        };
+    step() {
+      return this.accompanyingCourse.step;
     },
-    computed: {
-        accompanyingCourse() {
-            return this.$store.state.accompanyingCourse;
-        },
-        step() {
-            return this.accompanyingCourse.step;
-        },
-        top() {
-            return parseInt(
-                window
-                    .getComputedStyle(this.stickyNav)
-                    .getPropertyValue("top")
-                    .slice(0, -2),
-            );
-        },
+    top() {
+      return parseInt(
+        window
+          .getComputedStyle(this.stickyNav)
+          .getPropertyValue("top")
+          .slice(0, -2),
+      );
     },
-    mounted() {
-        this.ready();
-        window.addEventListener("scroll", this.handleScroll);
+  },
+  mounted() {
+    this.ready();
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  unmounted() {
+    window.removeEventListener("scroll", this.handleScroll);
+  },
+  methods: {
+    ready() {
+      // load datas DOM when mounted ready
+      this.container = document.querySelector("#content");
+      this.stickyNav = document.querySelector("#navmap");
+      this.anchors = document.querySelectorAll("h2 a[id^='section']");
+      this.initItemsMap();
+
+      // TODO resizeObserver not supports IE !
+      // Listen when elements change size, then recalculate heightSum and initItemsMap
+      const resizeObserver = new ResizeObserver(() => {
+        this.refreshPos();
+      });
+
+      resizeObserver.observe(this.header);
+      resizeObserver.observe(this.bannerName);
+      resizeObserver.observe(this.bannerDetails);
+      resizeObserver.observe(this.container);
     },
-    unmounted() {
-        window.removeEventListener("scroll", this.handleScroll);
+    initItemsMap() {
+      this.anchors.forEach((anchor) => {
+        this.items.push({
+          pos: null,
+          active: false,
+          key: parseInt(anchor.id.slice(8).slice(0, -1)),
+          id: "#" + anchor.id,
+        });
+      });
     },
-    methods: {
-        ready() {
-            // load datas DOM when mounted ready
-            this.container = document.querySelector("#content");
-            this.stickyNav = document.querySelector("#navmap");
-            this.anchors = document.querySelectorAll("h2 a[id^='section']");
-            this.initItemsMap();
+    refreshPos() {
+      //console.log('refreshPos');
+      this.heightSum =
+        this.header.offsetHeight +
+        this.bannerName.offsetHeight +
+        this.bannerDetails.offsetHeight;
 
-            // TODO resizeObserver not supports IE !
-            // Listen when elements change size, then recalculate heightSum and initItemsMap
-            const resizeObserver = new ResizeObserver(() => {
-                this.refreshPos();
-            });
-
-            resizeObserver.observe(this.header);
-            resizeObserver.observe(this.bannerName);
-            resizeObserver.observe(this.bannerDetails);
-            resizeObserver.observe(this.container);
-        },
-        initItemsMap() {
-            this.anchors.forEach((anchor) => {
-                this.items.push({
-                    pos: null,
-                    active: false,
-                    key: parseInt(anchor.id.slice(8).slice(0, -1)),
-                    id: "#" + anchor.id,
-                });
-            });
-        },
-        refreshPos() {
-            //console.log('refreshPos');
-            this.heightSum =
-                this.header.offsetHeight +
-                this.bannerName.offsetHeight +
-                this.bannerDetails.offsetHeight;
-
-            this.anchors.forEach((anchor, i) => {
-                this.items[i].pos = this.findPos(anchor)["y"];
-            });
-        },
-        findPos(element) {
-            let posX = 0,
-                posY = 0;
-            do {
-                posX += element.offsetLeft;
-                posY += element.offsetTop;
-                element = element.offsetParent;
-            } while (element != null);
-
-            let pos = [];
-            pos["x"] = posX;
-            pos["y"] = posY;
-
-            return pos;
-        },
-        handleScroll() {
-            let pos = this.findPos(this.stickyNav);
-            let top = this.heightSum + this.top - window.scrollY;
-            //console.log(window.scrollY);
-
-            if (top > this.limit) {
-                this.stickyNav.style.position = "absolute";
-                this.stickyNav.style.left = "10px";
-            } else {
-                this.stickyNav.style.position = "fixed";
-                this.stickyNav.style.left = pos["x"] + "px";
-            }
-
-            this.switchActive();
-        },
-        switchActive() {
-            this.items.forEach((item, i) => {
-                let next = this.items[i + 1] ? this.items[i + 1].pos : "100000";
-                item.active =
-                    (window.scrollY >= item.pos) & (window.scrollY < next)
-                        ? true
-                        : false;
-            }, this);
-
-            // last item never switch active because scroll reach bottom of page
-            if (
-                document.body.scrollHeight ==
-                window.scrollY + window.innerHeight
-            ) {
-                this.items[this.items.length - 1].active = true;
-                this.items[this.items.length - 2].active = false;
-            } else {
-                this.items[this.items.length - 1].active = false;
-            }
-        },
+      this.anchors.forEach((anchor, i) => {
+        this.items[i].pos = this.findPos(anchor)["y"];
+      });
     },
+    findPos(element) {
+      let posX = 0,
+        posY = 0;
+      do {
+        posX += element.offsetLeft;
+        posY += element.offsetTop;
+        element = element.offsetParent;
+      } while (element != null);
+
+      let pos = [];
+      pos["x"] = posX;
+      pos["y"] = posY;
+
+      return pos;
+    },
+    handleScroll() {
+      let pos = this.findPos(this.stickyNav);
+      let top = this.heightSum + this.top - window.scrollY;
+      //console.log(window.scrollY);
+
+      if (top > this.limit) {
+        this.stickyNav.style.position = "absolute";
+        this.stickyNav.style.left = "10px";
+      } else {
+        this.stickyNav.style.position = "fixed";
+        this.stickyNav.style.left = pos["x"] + "px";
+      }
+
+      this.switchActive();
+    },
+    switchActive() {
+      this.items.forEach((item, i) => {
+        let next = this.items[i + 1] ? this.items[i + 1].pos : "100000";
+        item.active =
+          (window.scrollY >= item.pos) & (window.scrollY < next) ? true : false;
+      }, this);
+
+      // last item never switch active because scroll reach bottom of page
+      if (document.body.scrollHeight == window.scrollY + window.innerHeight) {
+        this.items[this.items.length - 1].active = true;
+        this.items[this.items.length - 2].active = false;
+      } else {
+        this.items[this.items.length - 1].active = false;
+      }
+    },
+  },
 };
 </script>
 
 <style lang="scss">
 div#content {
-    position: relative;
+  position: relative;
 
-    div#navmap {
-        position: absolute;
-        top: 30px;
-        left: 10px; //-10%;
-        nav {
-            font-size: small;
-            a {
-                display: block;
-                box-sizing: border-box;
-                margin-bottom: -3px;
-                color: #71859669;
-                text-decoration: none;
-                &.top {
-                    color: #718596;
-                }
-                span {
-                    display: none;
-                }
-                &:hover,
-                &.active {
-                    span {
-                        display: inline;
-                        padding-left: 8px;
-                    }
-                }
-                &:hover {
-                    color: #718596b5;
-                }
-                &.active {
-                    color: #e2793d; //orange
-                    //color: #eec84a; //jaune
-                }
-            }
+  div#navmap {
+    position: absolute;
+    top: 30px;
+    left: 10px; //-10%;
+    nav {
+      font-size: small;
+      a {
+        display: block;
+        box-sizing: border-box;
+        margin-bottom: -3px;
+        color: #71859669;
+        text-decoration: none;
+        &.top {
+          color: #718596;
         }
+        span {
+          display: none;
+        }
+        &:hover,
+        &.active {
+          span {
+            display: inline;
+            padding-left: 8px;
+          }
+        }
+        &:hover {
+          color: #718596b5;
+        }
+        &.active {
+          color: #e2793d; //orange
+          //color: #eec84a; //jaune
+        }
+      }
     }
+  }
 }
 @media only screen and (max-width: 768px) {
-    div#navmap {
-        display: none;
-    }
+  div#navmap {
+    display: none;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
index 8e175f72b..ecdf3026c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
@@ -1,26 +1,22 @@
 <template>
-    <a v-if="item.key <= 8" :href="item.id" :class="{ active: isActive }">
-        <i class="fa fa-fw fa-square" />
-        <span>{{ item.key }}</span>
-    </a>
-    <a
-        v-else-if="step === 'DRAFT'"
-        :href="item.id"
-        :class="{ active: isActive }"
-    >
-        <i class="fa fa-fw fa-square" />
-        <span>{{ item.key }}</span>
-    </a>
+  <a v-if="item.key <= 8" :href="item.id" :class="{ active: isActive }">
+    <i class="fa fa-fw fa-square" />
+    <span>{{ item.key }}</span>
+  </a>
+  <a v-else-if="step === 'DRAFT'" :href="item.id" :class="{ active: isActive }">
+    <i class="fa fa-fw fa-square" />
+    <span>{{ item.key }}</span>
+  </a>
 </template>
 
 <script>
 export default {
-    name: "Item",
-    props: ["item", "step"],
-    computed: {
-        isActive() {
-            return this.item.active;
-        },
+  name: "Item",
+  props: ["item", "step"],
+  computed: {
+    isActive() {
+      return this.item.active;
     },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue
index 904d4ff42..929b4edd8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue
@@ -1,155 +1,146 @@
 <template>
-    <div class="vue-component">
-        <h2>Tests</h2>
+  <div class="vue-component">
+    <h2>Tests</h2>
 
-        <!-- Modal -->
-        <ul class="record_actions">
-            <li>
-                <button class="btn btn-create" @click="modal1.showModal = true">
-                    {{ $t("action.show_modal") }}
-                </button>
-            </li>
-            <li>
-                <button class="btn btn-create" @click="modal2.showModal = true">
-                    Ouvrir une seconde modale
-                </button>
-            </li>
-        </ul>
+    <!-- Modal -->
+    <ul class="record_actions">
+      <li>
+        <button class="btn btn-create" @click="modal1.showModal = true">
+          {{ $t("action.show_modal") }}
+        </button>
+      </li>
+      <li>
+        <button class="btn btn-create" @click="modal2.showModal = true">
+          Ouvrir une seconde modale
+        </button>
+      </li>
+    </ul>
 
-        <teleport to="body">
-            <modal
-                v-if="modal1.showModal"
-                :modal-dialog-class="modal1.modalDialogClass"
-                @close="modal1.showModal = false"
-            >
-                <template #header>
-                    <h2 class="modal-title">Le titre de ma modale</h2>
-                </template>
-                <template #body>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Phasellus luctus facilisis suscipit. Cras pulvinar,
-                        purus sagittis pulvinar porta, enim ex posuere lacus, in
-                        pulvinar lectus magna in odio. Nullam iaculis congue
-                        lorem ac suscipit. Proin ut rutrum augue. Ut vehicula
-                        risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
-                        viverra. Morbi dictum placerat suscipit.
-                    </p>
-                    <p>
-                        Quisque non erat tincidunt, lacinia justo ut, pulvinar
-                        nisl. Nunc id enim ut sem pretium interdum consectetur
-                        eu quam. Vestibulum ante ipsum primis in faucibus orci
-                        luctus et ultrices posuere cubilia curae; Etiam posuere
-                        erat eget augue finibus luctus. Maecenas auctor, tortor
-                        non luctus ultrices, neque neque porttitor ex, nec
-                        lacinia lorem ligula et elit. Sed tempor nulla vitae
-                        lorem sollicitudin dictum. Vestibulum nec arcu eget elit
-                        pulvinar pretium. Phasellus facilisis metus sed diam
-                        luctus, feugiat scelerisque velit dignissim.
-                    </p>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Phasellus luctus facilisis suscipit. Cras pulvinar,
-                        purus sagittis pulvinar porta, enim ex posuere lacus, in
-                        pulvinar lectus magna in odio. Nullam iaculis congue
-                        lorem ac suscipit. Proin ut rutrum augue. Ut vehicula
-                        risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
-                        viverra. Morbi dictum placerat suscipit.
-                    </p>
-                    <p>
-                        Quisque non erat tincidunt, lacinia justo ut, pulvinar
-                        nisl. Nunc id enim ut sem pretium interdum consectetur
-                        eu quam. Vestibulum ante ipsum primis in faucibus orci
-                        luctus et ultrices posuere cubilia curae; Etiam posuere
-                        erat eget augue finibus luctus. Maecenas auctor, tortor
-                        non luctus ultrices, neque neque porttitor ex, nec
-                        lacinia lorem ligula et elit. Sed tempor nulla vitae
-                        lorem sollicitudin dictum. Vestibulum nec arcu eget elit
-                        pulvinar pretium. Phasellus facilisis metus sed diam
-                        luctus, feugiat scelerisque velit dignissim.
-                    </p>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Phasellus luctus facilisis suscipit. Cras pulvinar,
-                        purus sagittis pulvinar porta, enim ex posuere lacus, in
-                        pulvinar lectus magna in odio. Nullam iaculis congue
-                        lorem ac suscipit. Proin ut rutrum augue. Ut vehicula
-                        risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
-                        viverra. Morbi dictum placerat suscipit.
-                    </p>
-                    <p>
-                        Quisque non erat tincidunt, lacinia justo ut, pulvinar
-                        nisl. Nunc id enim ut sem pretium interdum consectetur
-                        eu quam. Vestibulum ante ipsum primis in faucibus orci
-                        luctus et ultrices posuere cubilia curae; Etiam posuere
-                        erat eget augue finibus luctus. Maecenas auctor, tortor
-                        non luctus ultrices, neque neque porttitor ex, nec
-                        lacinia lorem ligula et elit. Sed tempor nulla vitae
-                        lorem sollicitudin dictum. Vestibulum nec arcu eget elit
-                        pulvinar pretium. Phasellus facilisis metus sed diam
-                        luctus, feugiat scelerisque velit dignissim.
-                    </p>
-                </template>
-                <template #footer>
-                    <button
-                        class="btn btn-create"
-                        @click="
-                            modal1.showModal = false;
-                            modal2.showModal = true;
-                        "
-                    >
-                        {{ $t("action.next") }}
-                    </button>
-                </template>
-            </modal>
-        </teleport>
+    <teleport to="body">
+      <modal
+        v-if="modal1.showModal"
+        :modal-dialog-class="modal1.modalDialogClass"
+        @close="modal1.showModal = false"
+      >
+        <template #header>
+          <h2 class="modal-title">Le titre de ma modale</h2>
+        </template>
+        <template #body>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+            luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar
+            porta, enim ex posuere lacus, in pulvinar lectus magna in odio.
+            Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut
+            vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
+            viverra. Morbi dictum placerat suscipit.
+          </p>
+          <p>
+            Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id
+            enim ut sem pretium interdum consectetur eu quam. Vestibulum ante
+            ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+            curae; Etiam posuere erat eget augue finibus luctus. Maecenas
+            auctor, tortor non luctus ultrices, neque neque porttitor ex, nec
+            lacinia lorem ligula et elit. Sed tempor nulla vitae lorem
+            sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium.
+            Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit
+            dignissim.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+            luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar
+            porta, enim ex posuere lacus, in pulvinar lectus magna in odio.
+            Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut
+            vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
+            viverra. Morbi dictum placerat suscipit.
+          </p>
+          <p>
+            Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id
+            enim ut sem pretium interdum consectetur eu quam. Vestibulum ante
+            ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+            curae; Etiam posuere erat eget augue finibus luctus. Maecenas
+            auctor, tortor non luctus ultrices, neque neque porttitor ex, nec
+            lacinia lorem ligula et elit. Sed tempor nulla vitae lorem
+            sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium.
+            Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit
+            dignissim.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+            luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar
+            porta, enim ex posuere lacus, in pulvinar lectus magna in odio.
+            Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut
+            vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
+            viverra. Morbi dictum placerat suscipit.
+          </p>
+          <p>
+            Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id
+            enim ut sem pretium interdum consectetur eu quam. Vestibulum ante
+            ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+            curae; Etiam posuere erat eget augue finibus luctus. Maecenas
+            auctor, tortor non luctus ultrices, neque neque porttitor ex, nec
+            lacinia lorem ligula et elit. Sed tempor nulla vitae lorem
+            sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium.
+            Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit
+            dignissim.
+          </p>
+        </template>
+        <template #footer>
+          <button
+            class="btn btn-create"
+            @click="
+              modal1.showModal = false;
+              modal2.showModal = true;
+            "
+          >
+            {{ $t("action.next") }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
 
-        <teleport to="body">
-            <modal
-                v-if="modal2.showModal"
-                :modal-dialog-class="modal2.modalDialogClass"
-                @close="modal2.showModal = false"
-            >
-                <template #header>
-                    <h2 class="modal-title">Une autre modale</h2>
-                </template>
-                <template #body>
-                    <p>modal 2</p>
-                </template>
-                <template #footer>
-                    <button
-                        class="btn btn-create"
-                        @click="modal2.showModal = false"
-                    >
-                        {{ $t("action.save") }}
-                    </button>
-                </template>
-            </modal>
-        </teleport>
-        <!-- END Modal -->
-    </div>
+    <teleport to="body">
+      <modal
+        v-if="modal2.showModal"
+        :modal-dialog-class="modal2.modalDialogClass"
+        @close="modal2.showModal = false"
+      >
+        <template #header>
+          <h2 class="modal-title">Une autre modale</h2>
+        </template>
+        <template #body>
+          <p>modal 2</p>
+        </template>
+        <template #footer>
+          <button class="btn btn-create" @click="modal2.showModal = false">
+            {{ $t("action.save") }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+    <!-- END Modal -->
+  </div>
 </template>
 
 <script>
 import Modal from "ChillMainAssets/vuejs/_components/Modal";
 
 export default {
-    name: "Test",
-    components: {
-        Modal,
-    },
-    data() {
-        return {
-            modal1: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-scrollable modal-xl", // modal-lg modal-md modal-sm
-            },
-            modal2: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-centered modal-sm", // modal-lg modal-md modal-sm
-            },
-        };
-    },
-    computed: {},
+  name: "Test",
+  components: {
+    Modal,
+  },
+  data() {
+    return {
+      modal1: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-scrollable modal-xl", // modal-lg modal-md modal-sm
+      },
+      modal2: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-centered modal-sm", // modal-lg modal-md modal-sm
+      },
+    };
+  },
+  computed: {},
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
index 745317211..f8b5389f4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
@@ -1,152 +1,135 @@
 <template>
-    <h2>{{ $t("pick_social_issue") }}</h2>
+  <h2>{{ $t("pick_social_issue") }}</h2>
 
-    <div id="awc_create_form">
-        <div id="picking" class="">
-            <p>{{ $t("pick_social_issue_linked_with_action") }}</p>
-            <div v-for="si in socialIssues" :key="si.id">
-                <input
-                    type="radio"
-                    :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"
-                    />
-                </div>
-            </div>
-            <div v-if="hasSocialIssuePicked" class="mb-3">
-                <h2>{{ $t("pick_an_action") }}</h2>
-                <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"
-                    />
-                </div>
-            </div>
-
-            <div v-if="isLoadingSocialActions">
-                <i class="fa fa-circle-o-notch fa-spin fa-fw" />
-            </div>
-
-            <div v-if="hasSocialActionPicked" id="persons" class="mb-5">
-                <h2>{{ $t("persons_involved") }}</h2>
-
-                <ul>
-                    <li v-for="p in personsReachables" :key="p.id">
-                        <div class="form-check">
-                            <input
-                                type="checkbox"
-                                :value="p.id"
-                                v-model="personsPicked"
-                                class="form-check-input"
-                                :id="'person_check' + p.id"
-                            />
-                            <label
-                                class="form-check-label"
-                                :for="'person_check' + p.id"
-                            >
-                                <person-text :person="p" />
-                            </label>
-                        </div>
-                    </li>
-                </ul>
-            </div>
+  <div id="awc_create_form">
+    <div id="picking" class="">
+      <p>{{ $t("pick_social_issue_linked_with_action") }}</p>
+      <div v-for="si in socialIssues" :key="si.id">
+        <input
+          type="radio"
+          :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"
+          />
         </div>
-        <!-- <div v-if="hasSocialActionPicked" id="start_date">
+      </div>
+      <div v-if="hasSocialIssuePicked" class="mb-3">
+        <h2>{{ $t("pick_an_action") }}</h2>
+        <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"
+          />
+        </div>
+      </div>
+
+      <div v-if="isLoadingSocialActions">
+        <i class="fa fa-circle-o-notch fa-spin fa-fw" />
+      </div>
+
+      <div v-if="hasSocialActionPicked" id="persons" class="mb-5">
+        <h2>{{ $t("persons_involved") }}</h2>
+
+        <ul>
+          <li v-for="p in personsReachables" :key="p.id">
+            <div class="form-check">
+              <input
+                type="checkbox"
+                :value="p.id"
+                v-model="personsPicked"
+                class="form-check-input"
+                :id="'person_check' + p.id"
+              />
+              <label class="form-check-label" :for="'person_check' + p.id">
+                <person-text :person="p" />
+              </label>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- <div v-if="hasSocialActionPicked" id="start_date">
       <p><label>{{ $t('startDate') }}</label> <input type="date" v-model="startDate" /></p>
     </div> -->
-        <div class="row">
-            <div v-if="hasSocialActionPicked" id="start_date" class="mb-3 row">
-                <label class="col-form-label col-sm-4">{{
-                    $t("startDate")
-                }}</label>
-                <div class="col-sm-8">
-                    <input
-                        class="form-control"
-                        type="date"
-                        v-model="startDate"
-                    />
-                </div>
-            </div>
+    <div class="row">
+      <div v-if="hasSocialActionPicked" id="start_date" class="mb-3 row">
+        <label class="col-form-label col-sm-4">{{ $t("startDate") }}</label>
+        <div class="col-sm-8">
+          <input class="form-control" type="date" v-model="startDate" />
+        </div>
+      </div>
 
-            <!-- <div v-if="hasSocialActionPicked" id="end_date">
+      <!-- <div v-if="hasSocialActionPicked" id="end_date">
       <p><label>{{ $t('endDate') }}</label> <input type="date" v-model="endDate" /></p>
     </div> -->
-            <div v-if="hasSocialActionPicked" id="end_date" class="mb-3 row">
-                <label class="col-form-label col-sm-4">{{
-                    $t("endDate")
-                }}</label>
-                <div class="col-sm-8">
-                    <input class="form-control" type="date" v-model="endDate" />
-                </div>
-            </div>
-        </div>
-        <div id="confirm">
-            <div v-if="hasErrors">
-                <p>{{ $t("form_has_errors") }}</p>
-
-                <ul>
-                    <li v-for="e in errors" :key="e.id">
-                        {{ e }}
-                    </li>
-                </ul>
-            </div>
-
-            <div>
-                <ul class="record_actions">
-                    <li class="cancel">
-                        <button class="btn btn-cancel" @click="goToPrevious">
-                            {{ $t("action.cancel") }}
-                        </button>
-                    </li>
-                    <li v-if="hasSocialActionPicked">
-                        <button
-                            class="btn btn-save"
-                            v-show="!isPostingWork"
-                            @click="submit"
-                        >
-                            {{ $t("action.save") }}
-                        </button>
-                        <button
-                            class="btn btn-save"
-                            v-show="isPostingWork"
-                            disabled
-                        >
-                            {{ $t("action.save") }}
-                        </button>
-                    </li>
-                </ul>
-            </div>
+      <div v-if="hasSocialActionPicked" id="end_date" class="mb-3 row">
+        <label class="col-form-label col-sm-4">{{ $t("endDate") }}</label>
+        <div class="col-sm-8">
+          <input class="form-control" type="date" v-model="endDate" />
         </div>
+      </div>
     </div>
+    <div id="confirm">
+      <div v-if="hasErrors">
+        <p>{{ $t("form_has_errors") }}</p>
+
+        <ul>
+          <li v-for="e in errors" :key="e.id">
+            {{ e }}
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <ul class="record_actions">
+          <li class="cancel">
+            <button class="btn btn-cancel" @click="goToPrevious">
+              {{ $t("action.cancel") }}
+            </button>
+          </li>
+          <li v-if="hasSocialActionPicked">
+            <button
+              class="btn btn-save"
+              v-show="!isPostingWork"
+              @click="submit"
+            >
+              {{ $t("action.save") }}
+            </button>
+            <button class="btn btn-save" v-show="isPostingWork" disabled>
+              {{ $t("action.save") }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -155,131 +138,127 @@ import VueMultiselect from "vue-multiselect";
 import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
 
 const i18n = {
-    messages: {
-        fr: {
-            startDate: "Date de début",
-            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",
-        },
+  messages: {
+    fr: {
+      startDate: "Date de début",
+      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",
     },
+  },
 };
 
 export default {
-    name: "App",
-    components: {
-        VueMultiselect,
-        PersonText,
+  name: "App",
+  components: {
+    VueMultiselect,
+    PersonText,
+  },
+  methods: {
+    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" });
+        }
+      });
     },
-    methods: {
-        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;
-            }
-        },
+    addIssueInList(value) {
+      this.$store.commit("addIssueInList", value);
+      this.$store.commit("removeIssueInOther", value);
+      this.$store.dispatch("pickSocialIssue", value.id);
     },
-    i18n,
-    computed: {
-        ...mapState([
-            "socialIssues",
-            "socialIssuesOther",
-            "socialActionsReachables",
-            "errors",
-            "personsReachables",
-        ]),
-        ...mapGetters([
-            "hasSocialIssuePicked",
-            "hasSocialActionPicked",
-            "isLoadingSocialActions",
-            "isPostingWork",
-            "hasErrors",
-        ]),
-        personsPicked: {
-            get() {
-                let s = this.$store.state.personsPicked.map((p) => p.id);
-
-                return s;
-            },
-            set(v) {
-                this.$store.commit("setPersonsPickedIds", v);
-            },
-        },
-        socialIssuePicked: {
-            get() {
-                let s = this.$store.state.socialIssuePicked;
-
-                if (s === null) {
-                    return null;
-                }
-
-                return s.id;
-            },
-            set(value) {
-                this.$store.dispatch("pickSocialIssue", value);
-            },
-        },
-        socialActionPicked: {
-            get() {
-                return this.$store.state.socialActionPicked;
-            },
-            set(value) {
-                this.$store.commit("setSocialAction", value);
-            },
-        },
-        startDate: {
-            get() {
-                return this.$store.state.startDate;
-            },
-            set(value) {
-                this.$store.commit("setStartDate", value);
-            },
-        },
-        endDate: {
-            get() {
-                return this.$store.state.endDate;
-            },
-            set(value) {
-                this.$store.commit("setEndDate", value);
-            },
-        },
-        setSocialIssue: {
-            set() {
-                this.$store.dispatch(
-                    "setSocialIssue",
-                    socialIssues[socialIssues.length - 1],
-                );
-            },
-        },
+    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",
+    ]),
+    ...mapGetters([
+      "hasSocialIssuePicked",
+      "hasSocialActionPicked",
+      "isLoadingSocialActions",
+      "isPostingWork",
+      "hasErrors",
+    ]),
+    personsPicked: {
+      get() {
+        let s = this.$store.state.personsPicked.map((p) => p.id);
+
+        return s;
+      },
+      set(v) {
+        this.$store.commit("setPersonsPickedIds", v);
+      },
+    },
+    socialIssuePicked: {
+      get() {
+        let s = this.$store.state.socialIssuePicked;
+
+        if (s === null) {
+          return null;
+        }
+
+        return s.id;
+      },
+      set(value) {
+        this.$store.dispatch("pickSocialIssue", value);
+      },
+    },
+    socialActionPicked: {
+      get() {
+        return this.$store.state.socialActionPicked;
+      },
+      set(value) {
+        this.$store.commit("setSocialAction", value);
+      },
+    },
+    startDate: {
+      get() {
+        return this.$store.state.startDate;
+      },
+      set(value) {
+        this.$store.commit("setStartDate", value);
+      },
+    },
+    endDate: {
+      get() {
+        return this.$store.state.endDate;
+      },
+      set(value) {
+        this.$store.commit("setEndDate", value);
+      },
+    },
+    setSocialIssue: {
+      set() {
+        this.$store.dispatch(
+          "setSocialIssue",
+          socialIssues[socialIssues.length - 1],
+        );
+      },
+    },
+  },
 };
 </script>
 
@@ -288,46 +267,46 @@ 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 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;
+  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;
+  #picking {
+    grid-area: picking;
 
-        #persons {
-            ul {
-                padding: 0;
+    #persons {
+      ul {
+        padding: 0;
 
-                list-style-type: none;
-            }
-        }
+        list-style-type: none;
+      }
     }
+  }
 
-    #start_date {
-        grid-area: start_date;
-    }
+  #start_date {
+    grid-area: start_date;
+  }
 
-    #end_date {
-        grid-area: end_date;
-    }
+  #end_date {
+    grid-area: end_date;
+  }
 
-    #confirm {
-        grid-area: confirm;
-    }
+  #confirm {
+    grid-area: confirm;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index f3404e2de..bd87224b2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -1,482 +1,453 @@
 <template>
-    <div id="workEditor" class="my-4">
-        <div id="title" class="action-row">
-            <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 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 class="col-form-label">{{ $t("endDate") }}</label>
-            <input v-model="endDate" type="date" class="form-control" />
-        </div>
-
-        <div id="privateComment" class="action-row">
-            <label class="col-form-label">{{ $t("private_comment") }}</label>
-            <comment-editor v-model="privateComment"></comment-editor>
-        </div>
-
-        <div id="comment" class="action-row">
-            <label class="col-form-label">{{ $t("comments") }}</label>
-            <comment-editor v-model="note"></comment-editor>
-        </div>
-
-        <div id="objectives" class="action-row">
-            <div aria="hidden" class="title">
-                <div>
-                    <h3>{{ $t("goals_title") }}</h3>
-                </div>
-                <div>
-                    <h3>{{ $t("results_title") }}</h3>
-                </div>
-            </div>
-
-            <!-- results which are not attached to an objective -->
-            <div v-if="hasResultsForAction">
-                <div class="results_without_objective">
-                    {{ $t("results_without_objective") }}
-                </div>
-                <div>
-                    <add-result
-                        :availableResults="resultsForAction"
-                        destination="action"
-                    ></add-result>
-                </div>
-            </div>
-
-            <!-- results which **are** attached to an objective -->
-            <div v-for="g in goalsPicked" :key="g.goal.id">
-                <div class="item-title" @click="removeGoal(g)">
-                    <span class="removable">{{
-                        localizeString(g.goal.title)
-                    }}</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"
-                    >
-                        <button
-                            v-if="isExpanded"
-                            class="accordion-button"
-                            type="button"
-                            data-bs-toggle="collapse"
-                            aria-expanded="true"
-                            @click="toggleSelect"
-                        >
-                            Masquer
-                        </button>
-
-                        <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>{{ localizeString(g.title) }}</span>
-                                </li>
-                            </ul>
-                        </template>
-                    </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>
-        </div>
-
-        <div id="evaluations" class="action-row">
-            <div aria="hidden" class="title">
-                <div>
-                    <h3>
-                        {{ $t("Evaluations") }} - {{ $t("Forms") }} -
-                        {{ $t("Post") }}
-                    </h3>
-                </div>
-            </div>
-
-            <!-- list evaluations -->
-            <add-evaluation
-                v-for="e in pickedEvaluations"
-                v-bind:key="e.key"
-                v-bind:evaluation="e"
-                v-bind:docAnchorId="this.docAnchorId"
-            >
-            </add-evaluation>
-
-            <!-- box to add new evaluation -->
-            <div class="add_evaluation">
-                <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)"
-                            :key="e.id"
-                        >
-                            <span>{{ localizeString(e.title) }}</span>
-                        </li>
-                    </ul>
-                </div>
-                <ul
-                    class="record_actions"
-                    v-if="evaluationsForAction.length > 0"
-                >
-                    <li>
-                        <button
-                            :title="$t('add_an_evaluation')"
-                            class="btn btn-create"
-                            @click="toggleAddEvaluation"
-                        >
-                            {{ $t("add_an_evaluation") }}
-                        </button>
-                    </li>
-                </ul>
-                <div v-else>
-                    <span class="chill-no-data-statement">{{
-                        $t("no_evaluations_available")
-                    }}</span>
-                </div>
-            </div>
-        </div>
-
-        <div id="persons" class="action-row">
-            <h3 class="mb-3">{{ $t("persons_involved") }}</h3>
-
-            <ul class="list-unstyled">
-                <li v-for="p in personsReachables" :key="p.id">
-                    <div class="form-check">
-                        <input
-                            v-model="personsPicked"
-                            :value="p.id"
-                            type="checkbox"
-                            class="me-2 form-check-input"
-                            :id="'person_check' + p.id"
-                        />
-                        <label
-                            :for="'person_check' + p.id"
-                            class="form-check-label"
-                        >
-                            <person-text :person="p"></person-text>
-                        </label>
-                    </div>
-                </li>
-                <li
-                    v-for="p in getPreviousPersons"
-                    :key="p.id"
-                    class="alert alert-danger"
-                >
-                    <div class="form-check">
-                        <input
-                            v-model="personsPicked"
-                            :value="p.id"
-                            type="checkbox"
-                            class="me-2 form-check-input"
-                            :id="'person_check' + p.id"
-                        />
-                        <label
-                            :for="'person_check' + p.id"
-                            class="form-check-label"
-                        >
-                            <person-text :person="p"></person-text>
-                        </label>
-                    </div>
-                    <span
-                        ><i class="fa fa-warning"></i>&nbsp;{{
-                            $t("warning_previous_persons")
-                        }}</span
-                    >
-                </li>
-            </ul>
-        </div>
-
-        <div id="referrers" class="action-row">
-            <h3>{{ $t("referrers") }}</h3>
-
-            <div v-if="!hasReferrers">
-                <p class="chill-no-data-statement">{{ $t("no_referrers") }}</p>
-            </div>
-
-            <div v-else>
-                <ul class="list-suggest remove-items inline">
-                    <li
-                        v-for="u in referrers"
-                        :key="u.id"
-                        :title="$t('remove_referrer')"
-                        @click="removeReferrer(u)"
-                    >
-                        <span>
-                            {{ u.text }}
-                        </span>
-                    </li>
-                </ul>
-            </div>
-
-            <ul class="record_actions">
-                <li class="add-persons">
-                    <add-persons
-                        ref="referrerPicker"
-                        :key="referrerPicker.key"
-                        :buttonTitle="$t('add_referrers')"
-                        :modalTitle="$t('choose_referrers')"
-                        :options="referrerPicker.options"
-                        @addNewPersons="addReferrers"
-                    >
-                    </add-persons>
-                </li>
-            </ul>
-        </div>
-
-        <div id="handlingThirdParty" class="action-row">
-            <h3>{{ $t("handling_thirdparty") }}</h3>
-
-            <div v-if="!hasHandlingThirdParty">
-                <p class="chill-no-data-statement">
-                    {{ $t("no_handling_thirdparty") }}
-                </p>
-
-                <ul class="record_actions">
-                    <li class="add-persons">
-                        <add-persons
-                            ref="handlingThirdPartyPicker"
-                            v-bind:key="handlingThirdPartyPicker.key"
-                            v-bind:buttonTitle="
-                                $t('precise_handling_thirdparty')
-                            "
-                            v-bind:modalTitle="$t('choose_a_thirdparty')"
-                            v-bind:options="handlingThirdPartyPicker.options"
-                            @addNewPersons="setHandlingThirdParty"
-                        >
-                            <!-- to cast child method -->
-                        </add-persons>
-                    </li>
-                </ul>
-            </div>
-            <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"
-                        />
-                    </li>
-                </ul>
-            </div>
-        </div>
-
-        <div id="thirdParties" class="action-row">
-            <h3>{{ $t("thirdparty_intervener") }}</h3>
-
-            <div v-if="!hasThirdParties">
-                <p class="chill-no-data-statement">
-                    {{ $t("no_thirdparty_intervener") }}
-                </p>
-            </div>
-
-            <div v-else>
-                <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"
-                                        ref="onTheFly"
-                                    ></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">
-                <li class="add-persons">
-                    <add-persons
-                        ref="thirdPartyPicker"
-                        v-bind:key="thirdPartyPicker.key"
-                        v-bind:buttonTitle="$t('add_thirdparties')"
-                        v-bind:modalTitle="$t('choose_thirdparties')"
-                        v-bind:options="thirdPartyPicker.options"
-                        @addNewPersons="addThirdParties"
-                    >
-                        <!-- to cast child method -->
-                    </add-persons>
-                </li>
-            </ul>
-        </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" :key="e.id">{{ e }}</li>
-            </ul>
-        </div>
+  <div id="workEditor" class="my-4">
+    <div id="title" class="action-row">
+      <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>
-    <ul class="record_actions sticky-form-buttons">
-        <li>
-            <list-workflow-modal
-                :workflows="this.work.workflows"
-                :allowCreate="true"
-                relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
-                :relatedEntityId="this.work.id"
-                :workflowsAvailables="this.work.workflows_availables"
-                :preventDefaultMoveToGenerate="true"
-                @go-to-generate-workflow="goToGenerateWorkflow"
-            ></list-workflow-modal>
-        </li>
 
-        <li>
+    <div id="startDate" class="action-row">
+      <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 class="col-form-label">{{ $t("endDate") }}</label>
+      <input v-model="endDate" type="date" class="form-control" />
+    </div>
+
+    <div id="privateComment" class="action-row">
+      <label class="col-form-label">{{ $t("private_comment") }}</label>
+      <comment-editor v-model="privateComment"></comment-editor>
+    </div>
+
+    <div id="comment" class="action-row">
+      <label class="col-form-label">{{ $t("comments") }}</label>
+      <comment-editor v-model="note"></comment-editor>
+    </div>
+
+    <div id="objectives" class="action-row">
+      <div aria="hidden" class="title">
+        <div>
+          <h3>{{ $t("goals_title") }}</h3>
+        </div>
+        <div>
+          <h3>{{ $t("results_title") }}</h3>
+        </div>
+      </div>
+
+      <!-- results which are not attached to an objective -->
+      <div v-if="hasResultsForAction">
+        <div class="results_without_objective">
+          {{ $t("results_without_objective") }}
+        </div>
+        <div>
+          <add-result
+            :availableResults="resultsForAction"
+            destination="action"
+          ></add-result>
+        </div>
+      </div>
+
+      <!-- results which **are** attached to an objective -->
+      <div v-for="g in goalsPicked" :key="g.goal.id">
+        <div class="item-title" @click="removeGoal(g)">
+          <span class="removable">{{ localizeString(g.goal.title) }}</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">
             <button
-                v-if="AmIRefferer"
-                class="btn btn-notify"
-                @click="goToGenerateNotification(false)"
-            ></button>
-            <template v-else>
-                <button
-                    id="btnGroupNotifyButtons"
-                    type="button"
-                    class="btn btn-notify dropdown-toggle"
-                    :title="$t('notification_send')"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
+              v-if="isExpanded"
+              class="accordion-button"
+              type="button"
+              data-bs-toggle="collapse"
+              aria-expanded="true"
+              @click="toggleSelect"
+            >
+              Masquer
+            </button>
+
+            <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"
                 >
-                    &nbsp;
-                </button>
-                <ul
-                    class="dropdown-menu"
-                    aria-labelledby="btnGroupNotifyButtons"
-                >
-                    <li>
-                        <a
-                            class="dropdown-item"
-                            @click="goToGenerateNotification(true)"
-                            >{{ $t("notification_notify_referrer") }}</a
-                        >
-                    </li>
-                    <li>
-                        <a
-                            class="dropdown-item"
-                            @click="goToGenerateNotification(false)"
-                            >{{ $t("notification_notify_any") }}</a
-                        >
-                    </li>
-                </ul>
+                  <span>{{ localizeString(g.title) }}</span>
+                </li>
+              </ul>
             </template>
-        </li>
+          </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>
+    </div>
 
-        <li v-if="!isPosting">
-            <button class="btn btn-save" @click="submit">
-                {{ $t("action.save") }}
-            </button>
-        </li>
+    <div id="evaluations" class="action-row">
+      <div aria="hidden" class="title">
+        <div>
+          <h3>
+            {{ $t("Evaluations") }} - {{ $t("Forms") }} -
+            {{ $t("Post") }}
+          </h3>
+        </div>
+      </div>
 
-        <li v-if="isPosting">
-            <button class="btn btn-save" disabled>
-                {{ $t("action.save") }}
+      <!-- list evaluations -->
+      <add-evaluation
+        v-for="e in pickedEvaluations"
+        v-bind:key="e.key"
+        v-bind:evaluation="e"
+        v-bind:docAnchorId="this.docAnchorId"
+      >
+      </add-evaluation>
+
+      <!-- box to add new evaluation -->
+      <div class="add_evaluation">
+        <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)"
+              :key="e.id"
+            >
+              <span>{{ localizeString(e.title) }}</span>
+            </li>
+          </ul>
+        </div>
+        <ul class="record_actions" v-if="evaluationsForAction.length > 0">
+          <li>
+            <button
+              :title="$t('add_an_evaluation')"
+              class="btn btn-create"
+              @click="toggleAddEvaluation"
+            >
+              {{ $t("add_an_evaluation") }}
             </button>
+          </li>
+        </ul>
+        <div v-else>
+          <span class="chill-no-data-statement">{{
+            $t("no_evaluations_available")
+          }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div id="persons" class="action-row">
+      <h3 class="mb-3">{{ $t("persons_involved") }}</h3>
+
+      <ul class="list-unstyled">
+        <li v-for="p in personsReachables" :key="p.id">
+          <div class="form-check">
+            <input
+              v-model="personsPicked"
+              :value="p.id"
+              type="checkbox"
+              class="me-2 form-check-input"
+              :id="'person_check' + p.id"
+            />
+            <label :for="'person_check' + p.id" class="form-check-label">
+              <person-text :person="p"></person-text>
+            </label>
+          </div>
         </li>
-    </ul>
+        <li
+          v-for="p in getPreviousPersons"
+          :key="p.id"
+          class="alert alert-danger"
+        >
+          <div class="form-check">
+            <input
+              v-model="personsPicked"
+              :value="p.id"
+              type="checkbox"
+              class="me-2 form-check-input"
+              :id="'person_check' + p.id"
+            />
+            <label :for="'person_check' + p.id" class="form-check-label">
+              <person-text :person="p"></person-text>
+            </label>
+          </div>
+          <span
+            ><i class="fa fa-warning"></i>&nbsp;{{
+              $t("warning_previous_persons")
+            }}</span
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div id="referrers" class="action-row">
+      <h3>{{ $t("referrers") }}</h3>
+
+      <div v-if="!hasReferrers">
+        <p class="chill-no-data-statement">{{ $t("no_referrers") }}</p>
+      </div>
+
+      <div v-else>
+        <ul class="list-suggest remove-items inline">
+          <li
+            v-for="u in referrers"
+            :key="u.id"
+            :title="$t('remove_referrer')"
+            @click="removeReferrer(u)"
+          >
+            <span>
+              {{ u.text }}
+            </span>
+          </li>
+        </ul>
+      </div>
+
+      <ul class="record_actions">
+        <li class="add-persons">
+          <add-persons
+            ref="referrerPicker"
+            :key="referrerPicker.key"
+            :buttonTitle="$t('add_referrers')"
+            :modalTitle="$t('choose_referrers')"
+            :options="referrerPicker.options"
+            @addNewPersons="addReferrers"
+          >
+          </add-persons>
+        </li>
+      </ul>
+    </div>
+
+    <div id="handlingThirdParty" class="action-row">
+      <h3>{{ $t("handling_thirdparty") }}</h3>
+
+      <div v-if="!hasHandlingThirdParty">
+        <p class="chill-no-data-statement">
+          {{ $t("no_handling_thirdparty") }}
+        </p>
+
+        <ul class="record_actions">
+          <li class="add-persons">
+            <add-persons
+              ref="handlingThirdPartyPicker"
+              v-bind:key="handlingThirdPartyPicker.key"
+              v-bind:buttonTitle="$t('precise_handling_thirdparty')"
+              v-bind:modalTitle="$t('choose_a_thirdparty')"
+              v-bind:options="handlingThirdPartyPicker.options"
+              @addNewPersons="setHandlingThirdParty"
+            >
+              <!-- to cast child method -->
+            </add-persons>
+          </li>
+        </ul>
+      </div>
+      <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"
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div id="thirdParties" class="action-row">
+      <h3>{{ $t("thirdparty_intervener") }}</h3>
+
+      <div v-if="!hasThirdParties">
+        <p class="chill-no-data-statement">
+          {{ $t("no_thirdparty_intervener") }}
+        </p>
+      </div>
+
+      <div v-else>
+        <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"
+                    ref="onTheFly"
+                  ></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">
+        <li class="add-persons">
+          <add-persons
+            ref="thirdPartyPicker"
+            v-bind:key="thirdPartyPicker.key"
+            v-bind:buttonTitle="$t('add_thirdparties')"
+            v-bind:modalTitle="$t('choose_thirdparties')"
+            v-bind:options="thirdPartyPicker.options"
+            @addNewPersons="addThirdParties"
+          >
+            <!-- to cast child method -->
+          </add-persons>
+        </li>
+      </ul>
+    </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" :key="e.id">{{ e }}</li>
+      </ul>
+    </div>
+  </div>
+  <ul class="record_actions sticky-form-buttons">
+    <li>
+      <list-workflow-modal
+        :workflows="this.work.workflows"
+        :allowCreate="true"
+        relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
+        :relatedEntityId="this.work.id"
+        :workflowsAvailables="this.work.workflows_availables"
+        :preventDefaultMoveToGenerate="true"
+        @go-to-generate-workflow="goToGenerateWorkflow"
+      ></list-workflow-modal>
+    </li>
+
+    <li>
+      <button
+        v-if="AmIRefferer"
+        class="btn btn-notify"
+        @click="goToGenerateNotification(false)"
+      ></button>
+      <template v-else>
+        <button
+          id="btnGroupNotifyButtons"
+          type="button"
+          class="btn btn-notify dropdown-toggle"
+          :title="$t('notification_send')"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+        >
+          &nbsp;
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="btnGroupNotifyButtons">
+          <li>
+            <a class="dropdown-item" @click="goToGenerateNotification(true)">{{
+              $t("notification_notify_referrer")
+            }}</a>
+          </li>
+          <li>
+            <a class="dropdown-item" @click="goToGenerateNotification(false)">{{
+              $t("notification_notify_any")
+            }}</a>
+          </li>
+        </ul>
+      </template>
+    </li>
+
+    <li v-if="!isPosting">
+      <button class="btn btn-save" @click="submit">
+        {{ $t("action.save") }}
+      </button>
+    </li>
+
+    <li v-if="isPosting">
+      <button class="btn btn-save" disabled>
+        {{ $t("action.save") }}
+      </button>
+    </li>
+  </ul>
 </template>
 
 <script>
@@ -493,346 +464,340 @@ import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 const i18n = {
-    messages: {
-        fr: {
-            action: {
-                save: "Enregistrer",
-            },
-            conflict_on_save:
-                "Désolé, cette action d'accompagnement a été modifiée dans une autre fenêtre ou par un autre utilisateur. Rechargez la page pour voir ses changements.",
-            action_title: "Action d'accompagnement",
-            comments: "Commentaire",
-            startDate: "Date de début",
-            endDate: "Date de fin",
-            goals_title: "Motifs - objectifs - dispositifs",
-            available_goals_text:
-                "Motifs, objectifs et dispositifs disponibles pour ajout :",
-            results_title: "Orientations - résultats",
-            results_without_objective:
-                "Résultats - orientations sans objectifs",
-            add_objectif: "Ajouter un motif - objectif - dispositif",
-            add_an_objective: "Ajouter un objectif",
-            Evaluations: "Évaluations",
-            Forms: "Formulaires",
-            Post: "Courriers",
-            add_an_evaluation: "Ajouter une évaluation",
-            persons_involved: "Usagers concernés",
-            handling_thirdparty: "Tiers traitant",
-            no_handling_thirdparty: "Aucun tiers traitant",
-            precise_handling_thirdparty: "Indiquer un tiers traitant",
-            choose_a_thirdparty: "Choisir un tiers",
-            remove_thirdparty: "Enlever le tiers",
-            remove_handling_thirdparty: "Enlever le tiers traitant",
-            thirdparty_intervener: "Tiers intervenants",
-            no_thirdparty_intervener: "Aucun tiers intervenant",
-            add_thirdparties: "Ajouter des tiers",
-            choose_thirdparties: "Choisir des tiers",
-            fix_these_errors: "Veuillez corriger les erreurs suivantes :",
-            available_evaluations_text: "Documents disponibles pour ajout :",
-            no_evaluations_available: "Aucune évaluation disponible",
-            no_goals_available: "Aucun objectif disponible",
-            referrers: "Agents traitants",
-            add_referrers: "Ajouter des agents traitants",
-            no_referrers: "Aucun agent traitant",
-            choose_referrers: "Choisir des agents traitants",
-            remove_referrer: "Enlever l'agent",
-            private_comment: "Commentaire privé",
-            notification_notify_referrer: "Notifier le référent",
-            notification_notify_any: "Notifier d'autres utilisateurs",
-            notification_send: "Envoyer une notification",
-            warning_previous_persons:
-                "Cet usager n'est désormais plus concerné par le parcours, bien qu'il ait été associé à l'action par le passé.",
-        },
+  messages: {
+    fr: {
+      action: {
+        save: "Enregistrer",
+      },
+      conflict_on_save:
+        "Désolé, cette action d'accompagnement a été modifiée dans une autre fenêtre ou par un autre utilisateur. Rechargez la page pour voir ses changements.",
+      action_title: "Action d'accompagnement",
+      comments: "Commentaire",
+      startDate: "Date de début",
+      endDate: "Date de fin",
+      goals_title: "Motifs - objectifs - dispositifs",
+      available_goals_text:
+        "Motifs, objectifs et dispositifs disponibles pour ajout :",
+      results_title: "Orientations - résultats",
+      results_without_objective: "Résultats - orientations sans objectifs",
+      add_objectif: "Ajouter un motif - objectif - dispositif",
+      add_an_objective: "Ajouter un objectif",
+      Evaluations: "Évaluations",
+      Forms: "Formulaires",
+      Post: "Courriers",
+      add_an_evaluation: "Ajouter une évaluation",
+      persons_involved: "Usagers concernés",
+      handling_thirdparty: "Tiers traitant",
+      no_handling_thirdparty: "Aucun tiers traitant",
+      precise_handling_thirdparty: "Indiquer un tiers traitant",
+      choose_a_thirdparty: "Choisir un tiers",
+      remove_thirdparty: "Enlever le tiers",
+      remove_handling_thirdparty: "Enlever le tiers traitant",
+      thirdparty_intervener: "Tiers intervenants",
+      no_thirdparty_intervener: "Aucun tiers intervenant",
+      add_thirdparties: "Ajouter des tiers",
+      choose_thirdparties: "Choisir des tiers",
+      fix_these_errors: "Veuillez corriger les erreurs suivantes :",
+      available_evaluations_text: "Documents disponibles pour ajout :",
+      no_evaluations_available: "Aucune évaluation disponible",
+      no_goals_available: "Aucun objectif disponible",
+      referrers: "Agents traitants",
+      add_referrers: "Ajouter des agents traitants",
+      no_referrers: "Aucun agent traitant",
+      choose_referrers: "Choisir des agents traitants",
+      remove_referrer: "Enlever l'agent",
+      private_comment: "Commentaire privé",
+      notification_notify_referrer: "Notifier le référent",
+      notification_notify_any: "Notifier d'autres utilisateurs",
+      notification_send: "Envoyer une notification",
+      warning_previous_persons:
+        "Cet usager n'est désormais plus concerné par le parcours, bien qu'il ait été associé à l'action par le passé.",
     },
+  },
 };
 
 export default {
-    name: "App",
-    components: {
-        CommentEditor,
-        AddResult,
-        AddEvaluation,
-        AddPersons,
-        ThirdPartyRenderBox,
-        ListWorkflowModal,
-        OnTheFly,
-        PersonText,
+  name: "App",
+  components: {
+    CommentEditor,
+    AddResult,
+    AddEvaluation,
+    AddPersons,
+    ThirdPartyRenderBox,
+    ListWorkflowModal,
+    OnTheFly,
+    PersonText,
+  },
+  i18n,
+  data() {
+    return {
+      docAnchorId: null,
+      isExpanded: false,
+      showAddObjective: false,
+      showAddEvaluation: false,
+      handlingThirdPartyPicker: {
+        key: "handling-third-party",
+        options: {
+          type: ["thirdparty"],
+          priority: null,
+          uniq: true,
+          button: {
+            display: false,
+          },
+        },
+      },
+      thirdPartyPicker: {
+        key: "third-party",
+        options: {
+          type: ["thirdparty"],
+          priority: null,
+          uniq: false,
+          button: {
+            display: false,
+          },
+        },
+      },
+      referrerPicker: {
+        key: "referrer",
+        options: {
+          type: ["user"],
+          priority: null,
+          uniq: false,
+          button: {
+            display: false,
+          },
+        },
+      },
+    };
+  },
+  beforeMount() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.docAnchorId = urlParams.get("doc_id");
+  },
+  mounted() {
+    this.scrollToElement(this.docAnchorId);
+  },
+  computed: {
+    ...mapState([
+      "work",
+      "resultsForAction",
+      "evaluationsForAction",
+      "goalsPicked",
+      "personsReachables",
+      "handlingThirdParty",
+      "thirdParties",
+      "referrers",
+      "isPosting",
+      "errors",
+      "templatesAvailablesForAction",
+      "me",
+      "version",
+    ]),
+    ...mapGetters([
+      "hasResultsForAction",
+      "hasHandlingThirdParty",
+      "hasThirdParties",
+      "hasReferrers",
+      "getPreviousPersons",
+    ]),
+    classicEditor: () => ClassicEditor,
+    editorConfig: () => classicEditorConfig,
+    startDate: {
+      get() {
+        return this.$store.state.startDate;
+      },
+      set(v) {
+        this.$store.commit("setStartDate", v);
+      },
     },
-    i18n,
-    data() {
-        return {
-            docAnchorId: null,
-            isExpanded: false,
-            showAddObjective: false,
-            showAddEvaluation: false,
-            handlingThirdPartyPicker: {
-                key: "handling-third-party",
-                options: {
-                    type: ["thirdparty"],
-                    priority: null,
-                    uniq: true,
-                    button: {
-                        display: false,
-                    },
-                },
-            },
-            thirdPartyPicker: {
-                key: "third-party",
-                options: {
-                    type: ["thirdparty"],
-                    priority: null,
-                    uniq: false,
-                    button: {
-                        display: false,
-                    },
-                },
-            },
-            referrerPicker: {
-                key: "referrer",
-                options: {
-                    type: ["user"],
-                    priority: null,
-                    uniq: false,
-                    button: {
-                        display: false,
-                    },
-                },
-            },
-        };
+    endDate: {
+      get() {
+        return this.$store.state.endDate;
+      },
+      set(v) {
+        this.$store.commit("setEndDate", v);
+      },
     },
-    beforeMount() {
-        const urlParams = new URLSearchParams(window.location.search);
-        this.docAnchorId = urlParams.get("doc_id");
+    note: {
+      get() {
+        return this.$store.state.note;
+      },
+      set(v) {
+        this.$store.commit("setNote", v);
+      },
     },
-    mounted() {
-        this.scrollToElement(this.docAnchorId);
+    privateComment: {
+      get() {
+        return this.$store.state.privateComment;
+      },
+      set(v) {
+        this.$store.commit("setPrivateComment", v);
+      },
     },
-    computed: {
-        ...mapState([
-            "work",
-            "resultsForAction",
-            "evaluationsForAction",
-            "goalsPicked",
-            "personsReachables",
-            "handlingThirdParty",
-            "thirdParties",
-            "referrers",
-            "isPosting",
-            "errors",
-            "templatesAvailablesForAction",
-            "me",
-            "version",
-        ]),
-        ...mapGetters([
-            "hasResultsForAction",
-            "hasHandlingThirdParty",
-            "hasThirdParties",
-            "hasReferrers",
-            "getPreviousPersons",
-        ]),
-        classicEditor: () => ClassicEditor,
-        editorConfig: () => classicEditorConfig,
-        startDate: {
-            get() {
-                return this.$store.state.startDate;
-            },
-            set(v) {
-                this.$store.commit("setStartDate", v);
-            },
-        },
-        endDate: {
-            get() {
-                return this.$store.state.endDate;
-            },
-            set(v) {
-                this.$store.commit("setEndDate", v);
-            },
-        },
-        note: {
-            get() {
-                return this.$store.state.note;
-            },
-            set(v) {
-                this.$store.commit("setNote", v);
-            },
-        },
-        privateComment: {
-            get() {
-                return this.$store.state.privateComment;
-            },
-            set(v) {
-                this.$store.commit("setPrivateComment", v);
-            },
-        },
-        availableForCheckGoal() {
-            let pickedIds = this.$store.state.goalsPicked.map((g) => g.goal.id);
+    availableForCheckGoal() {
+      let pickedIds = this.$store.state.goalsPicked.map((g) => g.goal.id);
 
-            return this.$store.state.goalsForAction.filter(
-                (g) => !pickedIds.includes(g.id),
-            );
-        },
-        pickedEvaluations() {
-            return this.$store.state.evaluationsPicked;
-        },
-        personsPicked: {
-            get() {
-                let s = this.$store.state.personsPicked.map((p) => p.id);
-
-                return s;
-            },
-            set(v) {
-                this.$store.commit("setPersonsPickedIds", v);
-            },
-        },
-        AmIRefferer() {
-            return !(
-                this.work.accompanyingPeriod.user &&
-                this.me &&
-                this.work.accompanyingPeriod.user.id !== this.me.id
-            );
-        },
+      return this.$store.state.goalsForAction.filter(
+        (g) => !pickedIds.includes(g.id),
+      );
     },
-    methods: {
-        localizeString,
-        toggleSelect() {
-            this.isExpanded = !this.isExpanded;
-        },
-        addGoal(g) {
-            this.$store.commit("addGoal", g);
-        },
-        removeGoal(g) {
-            this.$store.commit("removeGoal", g);
-        },
-        addEvaluation(e) {
-            this.$store.dispatch("addEvaluation", e);
-        },
-        toggleAddEvaluation() {
-            this.showAddEvaluation = !this.showAddEvaluation;
-        },
-        setHandlingThirdParty({ selected, modal }) {
-            this.$store.commit(
-                "setHandlingThirdParty",
-                selected.shift().result,
-            );
-            this.$refs.handlingThirdPartyPicker.resetSearch();
-            modal.showModal = false;
-        },
-        removeHandlingThirdParty() {
-            this.$store.commit("setHandlingThirdParty", null);
-        },
-        addThirdParties({ selected, modal }) {
-            this.$store.commit(
-                "addThirdParties",
-                selected.map((r) => r.result),
-            );
-            this.$refs.thirdPartyPicker.resetSearch();
-            modal.showModal = false;
-        },
-        removeThirdParty(t) {
-            this.$store.commit("removeThirdParty", t);
-        },
-        addReferrers({ selected, modal }) {
-            this.$store.commit(
-                "addReferrers",
-                selected.map((r) => r.result),
-            );
-            this.$refs.referrerPicker.resetSearch();
-            modal.showModal = false;
-        },
-        removeReferrer(u) {
-            this.$store.commit("removeReferrer", u);
-        },
-        goToGenerateWorkflow({ link }) {
-            // console.log('save before leave to generate workflow')
-            const callback = () => {
-                window.location.assign(link);
-            };
+    pickedEvaluations() {
+      return this.$store.state.evaluationsPicked;
+    },
+    personsPicked: {
+      get() {
+        let s = this.$store.state.personsPicked.map((p) => p.id);
 
-            return this.$store.dispatch("submit", callback).catch((e) => {
-                console.log(e);
-                throw e;
-            });
-        },
-        goToGenerateNotification(tos) {
-            console.log("save before leave to notification");
-            const callback = () => {
-                if (tos === true) {
-                    window.location.assign(
-                        `/fr/notification/create?entityClass=Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork&entityId=${this.work.id}&tos[0]=${this.work.accompanyingPeriod.user.id}&returnPath=/fr/person/accompanying-period/${this.work.accompanyingPeriod.id}/work`,
-                    );
-                } else {
-                    window.location.assign(
-                        `/fr/notification/create?entityClass=Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork&entityId=${this.work.id}&returnPath=/fr/person/accompanying-period/${this.work.accompanyingPeriod.id}/work`,
-                    );
-                }
-            };
+        return s;
+      },
+      set(v) {
+        this.$store.commit("setPersonsPickedIds", v);
+      },
+    },
+    AmIRefferer() {
+      return !(
+        this.work.accompanyingPeriod.user &&
+        this.me &&
+        this.work.accompanyingPeriod.user.id !== this.me.id
+      );
+    },
+  },
+  methods: {
+    localizeString,
+    toggleSelect() {
+      this.isExpanded = !this.isExpanded;
+    },
+    addGoal(g) {
+      this.$store.commit("addGoal", g);
+    },
+    removeGoal(g) {
+      this.$store.commit("removeGoal", g);
+    },
+    addEvaluation(e) {
+      this.$store.dispatch("addEvaluation", e);
+    },
+    toggleAddEvaluation() {
+      this.showAddEvaluation = !this.showAddEvaluation;
+    },
+    setHandlingThirdParty({ selected, modal }) {
+      this.$store.commit("setHandlingThirdParty", selected.shift().result);
+      this.$refs.handlingThirdPartyPicker.resetSearch();
+      modal.showModal = false;
+    },
+    removeHandlingThirdParty() {
+      this.$store.commit("setHandlingThirdParty", null);
+    },
+    addThirdParties({ selected, modal }) {
+      this.$store.commit(
+        "addThirdParties",
+        selected.map((r) => r.result),
+      );
+      this.$refs.thirdPartyPicker.resetSearch();
+      modal.showModal = false;
+    },
+    removeThirdParty(t) {
+      this.$store.commit("removeThirdParty", t);
+    },
+    addReferrers({ selected, modal }) {
+      this.$store.commit(
+        "addReferrers",
+        selected.map((r) => r.result),
+      );
+      this.$refs.referrerPicker.resetSearch();
+      modal.showModal = false;
+    },
+    removeReferrer(u) {
+      this.$store.commit("removeReferrer", u);
+    },
+    goToGenerateWorkflow({ link }) {
+      // console.log('save before leave to generate workflow')
+      const callback = () => {
+        window.location.assign(link);
+      };
 
-            return this.$store.dispatch("submit", callback).catch((e) => {
-                console.log(e);
-                throw e;
-            });
-        },
-        submit() {
-            this.$store.dispatch("submit").catch((error) => {
-                if (
-                    error.name === "ValidationException" ||
-                    error.name === "AccessException"
-                ) {
-                    error.violations.forEach((violation) =>
-                        this.$toast.open({ message: violation }),
-                    );
-                } else if (error.name === "ConflictHttpException") {
-                    this.$toast.open({ message: this.$t("conflict_on_save") });
-                } else {
-                    this.$toast.open({ message: "An error occurred" });
-                    throw error;
-                }
-            });
-        },
-        saveFormOnTheFly(payload) {
-            // console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
+      return this.$store.dispatch("submit", callback).catch((e) => {
+        console.log(e);
+        throw e;
+      });
+    },
+    goToGenerateNotification(tos) {
+      console.log("save before leave to notification");
+      const callback = () => {
+        if (tos === true) {
+          window.location.assign(
+            `/fr/notification/create?entityClass=Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork&entityId=${this.work.id}&tos[0]=${this.work.accompanyingPeriod.user.id}&returnPath=/fr/person/accompanying-period/${this.work.accompanyingPeriod.id}/work`,
+          );
+        } else {
+          window.location.assign(
+            `/fr/notification/create?entityClass=Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork&entityId=${this.work.id}&returnPath=/fr/person/accompanying-period/${this.work.accompanyingPeriod.id}/work`,
+          );
+        }
+      };
 
-            let body = { type: payload.type };
-            body.name = payload.data.text;
-            body.email = payload.data.email;
-            body.telephone = payload.data.telephone;
-            body.telephone2 = payload.data.telephone2;
-            body.address = { id: payload.data.address.address_id };
+      return this.$store.dispatch("submit", callback).catch((e) => {
+        console.log(e);
+        throw e;
+      });
+    },
+    submit() {
+      this.$store.dispatch("submit").catch((error) => {
+        if (
+          error.name === "ValidationException" ||
+          error.name === "AccessException"
+        ) {
+          error.violations.forEach((violation) =>
+            this.$toast.open({ message: violation }),
+          );
+        } else if (error.name === "ConflictHttpException") {
+          this.$toast.open({ message: this.$t("conflict_on_save") });
+        } else {
+          this.$toast.open({ message: "An error occurred" });
+          throw error;
+        }
+      });
+    },
+    saveFormOnTheFly(payload) {
+      // console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
 
-            makeFetch(
-                "PATCH",
-                `/api/1.0/thirdparty/thirdparty/${payload.data.id}.json`,
-                body,
-            )
-                .then((response) => {
-                    this.$store.dispatch("updateThirdParty", response);
-                    for (let otf of this.$refs.onTheFly) {
-                        otf.closeModal();
-                    }
-                })
-                .catch((error) => {
-                    if (error.name === "ValidationException") {
-                        for (let v of error.violations) {
-                            this.$toast.open({ message: v });
-                        }
-                    } else if (error.name === "ConflictHttpException") {
-                        this.$toast.open({
-                            message: this.$t("conflict_on_save"),
-                        });
-                    } else {
-                        this.$toast.open({ message: "An error occurred" });
-                    }
-                });
-        },
-        scrollToElement(docAnchorId) {
-            const documentEl = document.getElementById(
-                `document_${docAnchorId}`,
-            );
-            if (documentEl) {
-                documentEl.scrollIntoView({ behavior: "smooth" });
+      let body = { type: payload.type };
+      body.name = payload.data.text;
+      body.email = payload.data.email;
+      body.telephone = payload.data.telephone;
+      body.telephone2 = payload.data.telephone2;
+      body.address = { id: payload.data.address.address_id };
+
+      makeFetch(
+        "PATCH",
+        `/api/1.0/thirdparty/thirdparty/${payload.data.id}.json`,
+        body,
+      )
+        .then((response) => {
+          this.$store.dispatch("updateThirdParty", response);
+          for (let otf of this.$refs.onTheFly) {
+            otf.closeModal();
+          }
+        })
+        .catch((error) => {
+          if (error.name === "ValidationException") {
+            for (let v of error.violations) {
+              this.$toast.open({ message: v });
             }
-        },
+          } else if (error.name === "ConflictHttpException") {
+            this.$toast.open({
+              message: this.$t("conflict_on_save"),
+            });
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
     },
+    scrollToElement(docAnchorId) {
+      const documentEl = document.getElementById(`document_${docAnchorId}`);
+      if (documentEl) {
+        documentEl.scrollIntoView({ behavior: "smooth" });
+      }
+    },
+  },
 };
 </script>
 
@@ -841,172 +806,172 @@ export default {
 @import "~ChillMainAssets/chill/scss/mixins";
 
 div#workEditor {
-    display: grid;
-    grid-template-columns: 50%;
-    column-gap: 0rem;
-    grid-template-areas:
-        "title title"
-        "startDate endDate"
-        "comment comment"
-        "privateComment privateComment"
-        "objectives objectives"
-        "evaluations evaluations"
-        "persons persons"
-        "referrers referrers"
-        "handling handling"
-        "tparties tparties"
-        "errors errors";
+  display: grid;
+  grid-template-columns: 50%;
+  column-gap: 0rem;
+  grid-template-areas:
+    "title title"
+    "startDate endDate"
+    "comment comment"
+    "privateComment privateComment"
+    "objectives objectives"
+    "evaluations evaluations"
+    "persons persons"
+    "referrers referrers"
+    "handling handling"
+    "tparties tparties"
+    "errors errors";
 
-    #title {
-        grid-area: title;
-    }
-    #startDate {
-        grid-area: startDate;
-    }
-    #endDate {
-        grid-area: endDate;
-    }
-    #comment {
-        grid-area: comment;
-    }
-    #privateComment {
-        grid-area: privateComment;
-    }
-    #objectives {
-        grid-area: objectives;
-    }
-    #evaluations {
-        grid-area: evaluations;
-    }
-    #persons {
-        grid-area: persons;
-    }
-    #handlingThirdParty {
-        grid-area: handling;
-    }
-    #thirdParties {
-        grid-area: tparties;
-    }
-    #referrers {
-        grid-area: referrers;
-    }
-    #errors {
-        grid-area: errors;
+  #title {
+    grid-area: title;
+  }
+  #startDate {
+    grid-area: startDate;
+  }
+  #endDate {
+    grid-area: endDate;
+  }
+  #comment {
+    grid-area: comment;
+  }
+  #privateComment {
+    grid-area: privateComment;
+  }
+  #objectives {
+    grid-area: objectives;
+  }
+  #evaluations {
+    grid-area: evaluations;
+  }
+  #persons {
+    grid-area: persons;
+  }
+  #handlingThirdParty {
+    grid-area: handling;
+  }
+  #thirdParties {
+    grid-area: tparties;
+  }
+  #referrers {
+    grid-area: referrers;
+  }
+  #errors {
+    grid-area: errors;
+  }
+
+  div.action-row {
+    @include border-collapse;
+    padding: 1em;
+
+    &#title {
+      label {
+        margin-bottom: 0;
+      }
+      p {
+        margin-top: 0;
+        font-weight: bold;
+        font-size: 1rem;
+      }
     }
 
-    div.action-row {
+    &#objectives {
+      & > div {
+        display: grid;
+        grid-template-columns: 50%;
+        column-gap: 0rem;
+        grid-template-areas: "obj res";
+
+        & > div {
+          @include border-collapse;
+          padding: 1em;
+
+          &:nth-child(1) {
+            grid-area: obj;
+          }
+
+          &:nth-child(2) {
+            grid-area: res;
+          }
+        }
+
+        & > div.results_without_objective {
+          background: repeating-linear-gradient(
+            45deg,
+            $gray-200,
+            $gray-200 10px,
+            $gray-100 10px,
+            $gray-100 20px
+          );
+          text-align: center;
+          font-weight: 700;
+          padding-top: 1.5rem;
+        }
+      }
+    }
+
+    &#evaluations {
+      & > div {
         @include border-collapse;
         padding: 1em;
-
-        &#title {
-            label {
-                margin-bottom: 0;
-            }
-            p {
-                margin-top: 0;
-                font-weight: bold;
-                font-size: 1rem;
-            }
-        }
-
-        &#objectives {
-            & > div {
-                display: grid;
-                grid-template-columns: 50%;
-                column-gap: 0rem;
-                grid-template-areas: "obj res";
-
-                & > div {
-                    @include border-collapse;
-                    padding: 1em;
-
-                    &:nth-child(1) {
-                        grid-area: obj;
-                    }
-
-                    &:nth-child(2) {
-                        grid-area: res;
-                    }
-                }
-
-                & > div.results_without_objective {
-                    background: repeating-linear-gradient(
-                        45deg,
-                        $gray-200,
-                        $gray-200 10px,
-                        $gray-100 10px,
-                        $gray-100 20px
-                    );
-                    text-align: center;
-                    font-weight: 700;
-                    padding-top: 1.5rem;
-                }
-            }
-        }
-
-        &#evaluations {
-            & > div {
-                @include border-collapse;
-                padding: 1em;
-            }
-        }
-
-        &#objectives,
-        &#evaluations {
-            padding: 0;
-
-            & > div.title {
-                background-color: $gray-200;
-                color: $gray-700;
-
-                h3 {
-                    text-align: center;
-                }
-            }
-
-            .item-title {
-                font-weight: bold;
-            }
-            .item-details {
-                margin: 1em 2em;
-                font-size: 85%;
-            }
-
-            i.fa {
-                padding: 0.25rem;
-                color: $white;
-
-                &.fa-times {
-                    color: $red;
-                }
-            }
-        }
-
-        &#persons {
-            margin-top: 1.5em;
-        }
-
-        ul.record_actions {
-            margin-bottom: 0;
-        }
+      }
     }
 
-    div#errors {
-        &.alert {
-            margin-top: 2em;
+    &#objectives,
+    &#evaluations {
+      padding: 0;
+
+      & > div.title {
+        background-color: $gray-200;
+        color: $gray-700;
+
+        h3 {
+          text-align: center;
         }
+      }
+
+      .item-title {
+        font-weight: bold;
+      }
+      .item-details {
+        margin: 1em 2em;
+        font-size: 85%;
+      }
+
+      i.fa {
+        padding: 0.25rem;
+        color: $white;
+
+        &.fa-times {
+          color: $red;
+        }
+      }
     }
+
+    &#persons {
+      margin-top: 1.5em;
+    }
+
+    ul.record_actions {
+      margin-bottom: 0;
+    }
+  }
+
+  div#errors {
+    &.alert {
+      margin-top: 2em;
+    }
+  }
 }
 
 .accordion-item:first-of-type,
 .accordion-item:last-of-type {
-    border-radius: 0rem;
-    border: 0px;
-    .accordion-button {
-        padding: 0.25rem;
-        border: 1px solid rgba(17, 17, 17, 0.125);
-        margin-top: 20px;
-        margin-bottom: 20px;
-    }
+  border-radius: 0rem;
+  border: 0px;
+  .accordion-button {
+    padding: 0.25rem;
+    border: 1px solid rgba(17, 17, 17, 0.125);
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
index 77b6810bb..ee8cca532 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
@@ -1,70 +1,67 @@
 <template>
-    <div>
-        <a id="evaluations"></a>
-        <div class="item-title" :title="evaluation.id || 'no id yet'">
-            <span>{{ localizeString(evaluation.evaluation.title) }}</span>
-        </div>
-
-        <div class="item-url mt-3 mb-4" v-if="evaluation.evaluation.url">
-            <i class="fa fa-link fa-lg"></i>
-            <a :href="evaluation.evaluation.url" target="_blank">{{
-                evaluation.evaluation.url
-            }}</a>
-        </div>
-
-        <div>
-            <form-evaluation
-                ref="FormEvaluation"
-                :key="evaluation.key"
-                :evaluation="evaluation"
-                :docAnchorId="docAnchorId"
-            ></form-evaluation>
-
-            <ul class="record_actions">
-                <li v-if="evaluation.workflows_availables.length > 0">
-                    <list-workflow-modal
-                        :workflows="evaluation.workflows"
-                        :allowCreate="true"
-                        relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
-                        :relatedEntityId="evaluation.id"
-                        :workflowsAvailables="evaluation.workflows_availables"
-                        @go-to-generate-workflow="goToGenerateWorkflow"
-                    ></list-workflow-modal>
-                </li>
-                <li v-if="canDelete">
-                    <a
-                        class="btn btn-delete"
-                        @click="modal.showModal = true"
-                        :title="$t('action.delete')"
-                        >{{ $t("delete_evaluation") }}</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>
+    <a id="evaluations"></a>
+    <div class="item-title" :title="evaluation.id || 'no id yet'">
+      <span>{{ localizeString(evaluation.evaluation.title) }}</span>
     </div>
+
+    <div class="item-url mt-3 mb-4" v-if="evaluation.evaluation.url">
+      <i class="fa fa-link fa-lg"></i>
+      <a :href="evaluation.evaluation.url" target="_blank">{{
+        evaluation.evaluation.url
+      }}</a>
+    </div>
+
+    <div>
+      <form-evaluation
+        ref="FormEvaluation"
+        :key="evaluation.key"
+        :evaluation="evaluation"
+        :docAnchorId="docAnchorId"
+      ></form-evaluation>
+
+      <ul class="record_actions">
+        <li v-if="evaluation.workflows_availables.length > 0">
+          <list-workflow-modal
+            :workflows="evaluation.workflows"
+            :allowCreate="true"
+            relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+            :relatedEntityId="evaluation.id"
+            :workflowsAvailables="evaluation.workflows_availables"
+            @go-to-generate-workflow="goToGenerateWorkflow"
+          ></list-workflow-modal>
+        </li>
+        <li v-if="canDelete">
+          <a
+            class="btn btn-delete"
+            @click="modal.showModal = true"
+            :title="$t('action.delete')"
+            >{{ $t("delete_evaluation") }}</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>
@@ -75,114 +72,114 @@ import { buildLinkCreate } from "ChillMainAssets/lib/entity-workflow/api";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 const i18n = {
-    messages: {
-        fr: {
-            no_evaluation_associated: "Aucune évaluation associée",
-            add_an_evaluation: "Évaluations disponibles",
-            evaluation_has_no_evaluation: "Aucune évaluation disponible",
-            startDate: "Date d'ouverture",
-            endDate: "Date de fin",
-            maxDate: "Date d'échéance",
-            warningInterval: "Rappel (jours)",
-            comment: "Note publique",
-            documents: "Documents",
-            delete: {
-                sure: "Êtes-vous sûr?",
-                sure_description:
-                    "Cette évaluation sera supprimée de cette action d'accompagnement",
-                ok: "Supprimer",
-            },
-            delete_evaluation: "Supprimer l'évaluation",
-        },
+  messages: {
+    fr: {
+      no_evaluation_associated: "Aucune évaluation associée",
+      add_an_evaluation: "Évaluations disponibles",
+      evaluation_has_no_evaluation: "Aucune évaluation disponible",
+      startDate: "Date d'ouverture",
+      endDate: "Date de fin",
+      maxDate: "Date d'échéance",
+      warningInterval: "Rappel (jours)",
+      comment: "Note publique",
+      documents: "Documents",
+      delete: {
+        sure: "Êtes-vous sûr?",
+        sure_description:
+          "Cette évaluation sera supprimée de cette action d'accompagnement",
+        ok: "Supprimer",
+      },
+      delete_evaluation: "Supprimer l'évaluation",
     },
+  },
 };
 
 export default {
-    name: "AddEvaluation",
-    components: {
-        FormEvaluation,
-        Modal,
-        ListWorkflowModal,
+  name: "AddEvaluation",
+  components: {
+    FormEvaluation,
+    Modal,
+    ListWorkflowModal,
+  },
+  props: ["evaluation", "docAnchorId"],
+  i18n,
+  data() {
+    return {
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-centered modal-md",
+      },
+    };
+  },
+  computed: {
+    pickedEvaluations() {
+      return this.$store.state.evaluationsPicked;
     },
-    props: ["evaluation", "docAnchorId"],
-    i18n,
-    data() {
-        return {
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-centered modal-md",
-            },
-        };
-    },
-    computed: {
-        pickedEvaluations() {
-            return this.$store.state.evaluationsPicked;
-        },
-        canDelete() {
-            if (this.evaluation.workflows.length > 0) {
-                return false;
-            }
+    canDelete() {
+      if (this.evaluation.workflows.length > 0) {
+        return false;
+      }
 
-            for (let doc of this.evaluation.documents) {
-                if (doc.workflows.length > 0) {
-                    return false;
-                }
-            }
+      for (let doc of this.evaluation.documents) {
+        if (doc.workflows.length > 0) {
+          return false;
+        }
+      }
 
-            return true;
-        },
+      return true;
     },
-    methods: {
-        localizeString,
-        removeEvaluation(e) {
-            this.$store.commit("removeEvaluation", e);
-            return;
-        },
-        toggleEditEvaluation() {
-            this.$store.commit("toggleEvaluationEdit", {
-                key: this.evaluation.key,
-            });
-        },
-        submitForm() {
-            this.toggleEditEvaluation();
-        },
-        goToGenerateWorkflow({ workflowName }) {
-            const callback = (data) => {
-                let evaluationId = data.accompanyingPeriodWorkEvaluations.find(
-                    (e) => e.key === this.evaluation.key,
-                ).id;
-                window.location.assign(
-                    buildLinkCreate(
-                        workflowName,
-                        "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation",
-                        evaluationId,
-                    ),
-                );
-            };
+  },
+  methods: {
+    localizeString,
+    removeEvaluation(e) {
+      this.$store.commit("removeEvaluation", e);
+      return;
+    },
+    toggleEditEvaluation() {
+      this.$store.commit("toggleEvaluationEdit", {
+        key: this.evaluation.key,
+      });
+    },
+    submitForm() {
+      this.toggleEditEvaluation();
+    },
+    goToGenerateWorkflow({ workflowName }) {
+      const callback = (data) => {
+        let evaluationId = data.accompanyingPeriodWorkEvaluations.find(
+          (e) => e.key === this.evaluation.key,
+        ).id;
+        window.location.assign(
+          buildLinkCreate(
+            workflowName,
+            "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation",
+            evaluationId,
+          ),
+        );
+      };
 
-            return this.$store.dispatch("submit", callback).catch((e) => {
-                console.log(e);
-                throw e;
-            });
-        },
+      return this.$store.dispatch("submit", callback).catch((e) => {
+        console.log(e);
+        throw e;
+      });
     },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 div.item-title {
-    .evaluation-title {
-        cursor: default;
-        &::before {
-            content: "";
-        }
+  .evaluation-title {
+    cursor: default;
+    &::before {
+      content: "";
     }
+  }
 }
 div.item-url {
-    i {
-        color: unset !important;
-        margin-left: 1rem;
-        margin-right: 0.5rem;
-    }
+  i {
+    color: unset !important;
+    margin-left: 1rem;
+    margin-right: 0.5rem;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
index aa8948a4e..f25de72c8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
@@ -1,179 +1,167 @@
 <template>
-    <div v-if="hasResult" class="addResult">
-        <p v-if="pickedResults.length === 0" class="chill-no-data-statement">
-            Aucun résultat associé
-        </p>
+  <div v-if="hasResult" class="addResult">
+    <p v-if="pickedResults.length === 0" class="chill-no-data-statement">
+      Aucun résultat associé
+    </p>
 
-        <ul class="list-suggest remove-items">
-            <li v-for="r in pickedResults" @click="removeResult(r)" :key="r.id">
-                <span>
-                    {{ localizeString(r.title) }}
-                </span>
-            </li>
-        </ul>
+    <ul class="list-suggest remove-items">
+      <li v-for="r in pickedResults" @click="removeResult(r)" :key="r.id">
+        <span>
+          {{ localizeString(r.title) }}
+        </span>
+      </li>
+    </ul>
 
-        <div class="accordion" id="expandedSuggestions">
-            <div class="accordion-item">
-                <h2 class="accordion-header" id="heading_expanded_suggestions">
-                    <button
-                        v-if="isExpanded"
-                        class="accordion-button"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        aria-expanded="true"
-                        @click="toggleSelect"
-                    >
-                        Masquer
-                    </button>
+    <div class="accordion" id="expandedSuggestions">
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="heading_expanded_suggestions">
+          <button
+            v-if="isExpanded"
+            class="accordion-button"
+            type="button"
+            data-bs-toggle="collapse"
+            aria-expanded="true"
+            @click="toggleSelect"
+          >
+            Masquer
+          </button>
 
-                    <button
-                        v-else
-                        class="accordion-button collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        aria-expanded="false"
-                        @click="toggleSelect"
-                    >
-                        Résultats et orientations 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="r in availableForCheckResults"
-                                @click="addResult(r)"
-                                :key="r.id"
-                            >
-                                <span>{{ localizeString(r.title) }}</span>
-                            </li>
-                        </ul>
-                    </template>
-                </div>
-            </div>
+          <button
+            v-else
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            aria-expanded="false"
+            @click="toggleSelect"
+          >
+            Résultats et orientations 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="r in availableForCheckResults"
+                @click="addResult(r)"
+                :key="r.id"
+              >
+                <span>{{ localizeString(r.title) }}</span>
+              </li>
+            </ul>
+          </template>
         </div>
+      </div>
     </div>
-    <div v-if="!hasResult" class="noResult">
-        <div class="chill-no-data-statement">
-            {{ $t("goal_has_no_result") }}
-        </div>
+  </div>
+  <div v-if="!hasResult" class="noResult">
+    <div class="chill-no-data-statement">
+      {{ $t("goal_has_no_result") }}
     </div>
+  </div>
 </template>
 
 <script>
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 const i18n = {
-    messages: {
-        fr: {
-            add_a_result: "Résultat - orientation disponibles",
-            goal_has_no_result: "Aucun résultat - orientation disponible",
-        },
+  messages: {
+    fr: {
+      add_a_result: "Résultat - orientation disponibles",
+      goal_has_no_result: "Aucun résultat - orientation disponible",
     },
+  },
 };
 
 export default {
-    name: "AddResult",
-    props: ["destination", "goal", "availableResults"],
-    i18n,
-    data() {
-        return {
-            isExpanded: false,
-        };
+  name: "AddResult",
+  props: ["destination", "goal", "availableResults"],
+  i18n,
+  data() {
+    return {
+      isExpanded: false,
+    };
+  },
+  computed: {
+    hasResult() {
+      if (this.destination === "action") {
+        return this.$store.state.resultsForAction.length > 0;
+      } else if (this.destination === "goal") {
+        return this.$store.getters.resultsForGoal(this.goal).length > 0;
+      }
+
+      throw Error(`this.destination is not implemented: ${this.destination}`);
     },
-    computed: {
-        hasResult() {
-            if (this.destination === "action") {
-                return this.$store.state.resultsForAction.length > 0;
-            } else if (this.destination === "goal") {
-                return this.$store.getters.resultsForGoal(this.goal).length > 0;
-            }
+    pickedResults() {
+      if (this.destination === "action") {
+        return this.$store.state.resultsPicked;
+      } else if (this.destination === "goal") {
+        return this.$store.getters.resultsPickedForGoal(this.goal);
+      }
 
-            throw Error(
-                `this.destination is not implemented: ${this.destination}`,
-            );
-        },
-        pickedResults() {
-            if (this.destination === "action") {
-                return this.$store.state.resultsPicked;
-            } else if (this.destination === "goal") {
-                return this.$store.getters.resultsPickedForGoal(this.goal);
-            }
-
-            throw Error(
-                `this.destination is not implemented: ${this.destination}`,
-            );
-        },
-        availableForCheckResults() {
-            if (this.destination === "action") {
-                let pickedIds = this.$store.state.resultsPicked.map(
-                    (r) => r.id,
-                );
-
-                return this.$store.state.resultsForAction.filter(
-                    (r) => !pickedIds.includes(r.id),
-                );
-            } else if (this.destination === "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));
-            }
-
-            throw Error(
-                `this.destination is not implemented: ${this.destination}`,
-            );
-        },
+      throw Error(`this.destination is not implemented: ${this.destination}`);
     },
-    methods: {
-        localizeString,
-        toggleSelect() {
-            this.isExpanded = !this.isExpanded;
-        },
-        addResult(r) {
-            if (this.destination === "action") {
-                this.$store.commit("addResultPicked", r);
-                return;
-            } else if (this.destination === "goal") {
-                this.$store.commit("addResultForGoalPicked", {
-                    goal: this.goal,
-                    result: r,
-                });
-                return;
-            }
-            throw Error(
-                `this.destination is not implemented: ${this.destination}`,
-            );
-        },
-        removeResult(r) {
-            if (this.destination === "action") {
-                this.$store.commit("removeResultPicked", r);
-                return;
-            } else if (this.destination === "goal") {
-                this.$store.commit("removeResultForGoalPicked", {
-                    goal: this.goal,
-                    result: r,
-                });
-                return;
-            }
-            throw Error(
-                `this.destination is not implemented: ${this.destination}`,
-            );
-        },
+    availableForCheckResults() {
+      if (this.destination === "action") {
+        let pickedIds = this.$store.state.resultsPicked.map((r) => r.id);
+
+        return this.$store.state.resultsForAction.filter(
+          (r) => !pickedIds.includes(r.id),
+        );
+      } else if (this.destination === "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));
+      }
+
+      throw Error(`this.destination is not implemented: ${this.destination}`);
     },
+  },
+  methods: {
+    localizeString,
+    toggleSelect() {
+      this.isExpanded = !this.isExpanded;
+    },
+    addResult(r) {
+      if (this.destination === "action") {
+        this.$store.commit("addResultPicked", r);
+        return;
+      } else if (this.destination === "goal") {
+        this.$store.commit("addResultForGoalPicked", {
+          goal: this.goal,
+          result: r,
+        });
+        return;
+      }
+      throw Error(`this.destination is not implemented: ${this.destination}`);
+    },
+    removeResult(r) {
+      if (this.destination === "action") {
+        this.$store.commit("removeResultPicked", r);
+        return;
+      } else if (this.destination === "goal") {
+        this.$store.commit("removeResultForGoalPicked", {
+          goal: this.goal,
+          result: r,
+        });
+        return;
+      }
+      throw Error(`this.destination is not implemented: ${this.destination}`);
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .accordion-button {
-    padding: 0.25rem;
+  padding: 0.25rem;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
index b54baf09a..30bb2a2dd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
@@ -1,11 +1,11 @@
 <template>
-    <div>
-        <!--h2>
+  <div>
+    <!--h2>
       {{ $t('evaluation_title') }}
    </h2-->
 
-        <div class="m-md-3">
-            <!--div class="row mb-3">
+    <div class="m-md-3">
+      <!--div class="row mb-3">
          <label class="col-sm-4 col-form-label">{{ $t('evaluation_status') }}</label>
          <div class="col-sm-8">
             <select class="form-select form-select-sm" v-model="status">
@@ -17,311 +17,261 @@
          </div>
       </div-->
 
-            <div class="row mb-3">
-                <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-                    {{ $t("evaluation_startdate") }}
-                </label>
-                <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-                    <input
-                        class="form-control form-control-sm"
-                        type="date"
-                        v-model="startDate"
-                    />
-                </div>
-
-                <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-                    {{ $t("evaluation_enddate") }}
-                </label>
-                <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-                    <input
-                        class="form-control form-control-sm"
-                        type="date"
-                        v-model="endDate"
-                    />
-                </div>
-            </div>
-
-            <div class="row mb-3">
-                <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-                    {{ $t("evaluation_maxdate") }}
-                </label>
-                <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-                    <input
-                        class="form-control form-control-sm"
-                        type="date"
-                        v-model="maxDate"
-                    />
-                </div>
-
-                <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-                    {{ $t("evaluation_warning_interval") }}
-                </label>
-                <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-                    <input
-                        class="form-control form-control-sm"
-                        type="number"
-                        v-model.number="warningInterval"
-                    />
-                </div>
-            </div>
-
-            <div class="row mb-3">
-                <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-                    {{ $t("evaluation_time_spent") }}
-                </label>
-                <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-                    <select
-                        class="form-control form-control-sm"
-                        type="time"
-                        v-model="timeSpent"
-                    >
-                        <option disabled value="">
-                            {{ $t("select_time_spent") }}
-                        </option>
-                        <option
-                            v-for="(time, i) in timeSpentChoices"
-                            :value="time.value"
-                            :key="i"
-                        >
-                            {{ time.text }}
-                        </option>
-                    </select>
-                </div>
-            </div>
-
-            <div class="row mb-3">
-                <label class="col-sm-4 col-form-label visually-hidden">{{
-                    $t("evaluation_public_comment")
-                }}</label>
-                <div class="col-sm-12">
-                    <comment-editor v-model:value="comment"></comment-editor>
-                </div>
-            </div>
-
-            <div v-if="evaluation.documents.length > 0" class="row mb-3">
-                <h5>{{ $t("Documents") }} :</h5>
-
-                <div class="flex-table">
-                    <div
-                        class="item-bloc"
-                        v-for="(d, i) in evaluation.documents"
-                        :key="d.id"
-                        :class="[
-                            parseInt(this.docAnchorId) === d.id
-                                ? 'bg-blink'
-                                : 'nothing',
-                        ]"
-                    >
-                        <div :id="`document_${d.id}`" class="item-row">
-                            <div class="input-group input-group-lg mb-3 row">
-                                <label class="col-sm-3 col-form-label"
-                                    >Titre du document:</label
-                                >
-                                <div class="col-sm-9">
-                                    <input
-                                        class="form-control document-title"
-                                        type="text"
-                                        :value="d.title"
-                                        :id="d.id"
-                                        :data-key="i"
-                                        @input="onInputDocumentTitle"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="item-row">
-                            <div class="item-col item-meta">
-                                <p v-if="d.createdBy" class="createdBy">
-                                    Créé par {{ d.createdBy.text }}<br />
-                                    Le
-                                    {{
-                                        $d(
-                                            ISOToDatetime(d.createdAt.datetime),
-                                            "long",
-                                        )
-                                    }}
-                                </p>
-                            </div>
-                        </div>
-                        <div class="item-row">
-                            <div class="item-col">
-                                <ul class="record_actions">
-                                    <li
-                                        v-if="
-                                            d.workflows_availables.length > 0 ||
-                                            d.workflows.length > 0
-                                        "
-                                    >
-                                        <list-workflow-modal
-                                            :workflows="d.workflows"
-                                            :allowCreate="true"
-                                            relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluationDocument"
-                                            :relatedEntityId="d.id"
-                                            :workflowsAvailables="
-                                                d.workflows_availables
-                                            "
-                                            :preventDefaultMoveToGenerate="true"
-                                            :goToGenerateWorkflowPayload="{
-                                                doc: d,
-                                            }"
-                                            @go-to-generate-workflow="
-                                                goToGenerateWorkflowEvaluationDocument
-                                            "
-                                        ></list-workflow-modal>
-                                    </li>
-                                    <li>
-                                        <button
-                                            v-if="AmIRefferer"
-                                            class="btn btn-notify"
-                                            @click="
-                                                goToGenerateDocumentNotification(
-                                                    d,
-                                                    false,
-                                                )
-                                            "
-                                        ></button>
-                                        <template v-else>
-                                            <button
-                                                id="btnGroupNotifyButtons"
-                                                type="button"
-                                                class="btn btn-notify dropdown-toggle"
-                                                :title="$t('notification_send')"
-                                                data-bs-toggle="dropdown"
-                                                aria-expanded="false"
-                                            >
-                                                &nbsp;
-                                            </button>
-                                            <ul
-                                                class="dropdown-menu"
-                                                aria-labelledby="btnGroupNotifyButtons"
-                                            >
-                                                <li>
-                                                    <a
-                                                        class="dropdown-item"
-                                                        @click="
-                                                            goToGenerateDocumentNotification(
-                                                                d,
-                                                                true,
-                                                            )
-                                                        "
-                                                        >{{
-                                                            $t(
-                                                                "notification_notify_referrer",
-                                                            )
-                                                        }}</a
-                                                    >
-                                                </li>
-                                                <li>
-                                                    <a
-                                                        class="dropdown-item"
-                                                        @click="
-                                                            goToGenerateDocumentNotification(
-                                                                d,
-                                                                false,
-                                                            )
-                                                        "
-                                                        >{{
-                                                            $t(
-                                                                "notification_notify_any",
-                                                            )
-                                                        }}</a
-                                                    >
-                                                </li>
-                                            </ul>
-                                        </template>
-                                    </li>
-                                    <li>
-                                        <document-action-buttons-group
-                                            :stored-object="d.storedObject"
-                                            :filename="d.title"
-                                            :can-edit="true"
-                                            :execute-before-leave="
-                                                submitBeforeLeaveToEditor
-                                            "
-                                            :davLink="
-                                                d.storedObject._links?.dav_link
-                                                    .href
-                                            "
-                                            :davLinkExpiration="
-                                                d.storedObject._links?.dav_link
-                                                    .expiration
-                                            "
-                                            @on-stored-object-status-change="
-                                                onStatusDocumentChanged
-                                            "
-                                        ></document-action-buttons-group>
-                                    </li>
-                                    <li
-                                        v-if="
-                                            d.storedObject._permissions.canEdit
-                                        "
-                                    >
-                                        <drop-file-modal
-                                            :existing-doc="d.storedObject"
-                                            :allow-remove="false"
-                                            @add-document="
-                                                (arg) =>
-                                                    replaceDocument(
-                                                        d,
-                                                        arg.stored_object,
-                                                        arg.stored_object_version,
-                                                    )
-                                            "
-                                        ></drop-file-modal>
-                                    </li>
-                                    <li v-if="d.workflows.length === 0">
-                                        <a
-                                            class="btn btn-delete"
-                                            @click="removeDocument(d)"
-                                        >
-                                        </a>
-                                    </li>
-                                    <li v-if="Number.isInteger(d.id)">
-                                        <button
-                                            type="button"
-                                            @click="duplicateDocument(d)"
-                                            class="btn btn-duplicate"
-                                            title="Dupliquer"
-                                        ></button>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="row mb-3">
-                <h6>{{ $t("document_add") }} :</h6>
-                <pick-template
-                    entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
-                    :id="evaluation.id"
-                    :templates="getTemplatesAvailables"
-                    :preventDefaultMoveToGenerate="true"
-                    @go-to-generate-document="submitBeforeGenerate"
-                >
-                    <template v-slot:title>
-                        <label class="col-form-label">{{
-                            $t("evaluation_generate_a_document")
-                        }}</label>
-                    </template>
-                </pick-template>
-                <div>
-                    <label class="col-form-label">{{
-                        $t("document_upload")
-                    }}</label>
-                    <ul class="record_actions document-upload">
-                        <li>
-                            <drop-file-modal
-                                :allow-remove="false"
-                                @add-document="addDocument"
-                            ></drop-file-modal>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+      <div class="row mb-3">
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+          {{ $t("evaluation_startdate") }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+          <input
+            class="form-control form-control-sm"
+            type="date"
+            v-model="startDate"
+          />
         </div>
+
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+          {{ $t("evaluation_enddate") }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+          <input
+            class="form-control form-control-sm"
+            type="date"
+            v-model="endDate"
+          />
+        </div>
+      </div>
+
+      <div class="row mb-3">
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+          {{ $t("evaluation_maxdate") }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+          <input
+            class="form-control form-control-sm"
+            type="date"
+            v-model="maxDate"
+          />
+        </div>
+
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+          {{ $t("evaluation_warning_interval") }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+          <input
+            class="form-control form-control-sm"
+            type="number"
+            v-model.number="warningInterval"
+          />
+        </div>
+      </div>
+
+      <div class="row mb-3">
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+          {{ $t("evaluation_time_spent") }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+          <select
+            class="form-control form-control-sm"
+            type="time"
+            v-model="timeSpent"
+          >
+            <option disabled value="">
+              {{ $t("select_time_spent") }}
+            </option>
+            <option
+              v-for="(time, i) in timeSpentChoices"
+              :value="time.value"
+              :key="i"
+            >
+              {{ time.text }}
+            </option>
+          </select>
+        </div>
+      </div>
+
+      <div class="row mb-3">
+        <label class="col-sm-4 col-form-label visually-hidden">{{
+          $t("evaluation_public_comment")
+        }}</label>
+        <div class="col-sm-12">
+          <comment-editor v-model:value="comment"></comment-editor>
+        </div>
+      </div>
+
+      <div v-if="evaluation.documents.length > 0" class="row mb-3">
+        <h5>{{ $t("Documents") }} :</h5>
+
+        <div class="flex-table">
+          <div
+            class="item-bloc"
+            v-for="(d, i) in evaluation.documents"
+            :key="d.id"
+            :class="[
+              parseInt(this.docAnchorId) === d.id ? 'bg-blink' : 'nothing',
+            ]"
+          >
+            <div :id="`document_${d.id}`" class="item-row">
+              <div class="input-group input-group-lg mb-3 row">
+                <label class="col-sm-3 col-form-label"
+                  >Titre du document:</label
+                >
+                <div class="col-sm-9">
+                  <input
+                    class="form-control document-title"
+                    type="text"
+                    :value="d.title"
+                    :id="d.id"
+                    :data-key="i"
+                    @input="onInputDocumentTitle"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="item-row">
+              <div class="item-col item-meta">
+                <p v-if="d.createdBy" class="createdBy">
+                  Créé par {{ d.createdBy.text }}<br />
+                  Le
+                  {{ $d(ISOToDatetime(d.createdAt.datetime), "long") }}
+                </p>
+              </div>
+            </div>
+            <div class="item-row">
+              <div class="item-col">
+                <ul class="record_actions">
+                  <li
+                    v-if="
+                      d.workflows_availables.length > 0 ||
+                      d.workflows.length > 0
+                    "
+                  >
+                    <list-workflow-modal
+                      :workflows="d.workflows"
+                      :allowCreate="true"
+                      relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluationDocument"
+                      :relatedEntityId="d.id"
+                      :workflowsAvailables="d.workflows_availables"
+                      :preventDefaultMoveToGenerate="true"
+                      :goToGenerateWorkflowPayload="{
+                        doc: d,
+                      }"
+                      @go-to-generate-workflow="
+                        goToGenerateWorkflowEvaluationDocument
+                      "
+                    ></list-workflow-modal>
+                  </li>
+                  <li>
+                    <button
+                      v-if="AmIRefferer"
+                      class="btn btn-notify"
+                      @click="goToGenerateDocumentNotification(d, false)"
+                    ></button>
+                    <template v-else>
+                      <button
+                        id="btnGroupNotifyButtons"
+                        type="button"
+                        class="btn btn-notify dropdown-toggle"
+                        :title="$t('notification_send')"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                      >
+                        &nbsp;
+                      </button>
+                      <ul
+                        class="dropdown-menu"
+                        aria-labelledby="btnGroupNotifyButtons"
+                      >
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            @click="goToGenerateDocumentNotification(d, true)"
+                            >{{ $t("notification_notify_referrer") }}</a
+                          >
+                        </li>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            @click="goToGenerateDocumentNotification(d, false)"
+                            >{{ $t("notification_notify_any") }}</a
+                          >
+                        </li>
+                      </ul>
+                    </template>
+                  </li>
+                  <li>
+                    <document-action-buttons-group
+                      :stored-object="d.storedObject"
+                      :filename="d.title"
+                      :can-edit="true"
+                      :execute-before-leave="submitBeforeLeaveToEditor"
+                      :davLink="d.storedObject._links?.dav_link.href"
+                      :davLinkExpiration="
+                        d.storedObject._links?.dav_link.expiration
+                      "
+                      @on-stored-object-status-change="onStatusDocumentChanged"
+                    ></document-action-buttons-group>
+                  </li>
+                  <li v-if="d.storedObject._permissions.canEdit">
+                    <drop-file-modal
+                      :existing-doc="d.storedObject"
+                      :allow-remove="false"
+                      @add-document="
+                        (arg) =>
+                          replaceDocument(
+                            d,
+                            arg.stored_object,
+                            arg.stored_object_version,
+                          )
+                      "
+                    ></drop-file-modal>
+                  </li>
+                  <li v-if="d.workflows.length === 0">
+                    <a class="btn btn-delete" @click="removeDocument(d)"> </a>
+                  </li>
+                  <li v-if="Number.isInteger(d.id)">
+                    <button
+                      type="button"
+                      @click="duplicateDocument(d)"
+                      class="btn btn-duplicate"
+                      title="Dupliquer"
+                    ></button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row mb-3">
+        <h6>{{ $t("document_add") }} :</h6>
+        <pick-template
+          entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+          :id="evaluation.id"
+          :templates="getTemplatesAvailables"
+          :preventDefaultMoveToGenerate="true"
+          @go-to-generate-document="submitBeforeGenerate"
+        >
+          <template v-slot:title>
+            <label class="col-form-label">{{
+              $t("evaluation_generate_a_document")
+            }}</label>
+          </template>
+        </pick-template>
+        <div>
+          <label class="col-form-label">{{ $t("document_upload") }}</label>
+          <ul class="record_actions document-upload">
+            <li>
+              <drop-file-modal
+                :allow-remove="false"
+                @add-document="addDocument"
+              ></drop-file-modal>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -337,392 +287,392 @@ import DropFileModal from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFileModa
 import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 const i18n = {
-    messages: {
-        fr: {
-            evaluation_title: "Ecrire une évaluation",
-            evaluation_status: "Statut",
-            evaluation_choose_a_status: "Choisir un statut",
-            evaluation_startdate: "Date d'ouverture",
-            evaluation_enddate: "Date de fin",
-            evaluation_maxdate: "Date d'échéance",
-            evaluation_warning_interval: "Rappel (jours)",
-            evaluation_public_comment: "Note publique",
-            evaluation_comment_placeholder: "Commencez à écrire ...",
-            evaluation_generate_a_document: "Générer un document",
-            evaluation_choose_a_template: "Choisir un modèle",
-            evaluation_add_a_document: "Ajouter un document",
-            evaluation_add: "Ajouter une évaluation",
-            evaluation_time_spent: "Temps de rédaction",
-            select_time_spent: "Indiquez le temps de rédaction",
-            Documents: "Documents",
-            document_add: "Générer ou téléverser un document",
-            document_upload: "Téléverser un document",
-            document_title: "Titre du document",
-            template_title: "Nom du template",
-            browse: "Ajouter un document",
-            replace: "Remplacer",
-            download: "Télécharger le fichier existant",
-            notification_notify_referrer: "Notifier le référent",
-            notification_notify_any: "Notifier d'autres utilisateurs",
-            notification_send: "Envoyer une notification",
-        },
+  messages: {
+    fr: {
+      evaluation_title: "Ecrire une évaluation",
+      evaluation_status: "Statut",
+      evaluation_choose_a_status: "Choisir un statut",
+      evaluation_startdate: "Date d'ouverture",
+      evaluation_enddate: "Date de fin",
+      evaluation_maxdate: "Date d'échéance",
+      evaluation_warning_interval: "Rappel (jours)",
+      evaluation_public_comment: "Note publique",
+      evaluation_comment_placeholder: "Commencez à écrire ...",
+      evaluation_generate_a_document: "Générer un document",
+      evaluation_choose_a_template: "Choisir un modèle",
+      evaluation_add_a_document: "Ajouter un document",
+      evaluation_add: "Ajouter une évaluation",
+      evaluation_time_spent: "Temps de rédaction",
+      select_time_spent: "Indiquez le temps de rédaction",
+      Documents: "Documents",
+      document_add: "Générer ou téléverser un document",
+      document_upload: "Téléverser un document",
+      document_title: "Titre du document",
+      template_title: "Nom du template",
+      browse: "Ajouter un document",
+      replace: "Remplacer",
+      download: "Télécharger le fichier existant",
+      notification_notify_referrer: "Notifier le référent",
+      notification_notify_any: "Notifier d'autres utilisateurs",
+      notification_send: "Envoyer une notification",
     },
+  },
 };
 
 export default {
-    name: "FormEvaluation",
-    props: ["evaluation", "docAnchorId"],
-    components: {
-        CommentEditor,
-        DropFileModal,
-        PickTemplate,
-        ListWorkflowModal,
-        DocumentActionButtonsGroup,
+  name: "FormEvaluation",
+  props: ["evaluation", "docAnchorId"],
+  components: {
+    CommentEditor,
+    DropFileModal,
+    PickTemplate,
+    ListWorkflowModal,
+    DocumentActionButtonsGroup,
+  },
+  i18n,
+  data() {
+    return {
+      template: null,
+      asyncUploadOptions: {
+        maxFiles: 1,
+        maxPostSize: 15000000,
+        required: false,
+      },
+      timeSpentChoices: [
+        { text: "1 minute", value: 60 },
+        { text: "2 minutes", value: 120 },
+        { text: "3 minutes", value: 180 },
+        { text: "4 minutes", value: 240 },
+        { text: "5 minutes", value: 300 },
+        { text: "10 minutes", value: 600 },
+        { text: "15 minutes", value: 900 },
+        { text: "20 minutes", value: 1200 },
+        { text: "25 minutes", value: 1500 },
+        { text: "30 minutes", value: 1800 },
+        { text: "45 minutes", value: 2700 },
+        { text: "1 hour", value: 3600 },
+        { text: "1 hour 15 minutes", value: 4500 },
+        { text: "1 hour 30 minutes", value: 5400 },
+        { text: "1 hour 45 minutes", value: 6300 },
+        { text: "2 hours", value: 7200 },
+        { text: "2 hours 30 minutes", value: 9000 },
+        { text: "3 hours", value: 10800 },
+        { text: "3 hours 30 minutes", value: 12600 },
+        { text: "4 hours", value: 14400 },
+        { text: "4 hours 30 minutes", value: 16200 },
+        { text: "5 hours", value: 18000 },
+        { text: "5 hours 30 minutes", value: 19800 },
+        { text: "6 hours", value: 21600 },
+        { text: "6 hours 30 minutes", value: 23400 },
+        { text: "7 hours", value: 25200 },
+        { text: "7 hours 30 minutes", value: 27000 },
+        { text: "8 hours", value: 28800 },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(["isPosting", "work", "me"]),
+    AmIRefferer() {
+      return !(
+        this.$store.state.work.accompanyingPeriod.user &&
+        this.$store.state.me &&
+        this.$store.state.work.accompanyingPeriod.user.id !==
+          this.$store.state.me.id
+      );
     },
-    i18n,
-    data() {
-        return {
-            template: null,
-            asyncUploadOptions: {
-                maxFiles: 1,
-                maxPostSize: 15000000,
-                required: false,
-            },
-            timeSpentChoices: [
-                { text: "1 minute", value: 60 },
-                { text: "2 minutes", value: 120 },
-                { text: "3 minutes", value: 180 },
-                { text: "4 minutes", value: 240 },
-                { text: "5 minutes", value: 300 },
-                { text: "10 minutes", value: 600 },
-                { text: "15 minutes", value: 900 },
-                { text: "20 minutes", value: 1200 },
-                { text: "25 minutes", value: 1500 },
-                { text: "30 minutes", value: 1800 },
-                { text: "45 minutes", value: 2700 },
-                { text: "1 hour", value: 3600 },
-                { text: "1 hour 15 minutes", value: 4500 },
-                { text: "1 hour 30 minutes", value: 5400 },
-                { text: "1 hour 45 minutes", value: 6300 },
-                { text: "2 hours", value: 7200 },
-                { text: "2 hours 30 minutes", value: 9000 },
-                { text: "3 hours", value: 10800 },
-                { text: "3 hours 30 minutes", value: 12600 },
-                { text: "4 hours", value: 14400 },
-                { text: "4 hours 30 minutes", value: 16200 },
-                { text: "5 hours", value: 18000 },
-                { text: "5 hours 30 minutes", value: 19800 },
-                { text: "6 hours", value: 21600 },
-                { text: "6 hours 30 minutes", value: 23400 },
-                { text: "7 hours", value: 25200 },
-                { text: "7 hours 30 minutes", value: 27000 },
-                { text: "8 hours", value: 28800 },
-            ],
-        };
+    getTemplatesAvailables() {
+      return this.$store.getters.getTemplatesAvailablesForEvaluation(
+        this.evaluation.evaluation,
+      );
     },
-    computed: {
-        ...mapState(["isPosting", "work", "me"]),
-        AmIRefferer() {
-            return !(
-                this.$store.state.work.accompanyingPeriod.user &&
-                this.$store.state.me &&
-                this.$store.state.work.accompanyingPeriod.user.id !==
-                    this.$store.state.me.id
-            );
-        },
-        getTemplatesAvailables() {
-            return this.$store.getters.getTemplatesAvailablesForEvaluation(
-                this.evaluation.evaluation,
-            );
-        },
-        canGenerate() {
-            return !this.$store.state.isPosting && this.template !== null;
-        },
-        startDate: {
-            get() {
-                console.log("evaluation", this.evaluation);
-                return this.evaluation.startDate;
-            },
-            set(v) {
-                this.$store.commit("setEvaluationStartDate", {
-                    key: this.evaluation.key,
-                    date: v,
-                });
-            },
-        },
-        endDate: {
-            get() {
-                return this.evaluation.endDate;
-            },
-            set(v) {
-                this.$store.commit("setEvaluationEndDate", {
-                    key: this.evaluation.key,
-                    date: v,
-                });
-            },
-        },
-        maxDate: {
-            get() {
-                return this.evaluation.maxDate;
-            },
-            set(v) {
-                this.$store.commit("setEvaluationMaxDate", {
-                    key: this.evaluation.key,
-                    date: v,
-                });
-            },
-        },
-        warningInterval: {
-            get() {
-                return this.evaluation.warningInterval;
-            },
-            set(v) {
-                this.$store.commit("setEvaluationWarningInterval", {
-                    key: this.evaluation.key,
-                    days: v,
-                });
-            },
-        },
-        timeSpent: {
-            get() {
-                return this.evaluation.timeSpent;
-            },
-            set(v) {
-                this.$store.commit("setEvaluationTimeSpent", {
-                    key: this.evaluation.key,
-                    time: v,
-                });
-            },
-        },
-        comment: {
-            get() {
-                return this.evaluation.comment;
-            },
-            set(v) {
-                this.$store.commit("setEvaluationComment", {
-                    key: this.evaluation.key,
-                    comment: v,
-                });
-            },
-        },
+    canGenerate() {
+      return !this.$store.state.isPosting && this.template !== null;
     },
-    methods: {
-        ISOToDatetime,
-        listAllStatus() {
-            console.log("load all status");
-            let url = `/api/`;
-            fetch(url).then((response) => {
-                if (response.ok) {
-                    return response.json();
-                }
-                throw { m: "yeeah", s: response.status, b: response.body };
-            });
-        },
-        buildEditLink(document) {
-            return (
-                `/chill/wopi/edit/${document.storedObject.uuid}?returnPath=` +
-                encodeURIComponent(
-                    window.location.pathname +
-                        window.location.search +
-                        window.location.hash,
-                )
-            );
-        },
-        submitBeforeLeaveToEditor() {
-            console.log("submit beore edit 2");
-            // empty callback
-            const callback = () => null;
-            return this.$store.dispatch("submit", callback).catch((e) => {
-                console.log(e);
-                throw e;
-            });
-        },
-        submitBeforeEdit(storedObject) {
-            const callback = (data) => {
-                let evaluation = data.accompanyingPeriodWorkEvaluations.find(
-                    (e) => e.key === this.evaluation.key,
-                );
-                let document = evaluation.documents.find(
-                    (d) => d.storedObject.id === storedObject.id,
-                );
-                //console.log('=> document', document);
-                window.location.assign(this.buildEditLink(document));
-            };
-            return this.$store.dispatch("submit", callback).catch((e) => {
-                console.log(e);
-                throw e;
-            });
-        },
-        submitBeforeGenerate({ template }) {
-            const callback = (data) => {
-                let evaluationId = data.accompanyingPeriodWorkEvaluations.find(
-                    (e) => e.key === this.evaluation.key,
-                ).id;
+    startDate: {
+      get() {
+        console.log("evaluation", this.evaluation);
+        return this.evaluation.startDate;
+      },
+      set(v) {
+        this.$store.commit("setEvaluationStartDate", {
+          key: this.evaluation.key,
+          date: v,
+        });
+      },
+    },
+    endDate: {
+      get() {
+        return this.evaluation.endDate;
+      },
+      set(v) {
+        this.$store.commit("setEvaluationEndDate", {
+          key: this.evaluation.key,
+          date: v,
+        });
+      },
+    },
+    maxDate: {
+      get() {
+        return this.evaluation.maxDate;
+      },
+      set(v) {
+        this.$store.commit("setEvaluationMaxDate", {
+          key: this.evaluation.key,
+          date: v,
+        });
+      },
+    },
+    warningInterval: {
+      get() {
+        return this.evaluation.warningInterval;
+      },
+      set(v) {
+        this.$store.commit("setEvaluationWarningInterval", {
+          key: this.evaluation.key,
+          days: v,
+        });
+      },
+    },
+    timeSpent: {
+      get() {
+        return this.evaluation.timeSpent;
+      },
+      set(v) {
+        this.$store.commit("setEvaluationTimeSpent", {
+          key: this.evaluation.key,
+          time: v,
+        });
+      },
+    },
+    comment: {
+      get() {
+        return this.evaluation.comment;
+      },
+      set(v) {
+        this.$store.commit("setEvaluationComment", {
+          key: this.evaluation.key,
+          comment: v,
+        });
+      },
+    },
+  },
+  methods: {
+    ISOToDatetime,
+    listAllStatus() {
+      console.log("load all status");
+      let url = `/api/`;
+      fetch(url).then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+        throw { m: "yeeah", s: response.status, b: response.body };
+      });
+    },
+    buildEditLink(document) {
+      return (
+        `/chill/wopi/edit/${document.storedObject.uuid}?returnPath=` +
+        encodeURIComponent(
+          window.location.pathname +
+            window.location.search +
+            window.location.hash,
+        )
+      );
+    },
+    submitBeforeLeaveToEditor() {
+      console.log("submit beore edit 2");
+      // empty callback
+      const callback = () => null;
+      return this.$store.dispatch("submit", callback).catch((e) => {
+        console.log(e);
+        throw e;
+      });
+    },
+    submitBeforeEdit(storedObject) {
+      const callback = (data) => {
+        let evaluation = data.accompanyingPeriodWorkEvaluations.find(
+          (e) => e.key === this.evaluation.key,
+        );
+        let document = evaluation.documents.find(
+          (d) => d.storedObject.id === storedObject.id,
+        );
+        //console.log('=> document', document);
+        window.location.assign(this.buildEditLink(document));
+      };
+      return this.$store.dispatch("submit", callback).catch((e) => {
+        console.log(e);
+        throw e;
+      });
+    },
+    submitBeforeGenerate({ template }) {
+      const callback = (data) => {
+        let evaluationId = data.accompanyingPeriodWorkEvaluations.find(
+          (e) => e.key === this.evaluation.key,
+        ).id;
 
-                window.location.assign(
-                    buildLink(
-                        template,
-                        evaluationId,
-                        "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation",
-                    ),
-                );
-            };
+        window.location.assign(
+          buildLink(
+            template,
+            evaluationId,
+            "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation",
+          ),
+        );
+      };
 
-            return this.$store.dispatch("submit", callback).catch((e) => {
-                console.log(e);
-                throw e;
-            });
-        },
-        onInputDocumentTitle(event) {
-            const id = Number(event.target.id);
-            const key = Number(event.target.dataset.key) + 1;
-            const title = event.target.value;
-            this.$store.commit("updateDocumentTitle", {
-                id: id,
-                key: key,
-                evaluationKey: this.evaluation.key,
-                title: title,
-            });
-        },
-        addDocument({ stored_object, stored_object_version, file_name }) {
-            let document = {
-                type: "accompanying_period_work_evaluation_document",
-                storedObject: stored_object,
-                title: file_name,
-            };
-            this.$store.commit("addDocument", {
-                key: this.evaluation.key,
-                document,
-                stored_object_version,
-            });
-        },
-        /**
-         * Replaces a document in the store with a new document.
-         *
-         * @param {Object} oldDocument - The document to be replaced.
-         * @param {StoredObject} storedObject - The stored object of the new document.
-         * @param {StoredObjectVersion} storedObjectVersion - The new version of the document
-         * @return {void}
-         */
-        replaceDocument(oldDocument, storedObject, storedObjectVersion) {
-            let document = {
-                type: "accompanying_period_work_evaluation_document",
-                storedObject: storedObject,
-                title: oldDocument.title,
-            };
-            this.$store.commit("replaceDocument", {
-                key: this.evaluation.key,
-                document,
-                oldDocument: oldDocument,
-                stored_object_version: storedObjectVersion,
-            });
-        },
-        removeDocument(document) {
-            if (
-                window.confirm(
-                    'Êtes-vous sûr·e de vouloir supprimer le document qui a pour titre "' +
-                        document.title +
-                        '" ?',
-                )
-            ) {
-                this.$store.commit("removeDocument", {
-                    key: this.evaluation.key,
-                    document: document,
-                });
-            }
-        },
-        duplicateDocument(document) {
-            this.$store.dispatch("duplicateDocument", {
-                evaluation_key: this.evaluation.key,
-                document: document,
-            });
-        },
-        onStatusDocumentChanged(newStatus) {
-            console.log("onStatusDocumentChanged", newStatus);
-            this.$store.commit("statusDocumentChanged", {
-                key: this.evaluation.key,
-                newStatus: newStatus,
-            });
-        },
-        goToGenerateWorkflowEvaluationDocument({ workflowName, payload }) {
-            const callback = (data) => {
-                let evaluation = data.accompanyingPeriodWorkEvaluations.find(
-                    (e) => e.key === this.evaluation.key,
-                );
-                let updatedDocument = evaluation.documents.find(
-                    (d) => d.key === payload.doc.key,
-                );
-                window.location.assign(
-                    buildLinkCreate(
-                        workflowName,
-                        "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument",
-                        updatedDocument.id,
-                    ),
-                );
-            };
-
-            return this.$store.dispatch("submit", callback).catch((e) => {
-                console.log(e);
-                throw e;
-            });
-        },
-        goToGenerateDocumentNotification(document, tos) {
-            const callback = (data) => {
-                let evaluation = data.accompanyingPeriodWorkEvaluations.find(
-                    (e) => e.key === this.evaluation.key,
-                );
-                let updatedDocument = evaluation.documents.find(
-                    (d) => d.key === document.key,
-                );
-                window.location.assign(
-                    buildLinkCreateNotification(
-                        "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument",
-                        updatedDocument.id,
-                        tos === true
-                            ? this.$store.state.work.accompanyingPeriod.user.id
-                            : null,
-                        window.location.pathname +
-                            window.location.search +
-                            window.location.hash,
-                    ),
-                );
-            };
-            return this.$store.dispatch("submit", callback).catch((e) => {
-                console.log(e);
-                throw e;
-            });
-        },
+      return this.$store.dispatch("submit", callback).catch((e) => {
+        console.log(e);
+        throw e;
+      });
     },
+    onInputDocumentTitle(event) {
+      const id = Number(event.target.id);
+      const key = Number(event.target.dataset.key) + 1;
+      const title = event.target.value;
+      this.$store.commit("updateDocumentTitle", {
+        id: id,
+        key: key,
+        evaluationKey: this.evaluation.key,
+        title: title,
+      });
+    },
+    addDocument({ stored_object, stored_object_version, file_name }) {
+      let document = {
+        type: "accompanying_period_work_evaluation_document",
+        storedObject: stored_object,
+        title: file_name,
+      };
+      this.$store.commit("addDocument", {
+        key: this.evaluation.key,
+        document,
+        stored_object_version,
+      });
+    },
+    /**
+     * Replaces a document in the store with a new document.
+     *
+     * @param {Object} oldDocument - The document to be replaced.
+     * @param {StoredObject} storedObject - The stored object of the new document.
+     * @param {StoredObjectVersion} storedObjectVersion - The new version of the document
+     * @return {void}
+     */
+    replaceDocument(oldDocument, storedObject, storedObjectVersion) {
+      let document = {
+        type: "accompanying_period_work_evaluation_document",
+        storedObject: storedObject,
+        title: oldDocument.title,
+      };
+      this.$store.commit("replaceDocument", {
+        key: this.evaluation.key,
+        document,
+        oldDocument: oldDocument,
+        stored_object_version: storedObjectVersion,
+      });
+    },
+    removeDocument(document) {
+      if (
+        window.confirm(
+          'Êtes-vous sûr·e de vouloir supprimer le document qui a pour titre "' +
+            document.title +
+            '" ?',
+        )
+      ) {
+        this.$store.commit("removeDocument", {
+          key: this.evaluation.key,
+          document: document,
+        });
+      }
+    },
+    duplicateDocument(document) {
+      this.$store.dispatch("duplicateDocument", {
+        evaluation_key: this.evaluation.key,
+        document: document,
+      });
+    },
+    onStatusDocumentChanged(newStatus) {
+      console.log("onStatusDocumentChanged", newStatus);
+      this.$store.commit("statusDocumentChanged", {
+        key: this.evaluation.key,
+        newStatus: newStatus,
+      });
+    },
+    goToGenerateWorkflowEvaluationDocument({ workflowName, payload }) {
+      const callback = (data) => {
+        let evaluation = data.accompanyingPeriodWorkEvaluations.find(
+          (e) => e.key === this.evaluation.key,
+        );
+        let updatedDocument = evaluation.documents.find(
+          (d) => d.key === payload.doc.key,
+        );
+        window.location.assign(
+          buildLinkCreate(
+            workflowName,
+            "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument",
+            updatedDocument.id,
+          ),
+        );
+      };
+
+      return this.$store.dispatch("submit", callback).catch((e) => {
+        console.log(e);
+        throw e;
+      });
+    },
+    goToGenerateDocumentNotification(document, tos) {
+      const callback = (data) => {
+        let evaluation = data.accompanyingPeriodWorkEvaluations.find(
+          (e) => e.key === this.evaluation.key,
+        );
+        let updatedDocument = evaluation.documents.find(
+          (d) => d.key === document.key,
+        );
+        window.location.assign(
+          buildLinkCreateNotification(
+            "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument",
+            updatedDocument.id,
+            tos === true
+              ? this.$store.state.work.accompanyingPeriod.user.id
+              : null,
+            window.location.pathname +
+              window.location.search +
+              window.location.hash,
+          ),
+        );
+      };
+      return this.$store.dispatch("submit", callback).catch((e) => {
+        console.log(e);
+        throw e;
+      });
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 input.document-title {
-    font-weight: bold;
-    font-size: 1rem;
+  font-weight: bold;
+  font-size: 1rem;
 }
 ul.document-upload {
-    justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .bg-blink {
-    color: #050000;
-    padding: 10px;
-    display: inline-block;
-    border-radius: 5px;
-    animation: blinkingBackground 2.2s infinite;
-    animation-iteration-count: 2;
+  color: #050000;
+  padding: 10px;
+  display: inline-block;
+  border-radius: 5px;
+  animation: blinkingBackground 2.2s infinite;
+  animation-iteration-count: 2;
 }
 
 @keyframes blinkingBackground {
-    0% {
-        background-color: #ed776d;
-    }
-    50% {
-        background-color: #ffffff;
-    }
-    100% {
-        background-color: #ed776d;
-    }
+  0% {
+    background-color: #ed776d;
+  }
+  50% {
+    background-color: #ffffff;
+  }
+  100% {
+    background-color: #ed776d;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/App.vue
index 29b707842..7922362ca 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/App.vue
@@ -1,445 +1,447 @@
 <template>
-    <fieldset class="mb-3" id="actionType">
-        <div class="row">
-            <legend class="col-sm-4 col-form-label">
-                {{ $t("action.label") }}
-            </legend>
-            <div class="col-sm-8">
-                <VueMultiselect
-                    v-model="action"
-                    :options="actions.options"
-                    @select="selectAction"
-                    @remove="unselectAction"
-                    :multiple="true"
-                    :close-on-select="false"
-                    :placeholder="$t('action.placeholder')"
-                    :custom-label="formatSocialAction"
-                    track-by="id"
-                    :searchable="true"
-                />
-            </div>
-        </div>
-    </fieldset>
+  <fieldset class="mb-3" id="actionType">
+    <div class="row">
+      <legend class="col-sm-4 col-form-label">
+        {{ $t("action.label") }}
+      </legend>
+      <div class="col-sm-8">
+        <VueMultiselect
+          v-model="action"
+          :options="actions.options"
+          @select="selectAction"
+          @remove="unselectAction"
+          :multiple="true"
+          :close-on-select="false"
+          :placeholder="$t('action.placeholder')"
+          :custom-label="formatSocialAction"
+          track-by="id"
+          :searchable="true"
+        />
+      </div>
+    </div>
+  </fieldset>
 
-    <fieldset class="mb-3" id="goal">
-        <div class="row">
-            <legend class="col-sm-4 col-form-label">
-                {{ $t("goal.label") }}
-            </legend>
-            <div class="col-sm-8">
-                <VueMultiselect
-                    v-model="goal"
-                    :options="goals.options"
-                    @select="selectGoal"
-                    @remove="unselectGoal"
-                    :multiple="true"
-                    :close-on-select="false"
-                    :placeholder="$t('goal.placeholder')"
-                    label="title"
-                    :custom-label="transTitle"
-                    track-by="id"
-                    :searchable="true"
-                />
-            </div>
-        </div>
-    </fieldset>
+  <fieldset class="mb-3" id="goal">
+    <div class="row">
+      <legend class="col-sm-4 col-form-label">
+        {{ $t("goal.label") }}
+      </legend>
+      <div class="col-sm-8">
+        <VueMultiselect
+          v-model="goal"
+          :options="goals.options"
+          @select="selectGoal"
+          @remove="unselectGoal"
+          :multiple="true"
+          :close-on-select="false"
+          :placeholder="$t('goal.placeholder')"
+          label="title"
+          :custom-label="transTitle"
+          track-by="id"
+          :searchable="true"
+        />
+      </div>
+    </div>
+  </fieldset>
 
-    <fieldset class="mb-3" id="result">
-        <div class="row">
-            <legend class="col-sm-4 col-form-label">
-                {{ $t("result.label") }}
-            </legend>
-            <div class="col-sm-8">
-                <VueMultiselect
-                    v-model="result"
-                    :options="results.options"
-                    @select="selectResult"
-                    @remove="unselectResult"
-                    :multiple="true"
-                    :close-on-select="false"
-                    :placeholder="$t('result.placeholder')"
-                    label="title"
-                    :custom-label="transTitle"
-                    track-by="id"
-                    :searchable="true"
-                />
-            </div>
-        </div>
-    </fieldset>
+  <fieldset class="mb-3" id="result">
+    <div class="row">
+      <legend class="col-sm-4 col-form-label">
+        {{ $t("result.label") }}
+      </legend>
+      <div class="col-sm-8">
+        <VueMultiselect
+          v-model="result"
+          :options="results.options"
+          @select="selectResult"
+          @remove="unselectResult"
+          :multiple="true"
+          :close-on-select="false"
+          :placeholder="$t('result.placeholder')"
+          label="title"
+          :custom-label="transTitle"
+          track-by="id"
+          :searchable="true"
+        />
+      </div>
+    </div>
+  </fieldset>
 </template>
 
 <script>
 import VueMultiselect from "vue-multiselect";
 import {
-    getSocialActions,
-    getGoalByAction,
-    getResultByAction,
-    getResultByGoal,
+  getSocialActions,
+  getGoalByAction,
+  getResultByAction,
+  getResultByGoal,
 } from "./api";
 
 export default {
-    name: "App",
-    components: {
-        VueMultiselect,
-    },
-    i18n: {
-        messages: {
-            fr: {
-                action: {
-                    label: "Types d'actions",
-                    placeholder: "Choisissez une ou plusieurs actions",
-                },
-                goal: {
-                    label: "Objectifs",
-                    placeholder: "Choisissez un ou plusieurs objectifs",
-                },
-                result: {
-                    label: "Résultats",
-                    placeholder: "Choisissez un ou plusieurs résultats",
-                },
-            },
-        },
-    },
-    data() {
-        return {
-            actions: {
-                options: [], // array with multiselect options
-                value: [], // array with selected values
-                hiddenField: document.getElementById(
-                    "export_filters_social_work_type_filter_form_actionType",
-                ),
-            },
-            goals: {
-                options: [],
-                value: [],
-                hiddenField: document.getElementById(
-                    "export_filters_social_work_type_filter_form_goal",
-                ),
-            },
-            results: {
-                options: [],
-                value: [],
-                hiddenField: document.getElementById(
-                    "export_filters_social_work_type_filter_form_result",
-                ),
-            },
-        };
-    },
-    computed: {
+  name: "App",
+  components: {
+    VueMultiselect,
+  },
+  i18n: {
+    messages: {
+      fr: {
         action: {
-            get() {
-                return this.actions.value;
-            },
-            set(value) {
-                this.actions.value = value;
-                this.rebuildHiddenFieldValues("actions");
-            },
+          label: "Types d'actions",
+          placeholder: "Choisissez une ou plusieurs actions",
         },
         goal: {
-            get() {
-                return this.goals.value;
-            },
-            set(value) {
-                this.goals.value = value;
-                this.rebuildHiddenFieldValues("goals");
-            },
+          label: "Objectifs",
+          placeholder: "Choisissez un ou plusieurs objectifs",
         },
         result: {
-            get() {
-                return this.results.value;
-            },
-            set(value) {
-                this.results.value = value;
-                this.rebuildHiddenFieldValues("results");
-            },
+          label: "Résultats",
+          placeholder: "Choisissez un ou plusieurs résultats",
         },
+      },
     },
-    async mounted() {
-        await this.getSocialActionsList();
-
-        if ("" !== this.actions.hiddenField.value) {
-            const actionIds = this.actions.hiddenField.value.split(",");
-            for (const aid of actionIds) {
-                let action = this.actions.options.find(
-                    (a) => Number.parseInt(aid) === a.id,
-                );
-                if (undefined !== action) {
-                    this.action.push(action);
-                    await this.selectAction(action);
-                }
-            }
-        }
-
-        if ("" !== this.goals.hiddenField.value) {
-            const goalsIds = this.goals.hiddenField.value
-                .split(",")
-                .map((s) => Number.parseInt(s));
-            for (const gid of goalsIds) {
-                let goal = this.goals.options.find((g) => gid === g.id);
-                if (undefined !== goal) {
-                    this.goal.push(goal);
-                    await this.selectGoal(goal);
-                }
-            }
-        }
-
-        if ("" !== this.results.hiddenField.value) {
-            const resultsIds = this.results.hiddenField.value
-                .split(",")
-                .map((s) => Number.parseInt(s));
-            for (const rid of resultsIds) {
-                let result = this.results.options.find((r) => rid === r.id);
-                if (undefined !== result) {
-                    this.result.push(result);
-                }
-            }
-        }
+  },
+  data() {
+    return {
+      actions: {
+        options: [], // array with multiselect options
+        value: [], // array with selected values
+        hiddenField: document.getElementById(
+          "export_filters_social_work_type_filter_form_actionType",
+        ),
+      },
+      goals: {
+        options: [],
+        value: [],
+        hiddenField: document.getElementById(
+          "export_filters_social_work_type_filter_form_goal",
+        ),
+      },
+      results: {
+        options: [],
+        value: [],
+        hiddenField: document.getElementById(
+          "export_filters_social_work_type_filter_form_result",
+        ),
+      },
+    };
+  },
+  computed: {
+    action: {
+      get() {
+        return this.actions.value;
+      },
+      set(value) {
+        this.actions.value = value;
+        this.rebuildHiddenFieldValues("actions");
+      },
     },
-    methods: {
-        async getSocialActionsList() {
-            let actions = await getSocialActions();
-            this.actions.options = actions.toSorted(function (a, b) {
-                if (a.issue.ordering === b.issue.ordering) {
-                    if (a.ordering === b.ordering) {
-                        return 0;
-                    }
-                    if (a.ordering < b.ordering) {
-                        return -1;
-                    }
-                    return 1;
-                }
+    goal: {
+      get() {
+        return this.goals.value;
+      },
+      set(value) {
+        this.goals.value = value;
+        this.rebuildHiddenFieldValues("goals");
+      },
+    },
+    result: {
+      get() {
+        return this.results.value;
+      },
+      set(value) {
+        this.results.value = value;
+        this.rebuildHiddenFieldValues("results");
+      },
+    },
+  },
+  async mounted() {
+    await this.getSocialActionsList();
 
-                if (a.issue.ordering < b.issue.ordering) {
-                    return -1;
-                }
+    if ("" !== this.actions.hiddenField.value) {
+      const actionIds = this.actions.hiddenField.value.split(",");
+      for (const aid of actionIds) {
+        let action = this.actions.options.find(
+          (a) => Number.parseInt(aid) === a.id,
+        );
+        if (undefined !== action) {
+          this.action.push(action);
+          await this.selectAction(action);
+        }
+      }
+    }
 
-                return 1;
-            });
+    if ("" !== this.goals.hiddenField.value) {
+      const goalsIds = this.goals.hiddenField.value
+        .split(",")
+        .map((s) => Number.parseInt(s));
+      for (const gid of goalsIds) {
+        let goal = this.goals.options.find((g) => gid === g.id);
+        if (undefined !== goal) {
+          this.goal.push(goal);
+          await this.selectGoal(goal);
+        }
+      }
+    }
 
+    if ("" !== this.results.hiddenField.value) {
+      const resultsIds = this.results.hiddenField.value
+        .split(",")
+        .map((s) => Number.parseInt(s));
+      for (const rid of resultsIds) {
+        let result = this.results.options.find((r) => rid === r.id);
+        if (undefined !== result) {
+          this.result.push(result);
+        }
+      }
+    }
+  },
+  methods: {
+    async getSocialActionsList() {
+      let actions = await getSocialActions();
+      this.actions.options = actions.toSorted(function (a, b) {
+        if (a.issue.ordering === b.issue.ordering) {
+          if (a.ordering === b.ordering) {
+            return 0;
+          }
+          if (a.ordering < b.ordering) {
+            return -1;
+          }
+          return 1;
+        }
+
+        if (a.issue.ordering < b.issue.ordering) {
+          return -1;
+        }
+
+        return 1;
+      });
+
+      return Promise.resolve();
+    },
+
+    formatSocialAction({ text, issue }) {
+      return text + " (" + issue.text + ")";
+    },
+
+    /**
+     * Select/unselect in Action Multiselect
+     * @param value
+     */
+    async selectAction(value) {
+      //console.log('----'); console.log('select action', value.id);
+      let children = this.getChildrensFromParent(value);
+      this.addSelectedElement("actions", children);
+
+      let parentAndChildren = [...[value], ...children];
+      const promises = [];
+      parentAndChildren.forEach((elem) => {
+        promises.push(
+          getGoalByAction(elem.id).then((goals) => {
+            this.addElementInData("goals", goals);
             return Promise.resolve();
-        },
-
-        formatSocialAction({ text, issue }) {
-            return text + " (" + issue.text + ")";
-        },
-
-        /**
-         * Select/unselect in Action Multiselect
-         * @param value
-         */
-        async selectAction(value) {
-            //console.log('----'); console.log('select action', value.id);
-            let children = this.getChildrensFromParent(value);
-            this.addSelectedElement("actions", children);
-
-            let parentAndChildren = [...[value], ...children];
-            const promises = [];
-            parentAndChildren.forEach((elem) => {
-                promises.push(
-                    getGoalByAction(elem.id).then((goals) => {
-                        this.addElementInData("goals", goals);
-                        return Promise.resolve();
-                    }),
-                );
-                promises.push(
-                    getResultByAction(elem.id).then((results) => {
-                        this.addElementInData("results", results);
-                        return Promise.resolve();
-                    }),
-                );
-            });
-
-            await Promise.all(promises);
+          }),
+        );
+        promises.push(
+          getResultByAction(elem.id).then((results) => {
+            this.addElementInData("results", results);
             return Promise.resolve();
-        },
+          }),
+        );
+      });
 
-        unselectAction(value) {
-            getGoalByAction(value.id).then((goals) => {
-                [this.results.options, this.results.value] =
-                    this.removeElementInData("goals", goals);
-            });
-            getResultByAction(value.id).then((results) => {
-                [this.results.options, this.results.value] =
-                    this.removeElementInData("results", results);
-            });
-        },
-
-        /**
-         * Select/unselect in Goal Multiselect
-         * @param value
-         */
-        async selectGoal(value) {
-            return getResultByGoal(value.id).then((results) => {
-                this.addElementInData("results", results);
-            });
-        },
-
-        unselectGoal(value) {
-            getResultByGoal(value.id).then(
-                (results) =>
-                    ([this.results.options, this.results.value] =
-                        this.removeElementInData("results", results)),
-            );
-        },
-
-        // selectResult(value) {
-        //console.log('----'); console.log('select result', value.id);
-        // },
-
-        // unselectResult(value) {
-        //console.log('----'); console.log('unselect result', value.id);
-        // },
-
-        /**
-         * Choose parent action will involve retaining the "children" actions.
-         * @param value
-         * @return array
-         */
-        getChildrensFromParent(value) {
-            if (null === value.parent) {
-                let excludeParent = this.actions.options.filter(
-                    (o) => o.parent !== null,
-                );
-                let children = excludeParent.filter(
-                    (o) => o.parent.id === value.id,
-                );
-                //console.log("get childrens", children.map(e => e.id));
-                return children;
-            }
-            return [];
-        },
-
-        /**
-         * Add response elements in data target
-         * @param target string -> 'actions', 'goals' or 'results'
-         * @param response array of objects with fetch results
-         */
-        addElementInData(target, response) {
-            let data = this[target];
-            let dump = [];
-            response.forEach((elem) => {
-                let found = data.options.some((e) => e.id === elem.id);
-                if (!found) {
-                    data.options.push(elem);
-                    dump.push(elem.id);
-                }
-            });
-            if (dump.length > 0) {
-                //console.log('push ' + dump.length + ' elems in', target, dump);
-            }
-            data.options.sort();
-        },
-
-        /**
-         * Remove response elements from data target
-         * @param target string -> 'actions', 'goals' or 'results'
-         * @param response array of objects with fetch results
-         * @returns data.<target>.options
-         */
-        removeElementInData(target, response) {
-            let data = this[target];
-            let dump = [];
-            response.forEach((elem) => {
-                let found = data.options.some((e) => e.id === elem.id);
-                if (found) {
-                    data.options = data.options.filter((e) => e.id !== elem.id);
-                    dump.push(elem.id);
-
-                    this.removeSelectedElement(target, elem);
-                }
-            });
-            if (dump.length > 0) {
-                //console.log('remove ' + dump.length + ' elems from ' + target + ' options', dump);
-            }
-            return [data.options, data.value];
-        },
-
-        /**
-         *
-         * @param target
-         * @param elements
-         */
-        addSelectedElement(target, elements) {
-            let data = this[target];
-            let dump = [];
-            elements.forEach((elem) => {
-                let selected = data.value.some((e) => e.id === elem.id);
-                if (!selected) {
-                    data.value.push(elem);
-                    dump.push(elem.id);
-
-                    // add in hiddenField
-                    this.rebuildHiddenFieldValues(target);
-                }
-            });
-            if (dump.length > 0) {
-                //console.log('add ' + dump.length + ' selected elems in', target, dump);
-            }
-        },
-
-        /**
-         * Remove element from selected and from hiddenField
-         * @param target
-         * @param elem
-         */
-        removeSelectedElement(target, elem) {
-            let data = this[target];
-            let selected = data.value.some((e) => e.id === elem.id);
-            if (selected) {
-                // remove from selected
-                data.value = data.value.filter((e) => e.id !== elem.id);
-                //console.log('remove ' + elem.id + ' from selected ' + target);
-
-                // remove from hiddenField
-                this.rebuildHiddenFieldValues(target);
-
-                // in any cases, remove should be recursive
-                this.unselectToNextField(target, elem);
-            }
-        },
-
-        /**
-         * When unselect Action, it could remove elements in goals multiselect.
-         * In that case, we have to unselect Goal to remove elements in results too.
-         * @param target
-         * @param elem
-         */
-        unselectToNextField(target, elem) {
-            if (target === "goals") {
-                //console.log('!!!! target is goal: unselect goal', elem.id);
-                this.unselectGoal(elem);
-                //console.log('!!!! done');
-            }
-        },
-
-        /**
-         * Rebuild values serie (string) in target HiddenField
-         * @param target
-         */
-        rebuildHiddenFieldValues(target) {
-            let data = this[target];
-            //console.log('rebuild hiddenFields ' + target + ' values :');
-            data.hiddenField.value = ""; // reset
-            data.value.forEach((elem) => {
-                data.hiddenField.value = this.addIdToValue(
-                    data.hiddenField.value,
-                    elem.id,
-                );
-            });
-            //console.log(data.hiddenField);
-        },
-
-        addIdToValue(string, id) {
-            let array = string ? string.split(",") : [];
-            array.push(id.toString());
-            let str = array.join();
-            return str;
-        },
-
-        transTitle({ title }) {
-            return title.fr; //TODO multilang
-        },
+      await Promise.all(promises);
+      return Promise.resolve();
     },
+
+    unselectAction(value) {
+      getGoalByAction(value.id).then((goals) => {
+        [this.results.options, this.results.value] = this.removeElementInData(
+          "goals",
+          goals,
+        );
+      });
+      getResultByAction(value.id).then((results) => {
+        [this.results.options, this.results.value] = this.removeElementInData(
+          "results",
+          results,
+        );
+      });
+    },
+
+    /**
+     * Select/unselect in Goal Multiselect
+     * @param value
+     */
+    async selectGoal(value) {
+      return getResultByGoal(value.id).then((results) => {
+        this.addElementInData("results", results);
+      });
+    },
+
+    unselectGoal(value) {
+      getResultByGoal(value.id).then(
+        (results) =>
+          ([this.results.options, this.results.value] =
+            this.removeElementInData("results", results)),
+      );
+    },
+
+    // selectResult(value) {
+    //console.log('----'); console.log('select result', value.id);
+    // },
+
+    // unselectResult(value) {
+    //console.log('----'); console.log('unselect result', value.id);
+    // },
+
+    /**
+     * Choose parent action will involve retaining the "children" actions.
+     * @param value
+     * @return array
+     */
+    getChildrensFromParent(value) {
+      if (null === value.parent) {
+        let excludeParent = this.actions.options.filter(
+          (o) => o.parent !== null,
+        );
+        let children = excludeParent.filter((o) => o.parent.id === value.id);
+        //console.log("get childrens", children.map(e => e.id));
+        return children;
+      }
+      return [];
+    },
+
+    /**
+     * Add response elements in data target
+     * @param target string -> 'actions', 'goals' or 'results'
+     * @param response array of objects with fetch results
+     */
+    addElementInData(target, response) {
+      let data = this[target];
+      let dump = [];
+      response.forEach((elem) => {
+        let found = data.options.some((e) => e.id === elem.id);
+        if (!found) {
+          data.options.push(elem);
+          dump.push(elem.id);
+        }
+      });
+      if (dump.length > 0) {
+        //console.log('push ' + dump.length + ' elems in', target, dump);
+      }
+      data.options.sort();
+    },
+
+    /**
+     * Remove response elements from data target
+     * @param target string -> 'actions', 'goals' or 'results'
+     * @param response array of objects with fetch results
+     * @returns data.<target>.options
+     */
+    removeElementInData(target, response) {
+      let data = this[target];
+      let dump = [];
+      response.forEach((elem) => {
+        let found = data.options.some((e) => e.id === elem.id);
+        if (found) {
+          data.options = data.options.filter((e) => e.id !== elem.id);
+          dump.push(elem.id);
+
+          this.removeSelectedElement(target, elem);
+        }
+      });
+      if (dump.length > 0) {
+        //console.log('remove ' + dump.length + ' elems from ' + target + ' options', dump);
+      }
+      return [data.options, data.value];
+    },
+
+    /**
+     *
+     * @param target
+     * @param elements
+     */
+    addSelectedElement(target, elements) {
+      let data = this[target];
+      let dump = [];
+      elements.forEach((elem) => {
+        let selected = data.value.some((e) => e.id === elem.id);
+        if (!selected) {
+          data.value.push(elem);
+          dump.push(elem.id);
+
+          // add in hiddenField
+          this.rebuildHiddenFieldValues(target);
+        }
+      });
+      if (dump.length > 0) {
+        //console.log('add ' + dump.length + ' selected elems in', target, dump);
+      }
+    },
+
+    /**
+     * Remove element from selected and from hiddenField
+     * @param target
+     * @param elem
+     */
+    removeSelectedElement(target, elem) {
+      let data = this[target];
+      let selected = data.value.some((e) => e.id === elem.id);
+      if (selected) {
+        // remove from selected
+        data.value = data.value.filter((e) => e.id !== elem.id);
+        //console.log('remove ' + elem.id + ' from selected ' + target);
+
+        // remove from hiddenField
+        this.rebuildHiddenFieldValues(target);
+
+        // in any cases, remove should be recursive
+        this.unselectToNextField(target, elem);
+      }
+    },
+
+    /**
+     * When unselect Action, it could remove elements in goals multiselect.
+     * In that case, we have to unselect Goal to remove elements in results too.
+     * @param target
+     * @param elem
+     */
+    unselectToNextField(target, elem) {
+      if (target === "goals") {
+        //console.log('!!!! target is goal: unselect goal', elem.id);
+        this.unselectGoal(elem);
+        //console.log('!!!! done');
+      }
+    },
+
+    /**
+     * Rebuild values serie (string) in target HiddenField
+     * @param target
+     */
+    rebuildHiddenFieldValues(target) {
+      let data = this[target];
+      //console.log('rebuild hiddenFields ' + target + ' values :');
+      data.hiddenField.value = ""; // reset
+      data.value.forEach((elem) => {
+        data.hiddenField.value = this.addIdToValue(
+          data.hiddenField.value,
+          elem.id,
+        );
+      });
+      //console.log(data.hiddenField);
+    },
+
+    addIdToValue(string, id) {
+      let array = string ? string.split(",") : [];
+      array.push(id.toString());
+      let str = array.join();
+      return str;
+    },
+
+    transTitle({ title }) {
+      return title.fr; //TODO multilang
+    },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
index b8e8ee8c4..a58b8a98a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
@@ -1,53 +1,53 @@
 <template>
-    <ol class="breadcrumb">
-        <li
-            v-for="s in steps"
-            :key="s"
-            class="breadcrumb-item"
-            :class="{ active: step === s }"
-        >
-            {{ $t("household_members_editor.app.steps." + s) }}
-        </li>
-    </ol>
-    <concerned v-if="step === 'concerned'" />
-    <household v-if="step === 'household'" @ready-to-go="goToNext" />
-    <household-address v-if="step === 'household_address'" />
-    <positioning v-if="step === 'positioning'" />
-    <dates v-if="step === 'confirm'" />
-    <confirmation v-if="step === 'confirm'" />
+  <ol class="breadcrumb">
+    <li
+      v-for="s in steps"
+      :key="s"
+      class="breadcrumb-item"
+      :class="{ active: step === s }"
+    >
+      {{ $t("household_members_editor.app.steps." + s) }}
+    </li>
+  </ol>
+  <concerned v-if="step === 'concerned'" />
+  <household v-if="step === 'household'" @ready-to-go="goToNext" />
+  <household-address v-if="step === 'household_address'" />
+  <positioning v-if="step === 'positioning'" />
+  <dates v-if="step === 'confirm'" />
+  <confirmation v-if="step === 'confirm'" />
 
-    <ul class="record_actions sticky-form-buttons">
-        <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>
-        </li>
-        <li v-if="step !== 'confirm'">
-            <button
-                class="btn btn-action"
-                @click="goToNext"
-                :disabled="!isNextAllowed"
-            >
-                {{ $t("household_members_editor.app.next") }}&nbsp;<i
-                    class="fa fa-arrow-right"
-                />
-            </button>
-        </li>
-        <li v-else>
-            <button
-                class="btn btn-save"
-                @click="confirm"
-                :disabled="hasWarnings || !lastStepIsSaveAllowed"
-            >
-                {{ $t("household_members_editor.app.save") }}
-            </button>
-        </li>
-    </ul>
+  <ul class="record_actions sticky-form-buttons">
+    <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>
+    </li>
+    <li v-if="step !== 'confirm'">
+      <button
+        class="btn btn-action"
+        @click="goToNext"
+        :disabled="!isNextAllowed"
+      >
+        {{ $t("household_members_editor.app.next") }}&nbsp;<i
+          class="fa fa-arrow-right"
+        />
+      </button>
+    </li>
+    <li v-else>
+      <button
+        class="btn btn-save"
+        @click="confirm"
+        :disabled="hasWarnings || !lastStepIsSaveAllowed"
+      >
+        {{ $t("household_members_editor.app.save") }}
+      </button>
+    </li>
+  </ul>
 </template>
 
 <script>
@@ -60,123 +60,123 @@ import Confirmation from "./components/Confirmation.vue";
 import Positioning from "./components/Positioning";
 
 export default {
-    name: "App",
-    components: {
-        Positioning,
-        Concerned,
-        Household,
-        HouseholdAddress,
-        Dates,
-        Confirmation,
+  name: "App",
+  components: {
+    Positioning,
+    Concerned,
+    Household,
+    HouseholdAddress,
+    Dates,
+    Confirmation,
+  },
+  data() {
+    return {
+      step: "concerned",
+    };
+  },
+  computed: {
+    ...mapState({
+      hasWarnings: (state) =>
+        state.warnings.length > 0 || state.errors.length > 0,
+    }),
+    steps() {
+      let s = ["concerned", "household"];
+
+      if (this.$store.getters.isHouseholdNew) {
+        s.push("household_address");
+      }
+
+      if (!this.$store.getters.isModeLeave) {
+        s.push("positioning");
+      }
+
+      s.push("confirm");
+
+      return s;
     },
-    data() {
-        return {
-            step: "concerned",
-        };
+    hasReturnPath() {
+      let params = new URLSearchParams(window.location.search);
+
+      return params.has("returnPath");
     },
-    computed: {
-        ...mapState({
-            hasWarnings: (state) =>
-                state.warnings.length > 0 || state.errors.length > 0,
-        }),
-        steps() {
-            let s = ["concerned", "household"];
+    // return true if the next step is allowed
+    isNextAllowed() {
+      switch (this.$data.step) {
+        case "concerned":
+          return this.$store.state.concerned.length > 0;
+        case "household":
+          return this.$store.state.mode !== null;
+        case "household_address":
+          return (
+            this.$store.getters.hasHouseholdAddress ||
+            this.$store.getters.isHouseholdForceNoAddress
+          );
+        case "positioning":
+          return (
+            this.$store.getters.hasHouseholdOrLeave &&
+            this.$store.getters.hasPersonsWellPositionnated
+          );
+      }
 
-            if (this.$store.getters.isHouseholdNew) {
-                s.push("household_address");
-            }
-
-            if (!this.$store.getters.isModeLeave) {
-                s.push("positioning");
-            }
-
-            s.push("confirm");
-
-            return s;
-        },
-        hasReturnPath() {
-            let params = new URLSearchParams(window.location.search);
-
-            return params.has("returnPath");
-        },
-        // return true if the next step is allowed
-        isNextAllowed() {
-            switch (this.$data.step) {
-                case "concerned":
-                    return this.$store.state.concerned.length > 0;
-                case "household":
-                    return this.$store.state.mode !== null;
-                case "household_address":
-                    return (
-                        this.$store.getters.hasHouseholdAddress ||
-                        this.$store.getters.isHouseholdForceNoAddress
-                    );
-                case "positioning":
-                    return (
-                        this.$store.getters.hasHouseholdOrLeave &&
-                        this.$store.getters.hasPersonsWellPositionnated
-                    );
-            }
-
-            return false;
-        },
-        lastStepIsSaveAllowed() {
-            let r =
-                !this.$store.getters.isHouseholdNew ||
-                (this.$store.state.numberOfChildren !== null &&
-                    this.$store.state.householdCompositionType !== null);
-            console.log("is saved allowed ?", r);
-
-            return r;
-        },
+      return false;
     },
-    methods: {
-        goToNext() {
-            console.log("go to next");
-            switch (this.$data.step) {
-                case "concerned":
-                    this.$data.step = "household";
-                    break;
-                case "household":
-                    if (this.$store.getters.isHouseholdNew) {
-                        this.$data.step = "household_address";
-                        break;
-                    } else if (this.$store.getters.isModeLeave) {
-                        this.$data.step = "confirm";
-                        break;
-                    } else {
-                        this.$data.step = "positioning";
-                        break;
-                    }
-                case "household_address":
-                    this.$data.step = "positioning";
-                    break;
-                case "positioning":
-                    this.$data.step = "confirm";
-                    break;
-            }
-        },
-        goToPrevious() {
-            if (this.$data.step === "concerned") {
-                let params = new URLSearchParams(window.location.search);
-                if (params.has("returnPath")) {
-                    window.location.replace(params.get("returnPath"));
-                } else {
-                    return;
-                }
-            }
+    lastStepIsSaveAllowed() {
+      let r =
+        !this.$store.getters.isHouseholdNew ||
+        (this.$store.state.numberOfChildren !== null &&
+          this.$store.state.householdCompositionType !== null);
+      console.log("is saved allowed ?", r);
 
-            let s = this.steps;
-            let index = s.indexOf(this.$data.step);
-            if (s[index - 1] === undefined) {
-                throw Error("step not found");
-            }
-
-            this.$data.step = s[index - 1];
-        },
-        confirm() {
-            this.$store.dispatch("confirm");
-        },
+      return r;
     },
+  },
+  methods: {
+    goToNext() {
+      console.log("go to next");
+      switch (this.$data.step) {
+        case "concerned":
+          this.$data.step = "household";
+          break;
+        case "household":
+          if (this.$store.getters.isHouseholdNew) {
+            this.$data.step = "household_address";
+            break;
+          } else if (this.$store.getters.isModeLeave) {
+            this.$data.step = "confirm";
+            break;
+          } else {
+            this.$data.step = "positioning";
+            break;
+          }
+        case "household_address":
+          this.$data.step = "positioning";
+          break;
+        case "positioning":
+          this.$data.step = "confirm";
+          break;
+      }
+    },
+    goToPrevious() {
+      if (this.$data.step === "concerned") {
+        let params = new URLSearchParams(window.location.search);
+        if (params.has("returnPath")) {
+          window.location.replace(params.get("returnPath"));
+        } else {
+          return;
+        }
+      }
+
+      let s = this.steps;
+      let index = s.indexOf(this.$data.step);
+      if (s[index - 1] === undefined) {
+        throw Error("step not found");
+      }
+
+      this.$data.step = s[index - 1];
+    },
+    confirm() {
+      this.$store.dispatch("confirm");
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
index d4bacd855..ae422f150 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
@@ -1,88 +1,74 @@
 <template>
-    <h2 class="mt-4">
-        {{ $t("household_members_editor.concerned.title") }}
-    </h2>
+  <h2 class="mt-4">
+    {{ $t("household_members_editor.concerned.title") }}
+  </h2>
 
-    <div v-if="noPerson">
-        <div class="alert alert-info">
-            {{
-                $t("household_members_editor.concerned.add_at_least_onePerson")
-            }}
-        </div>
+  <div v-if="noPerson">
+    <div class="alert alert-info">
+      {{ $t("household_members_editor.concerned.add_at_least_onePerson") }}
     </div>
-    <div v-else>
-        <p>
-            {{
-                $t("household_members_editor.concerned.persons_will_be_moved")
-            }}&nbsp;:
-        </p>
+  </div>
+  <div v-else>
+    <p>
+      {{
+        $t("household_members_editor.concerned.persons_will_be_moved")
+      }}&nbsp;:
+    </p>
 
-        <ul class="list-suggest remove-items inline">
-            <li
-                v-for="c in concerned"
-                :key="c.person.id"
-                @click="removeConcerned(c)"
-            >
-                <span><person-text :person="c.person" /></span>
-            </li>
-        </ul>
-
-        <div
-            class="alert alert-info"
-            v-if="concernedPersonsWithHouseholds.length > 0"
-        >
-            <p>
-                {{
-                    $t(
-                        "household_members_editor.concerned.persons_with_household",
-                    )
-                }}
-            </p>
-            <ul v-for="c in concernedPersonsWithHouseholds" :key="c.person.id">
-                <li>
-                    {{ c.person.text }}
-                    {{
-                        $t(
-                            "household_members_editor.concerned.already_belongs_to_household",
-                        )
-                    }}
-                    <a
-                        target="_blank"
-                        :href="
-                            this.makeHouseholdLink(
-                                c.person.current_household_id,
-                            )
-                        "
-                        >{{ c.person.current_household_id }}</a
-                    >.
-                </li>
-            </ul>
-        </div>
-    </div>
-
-    <ul class="record_actions">
-        <li class="add-persons">
-            <add-persons
-                button-title="household_members_editor.concerned.add_persons"
-                modal-title="household_members_editor.concerned.search"
-                :key="addPersons.key"
-                :options="addPersons.options"
-                @add-new-persons="addNewPersons"
-                ref="addPersons"
-            >
-                <!-- to cast child method -->
-            </add-persons>
-        </li>
+    <ul class="list-suggest remove-items inline">
+      <li v-for="c in concerned" :key="c.person.id" @click="removeConcerned(c)">
+        <span><person-text :person="c.person" /></span>
+      </li>
     </ul>
+
+    <div
+      class="alert alert-info"
+      v-if="concernedPersonsWithHouseholds.length > 0"
+    >
+      <p>
+        {{ $t("household_members_editor.concerned.persons_with_household") }}
+      </p>
+      <ul v-for="c in concernedPersonsWithHouseholds" :key="c.person.id">
+        <li>
+          {{ c.person.text }}
+          {{
+            $t(
+              "household_members_editor.concerned.already_belongs_to_household",
+            )
+          }}
+          <a
+            target="_blank"
+            :href="this.makeHouseholdLink(c.person.current_household_id)"
+            >{{ c.person.current_household_id }}</a
+          >.
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <ul class="record_actions">
+    <li class="add-persons">
+      <add-persons
+        button-title="household_members_editor.concerned.add_persons"
+        modal-title="household_members_editor.concerned.search"
+        :key="addPersons.key"
+        :options="addPersons.options"
+        @add-new-persons="addNewPersons"
+        ref="addPersons"
+      >
+        <!-- to cast child method -->
+      </add-persons>
+    </li>
+  </ul>
 </template>
 
 <style lang="scss">
 .move_to {
-    .move_hint {
-        text-align: center;
-        display: inline-block;
-        padding: 0.4rem 0.5rem;
-    }
+  .move_hint {
+    text-align: center;
+    display: inline-block;
+    padding: 0.4rem 0.5rem;
+  }
 }
 </style>
 
@@ -92,62 +78,61 @@ import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
 import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
 
 export default {
-    name: "Concerned",
-    components: {
-        AddPersons,
-        PersonText,
+  name: "Concerned",
+  components: {
+    AddPersons,
+    PersonText,
+  },
+  computed: {
+    ...mapState(["concerned", "household"]),
+    ...mapGetters(["persons"]),
+    noPerson() {
+      return this.$store.getters.persons.length === 0;
     },
-    computed: {
-        ...mapState(["concerned", "household"]),
-        ...mapGetters(["persons"]),
-        noPerson() {
-            return this.$store.getters.persons.length === 0;
-        },
-        concernedPersonsWithHouseholds() {
-            if (this.$store.state.household) {
-                return this.$store.state.concerned.filter(
-                    (c) =>
-                        c.person.current_household_id !== null &&
-                        c.person.current_household_id !==
-                            this.$store.state.household.id,
-                );
-            } else {
-                return [];
-            }
-        },
+    concernedPersonsWithHouseholds() {
+      if (this.$store.state.household) {
+        return this.$store.state.concerned.filter(
+          (c) =>
+            c.person.current_household_id !== null &&
+            c.person.current_household_id !== this.$store.state.household.id,
+        );
+      } else {
+        return [];
+      }
     },
-    data() {
-        return {
-            addPersons: {
-                key: "household_members_editor_concerned",
-                options: {
-                    type: ["person"],
-                    priority: null,
-                    uniq: false,
-                },
-            },
-        };
-    },
-    methods: {
-        addNewPersons({ selected, modal }) {
-            selected.forEach(function (item) {
-                this.$store.dispatch("addConcerned", item.result);
-            }, this);
-            this.$refs.addPersons.resetSearch(); // to cast child method
-            modal.showModal = false;
+  },
+  data() {
+    return {
+      addPersons: {
+        key: "household_members_editor_concerned",
+        options: {
+          type: ["person"],
+          priority: null,
+          uniq: false,
         },
-        removeConcerned(concerned) {
-            console.log("removedconcerned", concerned);
+      },
+    };
+  },
+  methods: {
+    addNewPersons({ selected, modal }) {
+      selected.forEach(function (item) {
+        this.$store.dispatch("addConcerned", item.result);
+      }, this);
+      this.$refs.addPersons.resetSearch(); // to cast child method
+      modal.showModal = false;
+    },
+    removeConcerned(concerned) {
+      console.log("removedconcerned", concerned);
 
-            if (!concerned.allowRemove) {
-                return;
-            }
+      if (!concerned.allowRemove) {
+        return;
+      }
 
-            this.$store.dispatch("removePerson", concerned.person);
-        },
-        makeHouseholdLink(id) {
-            return `/fr/person/household/${id}/summary`;
-        },
+      this.$store.dispatch("removePerson", concerned.person);
     },
+    makeHouseholdLink(id) {
+      return `/fr/person/household/${id}/summary`;
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue
index 902e95648..5441bc1af 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue
@@ -1,20 +1,20 @@
 <template>
-    <div v-if="hasWarning" class="alert alert-warning">
-        {{ $t("household_members_editor.confirmation.there_are_warnings") }}
-    </div>
+  <div v-if="hasWarning" class="alert alert-warning">
+    {{ $t("household_members_editor.confirmation.there_are_warnings") }}
+  </div>
 
-    <p v-if="hasWarning">
-        {{ $t("household_members_editor.confirmation.check_those_items") }}
-    </p>
+  <p v-if="hasWarning">
+    {{ $t("household_members_editor.confirmation.check_those_items") }}
+  </p>
 
-    <ul>
-        <li v-for="(msg, i) in warnings" class="warning" :key="i">
-            {{ $t(msg.m, msg.a) }}
-        </li>
-        <li v-for="(msg, i) in errors" class="error" :key="i">
-            {{ msg }}
-        </li>
-    </ul>
+  <ul>
+    <li v-for="(msg, i) in warnings" class="warning" :key="i">
+      {{ $t(msg.m, msg.a) }}
+    </li>
+    <li v-for="(msg, i) in errors" class="error" :key="i">
+      {{ msg }}
+    </li>
+  </ul>
 </template>
 
 <style scoped lang="scss"></style>
@@ -23,14 +23,14 @@
 import { mapState } from "vuex";
 
 export default {
-    name: "Confirmation",
-    computed: {
-        ...mapState({
-            hasWarnings: (state) =>
-                state.warnings.length > 0 || state.errors.length > 0,
-            warnings: (state) => state.warnings,
-            errors: (state) => state.errors,
-        }),
-    },
+  name: "Confirmation",
+  computed: {
+    ...mapState({
+      hasWarnings: (state) =>
+        state.warnings.length > 0 || state.errors.length > 0,
+      warnings: (state) => state.warnings,
+      errors: (state) => state.errors,
+    }),
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
index 34002972c..3ae8c1ab6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
@@ -1,37 +1,35 @@
 <template>
-    <div class="flex-table mb-5" v-if="hasHousehold">
-        <div class="item-bloc">
-            <household-render-box :household="fakeHouseholdWithConcerned" />
-        </div>
+  <div class="flex-table mb-5" v-if="hasHousehold">
+    <div class="item-bloc">
+      <household-render-box :household="fakeHouseholdWithConcerned" />
     </div>
-    <div class="flex-table" v-if="isModeLeave">
-        <div class="item-bloc">
-            <section>
-                <div class="item-row">
-                    <div class="item-col">
-                        <div class="h4">
-                            <span class="fa-stack fa-lg">
-                                <i class="fa fa-home fa-stack-1x" />
-                                <i class="fa fa-ban fa-stack-2x text-danger" />
-                            </span>
-                            {{
-                                $t(
-                                    "household_members_editor.household.leave_without_household",
-                                )
-                            }}
-                        </div>
-                    </div>
-                </div>
-                <div class="item-row">
-                    {{
-                        $t(
-                            "household_members_editor.household.will_leave_any_household_explanation",
-                        )
-                    }}
-                </div>
-            </section>
+  </div>
+  <div class="flex-table" v-if="isModeLeave">
+    <div class="item-bloc">
+      <section>
+        <div class="item-row">
+          <div class="item-col">
+            <div class="h4">
+              <span class="fa-stack fa-lg">
+                <i class="fa fa-home fa-stack-1x" />
+                <i class="fa fa-ban fa-stack-2x text-danger" />
+              </span>
+              {{
+                $t("household_members_editor.household.leave_without_household")
+              }}
+            </div>
+          </div>
         </div>
+        <div class="item-row">
+          {{
+            $t(
+              "household_members_editor.household.will_leave_any_household_explanation",
+            )
+          }}
+        </div>
+      </section>
     </div>
+  </div>
 </template>
 
 <script>
@@ -39,17 +37,17 @@ import { mapGetters } from "vuex";
 import HouseholdRenderBox from "ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue";
 
 export default {
-    name: "CurrentHousehold",
-    components: {
-        HouseholdRenderBox,
-    },
-    computed: {
-        ...mapGetters([
-            "hasHousehold",
-            "fakeHouseholdWithConcerned",
-            "isModeLeave",
-        ]),
-    },
+  name: "CurrentHousehold",
+  components: {
+    HouseholdRenderBox,
+  },
+  computed: {
+    ...mapGetters([
+      "hasHousehold",
+      "fakeHouseholdWithConcerned",
+      "isModeLeave",
+    ]),
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
index 8757f23bc..1139d2fe9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
@@ -1,83 +1,83 @@
 <template>
-    <current-household />
+  <current-household />
 
-    <h2>{{ $t("household_members_editor.dates.dates_title") }}</h2>
+  <h2>{{ $t("household_members_editor.dates.dates_title") }}</h2>
 
+  <div class="mb-3 row">
+    <label for="start_date" class="col-form-label col-sm-4 required">
+      {{ $t("household_members_editor.dates.start_date") }}
+    </label>
+    <div class="col-sm-8">
+      <input type="date" v-model="startDate" class="form-control" />
+    </div>
+  </div>
+
+  <div v-if="this.isHouseholdNew">
+    <h2>{{ $t("household_members_editor.composition.composition") }}</h2>
     <div class="mb-3 row">
-        <label for="start_date" class="col-form-label col-sm-4 required">
-            {{ $t("household_members_editor.dates.start_date") }}
-        </label>
-        <div class="col-sm-8">
-            <input type="date" v-model="startDate" class="form-control" />
-        </div>
+      <label class="col-form-label col-sm-4 required">{{
+        $t("household_members_editor.composition.household_composition")
+      }}</label>
+      <div class="col-sm-8">
+        <select
+          v-model="householdCompositionType"
+          class="form-select form-control"
+        >
+          <option
+            v-for="t in householdCompositionTypes"
+            :key="t.id"
+            :value="t.id"
+          >
+            {{ localizeString(t.label) }}
+          </option>
+        </select>
+      </div>
     </div>
-
-    <div v-if="this.isHouseholdNew">
-        <h2>{{ $t("household_members_editor.composition.composition") }}</h2>
-        <div class="mb-3 row">
-            <label class="col-form-label col-sm-4 required">{{
-                $t("household_members_editor.composition.household_composition")
-            }}</label>
-            <div class="col-sm-8">
-                <select
-                    v-model="householdCompositionType"
-                    class="form-select form-control"
-                >
-                    <option
-                        v-for="t in householdCompositionTypes"
-                        :key="t.id"
-                        :value="t.id"
-                    >
-                        {{ localizeString(t.label) }}
-                    </option>
-                </select>
-            </div>
-        </div>
-        <div class="mb-3 row">
-            <label class="col-form-label col-sm-4 required">{{
-                $t("household_members_editor.composition.number_of_children")
-            }}</label>
-            <div class="col-sm-8">
-                <input
-                    type="number"
-                    v-model="numberOfChildren"
-                    min="0"
-                    max="30"
-                    class="form-control"
-                />
-            </div>
-        </div>
-        <div v-if="this.displayDependents" class="mb-3 row">
-            <label class="col-form-label col-sm-4 required">{{
-                $t("household_members_editor.composition.number_of_dependents")
-            }}</label>
-            <div class="col-sm-8">
-                <input
-                    type="number"
-                    v-model="numberOfDependents"
-                    min="0"
-                    max="30"
-                    class="form-control"
-                />
-            </div>
-        </div>
-        <div v-if="this.displayDependents" class="mb-3 row">
-            <label class="col-form-label col-sm-4 required">{{
-                $t(
-                    "household_members_editor.composition.number_of_dependents_with_disabilities",
-                )
-            }}</label>
-            <div class="col-sm-8">
-                <input
-                    type="number"
-                    v-model="numberOfDependentsWithDisabilities"
-                    min="0"
-                    max="30"
-                    class="form-control"
-                />
-            </div>
-        </div>
+    <div class="mb-3 row">
+      <label class="col-form-label col-sm-4 required">{{
+        $t("household_members_editor.composition.number_of_children")
+      }}</label>
+      <div class="col-sm-8">
+        <input
+          type="number"
+          v-model="numberOfChildren"
+          min="0"
+          max="30"
+          class="form-control"
+        />
+      </div>
     </div>
+    <div v-if="this.displayDependents" class="mb-3 row">
+      <label class="col-form-label col-sm-4 required">{{
+        $t("household_members_editor.composition.number_of_dependents")
+      }}</label>
+      <div class="col-sm-8">
+        <input
+          type="number"
+          v-model="numberOfDependents"
+          min="0"
+          max="30"
+          class="form-control"
+        />
+      </div>
+    </div>
+    <div v-if="this.displayDependents" class="mb-3 row">
+      <label class="col-form-label col-sm-4 required">{{
+        $t(
+          "household_members_editor.composition.number_of_dependents_with_disabilities",
+        )
+      }}</label>
+      <div class="col-sm-8">
+        <input
+          type="number"
+          v-model="numberOfDependentsWithDisabilities"
+          min="0"
+          max="30"
+          class="form-control"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -86,74 +86,71 @@ import { mapGetters, mapState } from "vuex";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 export default {
-    name: "Dates",
-    methods: { localizeString },
-    components: {
-        CurrentHousehold,
+  name: "Dates",
+  methods: { localizeString },
+  components: {
+    CurrentHousehold,
+  },
+  computed: {
+    ...mapState(["householdCompositionTypes"]),
+    ...mapGetters(["isHouseholdNew"]),
+    displayDependents: {
+      get() {
+        return window.household_members_editor_data.displayDependents;
+      },
     },
-    computed: {
-        ...mapState(["householdCompositionTypes"]),
-        ...mapGetters(["isHouseholdNew"]),
-        displayDependents: {
-            get() {
-                return window.household_members_editor_data.displayDependents;
-            },
-        },
-        householdCompositionType: {
-            get() {
-                if (this.$store.state.householdCompositionType !== null) {
-                    return this.$store.state.householdCompositionType.id;
-                }
-                return null;
-            },
-            set(value) {
-                this.$store.dispatch("setHouseholdCompositionType", value);
-            },
-        },
-        numberOfChildren: {
-            get() {
-                return this.$store.state.numberOfChildren;
-            },
-            set(value) {
-                this.$store.commit("setNumberOfChildren", value);
-            },
-        },
-        numberOfDependents: {
-            get() {
-                return this.$store.state.numberOfDependents;
-            },
-            set(value) {
-                this.$store.commit("setNumberOfDependents", value);
-            },
-        },
-        numberOfDependentsWithDisabilities: {
-            get() {
-                return this.$store.state.numberOfDependentsWithDisabilities;
-            },
-            set(value) {
-                this.$store.commit(
-                    "setNumberOfDependentsWithDisabilities",
-                    value,
-                );
-            },
-        },
-        startDate: {
-            get() {
-                return this.$store.state.startDate;
-                // return [
-                //   this.$store.state.startDate.getFullYear(),
-                //   (this.$store.state.startDate.getMonth() + 1).toString().padStart(2, '0'),
-                //   this.$store.state.startDate.getDate().toString().padStart(2, '0')
-                // ].join('-');
-            },
-            set(value) {
-                // let
-                //   [year, month, day] = value.split('-'),
-                //     dValue = new Date(year, month-1, day);
+    householdCompositionType: {
+      get() {
+        if (this.$store.state.householdCompositionType !== null) {
+          return this.$store.state.householdCompositionType.id;
+        }
+        return null;
+      },
+      set(value) {
+        this.$store.dispatch("setHouseholdCompositionType", value);
+      },
+    },
+    numberOfChildren: {
+      get() {
+        return this.$store.state.numberOfChildren;
+      },
+      set(value) {
+        this.$store.commit("setNumberOfChildren", value);
+      },
+    },
+    numberOfDependents: {
+      get() {
+        return this.$store.state.numberOfDependents;
+      },
+      set(value) {
+        this.$store.commit("setNumberOfDependents", value);
+      },
+    },
+    numberOfDependentsWithDisabilities: {
+      get() {
+        return this.$store.state.numberOfDependentsWithDisabilities;
+      },
+      set(value) {
+        this.$store.commit("setNumberOfDependentsWithDisabilities", value);
+      },
+    },
+    startDate: {
+      get() {
+        return this.$store.state.startDate;
+        // return [
+        //   this.$store.state.startDate.getFullYear(),
+        //   (this.$store.state.startDate.getMonth() + 1).toString().padStart(2, '0'),
+        //   this.$store.state.startDate.getDate().toString().padStart(2, '0')
+        // ].join('-');
+      },
+      set(value) {
+        // let
+        //   [year, month, day] = value.split('-'),
+        //     dValue = new Date(year, month-1, day);
 
-                this.$store.dispatch("setStartDate", value);
-            },
-        },
+        this.$store.dispatch("setStartDate", value);
+      },
     },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
index 9773d178e..56798341a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -1,130 +1,116 @@
 <template>
-    <h2 class="mt-4">
-        {{ $t("household_members_editor.household_part") }}
-    </h2>
+  <h2 class="mt-4">
+    {{ $t("household_members_editor.household_part") }}
+  </h2>
 
-    <div class="alert alert-info" v-if="!hasHousehold">
-        {{ $t("household_members_editor.household.no_household_choose_one") }}
-    </div>
-    <template v-else>
-        <current-household />
-    </template>
+  <div class="alert alert-info" v-if="!hasHousehold">
+    {{ $t("household_members_editor.household.no_household_choose_one") }}
+  </div>
+  <template v-else>
+    <current-household />
+  </template>
 
-    <div v-if="hasHouseholdSuggestion" class="householdSuggestions my-5">
-        <h4 class="mb-3">
-            {{ $t("household_members_editor.household.household_suggested") }}
-        </h4>
-        <p>
+  <div v-if="hasHouseholdSuggestion" class="householdSuggestions my-5">
+    <h4 class="mb-3">
+      {{ $t("household_members_editor.household.household_suggested") }}
+    </h4>
+    <p>
+      {{
+        $t("household_members_editor.household.household_suggested_explanation")
+      }}
+    </p>
+    <div class="accordion" id="householdSuggestions">
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="heading_household_suggestions">
+          <button
+            v-if="!showHouseholdSuggestion"
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            aria-expanded="false"
+            @click="toggleHouseholdSuggestion"
+          >
             {{
-                $t(
-                    "household_members_editor.household.household_suggested_explanation",
-                )
+              $tc(
+                "household_members_editor.show_household_suggestion",
+                countHouseholdSuggestion,
+              )
             }}
-        </p>
-        <div class="accordion" id="householdSuggestions">
-            <div class="accordion-item">
-                <h2 class="accordion-header" id="heading_household_suggestions">
+          </button>
+          <button
+            v-if="showHouseholdSuggestion"
+            class="accordion-button"
+            type="button"
+            data-bs-toggle="collapse"
+            aria-expanded="true"
+            @click="toggleHouseholdSuggestion"
+          >
+            {{ $t("household_members_editor.hide_household_suggestion") }}
+          </button>
+          <!-- disabled bootstrap behaviour:  data-bs-target="#collapse_household_suggestions" aria-controls="collapse_household_suggestions" -->
+        </h2>
+        <div
+          class="accordion-collapse"
+          id="collapse_household_suggestions"
+          aria-labelledby="heading_household_suggestions"
+          data-bs-parent="#householdSuggestions"
+        >
+          <div v-if="showHouseholdSuggestion">
+            <div class="flex-table householdSuggestionList">
+              <div
+                v-for="(s, i) in getSuggestions"
+                class="item-bloc"
+                :key="`householdSuggestions-${i}`"
+              >
+                <household-render-box :household="s.household" />
+                <ul class="record_actions">
+                  <li>
                     <button
-                        v-if="!showHouseholdSuggestion"
-                        class="accordion-button collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        aria-expanded="false"
-                        @click="toggleHouseholdSuggestion"
+                      class="btn btn-sm btn-choose"
+                      @click="selectHousehold(s.household)"
                     >
-                        {{
-                            $tc(
-                                "household_members_editor.show_household_suggestion",
-                                countHouseholdSuggestion,
-                            )
-                        }}
+                      {{ $t("household_members_editor.select_household") }}
                     </button>
-                    <button
-                        v-if="showHouseholdSuggestion"
-                        class="accordion-button"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        aria-expanded="true"
-                        @click="toggleHouseholdSuggestion"
-                    >
-                        {{
-                            $t(
-                                "household_members_editor.hide_household_suggestion",
-                            )
-                        }}
-                    </button>
-                    <!-- disabled bootstrap behaviour:  data-bs-target="#collapse_household_suggestions" aria-controls="collapse_household_suggestions" -->
-                </h2>
-                <div
-                    class="accordion-collapse"
-                    id="collapse_household_suggestions"
-                    aria-labelledby="heading_household_suggestions"
-                    data-bs-parent="#householdSuggestions"
-                >
-                    <div v-if="showHouseholdSuggestion">
-                        <div class="flex-table householdSuggestionList">
-                            <div
-                                v-for="(s, i) in getSuggestions"
-                                class="item-bloc"
-                                :key="`householdSuggestions-${i}`"
-                            >
-                                <household-render-box
-                                    :household="s.household"
-                                />
-                                <ul class="record_actions">
-                                    <li>
-                                        <button
-                                            class="btn btn-sm btn-choose"
-                                            @click="
-                                                selectHousehold(s.household)
-                                            "
-                                        >
-                                            {{
-                                                $t(
-                                                    "household_members_editor.select_household",
-                                                )
-                                            }}
-                                        </button>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                  </li>
+                </ul>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 
-    <ul class="record_actions">
-        <li v-if="hasHousehold">
-            <button @click="resetMode" class="btn btn-sm btn-misc">
-                {{ $t("household_members_editor.household.reset_mode") }}
-            </button>
-        </li>
-        <li v-if="!hasHousehold" class="add-persons">
-            <add-persons
-                modal-title="Chercher un ménage existant"
-                button-title="Chercher un ménage existant"
-                :key="addPersons.key"
-                :options="addPersons.options"
-                @add-new-persons="pickHouseholdFound"
-                ref="pickHousehold"
-            >
-                <!-- to cast child method -->
-            </add-persons>
-        </li>
-        <li v-if="!hasHousehold">
-            <button @click="setModeNew" class="btn btn-sm btn-create">
-                {{ $t("household_members_editor.household.create_household") }}
-            </button>
-        </li>
-        <li v-if="isModeLeaveAllowed && !hasHousehold">
-            <button @click="setModeLeave" class="btn btn-sm btn-misc">
-                <i class="fa fa-sign-out" />
-                {{ $t("household_members_editor.household.leave") }}
-            </button>
-        </li>
-    </ul>
+  <ul class="record_actions">
+    <li v-if="hasHousehold">
+      <button @click="resetMode" class="btn btn-sm btn-misc">
+        {{ $t("household_members_editor.household.reset_mode") }}
+      </button>
+    </li>
+    <li v-if="!hasHousehold" class="add-persons">
+      <add-persons
+        modal-title="Chercher un ménage existant"
+        button-title="Chercher un ménage existant"
+        :key="addPersons.key"
+        :options="addPersons.options"
+        @add-new-persons="pickHouseholdFound"
+        ref="pickHousehold"
+      >
+        <!-- to cast child method -->
+      </add-persons>
+    </li>
+    <li v-if="!hasHousehold">
+      <button @click="setModeNew" class="btn btn-sm btn-create">
+        {{ $t("household_members_editor.household.create_household") }}
+      </button>
+    </li>
+    <li v-if="isModeLeaveAllowed && !hasHousehold">
+      <button @click="setModeLeave" class="btn btn-sm btn-misc">
+        <i class="fa fa-sign-out" />
+        {{ $t("household_members_editor.household.leave") }}
+      </button>
+    </li>
+  </ul>
 </template>
 
 <script>
@@ -134,156 +120,154 @@ import CurrentHousehold from "./CurrentHousehold";
 import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons";
 
 export default {
-    name: "Household",
-    components: {
-        AddPersons,
-        CurrentHousehold,
-        HouseholdRenderBox,
-    },
-    emits: ["readyToGo"],
-    data() {
-        return {
-            addPersons: {
-                key: "household_find",
-                options: {
-                    type: ["household"],
-                    priority: null,
-                    uniq: true,
-                    button: {
-                        size: "btn-sm",
-                        type: "btn-search",
-                    },
-                },
+  name: "Household",
+  components: {
+    AddPersons,
+    CurrentHousehold,
+    HouseholdRenderBox,
+  },
+  emits: ["readyToGo"],
+  data() {
+    return {
+      addPersons: {
+        key: "household_find",
+        options: {
+          type: ["household"],
+          priority: null,
+          uniq: true,
+          button: {
+            size: "btn-sm",
+            type: "btn-search",
+          },
+        },
+      },
+      addAddress: {
+        key: "household_new",
+        options: {
+          useDate: {
+            validFrom: false,
+            validTo: false,
+          },
+          onlyButton: true,
+          button: {
+            text: {
+              create: "household_members_editor.household.set_address",
+              edit: "household_members_editor.household.update_address",
             },
-            addAddress: {
-                key: "household_new",
-                options: {
-                    useDate: {
-                        validFrom: false,
-                        validTo: false,
-                    },
-                    onlyButton: true,
-                    button: {
-                        text: {
-                            create: "household_members_editor.household.set_address",
-                            edit: "household_members_editor.household.update_address",
-                        },
-                    },
-                    title: {
-                        create: "household_members_editor.household.create_new_address",
-                        edit: "household_members_editor.household.update_address_title",
-                    },
-                },
-            },
-        };
+          },
+          title: {
+            create: "household_members_editor.household.create_new_address",
+            edit: "household_members_editor.household.update_address_title",
+          },
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "isModeNewAllowed",
+      "isModeLeaveAllowed",
+      "getSuggestions",
+      "hasHousehold",
+      "isHouseholdNew",
+      "hasHouseholdSuggestion",
+      "countHouseholdSuggestion",
+      "filterHouseholdSuggestionByAccompanyingPeriod",
+      "hasAddressSuggestion",
+      "countAddressSuggestion",
+      "filterAddressesSuggestion",
+      "hasHouseholdAddress",
+      "isModeLeave",
+      "getAddressContext",
+    ]),
+    ...mapState([
+      "household",
+      "showHouseholdSuggestion",
+      "showAddressSuggestion",
+      "mode",
+    ]),
+    household() {
+      return this.$store.state.household;
     },
-    computed: {
-        ...mapGetters([
-            "isModeNewAllowed",
-            "isModeLeaveAllowed",
-            "getSuggestions",
-            "hasHousehold",
-            "isHouseholdNew",
-            "hasHouseholdSuggestion",
-            "countHouseholdSuggestion",
-            "filterHouseholdSuggestionByAccompanyingPeriod",
-            "hasAddressSuggestion",
-            "countAddressSuggestion",
-            "filterAddressesSuggestion",
-            "hasHouseholdAddress",
-            "isModeLeave",
-            "getAddressContext",
-        ]),
-        ...mapState([
-            "household",
-            "showHouseholdSuggestion",
-            "showAddressSuggestion",
-            "mode",
-        ]),
-        household() {
-            return this.$store.state.household;
-        },
-        allowHouseholdSearch() {
-            return false;
-            return (
-                this.$store.state.allowHouseholdSearch &&
-                !this.$store.getters.hasHousehold
-            );
-        },
-        isHouseholdNewDesactivated() {
-            return (
-                this.$store.state.mode !== null &&
-                !this.$store.getters.isHouseholdNew
-            );
-        },
-        isHouseholdLeaveDesactivated() {
-            return (
-                this.$store.state.mode !== null &&
-                this.$store.state.mode !== "leave"
-            );
-        },
+    allowHouseholdSearch() {
+      return false;
+      return (
+        this.$store.state.allowHouseholdSearch &&
+        !this.$store.getters.hasHousehold
+      );
     },
-    methods: {
-        setModeNew() {
-            this.$store.dispatch("createHousehold");
-            this.$emit("readyToGo");
-        },
-        setModeLeave() {
-            this.$store.dispatch("forceLeaveWithoutHousehold");
-            this.$emit("readyToGo");
-        },
-        resetMode() {
-            this.$store.commit("resetMode");
-        },
-        addressChanged(payload) {
-            console.log("addressChanged", payload);
-            this.$store.dispatch("setHouseholdNewAddress", payload.address);
-        },
-        selectHousehold(h) {
-            this.$store.dispatch("selectHousehold", h);
-            this.$emit("readyToGo");
-        },
-        pickHouseholdFound({ selected, modal }) {
-            selected.forEach(function (item) {
-                this.selectHousehold(item.result);
-            }, this);
-            this.$refs.pickHousehold.resetSearch(); // to cast child method
-            modal.showModal = false;
-        },
-        removeHouseholdAddress() {
-            this.$store.commit("removeHouseholdAddress");
-        },
-        toggleHouseholdSuggestion() {
-            this.$store.commit("toggleHouseholdSuggestion");
-        },
+    isHouseholdNewDesactivated() {
+      return (
+        this.$store.state.mode !== null && !this.$store.getters.isHouseholdNew
+      );
     },
+    isHouseholdLeaveDesactivated() {
+      return (
+        this.$store.state.mode !== null && this.$store.state.mode !== "leave"
+      );
+    },
+  },
+  methods: {
+    setModeNew() {
+      this.$store.dispatch("createHousehold");
+      this.$emit("readyToGo");
+    },
+    setModeLeave() {
+      this.$store.dispatch("forceLeaveWithoutHousehold");
+      this.$emit("readyToGo");
+    },
+    resetMode() {
+      this.$store.commit("resetMode");
+    },
+    addressChanged(payload) {
+      console.log("addressChanged", payload);
+      this.$store.dispatch("setHouseholdNewAddress", payload.address);
+    },
+    selectHousehold(h) {
+      this.$store.dispatch("selectHousehold", h);
+      this.$emit("readyToGo");
+    },
+    pickHouseholdFound({ selected, modal }) {
+      selected.forEach(function (item) {
+        this.selectHousehold(item.result);
+      }, this);
+      this.$refs.pickHousehold.resetSearch(); // to cast child method
+      modal.showModal = false;
+    },
+    removeHouseholdAddress() {
+      this.$store.commit("removeHouseholdAddress");
+    },
+    toggleHouseholdSuggestion() {
+      this.$store.commit("toggleHouseholdSuggestion");
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .filtered {
-    filter: grayscale(1) opacity(0.6);
+  filter: grayscale(1) opacity(0.6);
 }
 
 .filteredButActive {
-    filter: grayscale(1) opacity(0.6);
-    &:hover {
-        filter: unset;
-    }
+  filter: grayscale(1) opacity(0.6);
+  &:hover {
+    filter: unset;
+  }
 }
 
 div#household_members_editor div,
 div.householdSuggestionList {
-    &.flex-table {
-        margin: 0;
-        div.item-bloc div.item-row div.item-col {
-            &:first-child {
-                width: 25%;
-            }
-            &:last-child {
-                display: initial;
-            }
-        }
+  &.flex-table {
+    margin: 0;
+    div.item-bloc div.item-row div.item-col {
+      &:first-child {
+        width: 25%;
+      }
+      &:last-child {
+        display: initial;
+      }
     }
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue
index af6f00d84..c7d9d8aac 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue
@@ -1,30 +1,26 @@
 <template>
-    <current-household />
+  <current-household />
 
-    <ul class="record_actions">
-        <!-- <li v-if="!hasHouseholdAddress && !isHouseholdForceAddress">
+  <ul class="record_actions">
+    <!-- <li v-if="!hasHouseholdAddress && !isHouseholdForceAddress">
       <button class="btn btn-misc" @click="markNoAddress">
         {{ $t('household_members_editor.household_address.mark_no_address') }}
       </button>
     </li> -->
-        <li v-if="!hasHouseholdAddress">
-            <add-address
-                :context="getAddressContext"
-                :key="addAddress.key"
-                :options="addAddress.options"
-                :address-changed-callback="addressChanged"
-            />
-        </li>
-        <li v-if="hasHouseholdAddress">
-            <button class="btn btn-remove" @click="removeHouseholdAddress">
-                {{
-                    $t(
-                        "household_members_editor.household_address.remove_address",
-                    )
-                }}
-            </button>
-        </li>
-    </ul>
+    <li v-if="!hasHouseholdAddress">
+      <add-address
+        :context="getAddressContext"
+        :key="addAddress.key"
+        :options="addAddress.options"
+        :address-changed-callback="addressChanged"
+      />
+    </li>
+    <li v-if="hasHouseholdAddress">
+      <button class="btn btn-remove" @click="removeHouseholdAddress">
+        {{ $t("household_members_editor.household_address.remove_address") }}
+      </button>
+    </li>
+  </ul>
 </template>
 
 <script>
@@ -33,55 +29,56 @@ import CurrentHousehold from "./CurrentHousehold";
 import { mapGetters } from "vuex";
 
 export default {
-    name: "HouseholdAddress.vue",
-    components: {
-        CurrentHousehold,
-        AddAddress,
-    },
-    data() {
-        return {
-            addAddress: {
-                key: "household_new",
-                options: {
-                    useDate: {
-                        validFrom: false,
-                        validTo: false,
-                    },
-                    onlyButton: true,
-                    button: {
-                        text: {
-                            create: "household_members_editor.household_address.set_address",
-                            edit: "household_members_editor.household_address.update_address",
-                        },
-                    },
-                    title: {
-                        create: "household_members_editor.household_address.create_new_address",
-                        edit: "household_members_editor.household_address.update_address_title",
-                    },
-                },
+  name: "HouseholdAddress.vue",
+  components: {
+    CurrentHousehold,
+    AddAddress,
+  },
+  data() {
+    return {
+      addAddress: {
+        key: "household_new",
+        options: {
+          useDate: {
+            validFrom: false,
+            validTo: false,
+          },
+          onlyButton: true,
+          button: {
+            text: {
+              create: "household_members_editor.household_address.set_address",
+              edit: "household_members_editor.household_address.update_address",
             },
-        };
-    },
-    computed: {
-        ...mapGetters([
-            "isHouseholdNew",
-            "hasHouseholdAddress",
-            "getAddressContext",
-            "isHouseholdForceNoAddress",
-        ]),
-    },
-    methods: {
-        addressChanged(payload) {
-            console.log("addressChanged", payload);
-            this.$store.dispatch("setHouseholdNewAddress", payload.address);
-        },
-        markNoAddress() {
-            this.$store.commit("markHouseholdNoAddress");
-        },
-        removeHouseholdAddress() {
-            this.$store.commit("removeHouseholdAddress");
+          },
+          title: {
+            create:
+              "household_members_editor.household_address.create_new_address",
+            edit: "household_members_editor.household_address.update_address_title",
+          },
         },
+      },
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "isHouseholdNew",
+      "hasHouseholdAddress",
+      "getAddressContext",
+      "isHouseholdForceNoAddress",
+    ]),
+  },
+  methods: {
+    addressChanged(payload) {
+      console.log("addressChanged", payload);
+      this.$store.dispatch("setHouseholdNewAddress", payload.address);
     },
+    markNoAddress() {
+      this.$store.commit("markHouseholdNoAddress");
+    },
+    removeHouseholdAddress() {
+      this.$store.commit("removeHouseholdAddress");
+    },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue
index 13515efec..3bdfb9d03 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue
@@ -1,104 +1,102 @@
 <template>
-    <div class="item-bloc">
-        <div class="item-row">
-            <div class="item-col">
-                <div>
-                    <person-render-box
-                        render="badge"
-                        :options="{}"
-                        :person="conc.person"
-                    />
-                    <span v-if="isHolder" class="badge bg-primary holder">
-                        {{ $t("household_members_editor.holder") }}
-                    </span>
-                </div>
-                <div v-if="conc.person.birthdate !== null">
-                    {{
-                        $t("person.born", {
-                            gender: conc.person.gender.genderTranslation,
-                        })
-                    }}
-                </div>
-            </div>
-            <div class="item-col">
-                <ul class="list-content fa-ul">
-                    <li>
-                        <i class="fa fa-li fa-map-marker" />
-                        <span class="chill-no-data-statement"
-                            >Sans adresse</span
-                        >
-                    </li>
-                </ul>
-            </div>
+  <div class="item-bloc">
+    <div class="item-row">
+      <div class="item-col">
+        <div>
+          <person-render-box
+            render="badge"
+            :options="{}"
+            :person="conc.person"
+          />
+          <span v-if="isHolder" class="badge bg-primary holder">
+            {{ $t("household_members_editor.holder") }}
+          </span>
         </div>
-
-        <div class="item-row comment">
-            <comment-editor v-model="comment" />
-        </div>
-
-        <div class="item-row participation-details">
-            <div v-if="conc.position.allowHolder" class="action">
-                <button
-                    class="btn"
-                    :class="{
-                        'btn-primary': isHolder,
-                        'btn-secondary': !isHolder,
-                    }"
-                    @click="toggleHolder"
-                >
-                    {{
-                        $t(
-                            isHolder
-                                ? "household_members_editor.is_holder"
-                                : "household_members_editor.is_not_holder",
-                        )
-                    }}
-                </button>
-            </div>
-
-            <div>
-                <button @click="removePosition" class="btn btn-outline-primary">
-                    {{
-                        $t("household_members_editor.remove_position", {
-                            position: conc.position.label.fr,
-                        })
-                    }}
-                </button>
-            </div>
-
-            <div>
-                <button
-                    v-if="conc.allowRemove"
-                    @click="removeConcerned"
-                    class="btn btn-primary"
-                >
-                    {{ $t("household_members_editor.remove_concerned") }}
-                </button>
-            </div>
+        <div v-if="conc.person.birthdate !== null">
+          {{
+            $t("person.born", {
+              gender: conc.person.gender.genderTranslation,
+            })
+          }}
         </div>
+      </div>
+      <div class="item-col">
+        <ul class="list-content fa-ul">
+          <li>
+            <i class="fa fa-li fa-map-marker" />
+            <span class="chill-no-data-statement">Sans adresse</span>
+          </li>
+        </ul>
+      </div>
     </div>
+
+    <div class="item-row comment">
+      <comment-editor v-model="comment" />
+    </div>
+
+    <div class="item-row participation-details">
+      <div v-if="conc.position.allowHolder" class="action">
+        <button
+          class="btn"
+          :class="{
+            'btn-primary': isHolder,
+            'btn-secondary': !isHolder,
+          }"
+          @click="toggleHolder"
+        >
+          {{
+            $t(
+              isHolder
+                ? "household_members_editor.is_holder"
+                : "household_members_editor.is_not_holder",
+            )
+          }}
+        </button>
+      </div>
+
+      <div>
+        <button @click="removePosition" class="btn btn-outline-primary">
+          {{
+            $t("household_members_editor.remove_position", {
+              position: conc.position.label.fr,
+            })
+          }}
+        </button>
+      </div>
+
+      <div>
+        <button
+          v-if="conc.allowRemove"
+          @click="removeConcerned"
+          class="btn btn-primary"
+        >
+          {{ $t("household_members_editor.remove_concerned") }}
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 .drag-icon {
-    height: 1.1em;
-    margin-right: 0.5em;
+  height: 1.1em;
+  margin-right: 0.5em;
 }
 div.participation-details {
-    display: flex;
-    flex-direction: row !important;
-    justify-content: flex-end;
+  display: flex;
+  flex-direction: row !important;
+  justify-content: flex-end;
 
-    .action {
-        align-self: flex-start;
-        margin-right: auto;
-    }
+  .action {
+    align-self: flex-start;
+    margin-right: auto;
+  }
 }
 
 .holder {
-    display: inline;
-    vertical-align: super;
-    font-size: 0.6em;
+  display: inline;
+  vertical-align: super;
+  font-size: 0.6em;
 }
 </style>
 
@@ -108,44 +106,44 @@ import PersonRenderBox from "ChillPersonAssets/vuejs/_components/Entity/PersonRe
 import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 export default {
-    name: "MemberDetails",
-    components: {
-        PersonRenderBox,
-        CommentEditor,
+  name: "MemberDetails",
+  components: {
+    PersonRenderBox,
+    CommentEditor,
+  },
+  props: ["conc"],
+  computed: {
+    ...mapGetters(["concByPersonId"]),
+    classicEditor: () => ClassicEditor,
+    editorConfig: () => classicEditorConfig,
+    isHolder() {
+      return this.conc.holder;
     },
-    props: ["conc"],
-    computed: {
-        ...mapGetters(["concByPersonId"]),
-        classicEditor: () => ClassicEditor,
-        editorConfig: () => classicEditorConfig,
-        isHolder() {
-            return this.conc.holder;
-        },
-        comment: {
-            get() {
-                return this.conc.comment;
-            },
-            set(text) {
-                console.log("set comment");
-                console.log("comment", text);
+    comment: {
+      get() {
+        return this.conc.comment;
+      },
+      set(text) {
+        console.log("set comment");
+        console.log("comment", text);
 
-                this.$store.dispatch("setComment", {
-                    conc: this.conc,
-                    comment: text,
-                });
-            },
-        },
+        this.$store.dispatch("setComment", {
+          conc: this.conc,
+          comment: text,
+        });
+      },
     },
-    methods: {
-        toggleHolder() {
-            this.$store.dispatch("toggleHolder", this.conc);
-        },
-        removePosition() {
-            this.$store.dispatch("removePosition", this.conc);
-        },
-        removeConcerned() {
-            this.$store.dispatch("removeConcerned", this.conc);
-        },
+  },
+  methods: {
+    toggleHolder() {
+      this.$store.dispatch("toggleHolder", this.conc);
     },
+    removePosition() {
+      this.$store.dispatch("removePosition", this.conc);
+    },
+    removeConcerned() {
+      this.$store.dispatch("removeConcerned", this.conc);
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
index 6630a72f1..99fb3ebfa 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
@@ -1,30 +1,30 @@
 <template>
-    <comment-editor v-model="content" />
+  <comment-editor v-model="content" />
 </template>
 
 <script>
 import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 export default {
-    name: "PersonComment.vue",
-    components: {
-        CommentEditor,
-    },
-    props: ["conc"],
-    computed: {
-        content: {
-            get() {
-                return this.$props.conc.comment || "";
-            },
-            set(value) {
-                console.log("set content", value);
-                this.$store.commit("setComment", {
-                    conc: this.$props.conc,
-                    comment: value,
-                });
-            },
-        },
+  name: "PersonComment.vue",
+  components: {
+    CommentEditor,
+  },
+  props: ["conc"],
+  computed: {
+    content: {
+      get() {
+        return this.$props.conc.comment || "";
+      },
+      set(value) {
+        console.log("set content", value);
+        this.$store.commit("setComment", {
+          conc: this.$props.conc,
+          comment: value,
+        });
+      },
     },
+  },
 };
 </script>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
index a19d80c7a..26ab0058e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
@@ -1,57 +1,57 @@
 <template>
-    <current-household />
+  <current-household />
 
-    <h2>
-        {{ $t("household_members_editor.positioning.persons_to_positionnate") }}
-    </h2>
+  <h2>
+    {{ $t("household_members_editor.positioning.persons_to_positionnate") }}
+  </h2>
 
-    <div class="list-household-members flex-table">
-        <div v-for="conc in concerned" class="item-bloc" :key="conc.person.id">
-            <div class="pick-position item-row">
-                <div class="person">
-                    <!-- <h3>{{ conc.person.text }}</h3> -->
-                    <h3><person-text :person="conc.person" /></h3>
-                </div>
-                <div class="holder">
-                    <button
-                        class="btn"
-                        :disabled="!allowHolderForConcerned(conc)"
-                        :class="{
-                            'btn-outline-chill-green': !conc.holder,
-                            'btn-chill-green': conc.holder,
-                        }"
-                        @click="toggleHolder(conc)"
-                    >
-                        {{ $t("household_members_editor.positioning.holder") }}
-                    </button>
-                </div>
-                <div
-                    v-for="(position, i) in positions"
-                    :key="`position-${i}`"
-                    class="position"
-                >
-                    <button
-                        class="btn"
-                        :class="{
-                            'btn-primary': conc.position === position,
-                            'btn-outline-primary': conc.position !== position,
-                        }"
-                        @click="moveToPosition(conc.person.id, position.id)"
-                    >
-                        {{ localizeString(position.label) }}
-                    </button>
-                </div>
-            </div>
-            <div class="item-row">
-                <div class="col-12">
-                    <h6>
-                        {{ $t("household_members_editor.positioning.comment") }}
-                    </h6>
-                    <person-comment :conc="conc" />
-                </div>
-            </div>
+  <div class="list-household-members flex-table">
+    <div v-for="conc in concerned" class="item-bloc" :key="conc.person.id">
+      <div class="pick-position item-row">
+        <div class="person">
+          <!-- <h3>{{ conc.person.text }}</h3> -->
+          <h3><person-text :person="conc.person" /></h3>
         </div>
+        <div class="holder">
+          <button
+            class="btn"
+            :disabled="!allowHolderForConcerned(conc)"
+            :class="{
+              'btn-outline-chill-green': !conc.holder,
+              'btn-chill-green': conc.holder,
+            }"
+            @click="toggleHolder(conc)"
+          >
+            {{ $t("household_members_editor.positioning.holder") }}
+          </button>
+        </div>
+        <div
+          v-for="(position, i) in positions"
+          :key="`position-${i}`"
+          class="position"
+        >
+          <button
+            class="btn"
+            :class="{
+              'btn-primary': conc.position === position,
+              'btn-outline-primary': conc.position !== position,
+            }"
+            @click="moveToPosition(conc.person.id, position.id)"
+          >
+            {{ localizeString(position.label) }}
+          </button>
+        </div>
+      </div>
+      <div class="item-row">
+        <div class="col-12">
+          <h6>
+            {{ $t("household_members_editor.positioning.comment") }}
+          </h6>
+          <person-comment :conc="conc" />
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -62,61 +62,61 @@ import PersonText from "../../_components/Entity/PersonText.vue";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 export default {
-    name: "Positioning",
-    components: {
-        CurrentHousehold,
-        PersonComment,
-        PersonText,
+  name: "Positioning",
+  components: {
+    CurrentHousehold,
+    PersonComment,
+    PersonText,
+  },
+  computed: {
+    ...mapState(["concerned"]),
+    ...mapGetters([
+      "persons",
+      "concUnpositionned",
+      "positions",
+      "concByPosition",
+    ]),
+    allPersonsPositionnated() {
+      return (
+        this.$store.getters.persons.length > 0 &&
+        this.$store.getters.concUnpositionned.length === 0
+      );
     },
-    computed: {
-        ...mapState(["concerned"]),
-        ...mapGetters([
-            "persons",
-            "concUnpositionned",
-            "positions",
-            "concByPosition",
-        ]),
-        allPersonsPositionnated() {
-            return (
-                this.$store.getters.persons.length > 0 &&
-                this.$store.getters.concUnpositionned.length === 0
-            );
-        },
-        allowHolderForConcerned: () => (conc) => {
-            console.log("allow holder for concerned", conc);
-            if (conc.position === null) {
-                return false;
-            }
+    allowHolderForConcerned: () => (conc) => {
+      console.log("allow holder for concerned", conc);
+      if (conc.position === null) {
+        return false;
+      }
 
-            return conc.position.allowHolder;
-        },
+      return conc.position.allowHolder;
     },
-    methods: {
-        localizeString,
-        moveToPosition(person_id, position_id) {
-            this.$store.dispatch("markPosition", { person_id, position_id });
-        },
-        toggleHolder(conc) {
-            console.log("toggle holder", conc);
-            this.$store.dispatch("toggleHolder", conc);
-        },
+  },
+  methods: {
+    localizeString,
+    moveToPosition(person_id, position_id) {
+      this.$store.dispatch("markPosition", { person_id, position_id });
     },
+    toggleHolder(conc) {
+      console.log("toggle holder", conc);
+      this.$store.dispatch("toggleHolder", conc);
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .pick-position {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 
-    .person {
-        margin-right: auto;
-    }
-    .holder {
-        margin-right: 1.2rem;
-    }
+  .person {
+    margin-right: auto;
+  }
+  .holder {
+    margin-right: 1.2rem;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index 401f41be5..e9ee85164 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
@@ -1,211 +1,181 @@
 <template>
-    <div id="visgraph" />
+  <div id="visgraph" />
 
-    <teleport to="#visgraph-legend">
-        <div class="post-menu">
-            <div class="list-group mt-4">
-                <button
-                    type="button"
-                    class="list-group-item list-group-item-action btn btn-misc"
-                    @click="createRelationship"
-                >
-                    <i class="fa fa-plus" /> {{ $t("visgraph.add_link") }}
-                </button>
-                <a
-                    type="button"
-                    class="list-group-item list-group-item-action btn btn-misc"
-                    id="exportCanvasBtn"
-                    @click="exportCanvasAsImage"
-                >
-                    <i class="fa fa-camera fa-fw" />
-                    {{ $t("visgraph.screenshot") }}
-                </a>
-            </div>
-
-            <div v-if="displayHelpMessage" class="alert alert-info mt-3">
-                {{ $t("visgraph.create_link_help") }}
-            </div>
-
-            <div class="my-4 legend">
-                <h3>{{ $t("visgraph.Legend") }}</h3>
-                <div class="list-group">
-                    <label
-                        class="list-group-item"
-                        v-for="(layer, i) in legendLayers"
-                        :key="`layer-${i}`"
-                    >
-                        <input
-                            class="form-check-input me-1"
-                            type="checkbox"
-                            :value="layer.id"
-                            v-model="checkedLayers"
-                            @change="toggleLayer"
-                        />
-                        {{ layer.label }}
-                    </label>
-                </div>
-            </div>
-        </div>
-    </teleport>
-
-    <teleport to="body">
-        <modal
-            v-if="modal.showModal"
-            :modal-dialog-class="modal.modalDialogClass"
-            @close="modal.showModal = false"
+  <teleport to="#visgraph-legend">
+    <div class="post-menu">
+      <div class="list-group mt-4">
+        <button
+          type="button"
+          class="list-group-item list-group-item-action btn btn-misc"
+          @click="createRelationship"
         >
-            <template #header>
-                <h2 class="modal-title">
-                    {{ $t(modal.title) }}
-                </h2>
-                <!-- {{ modal.data.id }} -->
-            </template>
-            <template #body>
-                <div v-if="modal.action === 'delete'">
-                    <p>{{ $t("visgraph.delete_confirmation_text") }}</p>
-                </div>
-                <div v-else>
-                    <form>
-                        <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">
-                                        {{
-                                            $t(
-                                                "visgraph.relation_from_to_like",
-                                                [
-                                                    getPerson(modal.data.from)
-                                                        .text,
-                                                    getPerson(modal.data.to)
-                                                        .text,
-                                                    relation.reverseTitle.fr.toLowerCase(),
-                                                ],
-                                            )
-                                        }}
-                                    </span>
-                                    <span v-else>
-                                        {{
-                                            $t(
-                                                "visgraph.relation_from_to_like",
-                                                [
-                                                    getPerson(modal.data.from)
-                                                        .text,
-                                                    getPerson(modal.data.to)
-                                                        .text,
-                                                    relation.title.fr.toLowerCase(),
-                                                ],
-                                            )
-                                        }}
-                                    </span>
-                                </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">
-                                        {{
-                                            $t(
-                                                "visgraph.relation_from_to_like",
-                                                [
-                                                    getPerson(modal.data.to)
-                                                        .text,
-                                                    getPerson(modal.data.from)
-                                                        .text,
-                                                    relation.title.fr.toLowerCase(),
-                                                ],
-                                            )
-                                        }}
-                                    </span>
-                                    <span v-else>
-                                        {{
-                                            $t(
-                                                "visgraph.relation_from_to_like",
-                                                [
-                                                    getPerson(modal.data.to)
-                                                        .text,
-                                                    getPerson(modal.data.from)
-                                                        .text,
-                                                    relation.reverseTitle.fr.toLowerCase(),
-                                                ],
-                                            )
-                                        }}
-                                    </span>
-                                </p>
-                            </div>
-                        </div>
-                        <div class="my-3">
-                            <VueMultiselect
-                                id="relation"
-                                label="title"
-                                track-by="id"
-                                :custom-label="customLabel"
-                                :placeholder="$t('visgraph.choose_relation')"
-                                :close-on-select="true"
-                                :multiple="false"
-                                :searchable="true"
-                                :options="relations"
-                                v-model="relation"
-                                :value="relation"
-                            />
-                        </div>
-                        <div class="form-check form-switch">
-                            <input
-                                class="form-check-input"
-                                type="checkbox"
-                                id="reverse"
-                                v-model="reverse"
-                            />
-                            <label class="form-check-label" for="reverse">{{
-                                $t("visgraph.reverse_relation")
-                            }}</label>
-                        </div>
-                    </form>
-                </div>
-            </template>
-            <template #footer>
-                <button
-                    class="btn"
-                    :class="modal.button.class"
-                    @click="submitRelationship"
-                >
-                    {{ $t(modal.button.text) }}
-                </button>
-                <button
-                    class="btn btn-delete"
-                    v-if="modal.action === 'edit'"
-                    @click="dropRelationship"
-                />
-            </template>
-        </modal>
-    </teleport>
-    <ul class="record_actions sticky-form-buttons">
-        <li>
-            <add-persons
-                button-title="visgraph.add_person"
-                modal-title="visgraph.add_person"
-                :key="addPersons.key"
-                :options="addPersons.options"
-                @add-new-persons="addNewPersons"
-                ref="addPersons"
+          <i class="fa fa-plus" /> {{ $t("visgraph.add_link") }}
+        </button>
+        <a
+          type="button"
+          class="list-group-item list-group-item-action btn btn-misc"
+          id="exportCanvasBtn"
+          @click="exportCanvasAsImage"
+        >
+          <i class="fa fa-camera fa-fw" />
+          {{ $t("visgraph.screenshot") }}
+        </a>
+      </div>
+
+      <div v-if="displayHelpMessage" class="alert alert-info mt-3">
+        {{ $t("visgraph.create_link_help") }}
+      </div>
+
+      <div class="my-4 legend">
+        <h3>{{ $t("visgraph.Legend") }}</h3>
+        <div class="list-group">
+          <label
+            class="list-group-item"
+            v-for="(layer, i) in legendLayers"
+            :key="`layer-${i}`"
+          >
+            <input
+              class="form-check-input me-1"
+              type="checkbox"
+              :value="layer.id"
+              v-model="checkedLayers"
+              @change="toggleLayer"
             />
-        </li>
-    </ul>
+            {{ layer.label }}
+          </label>
+        </div>
+      </div>
+    </div>
+  </teleport>
+
+  <teleport to="body">
+    <modal
+      v-if="modal.showModal"
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t(modal.title) }}
+        </h2>
+        <!-- {{ modal.data.id }} -->
+      </template>
+      <template #body>
+        <div v-if="modal.action === 'delete'">
+          <p>{{ $t("visgraph.delete_confirmation_text") }}</p>
+        </div>
+        <div v-else>
+          <form>
+            <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">
+                    {{
+                      $t("visgraph.relation_from_to_like", [
+                        getPerson(modal.data.from).text,
+                        getPerson(modal.data.to).text,
+                        relation.reverseTitle.fr.toLowerCase(),
+                      ])
+                    }}
+                  </span>
+                  <span v-else>
+                    {{
+                      $t("visgraph.relation_from_to_like", [
+                        getPerson(modal.data.from).text,
+                        getPerson(modal.data.to).text,
+                        relation.title.fr.toLowerCase(),
+                      ])
+                    }}
+                  </span>
+                </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">
+                    {{
+                      $t("visgraph.relation_from_to_like", [
+                        getPerson(modal.data.to).text,
+                        getPerson(modal.data.from).text,
+                        relation.title.fr.toLowerCase(),
+                      ])
+                    }}
+                  </span>
+                  <span v-else>
+                    {{
+                      $t("visgraph.relation_from_to_like", [
+                        getPerson(modal.data.to).text,
+                        getPerson(modal.data.from).text,
+                        relation.reverseTitle.fr.toLowerCase(),
+                      ])
+                    }}
+                  </span>
+                </p>
+              </div>
+            </div>
+            <div class="my-3">
+              <VueMultiselect
+                id="relation"
+                label="title"
+                track-by="id"
+                :custom-label="customLabel"
+                :placeholder="$t('visgraph.choose_relation')"
+                :close-on-select="true"
+                :multiple="false"
+                :searchable="true"
+                :options="relations"
+                v-model="relation"
+                :value="relation"
+              />
+            </div>
+            <div class="form-check form-switch">
+              <input
+                class="form-check-input"
+                type="checkbox"
+                id="reverse"
+                v-model="reverse"
+              />
+              <label class="form-check-label" for="reverse">{{
+                $t("visgraph.reverse_relation")
+              }}</label>
+            </div>
+          </form>
+        </div>
+      </template>
+      <template #footer>
+        <button
+          class="btn"
+          :class="modal.button.class"
+          @click="submitRelationship"
+        >
+          {{ $t(modal.button.text) }}
+        </button>
+        <button
+          class="btn btn-delete"
+          v-if="modal.action === 'edit'"
+          @click="dropRelationship"
+        />
+      </template>
+    </modal>
+  </teleport>
+  <ul class="record_actions sticky-form-buttons">
+    <li>
+      <add-persons
+        button-title="visgraph.add_person"
+        modal-title="visgraph.add_person"
+        :key="addPersons.key"
+        :options="addPersons.options"
+        @add-new-persons="addNewPersons"
+        ref="addPersons"
+      />
+    </li>
+  </ul>
 </template>
 
 <script>
@@ -214,478 +184,459 @@ import { mapState, mapGetters } from "vuex";
 import Modal from "ChillMainAssets/vuejs/_components/Modal";
 import VueMultiselect from "vue-multiselect";
 import {
-    getRelationsList,
-    postRelationship,
-    patchRelationship,
-    deleteRelationship,
+  getRelationsList,
+  postRelationship,
+  patchRelationship,
+  deleteRelationship,
 } from "./api";
 import { splitId, getAge } from "./vis-network";
 import { visMessages } from "./i18n";
 import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
 
 export default {
-    name: "App",
-    components: {
-        Modal,
-        VueMultiselect,
-        AddPersons,
+  name: "App",
+  components: {
+    Modal,
+    VueMultiselect,
+    AddPersons,
+  },
+  props: ["household_id"],
+  data() {
+    return {
+      container: "",
+      checkedLayers: [],
+      relations: [],
+      displayHelpMessage: false,
+      listenPersonFlag: "normal",
+      newEdgeData: {},
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-md",
+        title: null,
+        action: null,
+        data: {
+          type: "relationship",
+          from: null,
+          to: null,
+          relation: null,
+          reverse: false,
+        },
+        button: {
+          class: null,
+          text: null,
+        },
+      },
+      canvas: null,
+      link: null,
+      addPersons: {
+        key: "filiation",
+        options: {
+          type: ["person"],
+          priority: null,
+          uniq: false,
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "nodes",
+      "edges",
+      // not used 'isInWhitelist', 'isHouseholdLoading', 'isCourseLoaded', 'isRelationshipLoaded', 'isPersonLoaded', 'isExcludedNode', 'countLinksByNode', 'getParticipationsByCourse', 'getMembersByHousehold', 'getPersonsGroup',
+    ]),
+    ...mapState([
+      "persons",
+      "households",
+      "courses",
+      "excludedNodesIds",
+      "updateHack",
+      // not used 'links', 'relationships', 'whitelistIds', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
+    ]),
+
+    visgraph_data() {
+      //console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
+      return {
+        nodes: this.nodes,
+        edges: this.edges,
+      };
     },
-    props: ["household_id"],
-    data() {
-        return {
-            container: "",
-            checkedLayers: [],
-            relations: [],
-            displayHelpMessage: false,
-            listenPersonFlag: "normal",
-            newEdgeData: {},
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-md",
-                title: null,
-                action: null,
-                data: {
-                    type: "relationship",
-                    from: null,
-                    to: null,
-                    relation: null,
-                    reverse: false,
-                },
-                button: {
-                    class: null,
-                    text: null,
-                },
-            },
-            canvas: null,
-            link: null,
-            addPersons: {
-                key: "filiation",
-                options: {
-                    type: ["person"],
-                    priority: null,
-                    uniq: false,
-                },
-            },
-        };
+
+    refreshNetwork() {
+      //console.log('--- refresh network')
+      window.network.setData(this.visgraph_data);
+
+      return 1;
     },
-    computed: {
-        ...mapGetters([
-            "nodes",
-            "edges",
-            // not used 'isInWhitelist', 'isHouseholdLoading', 'isCourseLoaded', 'isRelationshipLoaded', 'isPersonLoaded', 'isExcludedNode', 'countLinksByNode', 'getParticipationsByCourse', 'getMembersByHousehold', 'getPersonsGroup',
-        ]),
-        ...mapState([
-            "persons",
-            "households",
-            "courses",
-            "excludedNodesIds",
-            "updateHack",
-            // not used 'links', 'relationships', 'whitelistIds', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
-        ]),
 
-        visgraph_data() {
-            //console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
-            return {
-                nodes: this.nodes,
-                edges: this.edges,
-            };
-        },
-
-        refreshNetwork() {
-            //console.log('--- refresh network')
-            window.network.setData(this.visgraph_data);
-
-            return 1;
-        },
-
-        legendLayers() {
-            //console.log('--- refresh legend and rebuild checked Layers')
-            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-            this.checkedLayers = [];
-            let layersDisplayed = [
-                ...this.nodes.filter((n) => n.id.startsWith("household")),
-                ...this.nodes.filter((n) => n.id.startsWith("accompanying")),
-            ];
-            layersDisplayed.forEach((layer) => {
-                this.checkedLayers.push(layer.id);
-            });
-            return [...this.households, ...this.courses];
-        },
-
-        // eslint-disable-next-line vue/no-dupe-keys
-        checkedLayers() {
-            // required to refresh data checkedLayers
-            //console.log('--- checkedLayers')
-            return this.checkedLayers;
-        },
-
-        relation: {
-            get() {
-                return this.modal.data.relation;
-            },
-            set(value) {
-                this.modal.data.relation = value;
-            },
-        },
-
-        reverse: {
-            get() {
-                return this.modal.data.reverse;
-            },
-            set(value) {
-                this.modal.data.reverse = value;
-            },
-        },
+    legendLayers() {
+      //console.log('--- refresh legend and rebuild checked Layers')
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.checkedLayers = [];
+      let layersDisplayed = [
+        ...this.nodes.filter((n) => n.id.startsWith("household")),
+        ...this.nodes.filter((n) => n.id.startsWith("accompanying")),
+      ];
+      layersDisplayed.forEach((layer) => {
+        this.checkedLayers.push(layer.id);
+      });
+      return [...this.households, ...this.courses];
     },
-    watch: {
-        updateHack(newValue, oldValue) {
-            //console.log(`--- updateHack ${oldValue} <> ${newValue}`)
-            if (oldValue !== newValue) {
-                this.forceUpdateComponent();
-            }
-        },
+
+    // eslint-disable-next-line vue/no-dupe-keys
+    checkedLayers() {
+      // required to refresh data checkedLayers
+      //console.log('--- checkedLayers')
+      return this.checkedLayers;
     },
-    mounted() {
-        //console.log('=== mounted: init graph')
-        this.initGraph();
-        this.listenOnGraph();
-        this.getRelationsList();
-        console.log(this.persons);
 
-        this.canvas = document
-            .getElementById("visgraph")
-            .querySelector("canvas");
-        this.link = document.getElementById("exportCanvasBtn");
+    relation: {
+      get() {
+        return this.modal.data.relation;
+      },
+      set(value) {
+        this.modal.data.relation = value;
+      },
     },
-    methods: {
-        addNewPersons({ selected, modal }) {
-            // console.log('@@@ CLICK button addNewPersons', selected);
-            selected.forEach(function (item) {
-                this.$store
-                    .dispatch("addMorePerson", item.result)
-                    .catch(({ name, violations }) => {
-                        if (
-                            name === "ValidationException" ||
-                            name === "AccessException"
-                        ) {
-                            violations.forEach((violation) =>
-                                this.$toast.open({ message: violation }),
-                            );
-                        } else {
-                            this.$toast.open({ message: violations });
-                        }
-                    });
-            }, this);
-            this.$refs.addPersons.resetSearch(); // to cast child method
-            modal.showModal = false;
-        },
-        initGraph() {
-            this.container = document.getElementById("visgraph");
-            // Instanciate vis objects in separate window variables, see vis-network.js
-            window.network = new vis.Network(
-                this.container,
-                this.visgraph_data,
-                window.options,
-            );
-        },
-        forceUpdateComponent() {
-            //console.log('!! forceUpdateComponent !!')
-            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-            this.refreshNetwork;
-            this.$forceUpdate();
-        },
 
-        // events
-        listenOnGraph() {
-            window.network.on("selectNode", (data) => {
-                if (data.nodes.length > 1) {
-                    throw "Multi selection is not allowed. Disable it in options.interaction !";
-                }
-                let node = data.nodes[0];
-                let nodeType = splitId(node, "type");
-                switch (nodeType) {
-                    case "person":
-                        let person = this.nodes.filter((n) => n.id === node)[0];
-                        //console.log('@@@@@@ event on selected Node', person.id)
-                        if (this.listenPersonFlag === "normal") {
-                            if (person.folded === true) {
-                                //console.log('   @@> expand mode event')
-                                this.$store.commit("unfoldPerson", person);
-                                this.$store.dispatch(
-                                    "fetchInfoForPerson",
-                                    person,
-                                );
-                            }
-                        } else {
-                            //console.log('   @@> create link mode event')
-                            this.listenStepsToAddRelationship(person);
-                        }
-                        break;
+    reverse: {
+      get() {
+        return this.modal.data.reverse;
+      },
+      set(value) {
+        this.modal.data.reverse = value;
+      },
+    },
+  },
+  watch: {
+    updateHack(newValue, oldValue) {
+      //console.log(`--- updateHack ${oldValue} <> ${newValue}`)
+      if (oldValue !== newValue) {
+        this.forceUpdateComponent();
+      }
+    },
+  },
+  mounted() {
+    //console.log('=== mounted: init graph')
+    this.initGraph();
+    this.listenOnGraph();
+    this.getRelationsList();
+    console.log(this.persons);
 
-                    case "household":
-                        let household = this.nodes.filter(
-                            (n) => n.id === node,
-                        )[0];
-                        //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)
-                        this.$store.dispatch("unfoldPersonsByCourse", course);
-                        break;
-
-                    default:
-                        throw "event is undefined for this type of node";
-                }
-                this.forceUpdateComponent();
-            });
-            window.network.on("selectEdge", (data) => {
-                if (data.nodes.length !== 0 || data.edges.length !== 1) {
-                    return false; //we don't want to trigger nodeEdge or multiselect !
-                }
-                let link = data.edges[0];
-                let linkType = splitId(link, "link");
-                //console.log('@@@@@ event on selected Edge', data.edges.length, linkType, data)
-
-                if (linkType.startsWith("relationship")) {
-                    //console.log('linkType relationship')
-
-                    let relationships = this.edges.filter((l) => l.id === link);
-                    if (relationships.length > 1) {
-                        throw "error: only one link is allowed between two person!";
-                    }
-
-                    let relationship = relationships[0];
-                    //console.log(relationship)
-
-                    this.editRelationshipModal({
-                        from: relationship.from,
-                        to: relationship.to,
-                        id: relationship.id,
-                        relation: relationship.relation,
-                        reverse: relationship.reverse,
-                    });
-                }
-            });
-        },
-        listenStepsToAddRelationship(person) {
-            //console.log('   @@> listenStep', this.listenPersonFlag)
-            if (this.listenPersonFlag === "step2") {
-                //console.log('   @@> person 2', person)
-                this.newEdgeData.to = person.id;
-                this.addRelationshipModal(this.newEdgeData);
-                this.displayHelpMessage = false;
-                this.listenPersonFlag = "normal";
-                this.newEdgeData = {};
-            }
-            if (this.listenPersonFlag === "step1") {
-                //console.log('   @@> person 1', person)
-                this.newEdgeData.from = person.id;
-                this.listenPersonFlag = "step2";
-            }
-        },
-
-        /// control Layers
-        toggleLayer(value) {
-            let id = value.target.value;
-            //console.log('@@@@@@ toggle Layer', id)
-            this.forceUpdateComponent();
-            if (this.checkedLayers.includes(id)) {
-                this.removeLayer(id);
+    this.canvas = document.getElementById("visgraph").querySelector("canvas");
+    this.link = document.getElementById("exportCanvasBtn");
+  },
+  methods: {
+    addNewPersons({ selected, modal }) {
+      // console.log('@@@ CLICK button addNewPersons', selected);
+      selected.forEach(function (item) {
+        this.$store
+          .dispatch("addMorePerson", item.result)
+          .catch(({ name, violations }) => {
+            if (name === "ValidationException" || name === "AccessException") {
+              violations.forEach((violation) =>
+                this.$toast.open({ message: violation }),
+              );
             } else {
-                this.addLayer(id);
+              this.$toast.open({ message: violations });
             }
-        },
-        addLayer(id) {
-            //console.log('+ addLayer', id)
-            this.checkedLayers.push(id);
-            this.$store.dispatch("excludedNode", ["remove", id]);
-        },
-        removeLayer(id) {
-            //console.log('- removeLayer', id)
-            this.checkedLayers = this.checkedLayers.filter((i) => i !== id);
-            this.$store.dispatch("excludedNode", ["add", id]);
-        },
-
-        /// control Modal
-        addRelationshipModal(edgeData) {
-            //console.log('==- addRelationshipModal', edgeData)
-            this.modal = {
-                data: { from: edgeData.from, to: edgeData.to, reverse: false },
-                action: "create",
-                showModal: true,
-                title: "visgraph.add_relationship_link",
-                button: { class: "btn-create", text: "action.create" },
-            };
-        },
-        editRelationshipModal(edgeData) {
-            //console.log('==- editRelationshipModal', edgeData)
-            this.modal = {
-                data: edgeData,
-                action: "edit",
-                showModal: true,
-                title: "visgraph.edit_relationship_link",
-                button: { class: "btn-edit", text: "action.edit" },
-            };
-        },
-
-        // form
-        resetForm() {
-            this.modal = {
-                data: {
-                    type: "relationship",
-                    from: null,
-                    to: null,
-                    relation: null,
-                    reverse: false,
-                },
-                action: null,
-                title: null,
-                button: { class: null, text: null },
-            };
-            //console.log('==- reset Form', this.modal.data)
-        },
-        getRelationsList() {
-            //console.log('fetch relationsList')
-            return getRelationsList()
-                .then(
-                    (relations) =>
-                        new Promise((resolve) => {
-                            //console.log('+ relations list', relations.results.length)
-                            this.relations = relations.results.filter(
-                                (r) => r.isActive === true,
-                            );
-                            resolve();
-                        }),
-                )
-                .catch();
-        },
-        customLabel(value) {
-            //console.log('customLabel', value)
-            return value.title && value.reverseTitle
-                ? `${value.title.fr} ↔ ${value.reverseTitle.fr}`
-                : "";
-        },
-        getPerson(id) {
-            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)
-        },
-        dropRelationship() {
-            //console.log('delete', this.modal.data)
-            deleteRelationship(this.modal.data).catch();
-            this.$store.commit("removeLink", this.modal.data.id);
-            this.modal.showModal = false;
-            this.resetForm();
-            this.forceUpdateComponent();
-        },
-        submitRelationship() {
-            //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)
-                                    this.$store.dispatch(
-                                        "addLinkFromRelationship",
-                                        relationship,
-                                    );
-                                    this.modal.showModal = false;
-                                    this.resetForm();
-                                    this.forceUpdateComponent();
-                                    resolve();
-                                }),
-                        )
-                        .catch((error) => {
-                            if (error.name === "ValidationException") {
-                                for (let v of error.violations) {
-                                    this.$toast.open({ message: v });
-                                    console.log(v);
-                                }
-                            } else {
-                                this.$toast.open({
-                                    message: "An error occurred",
-                                });
-                            }
-                        });
-
-                case "edit":
-                    return patchRelationship(this.modal.data)
-                        .then(
-                            (relationship) =>
-                                new Promise((resolve) => {
-                                    //console.log('patch relationship response', relationship)
-                                    this.$store.commit(
-                                        "updateLink",
-                                        relationship,
-                                    );
-                                    this.modal.showModal = false;
-                                    this.resetForm();
-                                    this.forceUpdateComponent();
-                                    resolve();
-                                }),
-                        )
-                        .catch();
-
-                default:
-                    throw "uncaught action";
-            }
-        },
-
-        // export image
-        async exportCanvasAsImage() {
-            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()}`;
-
-            // resolve toBlob in a Promise
-            const getCanvasBlob = (canvas) =>
-                new Promise((resolve) => {
-                    canvas.toBlob((blob) => resolve(blob), mime, quality);
-                });
-
-            // 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);
-            });
-        },
+          });
+      }, this);
+      this.$refs.addPersons.resetSearch(); // to cast child method
+      modal.showModal = false;
     },
+    initGraph() {
+      this.container = document.getElementById("visgraph");
+      // Instanciate vis objects in separate window variables, see vis-network.js
+      window.network = new vis.Network(
+        this.container,
+        this.visgraph_data,
+        window.options,
+      );
+    },
+    forceUpdateComponent() {
+      //console.log('!! forceUpdateComponent !!')
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      this.refreshNetwork;
+      this.$forceUpdate();
+    },
+
+    // events
+    listenOnGraph() {
+      window.network.on("selectNode", (data) => {
+        if (data.nodes.length > 1) {
+          throw "Multi selection is not allowed. Disable it in options.interaction !";
+        }
+        let node = data.nodes[0];
+        let nodeType = splitId(node, "type");
+        switch (nodeType) {
+          case "person":
+            let person = this.nodes.filter((n) => n.id === node)[0];
+            //console.log('@@@@@@ event on selected Node', person.id)
+            if (this.listenPersonFlag === "normal") {
+              if (person.folded === true) {
+                //console.log('   @@> expand mode event')
+                this.$store.commit("unfoldPerson", person);
+                this.$store.dispatch("fetchInfoForPerson", person);
+              }
+            } else {
+              //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)
+            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)
+            this.$store.dispatch("unfoldPersonsByCourse", course);
+            break;
+
+          default:
+            throw "event is undefined for this type of node";
+        }
+        this.forceUpdateComponent();
+      });
+      window.network.on("selectEdge", (data) => {
+        if (data.nodes.length !== 0 || data.edges.length !== 1) {
+          return false; //we don't want to trigger nodeEdge or multiselect !
+        }
+        let link = data.edges[0];
+        let linkType = splitId(link, "link");
+        //console.log('@@@@@ event on selected Edge', data.edges.length, linkType, data)
+
+        if (linkType.startsWith("relationship")) {
+          //console.log('linkType relationship')
+
+          let relationships = this.edges.filter((l) => l.id === link);
+          if (relationships.length > 1) {
+            throw "error: only one link is allowed between two person!";
+          }
+
+          let relationship = relationships[0];
+          //console.log(relationship)
+
+          this.editRelationshipModal({
+            from: relationship.from,
+            to: relationship.to,
+            id: relationship.id,
+            relation: relationship.relation,
+            reverse: relationship.reverse,
+          });
+        }
+      });
+    },
+    listenStepsToAddRelationship(person) {
+      //console.log('   @@> listenStep', this.listenPersonFlag)
+      if (this.listenPersonFlag === "step2") {
+        //console.log('   @@> person 2', person)
+        this.newEdgeData.to = person.id;
+        this.addRelationshipModal(this.newEdgeData);
+        this.displayHelpMessage = false;
+        this.listenPersonFlag = "normal";
+        this.newEdgeData = {};
+      }
+      if (this.listenPersonFlag === "step1") {
+        //console.log('   @@> person 1', person)
+        this.newEdgeData.from = person.id;
+        this.listenPersonFlag = "step2";
+      }
+    },
+
+    /// control Layers
+    toggleLayer(value) {
+      let id = value.target.value;
+      //console.log('@@@@@@ toggle Layer', id)
+      this.forceUpdateComponent();
+      if (this.checkedLayers.includes(id)) {
+        this.removeLayer(id);
+      } else {
+        this.addLayer(id);
+      }
+    },
+    addLayer(id) {
+      //console.log('+ addLayer', id)
+      this.checkedLayers.push(id);
+      this.$store.dispatch("excludedNode", ["remove", id]);
+    },
+    removeLayer(id) {
+      //console.log('- removeLayer', id)
+      this.checkedLayers = this.checkedLayers.filter((i) => i !== id);
+      this.$store.dispatch("excludedNode", ["add", id]);
+    },
+
+    /// control Modal
+    addRelationshipModal(edgeData) {
+      //console.log('==- addRelationshipModal', edgeData)
+      this.modal = {
+        data: { from: edgeData.from, to: edgeData.to, reverse: false },
+        action: "create",
+        showModal: true,
+        title: "visgraph.add_relationship_link",
+        button: { class: "btn-create", text: "action.create" },
+      };
+    },
+    editRelationshipModal(edgeData) {
+      //console.log('==- editRelationshipModal', edgeData)
+      this.modal = {
+        data: edgeData,
+        action: "edit",
+        showModal: true,
+        title: "visgraph.edit_relationship_link",
+        button: { class: "btn-edit", text: "action.edit" },
+      };
+    },
+
+    // form
+    resetForm() {
+      this.modal = {
+        data: {
+          type: "relationship",
+          from: null,
+          to: null,
+          relation: null,
+          reverse: false,
+        },
+        action: null,
+        title: null,
+        button: { class: null, text: null },
+      };
+      //console.log('==- reset Form', this.modal.data)
+    },
+    getRelationsList() {
+      //console.log('fetch relationsList')
+      return getRelationsList()
+        .then(
+          (relations) =>
+            new Promise((resolve) => {
+              //console.log('+ relations list', relations.results.length)
+              this.relations = relations.results.filter(
+                (r) => r.isActive === true,
+              );
+              resolve();
+            }),
+        )
+        .catch();
+    },
+    customLabel(value) {
+      //console.log('customLabel', value)
+      return value.title && value.reverseTitle
+        ? `${value.title.fr} ↔ ${value.reverseTitle.fr}`
+        : "";
+    },
+    getPerson(id) {
+      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)
+    },
+    dropRelationship() {
+      //console.log('delete', this.modal.data)
+      deleteRelationship(this.modal.data).catch();
+      this.$store.commit("removeLink", this.modal.data.id);
+      this.modal.showModal = false;
+      this.resetForm();
+      this.forceUpdateComponent();
+    },
+    submitRelationship() {
+      //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)
+                  this.$store.dispatch("addLinkFromRelationship", relationship);
+                  this.modal.showModal = false;
+                  this.resetForm();
+                  this.forceUpdateComponent();
+                  resolve();
+                }),
+            )
+            .catch((error) => {
+              if (error.name === "ValidationException") {
+                for (let v of error.violations) {
+                  this.$toast.open({ message: v });
+                  console.log(v);
+                }
+              } else {
+                this.$toast.open({
+                  message: "An error occurred",
+                });
+              }
+            });
+
+        case "edit":
+          return patchRelationship(this.modal.data)
+            .then(
+              (relationship) =>
+                new Promise((resolve) => {
+                  //console.log('patch relationship response', relationship)
+                  this.$store.commit("updateLink", relationship);
+                  this.modal.showModal = false;
+                  this.resetForm();
+                  this.forceUpdateComponent();
+                  resolve();
+                }),
+            )
+            .catch();
+
+        default:
+          throw "uncaught action";
+      }
+    },
+
+    // export image
+    async exportCanvasAsImage() {
+      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()}`;
+
+      // resolve toBlob in a Promise
+      const getCanvasBlob = (canvas) =>
+        new Promise((resolve) => {
+          canvas.toBlob((blob) => resolve(blob), mime, quality);
+        });
+
+      // 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>
 
@@ -694,21 +645,21 @@ export default {
 
 <style lang="scss" scoped>
 div#visgraph {
-    height: 700px;
-    margin: auto;
+  height: 700px;
+  margin: auto;
 }
 div#visgraph-legend {
-    div.post-menu.legend {
-    }
+  div.post-menu.legend {
+  }
 }
 .modal-mask {
-    background-color: rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.25);
 }
 .debug {
-    margin: 1em;
-    padding: 1em;
-    color: dimgray;
-    font-style: italic;
-    font-size: 80%;
+  margin: 1em;
+  padding: 1em;
+  color: dimgray;
+  font-style: italic;
+  font-size: 80%;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/accompanyingCourseWorkEvaluationDocument.ts b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/accompanyingCourseWorkEvaluationDocument.ts
index ddb37fab1..577c4b52b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/accompanyingCourseWorkEvaluationDocument.ts
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/accompanyingCourseWorkEvaluationDocument.ts
@@ -2,10 +2,10 @@ import { AccompanyingPeriodWorkEvaluationDocument } from "../../types";
 import { makeFetch } from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 
 export const duplicate = async (
-    id: number,
+  id: number,
 ): Promise<AccompanyingPeriodWorkEvaluationDocument> => {
-    return makeFetch<null, AccompanyingPeriodWorkEvaluationDocument>(
-        "POST",
-        `/api/1.0/person/accompanying-course-work-evaluation-document/${id}/duplicate`,
-    );
+  return makeFetch<null, AccompanyingPeriodWorkEvaluationDocument>(
+    "POST",
+    `/api/1.0/person/accompanying-course-work-evaluation-document/${id}/duplicate`,
+  );
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue
index 330423a20..98668a65b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue
@@ -1,51 +1,45 @@
 <template>
-    <div class="container">
-        <div class="item-bloc">
-            <div class="item-row">
-                <h2 class="badge-title">
-                    <span class="title_label"></span>
-                    <span class="title_action">
-                        <span class="chill-entity entity-social-action">
-                            <span class="badge bg-light text-dark">
-                                {{ acpw?.socialAction?.title.fr }}
-                            </span>
-                        </span>
+  <div class="container">
+    <div class="item-bloc">
+      <div class="item-row">
+        <h2 class="badge-title">
+          <span class="title_label"></span>
+          <span class="title_action">
+            <span class="chill-entity entity-social-action">
+              <span class="badge bg-light text-dark">
+                {{ acpw?.socialAction?.title.fr }}
+              </span>
+            </span>
 
-                        <ul class="small_in_title columns mt-1">
-                            <li>
-                                <span class="item-key">
-                                    {{
-                                        trans(
-                                            ACCOMPANYING_COURSE_WORK_START_DATE,
-                                        )
-                                    }}
-                                    :
-                                </span>
-                                <b>{{ formatDate(acpw.startDate) }}</b>
-                            </li>
+            <ul class="small_in_title columns mt-1">
+              <li>
+                <span class="item-key">
+                  {{ trans(ACCOMPANYING_COURSE_WORK_START_DATE) }}
+                  :
+                </span>
+                <b>{{ formatDate(acpw.startDate) }}</b>
+              </li>
 
-                            <li v-if="acpw.endDate">
-                                <span class="item-key">
-                                    {{
-                                        trans(ACCOMPANYING_COURSE_WORK_END_DATE)
-                                    }}
-                                    :
-                                </span>
-                                <b>{{ formatDate(acpw.endDate) }}</b>
-                            </li>
-                        </ul>
-                    </span>
-                </h2>
-            </div>
-        </div>
+              <li v-if="acpw.endDate">
+                <span class="item-key">
+                  {{ trans(ACCOMPANYING_COURSE_WORK_END_DATE) }}
+                  :
+                </span>
+                <b>{{ formatDate(acpw.endDate) }}</b>
+              </li>
+            </ul>
+          </span>
+        </h2>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import {
-    ACCOMPANYING_COURSE_WORK_END_DATE,
-    ACCOMPANYING_COURSE_WORK_START_DATE,
-    trans,
+  ACCOMPANYING_COURSE_WORK_END_DATE,
+  ACCOMPANYING_COURSE_WORK_START_DATE,
+  trans,
 } from "translator";
 import { ISOToDate } from "ChillMainAssets/chill/js/date";
 import { DateTime } from "ChillMainAssets/types";
@@ -54,15 +48,15 @@ import { AccompanyingPeriodWork } from "../../../types";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{ acpw: AccompanyingPeriodWork }>();
 const formatDate = (dateObject: DateTime) => {
-    if (dateObject) {
-        const parsedDate = ISOToDate(dateObject.datetime);
-        if (parsedDate) {
-            return new Intl.DateTimeFormat("default", {
-                dateStyle: "short",
-            }).format(parsedDate);
-        } else {
-            return "";
-        }
+  if (dateObject) {
+    const parsedDate = ISOToDate(dateObject.datetime);
+    if (parsedDate) {
+      return new Intl.DateTimeFormat("default", {
+        dateStyle: "short",
+      }).format(parsedDate);
+    } else {
+      return "";
     }
+  }
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue
index b2ebc5f1c..c3615c959 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue
@@ -1,24 +1,24 @@
 <template>
-    <div class="results">
-        <div
-            v-for="acpw in accompanyingPeriodWorks"
-            :key="acpw.id"
-            class="list-item"
-        >
-            <label class="acpw-item">
-                <div>
-                    <input
-                        type="radio"
-                        :value="acpw"
-                        v-model="selectedAcpw"
-                        name="item"
-                    />
-                </div>
-
-                <accompanying-period-work-item :acpw="acpw" />
-            </label>
+  <div class="results">
+    <div
+      v-for="acpw in accompanyingPeriodWorks"
+      :key="acpw.id"
+      class="list-item"
+    >
+      <label class="acpw-item">
+        <div>
+          <input
+            type="radio"
+            :value="acpw"
+            v-model="selectedAcpw"
+            name="item"
+          />
         </div>
+
+        <accompanying-period-work-item :acpw="acpw" />
+      </label>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -28,7 +28,7 @@ import { defineProps, ref, watch } from "vue";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{
-    accompanyingPeriodWorks: AccompanyingPeriodWork[];
+  accompanyingPeriodWorks: AccompanyingPeriodWork[];
 }>();
 const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
 
@@ -36,12 +36,12 @@ const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
 const emit = defineEmits();
 
 watch(selectedAcpw, (newValue) => {
-    emit("update:selectedAcpw", newValue);
+  emit("update:selectedAcpw", newValue);
 });
 </script>
 
 <style>
 .acpw-item {
-    display: flex;
+  display: flex;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
index 4b4f3ddba..ee2c7c66c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
@@ -1,62 +1,52 @@
 <template>
-    <div>
-        <div class="row justify-content-end">
-            <div class="col-md-6 col-sm-10" v-if="selectedAcpw">
-                <ul class="list-suggest remove-items">
-                    <li>
-                        <span
-                            @click="selectedAcpw = null"
-                            class="chill-denomination"
-                            >{{ selectedAcpw?.socialAction?.title.fr }}</span
-                        >
-                    </li>
-                </ul>
-            </div>
-        </div>
-
-        <ul class="record_actions">
-            <li>
-                <a class="btn btn-sm btn-create mt-3" @click="openModal">
-                    {{ trans(ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK) }}
-                </a>
-            </li>
+  <div>
+    <div class="row justify-content-end">
+      <div class="col-md-6 col-sm-10" v-if="selectedAcpw">
+        <ul class="list-suggest remove-items">
+          <li>
+            <span @click="selectedAcpw = null" class="chill-denomination">{{
+              selectedAcpw?.socialAction?.title.fr
+            }}</span>
+          </li>
         </ul>
-
-        <teleport to="body">
-            <modal
-                v-if="showModal"
-                @close="closeModal"
-                modal-dialog-class="modal-dialog-scrollable modal-xl"
-            >
-                <template #header>
-                    <h3>
-                        {{
-                            trans(
-                                ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
-                            )
-                        }}
-                    </h3>
-                </template>
-
-                <template #body>
-                    <accompanying-period-work-list
-                        :accompanying-period-works="accompanyingPeriodWorks"
-                        v-model:selectedAcpw="selectedAcpw"
-                    />
-                </template>
-
-                <template #footer>
-                    <button
-                        type="button"
-                        class="btn btn-save"
-                        @click="confirmSelection"
-                    >
-                        {{ trans(CONFIRM) }}
-                    </button>
-                </template>
-            </modal>
-        </teleport>
+      </div>
     </div>
+
+    <ul class="record_actions">
+      <li>
+        <a class="btn btn-sm btn-create mt-3" @click="openModal">
+          {{ trans(ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK) }}
+        </a>
+      </li>
+    </ul>
+
+    <teleport to="body">
+      <modal
+        v-if="showModal"
+        @close="closeModal"
+        modal-dialog-class="modal-dialog-scrollable modal-xl"
+      >
+        <template #header>
+          <h3>
+            {{ trans(ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK) }}
+          </h3>
+        </template>
+
+        <template #body>
+          <accompanying-period-work-list
+            :accompanying-period-works="accompanyingPeriodWorks"
+            v-model:selectedAcpw="selectedAcpw"
+          />
+        </template>
+
+        <template #footer>
+          <button type="button" class="btn btn-save" @click="confirmSelection">
+            {{ trans(CONFIRM) }}
+          </button>
+        </template>
+      </modal>
+    </teleport>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -65,14 +55,14 @@ import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
 import { AccompanyingPeriodWork } from "../../../types";
 import {
-    ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
-    CONFIRM,
-    trans,
+  ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
+  CONFIRM,
+  trans,
 } from "translator";
 import { fetchResults } from "ChillMainAssets/lib/api/apiMethods";
 
 interface AccompanyingPeriodWorkSelectorModalProps {
-    accompanyingPeriodId: number;
+  accompanyingPeriodId: number;
 }
 
 const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
@@ -81,25 +71,25 @@ const accompanyingPeriodWorks = ref<AccompanyingPeriodWork[]>([]);
 const props = defineProps<AccompanyingPeriodWorkSelectorModalProps>();
 
 const emit = defineEmits<{
-    pickWork: [payload: { work: AccompanyingPeriodWork | null }];
+  pickWork: [payload: { work: AccompanyingPeriodWork | null }];
 }>();
 
 onMounted(() => {
-    if (props.accompanyingPeriodId) {
-        getAccompanyingPeriodWorks(props.accompanyingPeriodId);
-    } else {
-        console.error("No accompanyingperiod id was given");
-    }
+  if (props.accompanyingPeriodId) {
+    getAccompanyingPeriodWorks(props.accompanyingPeriodId);
+  } else {
+    console.error("No accompanyingperiod id was given");
+  }
 });
 const getAccompanyingPeriodWorks = async (periodId: number) => {
-    const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
+  const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
 
-    try {
-        accompanyingPeriodWorks.value = await fetchResults(url);
-    } catch (error) {
-        console.log(error);
-    }
-    /*  makeFetch<number, AccompanyingPeriodWork[]>("GET", url)
+  try {
+    accompanyingPeriodWorks.value = await fetchResults(url);
+  } catch (error) {
+    console.log(error);
+  }
+  /*  makeFetch<number, AccompanyingPeriodWork[]>("GET", url)
     .then((response) => {
       accompanyingPeriodWorks.value = response;
     })
@@ -111,7 +101,7 @@ const getAccompanyingPeriodWorks = async (periodId: number) => {
 const openModal = () => (showModal.value = true);
 const closeModal = () => (showModal.value = false);
 const confirmSelection = () => {
-    emit("pickWork", { work: selectedAcpw.value });
-    closeModal();
+  emit("pickWork", { work: selectedAcpw.value });
+  closeModal();
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.ts b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.ts
index ba7637544..088ff11ea 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.ts
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.ts
@@ -1,64 +1,63 @@
 const personMessages = {
-    fr: {
-        add_persons: {
-            title: "Ajouter des usagers",
-            suggested_counter:
-                "Pas de résultats | 1 résultat | {count} résultats",
-            selected_counter: " 1 sélectionné | {count} sélectionnés",
-            search_some_persons: "Rechercher des personnes..",
-        },
-        item: {
-            type_person: "Usager",
-            type_user: "TMS",
-            type_thirdparty: "Tiers professionnel",
-            type_household: "Ménage",
-        },
-        person: {
-            firstname: "Prénom",
-            lastname: "Nom",
-            born: (ctx: { gender: "man" | "woman" | "neutral" }) => {
-                if (ctx.gender === "man") {
-                    return "Né le";
-                } else if (ctx.gender === "woman") {
-                    return "Née le";
-                } else {
-                    return "Né·e le";
-                }
-            },
-            center_id: "Identifiant du centre",
-            center_type: "Type de centre",
-            center_name: "Territoire", // vendée
-            phonenumber: "Téléphone",
-            mobilenumber: "Mobile",
-            altnames: "Autres noms",
-            email: "Courriel",
-            gender: {
-                title: "Genre",
-                placeholder: "Choisissez le genre de l'usager",
-                woman: "Féminin",
-                man: "Masculin",
-                neutral: "Neutre, non binaire",
-                unknown: "Non renseigné",
-                undefined: "Non renseigné",
-            },
-            civility: {
-                title: "Civilité",
-                placeholder: "Choisissez la civilité",
-            },
-            address: {
-                create_address: "Ajouter une adresse",
-                show_address_form:
-                    "Ajouter une adresse pour un usager non suivi et seul dans un ménage",
-                warning:
-                    "Un nouveau ménage va être créé. L'usager sera membre de ce ménage.",
-            },
-            center: {
-                placeholder: "Choisissez un centre",
-                title: "Centre",
-            },
-        },
-        error_only_one_person: "Une seule personne peut être sélectionnée !",
+  fr: {
+    add_persons: {
+      title: "Ajouter des usagers",
+      suggested_counter: "Pas de résultats | 1 résultat | {count} résultats",
+      selected_counter: " 1 sélectionné | {count} sélectionnés",
+      search_some_persons: "Rechercher des personnes..",
     },
+    item: {
+      type_person: "Usager",
+      type_user: "TMS",
+      type_thirdparty: "Tiers professionnel",
+      type_household: "Ménage",
+    },
+    person: {
+      firstname: "Prénom",
+      lastname: "Nom",
+      born: (ctx: { gender: "man" | "woman" | "neutral" }) => {
+        if (ctx.gender === "man") {
+          return "Né le";
+        } else if (ctx.gender === "woman") {
+          return "Née le";
+        } else {
+          return "Né·e le";
+        }
+      },
+      center_id: "Identifiant du centre",
+      center_type: "Type de centre",
+      center_name: "Territoire", // vendée
+      phonenumber: "Téléphone",
+      mobilenumber: "Mobile",
+      altnames: "Autres noms",
+      email: "Courriel",
+      gender: {
+        title: "Genre",
+        placeholder: "Choisissez le genre de l'usager",
+        woman: "Féminin",
+        man: "Masculin",
+        neutral: "Neutre, non binaire",
+        unknown: "Non renseigné",
+        undefined: "Non renseigné",
+      },
+      civility: {
+        title: "Civilité",
+        placeholder: "Choisissez la civilité",
+      },
+      address: {
+        create_address: "Ajouter une adresse",
+        show_address_form:
+          "Ajouter une adresse pour un usager non suivi et seul dans un ménage",
+        warning:
+          "Un nouveau ménage va être créé. L'usager sera membre de ce ménage.",
+      },
+      center: {
+        placeholder: "Choisissez un centre",
+        title: "Centre",
+      },
+    },
+    error_only_one_person: "Une seule personne peut être sélectionnée !",
+  },
 };
 
 export { personMessages };
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
index 0fee3dcdb..3413861ae 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
@@ -1,158 +1,131 @@
 <template>
-    <div class="item-bloc col">
-        <section class="chill-entity entity-thirdparty">
-            <div class="item-row entity-bloc">
-                <div class="item-col">
-                    <div class="entity-label">
-                        <div :class="'denomination h' + options.hLevel">
-                            <a v-if="this.options.addLink === true" href="#">
-                                <span class="name">{{ thirdparty.text }}</span>
-                            </a>
-                            <span class="name" v-else>{{
-                                thirdparty.text
-                            }}</span>
+  <div class="item-bloc col">
+    <section class="chill-entity entity-thirdparty">
+      <div class="item-row entity-bloc">
+        <div class="item-col">
+          <div class="entity-label">
+            <div :class="'denomination h' + options.hLevel">
+              <a v-if="this.options.addLink === true" href="#">
+                <span class="name">{{ thirdparty.text }}</span>
+              </a>
+              <span class="name" v-else>{{ thirdparty.text }}</span>
 
-                            <span
-                                v-if="options.addId === true"
-                                class="id-number"
-                                :title="'n° ' + thirdparty.id"
-                            >
-                                {{ thirdparty.id }}
-                            </span>
+              <span
+                v-if="options.addId === true"
+                class="id-number"
+                :title="'n° ' + thirdparty.id"
+              >
+                {{ thirdparty.id }}
+              </span>
 
-                            <badge-entity
-                                v-if="options.addEntity === true"
-                                :entity="thirdparty"
-                                :options="{
-                                    displayLong: options.entityDisplayLong,
-                                }"
-                            />
-                        </div>
+              <badge-entity
+                v-if="options.addEntity === true"
+                :entity="thirdparty"
+                :options="{
+                  displayLong: options.entityDisplayLong,
+                }"
+              />
+            </div>
 
-                        <p
-                            v-if="this.options.addInfo === true"
-                            class="moreinfo"
-                        />
-                    </div>
-                </div>
+            <p v-if="this.options.addInfo === true" class="moreinfo" />
+          </div>
+        </div>
 
-                <div class="item-col">
-                    <div class="float-button bottom">
-                        <div class="box">
-                            <div class="action">
-                                <slot name="record-actions" />
-                            </div>
-                            <ul class="list-content fa-ul">
-                                <li v-if="getProfession.length > 0">
-                                    <i class="fa fa-li fa-id-card" />
-                                    <p>
-                                        <span>{{ getProfession[0] }}</span>
-                                    </p>
-                                </li>
-                                <li v-if="hasParent">
-                                    <i class="fa fa-li fa-hand-o-right" />
-                                    <b class="me-2">{{ $t("child_of") }}</b>
-                                    <on-the-fly
-                                        :type="thirdparty.parent.type"
-                                        :id="thirdparty.parent.id"
-                                        :button-text="thirdparty.parent.text"
-                                        :display-badge="'true' === 'true'"
-                                        action="show"
-                                    />
-                                </li>
-                                <!-- TODO hasChildren
+        <div class="item-col">
+          <div class="float-button bottom">
+            <div class="box">
+              <div class="action">
+                <slot name="record-actions" />
+              </div>
+              <ul class="list-content fa-ul">
+                <li v-if="getProfession.length > 0">
+                  <i class="fa fa-li fa-id-card" />
+                  <p>
+                    <span>{{ getProfession[0] }}</span>
+                  </p>
+                </li>
+                <li v-if="hasParent">
+                  <i class="fa fa-li fa-hand-o-right" />
+                  <b class="me-2">{{ $t("child_of") }}</b>
+                  <on-the-fly
+                    :type="thirdparty.parent.type"
+                    :id="thirdparty.parent.id"
+                    :button-text="thirdparty.parent.text"
+                    :display-badge="'true' === 'true'"
+                    action="show"
+                  />
+                </li>
+                <!-- TODO hasChildren
                     NB: we cannot call on-the-fly from RenderBox. See error message in previous version of this file.
                 -->
-                            </ul>
-                            <div v-if="thirdparty.contactDataAnonymous">
-                                <confidential :position-btn-far="false">
-                                    <template #confidential-content>
-                                        <ul class="list-content fa-ul">
-                                            <li v-if="thirdparty.address">
-                                                <i
-                                                    class="fa fa-li fa-map-marker"
-                                                />
-                                                <address-render-box
-                                                    :address="
-                                                        thirdparty.address
-                                                    "
-                                                    :is-multiline="isMultiline"
-                                                />
-                                            </li>
-                                            <li v-if="thirdparty.telephone">
-                                                <i class="fa fa-li fa-mobile" />
-                                                <a
-                                                    :href="
-                                                        'tel: ' +
-                                                        thirdparty.telephone
-                                                    "
-                                                    >{{
-                                                        thirdparty.telephone
-                                                    }}</a
-                                                >
-                                            </li>
-                                            <li v-if="thirdparty.telephone2">
-                                                <i class="fa fa-li fa-mobile" />
-                                                <a
-                                                    :href="
-                                                        'tel: ' +
-                                                        thirdparty.telephone2
-                                                    "
-                                                    >{{
-                                                        thirdparty.telephone2
-                                                    }}</a
-                                                >
-                                            </li>
-                                            <li v-if="thirdparty.email">
-                                                <i
-                                                    class="fa fa-li fa-envelope-o"
-                                                />
-                                                <a
-                                                    :href="
-                                                        'mailto: ' +
-                                                        thirdparty.email
-                                                    "
-                                                    >{{ thirdparty.email }}</a
-                                                >
-                                            </li>
-                                        </ul>
-                                    </template>
-                                </confidential>
-                            </div>
-                            <ul v-else class="list-content fa-ul">
-                                <li v-if="thirdparty.address">
-                                    <i class="fa fa-li fa-map-marker" />
-                                    <address-render-box
-                                        :address="thirdparty.address"
-                                        :is-multiline="isMultiline"
-                                    />
-                                </li>
-                                <li v-if="thirdparty.telephone">
-                                    <i class="fa fa-li fa-mobile" />
-                                    <a :href="'tel: ' + thirdparty.telephone">{{
-                                        thirdparty.telephone
-                                    }}</a>
-                                </li>
-                                <li v-if="thirdparty.telephone2">
-                                    <i class="fa fa-li fa-mobile" />
-                                    <a :href="'tel: ' + thirdparty.telephone2"
-                                        >{{ thirdparty.telephone2 }}
-                                    </a>
-                                </li>
-                                <li v-if="thirdparty.email">
-                                    <i class="fa fa-li fa-envelope-o" />
-                                    <a :href="'mailto: ' + thirdparty.email">{{
-                                        thirdparty.email
-                                    }}</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
+              </ul>
+              <div v-if="thirdparty.contactDataAnonymous">
+                <confidential :position-btn-far="false">
+                  <template #confidential-content>
+                    <ul class="list-content fa-ul">
+                      <li v-if="thirdparty.address">
+                        <i class="fa fa-li fa-map-marker" />
+                        <address-render-box
+                          :address="thirdparty.address"
+                          :is-multiline="isMultiline"
+                        />
+                      </li>
+                      <li v-if="thirdparty.telephone">
+                        <i class="fa fa-li fa-mobile" />
+                        <a :href="'tel: ' + thirdparty.telephone">{{
+                          thirdparty.telephone
+                        }}</a>
+                      </li>
+                      <li v-if="thirdparty.telephone2">
+                        <i class="fa fa-li fa-mobile" />
+                        <a :href="'tel: ' + thirdparty.telephone2">{{
+                          thirdparty.telephone2
+                        }}</a>
+                      </li>
+                      <li v-if="thirdparty.email">
+                        <i class="fa fa-li fa-envelope-o" />
+                        <a :href="'mailto: ' + thirdparty.email">{{
+                          thirdparty.email
+                        }}</a>
+                      </li>
+                    </ul>
+                  </template>
+                </confidential>
+              </div>
+              <ul v-else class="list-content fa-ul">
+                <li v-if="thirdparty.address">
+                  <i class="fa fa-li fa-map-marker" />
+                  <address-render-box
+                    :address="thirdparty.address"
+                    :is-multiline="isMultiline"
+                  />
+                </li>
+                <li v-if="thirdparty.telephone">
+                  <i class="fa fa-li fa-mobile" />
+                  <a :href="'tel: ' + thirdparty.telephone">{{
+                    thirdparty.telephone
+                  }}</a>
+                </li>
+                <li v-if="thirdparty.telephone2">
+                  <i class="fa fa-li fa-mobile" />
+                  <a :href="'tel: ' + thirdparty.telephone2"
+                    >{{ thirdparty.telephone2 }}
+                  </a>
+                </li>
+                <li v-if="thirdparty.email">
+                  <i class="fa fa-li fa-envelope-o" />
+                  <a :href="'mailto: ' + thirdparty.email">{{
+                    thirdparty.email
+                  }}</a>
+                </li>
+              </ul>
             </div>
-            <slot name="end-bloc" />
-        </section>
-    </div>
+          </div>
+        </div>
+      </div>
+      <slot name="end-bloc" />
+    </section>
+  </div>
 </template>
 
 <script>
@@ -161,83 +134,80 @@ import Confidential from "ChillMainAssets/vuejs/_components/Confidential.vue";
 import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
 
 export default {
-    name: "ThirdPartyRenderBox",
-    components: {
-        AddressRenderBox,
-        Confidential,
-        BadgeEntity,
+  name: "ThirdPartyRenderBox",
+  components: {
+    AddressRenderBox,
+    Confidential,
+    BadgeEntity,
+  },
+  // To avoid components recursively invoking eachother resolve OnTheFly component here
+  beforeCreate() {
+    this.$options.components.OnTheFly =
+      require("ChillMainAssets/vuejs/OnTheFly/components/OnTheFly").default;
+  },
+  i18n: {
+    messages: {
+      fr: {
+        children: "Personnes de contact: ",
+        child_of: "Contact de: ",
+      },
     },
-    // To avoid components recursively invoking eachother resolve OnTheFly component here
-    beforeCreate() {
-        this.$options.components.OnTheFly =
-            require("ChillMainAssets/vuejs/OnTheFly/components/OnTheFly").default;
+  },
+  props: ["thirdparty", "options"],
+  computed: {
+    isMultiline: function () {
+      if (this.options.isMultiline) {
+        return this.options.isMultiline;
+      } else {
+        return false;
+      }
     },
-    i18n: {
-        messages: {
-            fr: {
-                children: "Personnes de contact: ",
-                child_of: "Contact de: ",
-            },
-        },
+    hasParent() {
+      return !(
+        this.thirdparty.parent === null || this.thirdparty.parent === undefined
+      );
     },
-    props: ["thirdparty", "options"],
-    computed: {
-        isMultiline: function () {
-            if (this.options.isMultiline) {
-                return this.options.isMultiline;
-            } else {
-                return false;
-            }
-        },
-        hasParent() {
-            return !(
-                this.thirdparty.parent === null ||
-                this.thirdparty.parent === undefined
-            );
-        },
-        getProfession() {
-            let profession = [];
-            if (this.hasParent && this.thirdparty.profession) {
-                profession.push(this.thirdparty.profession);
-                return profession;
-            }
+    getProfession() {
+      let profession = [];
+      if (this.hasParent && this.thirdparty.profession) {
+        profession.push(this.thirdparty.profession);
+        return profession;
+      }
 
-            if (!this.hasParent && this.thirdparty.category) {
-                profession = this.thirdparty.category.map(
-                    (category) => category.text,
-                );
-            }
+      if (!this.hasParent && this.thirdparty.category) {
+        profession = this.thirdparty.category.map((category) => category.text);
+      }
 
-            return profession;
-        },
-        /* TODO need backend normalizer to serve children without circular reference
+      return profession;
+    },
+    /* TODO need backend normalizer to serve children without circular reference
     hasChildren() {
         //console.log(this.thirdparty.activeChildren.length > 0)
         return false
     } */
-    },
+  },
 };
 </script>
 
 <style lang="scss">
 .name {
-    &:before {
-        content: " ";
-    }
+  &:before {
+    content: " ";
+  }
 
-    &.tparty-parent {
-        font-weight: bold;
-        font-variant: all-small-caps;
-    }
+  &.tparty-parent {
+    font-weight: bold;
+    font-variant: all-small-caps;
+  }
 }
 
 .list-professions {
-    &::after {
-        content: " | ";
-    }
+  &::after {
+    content: " | ";
+  }
 
-    &:last-child::after {
-        content: "";
-    }
+  &:last-child::after {
+    content: "";
+  }
 }
 </style>
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyText.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyText.vue
index 2214605e2..dfd46efd9 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyText.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyText.vue
@@ -1,28 +1,28 @@
 <template>
-    <span v-if="isCut">{{ cutText }}</span>
-    <span v-else class="thirdparty-text">
-        <span class="firstname">{{ thirdparty.text }}</span>
-    </span>
+  <span v-if="isCut">{{ cutText }}</span>
+  <span v-else class="thirdparty-text">
+    <span class="firstname">{{ thirdparty.text }}</span>
+  </span>
 </template>
 
 <script>
 export default {
-    name: "ThirdPartyText",
-    props: {
-        thirdparty: {
-            required: true,
-        },
-        isCut: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
+  name: "ThirdPartyText",
+  props: {
+    thirdparty: {
+      required: true,
     },
-    computed: {
-        cutText: function () {
-            let more = this.thirdparty.text.length > 15 ? "…" : "";
-            return this.thirdparty.text.slice(0, 15) + more;
-        },
+    isCut: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
+  },
+  computed: {
+    cutText: function () {
+      let more = this.thirdparty.text.length > 15 ? "…" : "";
+      return this.thirdparty.text.slice(0, 15) + more;
+    },
+  },
 };
 </script>
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
index eab1db50b..e3b2338bd 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
@@ -1,266 +1,252 @@
 <template>
-    <div v-if="action === 'show'">
-        <div class="flex-table">
-            <third-party-render-box
-                :thirdparty="thirdparty"
-                :options="{
-                    addInfo: true,
-                    addEntity: true,
-                    entityDisplayLong: true,
-                    addAltNames: true,
-                    addId: true,
-                    addLink: false,
-                    addAge: false,
-                    hLevel: 3,
-                    addCenter: true,
-                    addNoData: true,
-                    isMultiline: true,
-                }"
-            />
-        </div>
+  <div v-if="action === 'show'">
+    <div class="flex-table">
+      <third-party-render-box
+        :thirdparty="thirdparty"
+        :options="{
+          addInfo: true,
+          addEntity: true,
+          entityDisplayLong: true,
+          addAltNames: true,
+          addId: true,
+          addLink: false,
+          addAge: false,
+          hLevel: 3,
+          addCenter: true,
+          addNoData: true,
+          isMultiline: true,
+        }"
+      />
     </div>
-    <div
-        v-else-if="
-            action === 'edit' || action === 'create' || action === 'addContact'
-        "
-    >
-        <div v-if="parent">
-            <div class="parent-info">
-                <i class="fa fa-li fa-hand-o-right" />
-                <b class="me-2">{{ trans(THIRDPARTY_MESSAGES_CHILD_OF) }}</b>
-                <span class="chill-entity badge-thirdparty">{{
-                    parent.text
-                }}</span>
-            </div>
-        </div>
-        <div class="form-floating mb-3" v-else-if="kind.value !== 'child'">
-            <div class="form-check">
-                <input
-                    class="form-check-input mt-0"
-                    type="radio"
-                    v-model="kind.value"
-                    value="company"
-                    id="tpartyKindInstitution"
-                />
-                <label for="tpartyKindInstitution" class="required">
-                    <badge-entity
-                        :entity="{ type: 'thirdparty', kind: 'company' }"
-                        :options="{ displayLong: true }"
-                    />
-                </label>
-            </div>
-            <div class="form-check">
-                <input
-                    class="form-check-input mt-0"
-                    type="radio"
-                    v-model="kind.value"
-                    value="contact"
-                    id="tpartyKindContact"
-                />
-                <label for="tpartyKindContact" class="required">
-                    <badge-entity
-                        :entity="{ type: 'thirdparty', kind: 'contact' }"
-                        :options="{ displayLong: true }"
-                    />
-                </label>
-            </div>
-        </div>
-        <div v-else>
-            <p>Contact de&nbsp;:</p>
-            <third-party-render-box
-                :thirdparty="thirdparty.parent"
-                :options="{
-                    addInfo: true,
-                    addEntity: false,
-                    addAltNames: true,
-                    addId: false,
-                    addLink: false,
-                    addAge: false,
-                    hLevel: 4,
-                    addCenter: false,
-                    addNoData: true,
-                    isMultiline: false,
-                }"
-            />
-        </div>
-
-        <div
-            v-if="thirdparty.kind === 'child' || thirdparty.kind === 'contact'"
-        >
-            <div class="child-info">
-                <div class="input-group mb-3 input-section">
-                    <select
-                        class="form-select form-select-lg"
-                        id="civility"
-                        v-model="thirdparty.civility"
-                    >
-                        <option selected disabled :value="null">
-                            {{ trans(THIRDPARTY_MESSAGES_THIRDPARTY_CIVILITY) }}
-                        </option>
-                        <option
-                            v-for="civility in civilities"
-                            :key="civility.id"
-                            :value="civility"
-                        >
-                            {{ localizeString(civility.name) }}
-                        </option>
-                    </select>
-                </div>
-                <div class="input-group mb-3 input-section">
-                    <input
-                        class="form-control form-control-lg"
-                        v-model="thirdparty.profession"
-                        :placeholder="
-                            trans(THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION)
-                        "
-                        :aria-label="
-                            trans(THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION)
-                        "
-                        aria-describedby="profession"
-                    />
-                </div>
-            </div>
-            <div class="child-info">
-                <div class="input-section">
-                    <div class="form-floating mb-3">
-                        <input
-                            class="form-control form-control-lg"
-                            id="firstname"
-                            v-model="thirdparty.firstname"
-                            :placeholder="
-                                trans(THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME)
-                            "
-                        />
-                        <label for="firstname">{{
-                            trans(THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME)
-                        }}</label>
-                    </div>
-                    <div v-if="queryItems">
-                        <ul class="list-suggest add-items inline">
-                            <li
-                                v-for="(qi, i) in queryItems"
-                                :key="i"
-                                @click="addQueryItem('firstName', qi)"
-                            >
-                                <span class="person-text">{{ qi }}</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="input-section">
-                    <div class="form-floating mb-3">
-                        <input
-                            class="form-control form-control-lg"
-                            id="name"
-                            v-model="thirdparty.name"
-                            :placeholder="
-                                trans(THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME)
-                            "
-                        />
-                        <label for="name">{{
-                            trans(THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME)
-                        }}</label>
-                    </div>
-                    <div v-if="queryItems">
-                        <ul class="list-suggest add-items inline">
-                            <li
-                                v-for="(qi, i) in queryItems"
-                                :key="i"
-                                @click="addQueryItem('name', qi)"
-                            >
-                                <span class="person-text">{{ qi }}</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="thirdparty.kind === 'company'">
-            <div class="form-floating mb-3">
-                <input
-                    class="form-control form-control-lg"
-                    id="name"
-                    v-model="thirdparty.name"
-                    :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_NAME)"
-                />
-                <label for="name">{{
-                    trans(THIRDPARTY_MESSAGES_THIRDPARTY_NAME)
-                }}</label>
-            </div>
-            <div v-if="query">
-                <ul class="list-suggest add-items inline">
-                    <li @click="addQuery(query)">
-                        <span class="person-text">{{ query }}</span>
-                    </li>
-                </ul>
-            </div>
-        </div>
-
-        <template v-if="thirdparty.kind !== 'child'">
-            <AddAddress
-                key="thirdparty"
-                :context="context"
-                :options="addAddress.options"
-                :address-changed-callback="submitAddress"
-                ref="addAddress"
-            />
-        </template>
-
-        <div class="input-group mb-3">
-            <span class="input-group-text" id="email"
-                ><i class="fa fa-fw fa-envelope"
-            /></span>
-            <input
-                class="form-control form-control-lg"
-                v-model="thirdparty.email"
-                :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL)"
-                :aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL)"
-                aria-describedby="email"
-            />
-        </div>
-
-        <div class="input-group mb-3">
-            <span class="input-group-text" id="phonenumber"
-                ><i class="fa fa-fw fa-phone"
-            /></span>
-            <input
-                class="form-control form-control-lg"
-                v-model="thirdparty.telephone"
-                :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER)"
-                :aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER)"
-                aria-describedby="phonenumber"
-            />
-        </div>
-
-        <div class="input-group mb-3">
-            <span class="input-group-text" id="phonenumber2"
-                ><i class="fa fa-fw fa-phone"
-            /></span>
-            <input
-                class="form-control form-control-lg"
-                v-model="thirdparty.telephone2"
-                :placeholder="
-                    trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2)
-                "
-                :aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2)"
-                aria-describedby="phonenumber2"
-            />
-        </div>
-
-        <div v-if="parent">
-            <div class="input-group mb-3">
-                <span class="input-group-text" id="comment"
-                    ><i class="fa fa-fw fa-pencil"
-                /></span>
-                <textarea
-                    class="form-control form-control-lg"
-                    :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_COMMENT)"
-                    v-model="thirdparty.comment"
-                />
-            </div>
-        </div>
+  </div>
+  <div
+    v-else-if="
+      action === 'edit' || action === 'create' || action === 'addContact'
+    "
+  >
+    <div v-if="parent">
+      <div class="parent-info">
+        <i class="fa fa-li fa-hand-o-right" />
+        <b class="me-2">{{ trans(THIRDPARTY_MESSAGES_CHILD_OF) }}</b>
+        <span class="chill-entity badge-thirdparty">{{ parent.text }}</span>
+      </div>
     </div>
+    <div class="form-floating mb-3" v-else-if="kind.value !== 'child'">
+      <div class="form-check">
+        <input
+          class="form-check-input mt-0"
+          type="radio"
+          v-model="kind.value"
+          value="company"
+          id="tpartyKindInstitution"
+        />
+        <label for="tpartyKindInstitution" class="required">
+          <badge-entity
+            :entity="{ type: 'thirdparty', kind: 'company' }"
+            :options="{ displayLong: true }"
+          />
+        </label>
+      </div>
+      <div class="form-check">
+        <input
+          class="form-check-input mt-0"
+          type="radio"
+          v-model="kind.value"
+          value="contact"
+          id="tpartyKindContact"
+        />
+        <label for="tpartyKindContact" class="required">
+          <badge-entity
+            :entity="{ type: 'thirdparty', kind: 'contact' }"
+            :options="{ displayLong: true }"
+          />
+        </label>
+      </div>
+    </div>
+    <div v-else>
+      <p>Contact de&nbsp;:</p>
+      <third-party-render-box
+        :thirdparty="thirdparty.parent"
+        :options="{
+          addInfo: true,
+          addEntity: false,
+          addAltNames: true,
+          addId: false,
+          addLink: false,
+          addAge: false,
+          hLevel: 4,
+          addCenter: false,
+          addNoData: true,
+          isMultiline: false,
+        }"
+      />
+    </div>
+
+    <div v-if="thirdparty.kind === 'child' || thirdparty.kind === 'contact'">
+      <div class="child-info">
+        <div class="input-group mb-3 input-section">
+          <select
+            class="form-select form-select-lg"
+            id="civility"
+            v-model="thirdparty.civility"
+          >
+            <option selected disabled :value="null">
+              {{ trans(THIRDPARTY_MESSAGES_THIRDPARTY_CIVILITY) }}
+            </option>
+            <option
+              v-for="civility in civilities"
+              :key="civility.id"
+              :value="civility"
+            >
+              {{ localizeString(civility.name) }}
+            </option>
+          </select>
+        </div>
+        <div class="input-group mb-3 input-section">
+          <input
+            class="form-control form-control-lg"
+            v-model="thirdparty.profession"
+            :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION)"
+            :aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION)"
+            aria-describedby="profession"
+          />
+        </div>
+      </div>
+      <div class="child-info">
+        <div class="input-section">
+          <div class="form-floating mb-3">
+            <input
+              class="form-control form-control-lg"
+              id="firstname"
+              v-model="thirdparty.firstname"
+              :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME)"
+            />
+            <label for="firstname">{{
+              trans(THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME)
+            }}</label>
+          </div>
+          <div v-if="queryItems">
+            <ul class="list-suggest add-items inline">
+              <li
+                v-for="(qi, i) in queryItems"
+                :key="i"
+                @click="addQueryItem('firstName', qi)"
+              >
+                <span class="person-text">{{ qi }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="input-section">
+          <div class="form-floating mb-3">
+            <input
+              class="form-control form-control-lg"
+              id="name"
+              v-model="thirdparty.name"
+              :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME)"
+            />
+            <label for="name">{{
+              trans(THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME)
+            }}</label>
+          </div>
+          <div v-if="queryItems">
+            <ul class="list-suggest add-items inline">
+              <li
+                v-for="(qi, i) in queryItems"
+                :key="i"
+                @click="addQueryItem('name', qi)"
+              >
+                <span class="person-text">{{ qi }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="thirdparty.kind === 'company'">
+      <div class="form-floating mb-3">
+        <input
+          class="form-control form-control-lg"
+          id="name"
+          v-model="thirdparty.name"
+          :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_NAME)"
+        />
+        <label for="name">{{
+          trans(THIRDPARTY_MESSAGES_THIRDPARTY_NAME)
+        }}</label>
+      </div>
+      <div v-if="query">
+        <ul class="list-suggest add-items inline">
+          <li @click="addQuery(query)">
+            <span class="person-text">{{ query }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <template v-if="thirdparty.kind !== 'child'">
+      <AddAddress
+        key="thirdparty"
+        :context="context"
+        :options="addAddress.options"
+        :address-changed-callback="submitAddress"
+        ref="addAddress"
+      />
+    </template>
+
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="email"
+        ><i class="fa fa-fw fa-envelope"
+      /></span>
+      <input
+        class="form-control form-control-lg"
+        v-model="thirdparty.email"
+        :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL)"
+        :aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL)"
+        aria-describedby="email"
+      />
+    </div>
+
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="phonenumber"
+        ><i class="fa fa-fw fa-phone"
+      /></span>
+      <input
+        class="form-control form-control-lg"
+        v-model="thirdparty.telephone"
+        :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER)"
+        :aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER)"
+        aria-describedby="phonenumber"
+      />
+    </div>
+
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="phonenumber2"
+        ><i class="fa fa-fw fa-phone"
+      /></span>
+      <input
+        class="form-control form-control-lg"
+        v-model="thirdparty.telephone2"
+        :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2)"
+        :aria-label="trans(THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2)"
+        aria-describedby="phonenumber2"
+      />
+    </div>
+
+    <div v-if="parent">
+      <div class="input-group mb-3">
+        <span class="input-group-text" id="comment"
+          ><i class="fa fa-fw fa-pencil"
+        /></span>
+        <textarea
+          class="form-control form-control-lg"
+          :placeholder="trans(THIRDPARTY_MESSAGES_THIRDPARTY_COMMENT)"
+          v-model="thirdparty.comment"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -272,17 +258,17 @@ import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import { localizeString as _localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 import {
-    trans,
-    THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME,
-    THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME,
-    THIRDPARTY_MESSAGES_THIRDPARTY_NAME,
-    THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL,
-    THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER,
-    THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2,
-    THIRDPARTY_MESSAGES_THIRDPARTY_COMMENT,
-    THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION,
-    THIRDPARTY_MESSAGES_THIRDPARTY_CIVILITY,
-    THIRDPARTY_MESSAGES_CHILD_OF,
+  trans,
+  THIRDPARTY_MESSAGES_THIRDPARTY_FIRSTNAME,
+  THIRDPARTY_MESSAGES_THIRDPARTY_LASTNAME,
+  THIRDPARTY_MESSAGES_THIRDPARTY_NAME,
+  THIRDPARTY_MESSAGES_THIRDPARTY_EMAIL,
+  THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER,
+  THIRDPARTY_MESSAGES_THIRDPARTY_PHONENUMBER2,
+  THIRDPARTY_MESSAGES_THIRDPARTY_COMMENT,
+  THIRDPARTY_MESSAGES_THIRDPARTY_PROFESSION,
+  THIRDPARTY_MESSAGES_THIRDPARTY_CIVILITY,
+  THIRDPARTY_MESSAGES_CHILD_OF,
 } from "translator";
 // Props
 const props = defineProps(["id", "type", "action", "query", "parent"]);
@@ -292,175 +278,173 @@ const { proxy } = getCurrentInstance();
 
 // State
 const thirdparty = reactive({
-    type: "thirdparty",
-    address: null,
-    kind: "company",
-    firstname: "",
-    name: "",
-    telephone: "",
-    telephone2: "",
-    civility: null,
-    profession: "",
-    comment: "",
-    parent: props.parent ? props.parent : undefined,
+  type: "thirdparty",
+  address: null,
+  kind: "company",
+  firstname: "",
+  name: "",
+  telephone: "",
+  telephone2: "",
+  civility: null,
+  profession: "",
+  comment: "",
+  parent: props.parent ? props.parent : undefined,
 });
 const civilities = ref([]);
 const addAddress = reactive({
-    options: {
-        openPanesInModal: true,
-        onlyButton: false,
-        button: {
-            size: "btn-sm",
-        },
-        title: {
-            create: "add_an_address_title",
-            edit: "edit_address",
-        },
+  options: {
+    openPanesInModal: true,
+    onlyButton: false,
+    button: {
+      size: "btn-sm",
     },
+    title: {
+      create: "add_an_address_title",
+      edit: "edit_address",
+    },
+  },
 });
 const addAddressRef = ref(null);
 
 // Kind as computed ref
 const kind = computed({
-    get() {
-        return thirdparty.kind !== undefined ? thirdparty.kind : "company";
-    },
-    set(v) {
-        thirdparty.kind = v;
-    },
+  get() {
+    return thirdparty.kind !== undefined ? thirdparty.kind : "company";
+  },
+  set(v) {
+    thirdparty.kind = v;
+  },
 });
 
 // Context as computed
 const context = computed(() => {
-    let ctx = {
-        target: {
-            name: props.type,
-            id: props.id,
-        },
-        edit: false,
-        addressId: null,
-        defaults: window.addaddress,
-    };
-    if (
-        !(thirdparty.address === undefined || thirdparty.address === null) &&
-        thirdparty.address.address_id !== null
-    ) {
-        ctx.addressId = thirdparty.address.address_id;
-        ctx.edit = true;
-    }
-    return ctx;
+  let ctx = {
+    target: {
+      name: props.type,
+      id: props.id,
+    },
+    edit: false,
+    addressId: null,
+    defaults: window.addaddress,
+  };
+  if (
+    !(thirdparty.address === undefined || thirdparty.address === null) &&
+    thirdparty.address.address_id !== null
+  ) {
+    ctx.addressId = thirdparty.address.address_id;
+    ctx.edit = true;
+  }
+  return ctx;
 });
 
 // Query items
 const queryItems = computed(() =>
-    props.query ? props.query.split(" ") : null,
+  props.query ? props.query.split(" ") : null,
 );
 
 // Methods
 function localizeString(str) {
-    return _localizeString(str);
+  return _localizeString(str);
 }
 
 function loadData() {
-    return getThirdparty(props.id).then(
-        (tp) =>
-            new Promise((resolve) => {
-                Object.assign(thirdparty, tp);
-                thirdparty.kind = tp.kind;
-                if (props.action !== "show") {
-                    if (tp.address !== null && addAddressRef.value) {
-                        addAddressRef.value.getInitialAddress(
-                            tp.address.address_id,
-                        );
-                    }
-                }
-                resolve();
-            }),
-    );
+  return getThirdparty(props.id).then(
+    (tp) =>
+      new Promise((resolve) => {
+        Object.assign(thirdparty, tp);
+        thirdparty.kind = tp.kind;
+        if (props.action !== "show") {
+          if (tp.address !== null && addAddressRef.value) {
+            addAddressRef.value.getInitialAddress(tp.address.address_id);
+          }
+        }
+        resolve();
+      }),
+  );
 }
 
 function loadCivilities() {
-    const url = `/api/1.0/main/civility.json`;
-    return makeFetch("GET", url)
-        .then((response) => {
-            civilities.value = response.results;
-            return Promise.resolve();
-        })
-        .catch((error) => {
-            console.log(error);
-            proxy.$toast.open({ message: error.body });
-        });
+  const url = `/api/1.0/main/civility.json`;
+  return makeFetch("GET", url)
+    .then((response) => {
+      civilities.value = response.results;
+      return Promise.resolve();
+    })
+    .catch((error) => {
+      console.log(error);
+      proxy.$toast.open({ message: error.body });
+    });
 }
 
 function submitAddress(payload) {
-    if (typeof payload.addressId !== "undefined") {
-        context.value.edit = true;
-        context.value.addressId = payload.addressId;
-        thirdparty.address = payload.address;
-    }
+  if (typeof payload.addressId !== "undefined") {
+    context.value.edit = true;
+    context.value.addressId = payload.addressId;
+    thirdparty.address = payload.address;
+  }
 }
 
 function addQueryItem(field, queryItem) {
-    switch (field) {
-        case "name":
-            if (thirdparty.name) {
-                thirdparty.name += ` ${queryItem}`;
-            } else {
-                thirdparty.name = queryItem;
-            }
-            break;
-        case "firstName":
-            thirdparty.firstname = queryItem;
-            break;
-    }
+  switch (field) {
+    case "name":
+      if (thirdparty.name) {
+        thirdparty.name += ` ${queryItem}`;
+      } else {
+        thirdparty.name = queryItem;
+      }
+      break;
+    case "firstName":
+      thirdparty.firstname = queryItem;
+      break;
+  }
 }
 
 function addQuery(query) {
-    thirdparty.name = query;
+  thirdparty.name = query;
 }
 
 // Lifecycle
 onMounted(() => {
-    let dependencies = [];
-    dependencies.push(loadCivilities());
-    if (props.action !== "create") {
-        if (props.id) {
-            dependencies.push(loadData());
-        }
-        if (props.action === "addContact") {
-            thirdparty.kind = "child";
-            thirdparty.address = null;
-        }
-    } else {
-        thirdparty.kind = "company";
+  let dependencies = [];
+  dependencies.push(loadCivilities());
+  if (props.action !== "create") {
+    if (props.id) {
+      dependencies.push(loadData());
     }
+    if (props.action === "addContact") {
+      thirdparty.kind = "child";
+      thirdparty.address = null;
+    }
+  } else {
+    thirdparty.kind = "company";
+  }
 });
 </script>
 
 <style lang="scss" scoped>
 div.flex-table {
-    div.item-bloc {
-        div.item-row {
-            div.item-col:last-child {
-                justify-content: flex-start;
-            }
-        }
+  div.item-bloc {
+    div.item-row {
+      div.item-col:last-child {
+        justify-content: flex-start;
+      }
     }
+  }
 }
 dl {
-    dd {
-        margin-left: 1em;
-    }
+  dd {
+    margin-left: 1em;
+  }
 }
 .parent-info {
-    margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 
 .child-info {
-    display: flex;
-    justify-content: space-between;
-    .input-section {
-        width: 49%;
-    }
+  display: flex;
+  justify-content: space-between;
+  .input-section {
+    width: 49%;
+  }
 }
 </style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
index ec52ce9ee..eb9166074 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -1,10 +1,10 @@
 <template>
-    <banner-component :ticket="ticket" />
-    <div class="container-xxl pt-1" style="padding-bottom: 55px">
-        <ticket-selector-component :tickets="[]" />
-        <ticket-history-list-component :history="ticketHistory" />
-    </div>
-    <action-toolbar-component />
+  <banner-component :ticket="ticket" />
+  <div class="container-xxl pt-1" style="padding-bottom: 55px">
+    <ticket-selector-component :tickets="[]" />
+    <ticket-history-list-component :history="ticketHistory" />
+  </div>
+  <action-toolbar-component />
 </template>
 <script setup lang="ts">
 import { useToast } from "vue-toast-notification";
@@ -30,14 +30,14 @@ const ticket = computed(() => store.getters.getTicket as Ticket);
 const ticketHistory = computed(() => store.getters.getDistinctAddressesHistory);
 
 onMounted(async () => {
-    try {
-        await store.dispatch("fetchMotives");
-        await store.dispatch("fetchUserGroups");
-        await store.dispatch("fetchUsers");
-        await store.dispatch("getSuggestedPersons");
-    } catch (error) {
-        toast.error(error as string);
-    }
+  try {
+    await store.dispatch("fetchMotives");
+    await store.dispatch("fetchUserGroups");
+    await store.dispatch("fetchUsers");
+    await store.dispatch("getSuggestedPersons");
+  } catch (error) {
+    toast.error(error as string);
+  }
 });
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
index 5eaade60d..259a8aed9 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -1,152 +1,127 @@
 <template>
-    <div class="fixed-bottom">
-        <div class="footer-ticket-details" v-if="activeTab">
-            <div class="tab-content p-2">
-                <button
-                    type="button"
-                    class="btn btn-link p-0"
-                    style="
-                        position: absolute;
-                        top: 0.5rem;
-                        right: 0.5rem;
-                        font-size: 2rem;
-                        line-height: 1;
-                        color: #888;
-                        text-decoration: none;
-                    "
-                    @click="closeAllActions"
-                    aria-label="Fermer"
-                    title="Fermer"
-                >
-                    <span aria-hidden="true">&times;</span>
-                </button>
-                <div v-if="activeTabTitle">
-                    <label class="col-form-label">
-                        {{ activeTabTitle }}
-                    </label>
-                </div>
+  <div class="fixed-bottom">
+    <div class="footer-ticket-details" v-if="activeTab">
+      <div class="tab-content p-2">
+        <button
+          type="button"
+          class="btn btn-link p-0"
+          style="
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            font-size: 2rem;
+            line-height: 1;
+            color: #888;
+            text-decoration: none;
+          "
+          @click="closeAllActions"
+          aria-label="Fermer"
+          title="Fermer"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <div v-if="activeTabTitle">
+          <label class="col-form-label">
+            {{ activeTabTitle }}
+          </label>
+        </div>
 
-                <form @submit.prevent="submitAction">
-                    <add-comment-component
-                        v-model="content"
-                        v-if="activeTab === 'add_comment'"
-                    />
-                    <addressee-selector-component
-                        v-model="addressees"
-                        :suggested="userGroups"
-                        v-if="activeTab === 'addressees_state'"
-                    />
+        <form @submit.prevent="submitAction">
+          <add-comment-component
+            v-model="content"
+            v-if="activeTab === 'add_comment'"
+          />
+          <addressee-selector-component
+            v-model="addressees"
+            :suggested="userGroups"
+            v-if="activeTab === 'addressees_state'"
+          />
 
-                    <motive-selector-component
-                        v-model="motive"
-                        :motives="motives"
-                        v-if="activeTab === 'set_motive'"
-                    />
-                    <div v-if="activeTab === 'persons_state'">
-                        <div class="row">
-                            <label class="col col-form-label">
-                                {{
-                                    trans(
-                                        CHILL_TICKET_TICKET_SET_PERSONS_TITLE_CALLER,
-                                    )
-                                }}
-                            </label>
-                            <label class="col col-form-label">
-                                {{
-                                    trans(
-                                        CHILL_TICKET_TICKET_SET_PERSONS_TITLE_PERSON,
-                                    )
-                                }}
-                            </label>
-                        </div>
-                        <div class="row">
-                            <div class="col">
-                                <caller-selector-component
-                                    v-model="caller"
-                                    :suggested="[]"
-                                />
-                            </div>
-                            <div class="col">
-                                <persons-selector-component
-                                    v-model="persons"
-                                    :suggested="suggestedPersons"
-                                />
-                            </div>
-                        </div>
-                    </div>
-
-                    <ul class="record_actions sticky-form-buttons">
-                        <li>
-                            <button class="btn btn-save" type="submit">
-                                {{
-                                    trans(
-                                        CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_SAVE,
-                                    )
-                                }}
-                            </button>
-                        </li>
-                    </ul>
-                </form>
+          <motive-selector-component
+            v-model="motive"
+            :motives="motives"
+            v-if="activeTab === 'set_motive'"
+          />
+          <div v-if="activeTab === 'persons_state'">
+            <div class="row">
+              <label class="col col-form-label">
+                {{ trans(CHILL_TICKET_TICKET_SET_PERSONS_TITLE_CALLER) }}
+              </label>
+              <label class="col col-form-label">
+                {{ trans(CHILL_TICKET_TICKET_SET_PERSONS_TITLE_PERSON) }}
+              </label>
             </div>
-        </div>
-        <div class="footer-ticket-main">
-            <ul class="nav nav-tabs justify-content-end">
-                <li v-if="hasReturnPath" class="nav-item p-2 go-back">
-                    <a :href="returnPath" class="btn btn-cancel">Annuler</a>
-                </li>
-                <li v-else class="nav-item p-2 go-back">
-                    <button
-                        type="button"
-                        class="btn btn-link p-0"
-                        style="font-size: 1.5rem; line-height: 1; color: #888"
-                        @click="closeAllActions"
-                        aria-label="Fermer"
-                        title="Fermer"
-                    >
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                    >
-                </li>
-                <li
-                    v-for="btn in actionButtons"
-                    :key="btn.key"
-                    class="nav-item p-2"
-                >
-                    <button
-                        type="button"
-                        :class="`btn ${activeTab === btn.key ? 'btn-primary' : 'btn-light'}`"
-                        @click="
-                            activeTab === btn.key
-                                ? (activeTab = '')
-                                : (activeTab = btn.key)
-                        "
-                        :disabled="btn.disabled.value"
-                    >
-                        <i :class="actionIcons[btn.key]" />
-                        {{ trans(btn.label) }}
-                    </button>
-                </li>
-                <li class="nav-item p-2">
-                    <button
-                        type="button"
-                        class="btn btn-light"
-                        @click="isOpen ? closeTicket() : reopenTicket()"
-                    >
-                        <i :class="actionIcons['state_change']"></i>
-                        {{
-                            isOpen
-                                ? trans(
-                                      CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE,
-                                  )
-                                : trans(
-                                      CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN,
-                                  )
-                        }}
-                    </button>
-                </li>
-            </ul>
-        </div>
+            <div class="row">
+              <div class="col">
+                <caller-selector-component v-model="caller" :suggested="[]" />
+              </div>
+              <div class="col">
+                <persons-selector-component
+                  v-model="persons"
+                  :suggested="suggestedPersons"
+                />
+              </div>
+            </div>
+          </div>
+
+          <ul class="record_actions sticky-form-buttons">
+            <li>
+              <button class="btn btn-save" type="submit">
+                {{ trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_SAVE) }}
+              </button>
+            </li>
+          </ul>
+        </form>
+      </div>
     </div>
+    <div class="footer-ticket-main">
+      <ul class="nav nav-tabs justify-content-end">
+        <li v-if="hasReturnPath" class="nav-item p-2 go-back">
+          <a :href="returnPath" class="btn btn-cancel">Annuler</a>
+        </li>
+        <li v-else class="nav-item p-2 go-back">
+          <button
+            type="button"
+            class="btn btn-link p-0"
+            style="font-size: 1.5rem; line-height: 1; color: #888"
+            @click="closeAllActions"
+            aria-label="Fermer"
+            title="Fermer"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+          >
+        </li>
+        <li v-for="btn in actionButtons" :key="btn.key" class="nav-item p-2">
+          <button
+            type="button"
+            :class="`btn ${activeTab === btn.key ? 'btn-primary' : 'btn-light'}`"
+            @click="
+              activeTab === btn.key ? (activeTab = '') : (activeTab = btn.key)
+            "
+            :disabled="btn.disabled.value"
+          >
+            <i :class="actionIcons[btn.key]" />
+            {{ trans(btn.label) }}
+          </button>
+        </li>
+        <li class="nav-item p-2">
+          <button
+            type="button"
+            class="btn btn-light"
+            @click="isOpen ? closeTicket() : reopenTicket()"
+          >
+            <i :class="actionIcons['state_change']"></i>
+            {{
+              isOpen
+                ? trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE)
+                : trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN)
+            }}
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -163,33 +138,33 @@ import CallerSelectorComponent from "./CallerSelectorComponent.vue";
 
 // Translations
 import {
-    trans,
-    CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE,
-    CHILL_TICKET_TICKET_ADD_ADDRESSEE_ERROR,
-    CHILL_TICKET_TICKET_ADD_ADDRESSEE_SUCCESS,
-    CHILL_TICKET_TICKET_ADD_COMMENT_TITLE,
-    CHILL_TICKET_TICKET_ADD_COMMENT_ERROR,
-    CHILL_TICKET_TICKET_ADD_COMMENT_SUCCESS,
-    CHILL_TICKET_TICKET_SET_MOTIVE_TITLE,
-    CHILL_TICKET_TICKET_SET_MOTIVE_ERROR,
-    CHILL_TICKET_TICKET_SET_MOTIVE_SUCCESS,
-    CHILL_TICKET_TICKET_SET_PERSONS_TITLE_PERSON,
-    CHILL_TICKET_TICKET_SET_PERSONS_TITLE_CALLER,
-    CHILL_TICKET_TICKET_SET_PERSONS_TITLE,
-    CHILL_TICKET_TICKET_SET_PERSONS_SUCCESS,
-    CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_SAVE,
-    CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE,
-    CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_SUCCESS,
-    CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_ERROR,
-    CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN,
-    CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_SUCCESS,
-    CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_ERROR,
+  trans,
+  CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE,
+  CHILL_TICKET_TICKET_ADD_ADDRESSEE_ERROR,
+  CHILL_TICKET_TICKET_ADD_ADDRESSEE_SUCCESS,
+  CHILL_TICKET_TICKET_ADD_COMMENT_TITLE,
+  CHILL_TICKET_TICKET_ADD_COMMENT_ERROR,
+  CHILL_TICKET_TICKET_ADD_COMMENT_SUCCESS,
+  CHILL_TICKET_TICKET_SET_MOTIVE_TITLE,
+  CHILL_TICKET_TICKET_SET_MOTIVE_ERROR,
+  CHILL_TICKET_TICKET_SET_MOTIVE_SUCCESS,
+  CHILL_TICKET_TICKET_SET_PERSONS_TITLE_PERSON,
+  CHILL_TICKET_TICKET_SET_PERSONS_TITLE_CALLER,
+  CHILL_TICKET_TICKET_SET_PERSONS_TITLE,
+  CHILL_TICKET_TICKET_SET_PERSONS_SUCCESS,
+  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_SAVE,
+  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE,
+  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_SUCCESS,
+  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_ERROR,
+  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN,
+  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_SUCCESS,
+  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_ERROR,
 } from "translator";
 
 // Types
 import {
-    UserGroup,
-    UserGroupOrUser,
+  UserGroup,
+  UserGroupOrUser,
 } from "../../../../../../../ChillMainBundle/Resources/public/types";
 import { Comment, Motive, Ticket } from "../../../types";
 import { Person } from "ChillPersonAssets/types";
@@ -201,43 +176,43 @@ const activeTab = ref("" as string);
 const actionIcons = ref(store.getters.getActionIcons);
 
 const activeTabTitle = computed((): string => {
-    switch (activeTab.value) {
-        case "add_comment":
-            return trans(CHILL_TICKET_TICKET_ADD_COMMENT_TITLE);
-        case "set_motive":
-            return trans(CHILL_TICKET_TICKET_SET_MOTIVE_TITLE);
-        case "addressees_state":
-            return trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE);
-        default:
-            return "";
-    }
+  switch (activeTab.value) {
+    case "add_comment":
+      return trans(CHILL_TICKET_TICKET_ADD_COMMENT_TITLE);
+    case "set_motive":
+      return trans(CHILL_TICKET_TICKET_SET_MOTIVE_TITLE);
+    case "addressees_state":
+      return trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE);
+    default:
+      return "";
+  }
 });
 
 const actionButtons = [
-    {
-        key: "set_motive",
-        label: CHILL_TICKET_TICKET_SET_MOTIVE_TITLE,
-        icon: computed(() => actionIcons.value["set_motive"]),
-        disabled: computed(() => !isOpen.value),
-    },
-    {
-        key: "add_comment",
-        label: CHILL_TICKET_TICKET_ADD_COMMENT_TITLE,
-        icon: computed(() => actionIcons.value["add_comment"]),
-        disabled: computed(() => !isOpen.value),
-    },
-    {
-        key: "addressees_state",
-        label: CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE,
-        icon: computed(() => actionIcons.value["addressees_state"]),
-        disabled: computed(() => !isOpen.value),
-    },
-    {
-        key: "persons_state",
-        label: CHILL_TICKET_TICKET_SET_PERSONS_TITLE,
-        icon: computed(() => actionIcons.value["persons_state"]),
-        disabled: computed(() => !isOpen.value),
-    },
+  {
+    key: "set_motive",
+    label: CHILL_TICKET_TICKET_SET_MOTIVE_TITLE,
+    icon: computed(() => actionIcons.value["set_motive"]),
+    disabled: computed(() => !isOpen.value),
+  },
+  {
+    key: "add_comment",
+    label: CHILL_TICKET_TICKET_ADD_COMMENT_TITLE,
+    icon: computed(() => actionIcons.value["add_comment"]),
+    disabled: computed(() => !isOpen.value),
+  },
+  {
+    key: "addressees_state",
+    label: CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE,
+    icon: computed(() => actionIcons.value["addressees_state"]),
+    disabled: computed(() => !isOpen.value),
+  },
+  {
+    key: "persons_state",
+    label: CHILL_TICKET_TICKET_SET_PERSONS_TITLE,
+    icon: computed(() => actionIcons.value["persons_state"]),
+    disabled: computed(() => !isOpen.value),
+  },
 ];
 
 const ticket = computed(() => store.getters.getTicket as Ticket);
@@ -247,25 +222,25 @@ const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]);
 const suggestedPersons = computed(() => store.getters.getPersons as Person[]);
 console.log("suggestedPersons", suggestedPersons.value);
 const hasReturnPath = computed((): boolean => {
-    const params = new URL(document.location.toString()).searchParams;
-    return params.has("returnPath");
+  const params = new URL(document.location.toString()).searchParams;
+  return params.has("returnPath");
 });
 
 const returnPath = computed((): string => {
-    const params = new URL(document.location.toString()).searchParams;
-    const returnPath = params.get("returnPath");
+  const params = new URL(document.location.toString()).searchParams;
+  const returnPath = params.get("returnPath");
 
-    if (null === returnPath) {
-        throw new Error(
-            "there isn't any returnPath, please check the existence before",
-        );
-    }
+  if (null === returnPath) {
+    throw new Error(
+      "there isn't any returnPath, please check the existence before",
+    );
+  }
 
-    return returnPath;
+  return returnPath;
 });
 
 const motive = ref(
-    ticket.value.currentMotive ? ticket.value.currentMotive : ({} as Motive),
+  ticket.value.currentMotive ? ticket.value.currentMotive : ({} as Motive),
 );
 const content = ref("" as Comment["content"]);
 const addressees = ref(ticket.value.currentAddressees as UserGroupOrUser[]);
@@ -273,117 +248,109 @@ const persons = ref(ticket.value.currentPersons as Person[]);
 const caller = ref(ticket.value.caller as Person);
 
 async function submitAction() {
-    try {
-        switch (activeTab.value) {
-            case "add_comment":
-                if (!content.value) {
-                    toast.error(trans(CHILL_TICKET_TICKET_ADD_COMMENT_ERROR));
-                } else {
-                    await store.dispatch("createComment", {
-                        ticketId: ticket.value.id,
-                        content: content.value,
-                    });
-                    content.value = "";
-                    activeTab.value = "";
-                    toast.success(
-                        trans(CHILL_TICKET_TICKET_ADD_COMMENT_SUCCESS),
-                    );
-                }
-                break;
-            case "set_motive":
-                if (!motive.value.id) {
-                    toast.error(trans(CHILL_TICKET_TICKET_SET_MOTIVE_ERROR));
-                } else {
-                    await store.dispatch("createMotive", {
-                        ticketId: ticket.value.id,
-                        motive: motive.value,
-                    });
-                    activeTab.value = "";
-                    toast.success(
-                        trans(CHILL_TICKET_TICKET_SET_MOTIVE_SUCCESS),
-                    );
-                }
-                break;
-            case "addressees_state":
-                if (!addressees.value.length) {
-                    toast.error(trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_ERROR));
-                } else {
-                    await store.dispatch("setAdressees", {
-                        ticketId: ticket.value.id,
-                        addressees: addressees.value,
-                    });
-                    activeTab.value = "";
-                    toast.success(
-                        trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_SUCCESS),
-                    );
-                }
-                break;
-            case "persons_state":
-                await store.dispatch("setPersons", {
-                    persons: persons.value,
-                });
-                activeTab.value = "";
-                toast.success(trans(CHILL_TICKET_TICKET_SET_PERSONS_SUCCESS));
-                break;
+  try {
+    switch (activeTab.value) {
+      case "add_comment":
+        if (!content.value) {
+          toast.error(trans(CHILL_TICKET_TICKET_ADD_COMMENT_ERROR));
+        } else {
+          await store.dispatch("createComment", {
+            ticketId: ticket.value.id,
+            content: content.value,
+          });
+          content.value = "";
+          activeTab.value = "";
+          toast.success(trans(CHILL_TICKET_TICKET_ADD_COMMENT_SUCCESS));
         }
-    } catch (error) {
-        toast.error(error as string);
+        break;
+      case "set_motive":
+        if (!motive.value.id) {
+          toast.error(trans(CHILL_TICKET_TICKET_SET_MOTIVE_ERROR));
+        } else {
+          await store.dispatch("createMotive", {
+            ticketId: ticket.value.id,
+            motive: motive.value,
+          });
+          activeTab.value = "";
+          toast.success(trans(CHILL_TICKET_TICKET_SET_MOTIVE_SUCCESS));
+        }
+        break;
+      case "addressees_state":
+        if (!addressees.value.length) {
+          toast.error(trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_ERROR));
+        } else {
+          await store.dispatch("setAdressees", {
+            ticketId: ticket.value.id,
+            addressees: addressees.value,
+          });
+          activeTab.value = "";
+          toast.success(trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_SUCCESS));
+        }
+        break;
+      case "persons_state":
+        await store.dispatch("setPersons", {
+          persons: persons.value,
+        });
+        activeTab.value = "";
+        toast.success(trans(CHILL_TICKET_TICKET_SET_PERSONS_SUCCESS));
+        break;
     }
+  } catch (error) {
+    toast.error(error as string);
+  }
 }
 
 async function closeTicket() {
-    try {
-        await store.dispatch("closeTicket");
-        closeAllActions();
-        toast.success(trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_SUCCESS));
-    } catch (error) {
-        console.error(error);
-        toast.success(trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_ERROR));
-    }
+  try {
+    await store.dispatch("closeTicket");
+    closeAllActions();
+    toast.success(trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_SUCCESS));
+  } catch (error) {
+    console.error(error);
+    toast.success(trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_ERROR));
+  }
 }
 
 async function reopenTicket() {
-    try {
-        await store.dispatch("reopenTicket");
-        toast.success(
-            trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_SUCCESS),
-        );
-    } catch (error) {
-        console.error(error);
-        toast.error(trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_ERROR));
-    }
+  try {
+    await store.dispatch("reopenTicket");
+    toast.success(trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_SUCCESS));
+  } catch (error) {
+    console.error(error);
+    toast.error(trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_ERROR));
+  }
 }
 
 function closeAllActions() {
-    activeTab.value = "";
+  activeTab.value = "";
 }
 
 watch(caller, async (newCaller) => {
-    await store.dispatch("setCaller", { caller: newCaller });
-    await store.dispatch("getSuggestedPersons");
+  await store.dispatch("setCaller", { caller: newCaller });
+  await store.dispatch("getSuggestedPersons");
 });
 </script>
 
 <style lang="scss" scoped>
 .go-back {
-    margin-right: auto;
+  margin-right: auto;
 }
 
 .sticky-form-buttons {
-    margin-top: 0px;
-    background: none;
+  margin-top: 0px;
+  background: none;
 }
 div.footer-ticket-main {
-    background: none repeat scroll 0 0 #cabb9f;
+  background: none repeat scroll 0 0 #cabb9f;
 }
 
 div.footer-ticket-details {
-    background: none repeat scroll 0 0 #efe2ca;
+  background: none repeat scroll 0 0 #efe2ca;
 }
 
 .fixed-bottom {
-    position: sticky;
-    top: 0;
-    overflow: hidden;
+  position: sticky;
+  top: 0;
+  overflow: hidden;
 }
 </style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddCommentComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddCommentComponent.vue
index c105dce5f..6cc3c42fe 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddCommentComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddCommentComponent.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="row">
-        <div class="col-12">
-            <comment-editor v-model="content" />
-        </div>
+  <div class="row">
+    <div class="col-12">
+      <comment-editor v-model="content" />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -11,16 +11,16 @@ import { ref, watch } from "vue";
 import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 const props = defineProps<{
-    modelValue?: string;
+  modelValue?: string;
 }>();
 
 const emit =
-    defineEmits<(e: "update:modelValue", value: string | undefined) => void>();
+  defineEmits<(e: "update:modelValue", value: string | undefined) => void>();
 
 const content = ref(props.modelValue);
 
 watch(content, (value) => {
-    emit("update:modelValue", value);
+  emit("update:modelValue", value);
 });
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeComponent.vue
index 1e17e6f87..085d62e49 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeComponent.vue
@@ -1,29 +1,29 @@
 <template>
-    <div class="col-12">
-        <span
-            v-for="userGroup in userGroupLevels"
-            :key="userGroup.id"
-            class="badge-user-group"
-            :style="`background-color: ${userGroup.backgroundColor}; color: ${userGroup.foregroundColor};`"
-        >
-            {{ userGroup.label.fr }}
-        </span>
-    </div>
-    <div class="col-12">
-        <span
-            v-for="userGroup in userGroups"
-            :key="userGroup.id"
-            class="badge-user-group"
-            :style="`background-color: ${userGroup.backgroundColor}; color: ${userGroup.foregroundColor};`"
-        >
-            {{ userGroup.label.fr }}
-        </span>
-    </div>
-    <div v-if="users.length > 0" class="col-12">
-        <span class="badge-user" v-for="user in users" :key="user.id">
-            <user-render-box-badge :user="user" />
-        </span>
-    </div>
+  <div class="col-12">
+    <span
+      v-for="userGroup in userGroupLevels"
+      :key="userGroup.id"
+      class="badge-user-group"
+      :style="`background-color: ${userGroup.backgroundColor}; color: ${userGroup.foregroundColor};`"
+    >
+      {{ userGroup.label.fr }}
+    </span>
+  </div>
+  <div class="col-12">
+    <span
+      v-for="userGroup in userGroups"
+      :key="userGroup.id"
+      class="badge-user-group"
+      :style="`background-color: ${userGroup.backgroundColor}; color: ${userGroup.foregroundColor};`"
+    >
+      {{ userGroup.label.fr }}
+    </span>
+  </div>
+  <div v-if="users.length > 0" class="col-12">
+    <span class="badge-user" v-for="user in users" :key="user.id">
+      <user-render-box-badge :user="user" />
+    </span>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -34,35 +34,34 @@ import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRen
 
 // Types
 import {
-    User,
-    UserGroup,
-    UserGroupOrUser,
+  User,
+  UserGroup,
+  UserGroupOrUser,
 } from "../../../../../../../ChillMainBundle/Resources/public/types";
 
 const props = defineProps<{ addressees: UserGroupOrUser[] }>();
 
 const userGroups = computed(
-    () =>
-        props.addressees.filter(
-            (addressee: UserGroupOrUser) =>
-                addressee.type == "user_group" && addressee.excludeKey == "",
-        ) as UserGroup[],
+  () =>
+    props.addressees.filter(
+      (addressee: UserGroupOrUser) =>
+        addressee.type == "user_group" && addressee.excludeKey == "",
+    ) as UserGroup[],
 );
 
 const userGroupLevels = computed(
-    () =>
-        props.addressees.filter(
-            (addressee: UserGroupOrUser) =>
-                addressee.type == "user_group" &&
-                addressee.excludeKey == "level",
-        ) as UserGroup[],
+  () =>
+    props.addressees.filter(
+      (addressee: UserGroupOrUser) =>
+        addressee.type == "user_group" && addressee.excludeKey == "level",
+    ) as UserGroup[],
 );
 
 const users = computed(
-    () =>
-        props.addressees.filter(
-            (addressee: UserGroupOrUser) => addressee.type == "user",
-        ) as User[],
+  () =>
+    props.addressees.filter(
+      (addressee: UserGroupOrUser) => addressee.type == "user",
+    ) as User[],
 );
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
index cff382f03..fc97772cb 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
@@ -1,25 +1,25 @@
 <template>
-    <div class="row">
-        <div class="col-12">
-            <vue-multiselect
-                name="selectMotive"
-                id="selectMotive"
-                label="label"
-                :custom-label="customLabel"
-                track-by="id"
-                open-direction="top"
-                :multiple="false"
-                :searchable="true"
-                :placeholder="trans(CHILL_TICKET_TICKET_SET_MOTIVE_LABEL)"
-                :select-label="trans(MULTISELECT_SELECT_LABEL)"
-                :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
-                :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
-                :options="motives"
-                v-model="motive"
-                class="mb-4"
-            />
-        </div>
+  <div class="row">
+    <div class="col-12">
+      <vue-multiselect
+        name="selectMotive"
+        id="selectMotive"
+        label="label"
+        :custom-label="customLabel"
+        track-by="id"
+        open-direction="top"
+        :multiple="false"
+        :searchable="true"
+        :placeholder="trans(CHILL_TICKET_TICKET_SET_MOTIVE_LABEL)"
+        :select-label="trans(MULTISELECT_SELECT_LABEL)"
+        :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
+        :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
+        :options="motives"
+        v-model="motive"
+        class="mb-4"
+      />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -31,41 +31,41 @@ import { Motive } from "../../../types";
 
 // Translations
 import {
-    trans,
-    CHILL_TICKET_TICKET_SET_MOTIVE_LABEL,
-    MULTISELECT_SELECT_LABEL,
-    MULTISELECT_DESELECT_LABEL,
-    MULTISELECT_SELECTED_LABEL,
+  trans,
+  CHILL_TICKET_TICKET_SET_MOTIVE_LABEL,
+  MULTISELECT_SELECT_LABEL,
+  MULTISELECT_DESELECT_LABEL,
+  MULTISELECT_SELECTED_LABEL,
 } from "translator";
 
 const props = defineProps<{
-    modelValue?: Motive;
-    motives: Motive[];
+  modelValue?: Motive;
+  motives: Motive[];
 }>();
 
 const emit =
-    defineEmits<(e: "update:modelValue", value: Motive | undefined) => void>();
+  defineEmits<(e: "update:modelValue", value: Motive | undefined) => void>();
 
 const motive = ref(props.modelValue);
 
 watch(motive, (val) => {
-    emit("update:modelValue", val);
+  emit("update:modelValue", val);
 });
 
 watch(
-    () => props.modelValue,
-    (val) => {
-        motive.value = val;
-    },
+  () => props.modelValue,
+  (val) => {
+    motive.value = val;
+  },
 );
 
 function customLabel(motive: Motive) {
-    return motive?.label?.fr ?? trans(CHILL_TICKET_TICKET_SET_MOTIVE_LABEL);
+  return motive?.label?.fr ?? trans(CHILL_TICKET_TICKET_SET_MOTIVE_LABEL);
 }
 </script>
 
 <style lang="scss" scoped>
 #selectMotive {
-    margin-bottom: 1.5em;
+  margin-bottom: 1.5em;
 }
 </style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/PersonsSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/PersonsSelectorComponent.vue
index 0e0a55b32..9d2dd9f6b 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/PersonsSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/PersonsSelectorComponent.vue
@@ -1,16 +1,16 @@
 <template>
-    <pick-entity
-        uniqid="ticket-person-selector"
-        :types="['person']"
-        :picked="selectedEntities"
-        :suggested="suggestedValues"
-        :multiple="false"
-        :removable-if-set="true"
-        :display-picked="true"
-        :label="trans(CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL)"
-        @add-new-entity="addNewEntity"
-        @remove-entity="removeEntity"
-    />
+  <pick-entity
+    uniqid="ticket-person-selector"
+    :types="['person']"
+    :picked="selectedEntities"
+    :suggested="suggestedValues"
+    :multiple="false"
+    :removable-if-set="true"
+    :display-picked="true"
+    :label="trans(CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL)"
+    @add-new-entity="addNewEntity"
+    @remove-entity="removeEntity"
+  />
 </template>
 
 <script setup lang="ts">
@@ -26,66 +26,65 @@ import { Entities } from "ChillPersonAssets/types";
 import { trans, CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL } from "translator";
 
 const props = defineProps<{
-    modelValue: Entities[];
-    suggested: Entities[];
+  modelValue: Entities[];
+  suggested: Entities[];
 }>();
 const emit = defineEmits<{
-    "update:modelValue": [value: Entities[]];
+  "update:modelValue": [value: Entities[]];
 }>();
 
 const selectedEntities = ref<Entities[]>([...props.modelValue]);
 const suggestedValues = ref<Entities[]>([...props.suggested]);
 
 watch(
-    () => [props.suggested, props.modelValue],
-    () => {
-        suggestedValues.value = props.suggested.filter(
-            (suggested: Entities) =>
-                !props.modelValue.some(
-                    (selected: Entities) =>
-                        suggested.id === selected.id &&
-                        suggested.type === selected.type,
-                ),
-        );
-    },
-    { immediate: true, deep: true },
+  () => [props.suggested, props.modelValue],
+  () => {
+    suggestedValues.value = props.suggested.filter(
+      (suggested: Entities) =>
+        !props.modelValue.some(
+          (selected: Entities) =>
+            suggested.id === selected.id && suggested.type === selected.type,
+        ),
+    );
+  },
+  { immediate: true, deep: true },
 );
 
 function addNewEntity({ entity }: { entity: Entities }) {
-    selectedEntities.value.push(entity);
-    emit("update:modelValue", selectedEntities.value);
+  selectedEntities.value.push(entity);
+  emit("update:modelValue", selectedEntities.value);
 }
 
 function removeEntity({ entity }: { entity: Entities }) {
-    const index = selectedEntities.value.findIndex(
-        (selectedEntity) => selectedEntity === entity,
-    );
-    if (index !== -1) {
-        selectedEntities.value.splice(index, 1);
-    }
-    emit("update:modelValue", selectedEntities.value);
+  const index = selectedEntities.value.findIndex(
+    (selectedEntity) => selectedEntity === entity,
+  );
+  if (index !== -1) {
+    selectedEntities.value.splice(index, 1);
+  }
+  emit("update:modelValue", selectedEntities.value);
 }
 </script>
 <style scoped lang="scss">
 ul.person-list {
-    list-style-type: none;
+  list-style-type: none;
 
-    & > li {
-        display: inline-block;
-        border: 1px solid transparent;
-        border-radius: 6px;
+  & > li {
+    display: inline-block;
+    border: 1px solid transparent;
+    border-radius: 6px;
 
-        button.remove-person {
-            opacity: 10%;
-        }
+    button.remove-person {
+      opacity: 10%;
     }
+  }
 
-    & > li:hover {
-        border: 1px solid white;
+  & > li:hover {
+    border: 1px solid white;
 
-        button.remove-person {
-            opacity: 100%;
-        }
+    button.remove-person {
+      opacity: 100%;
     }
+  }
 }
 </style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue
index f3b67e318..7a690e9b9 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="col-12">
-        <addressee-component :addressees="addresseeState.addressees" />
-    </div>
+  <div class="col-12">
+    <addressee-component :addressees="addresseeState.addressees" />
+  </div>
 </template>
 <script setup lang="ts">
 // Types
@@ -11,7 +11,7 @@ import { AddresseeState } from "../../../types";
 import AddresseeComponent from "./AddresseeComponent.vue";
 
 defineProps<{
-    addresseeState: AddresseeState;
+  addresseeState: AddresseeState;
 }>();
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue
index aad593b23..63b13b8dc 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="col-12">
-        <blockquote class="chill-user-quote">
-            <p v-html="convertMarkdownToHtml(commentHistory.content)"></p>
-        </blockquote>
-    </div>
+  <div class="col-12">
+    <blockquote class="chill-user-quote">
+      <p v-html="convertMarkdownToHtml(commentHistory.content)"></p>
+    </blockquote>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -16,30 +16,30 @@ import { Comment } from "../../../types";
 defineProps<{ commentHistory: Comment }>();
 
 const preprocess = (markdown: string): string => {
-    return markdown;
+  return markdown;
 };
 
 const postprocess = (html: string): string => {
-    DOMPurify.addHook("afterSanitizeAttributes", (node: Element) => {
-        if ("target" in node) {
-            node.setAttribute("target", "_blank");
-            node.setAttribute("rel", "noopener noreferrer");
-        }
-        if (
-            !node.hasAttribute("target") &&
-            (node.hasAttribute("xlink:href") || node.hasAttribute("href"))
-        ) {
-            node.setAttribute("xlink:show", "new");
-        }
-    });
+  DOMPurify.addHook("afterSanitizeAttributes", (node: Element) => {
+    if ("target" in node) {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+    if (
+      !node.hasAttribute("target") &&
+      (node.hasAttribute("xlink:href") || node.hasAttribute("href"))
+    ) {
+      node.setAttribute("xlink:show", "new");
+    }
+  });
 
-    return DOMPurify.sanitize(html);
+  return DOMPurify.sanitize(html);
 };
 
 const convertMarkdownToHtml = (markdown: string): string => {
-    marked.use({ hooks: { postprocess, preprocess } });
-    const rawHtml = marked(markdown) as string;
-    return rawHtml;
+  marked.use({ hooks: { postprocess, preprocess } });
+  const rawHtml = marked(markdown) as string;
+  return rawHtml;
 };
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCreateComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCreateComponent.vue
index 5f22875f9..fc67467e3 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCreateComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCreateComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <p>Ticket créé par {{ props.by.text }}</p>
+  <p>Ticket créé par {{ props.by.text }}</p>
 </template>
 
 <script setup lang="ts">
@@ -7,7 +7,7 @@
 import { User } from "../../../../../../../ChillMainBundle/Resources/public/types";
 
 interface TicketHistoryCreateComponentConfig {
-    by: User;
+  by: User;
 }
 
 const props = defineProps<TicketHistoryCreateComponentConfig>();
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryEmergencyComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryEmergencyComponent.vue
index 00f275f37..3efb42333 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryEmergencyComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryEmergencyComponent.vue
@@ -1,15 +1,15 @@
 <template>
-    <div>
-        <span
-            class="badge rounded-pill me-1 mx-2"
-            :class="{
-                'bg-danger': new_emergency === 'yes',
-                'bg-secondary': new_emergency === 'no',
-            }"
-        >
-            {{ trans(CHILL_TICKET_TICKET_BANNER_EMERGENCY) }}
-        </span>
-    </div>
+  <div>
+    <span
+      class="badge rounded-pill me-1 mx-2"
+      :class="{
+        'bg-danger': new_emergency === 'yes',
+        'bg-secondary': new_emergency === 'no',
+      }"
+    >
+      {{ trans(CHILL_TICKET_TICKET_BANNER_EMERGENCY) }}
+    </span>
+  </div>
 </template>
 <script setup lang="ts">
 import { trans, CHILL_TICKET_TICKET_BANNER_EMERGENCY } from "translator";
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryMotiveComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryMotiveComponent.vue
index 167c43fc3..34f2c6a9c 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryMotiveComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryMotiveComponent.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="col-12 fw-bolder">
-        {{ motiveHistory.motive.label.fr }}
-    </div>
+  <div class="col-12 fw-bolder">
+    {{ motiveHistory.motive.label.fr }}
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryStateComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryStateComponent.vue
index 4527bd72c..a24c56d7b 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryStateComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryStateComponent.vue
@@ -1,19 +1,19 @@
 <template>
-    <span
-        class="badge rounded-pill me-1 mx-2"
-        :class="{
-            'bg-chill-red': props.new_state == 'closed',
-            'bg-chill-green': props.new_state == 'open',
-        }"
-    >
-        <template v-if="props.new_state == 'open'">
-            {{ trans(CHILL_TICKET_TICKET_BANNER_OPEN) }}
-        </template>
-        <template v-else-if="props.new_state == 'closed'">
-            {{ trans(CHILL_TICKET_TICKET_BANNER_CLOSED) }}
-        </template>
-    </span>
-    <!--
+  <span
+    class="badge rounded-pill me-1 mx-2"
+    :class="{
+      'bg-chill-red': props.new_state == 'closed',
+      'bg-chill-green': props.new_state == 'open',
+    }"
+  >
+    <template v-if="props.new_state == 'open'">
+      {{ trans(CHILL_TICKET_TICKET_BANNER_OPEN) }}
+    </template>
+    <template v-else-if="props.new_state == 'closed'">
+      {{ trans(CHILL_TICKET_TICKET_BANNER_CLOSED) }}
+    </template>
+  </span>
+  <!--
     <span
         class="text-chill-green mx-2"
         style="
@@ -46,9 +46,9 @@ import { StateChange } from "../../../types";
 
 // Translations
 import {
-    trans,
-    CHILL_TICKET_TICKET_BANNER_OPEN,
-    CHILL_TICKET_TICKET_BANNER_CLOSED,
+  trans,
+  CHILL_TICKET_TICKET_BANNER_OPEN,
+  CHILL_TICKET_TICKET_BANNER_CLOSED,
 } from "translator";
 const props = defineProps<StateChange>();
 </script>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
index 2d532b8fd..2e66d5a8e 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
@@ -1,22 +1,22 @@
 <template>
-    <div class="d-flex justify-content-end">
-        <div class="btn-group" @click="handleClick">
-            <button
-                type="button"
-                class="btn btn-light dropdown-toggle"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-            >
-                {{ trans(CHILL_TICKET_TICKET_PREVIOUS_TICKETS) }}
-                <span
-                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-chill-green"
-                >
-                    {{ tickets.length }}
-                    <span class="visually-hidden">Tickets</span>
-                </span>
-            </button>
-        </div>
+  <div class="d-flex justify-content-end">
+    <div class="btn-group" @click="handleClick">
+      <button
+        type="button"
+        class="btn btn-light dropdown-toggle"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        {{ trans(CHILL_TICKET_TICKET_PREVIOUS_TICKETS) }}
+        <span
+          class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-chill-green"
+        >
+          {{ tickets.length }}
+          <span class="visually-hidden">Tickets</span>
+        </span>
+      </button>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,7 +29,7 @@ import { Ticket } from "../../../types";
 defineProps<{ tickets: Ticket[] }>();
 
 function handleClick() {
-    alert("Sera disponible plus tard");
+  alert("Sera disponible plus tard");
 }
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ToggleFlags.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ToggleFlags.vue
index e9472db33..f4d4c4efa 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ToggleFlags.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ToggleFlags.vue
@@ -1,16 +1,16 @@
 <template>
-    <span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
-        <button
-            class="badge rounded-pill me-1"
-            :class="{
-                'bg-danger': isEmergency,
-                'bg-secondary': !isEmergency,
-            }"
-            @click="toggleEmergency"
-        >
-            {{ trans(CHILL_TICKET_TICKET_BANNER_EMERGENCY) }}
-        </button>
-    </span>
+  <span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
+    <button
+      class="badge rounded-pill me-1"
+      :class="{
+        'bg-danger': isEmergency,
+        'bg-secondary': !isEmergency,
+      }"
+      @click="toggleEmergency"
+    >
+      {{ trans(CHILL_TICKET_TICKET_BANNER_EMERGENCY) }}
+    </button>
+  </span>
 </template>
 
 <script lang="ts" setup>
@@ -26,42 +26,42 @@ const isEmergency = computed(() => store.getters.isEmergency);
 
 // Methods
 function toggleEmergency() {
-    store
-        .dispatch("toggleEmergency", isEmergency.value ? "no" : "yes")
-        .catch(({ name, violations }) => {
-            if (name === "ValidationException" || name === "AccessException") {
-                violations.forEach((violation: string) =>
-                    toast.open({ message: violation }),
-                );
-            } else {
-                toast.open({ message: "An error occurred" });
-            }
-        });
+  store
+    .dispatch("toggleEmergency", isEmergency.value ? "no" : "yes")
+    .catch(({ name, violations }) => {
+      if (name === "ValidationException" || name === "AccessException") {
+        violations.forEach((violation: string) =>
+          toast.open({ message: violation }),
+        );
+      } else {
+        toast.open({ message: "An error occurred" });
+      }
+    });
 }
 </script>
 
 <style lang="scss" scoped>
 a.flag-toggle {
+  color: white;
+  cursor: pointer;
+  &:hover {
     color: white;
-    cursor: pointer;
-    &:hover {
-        color: white;
-        text-decoration: underline;
-        border-radius: 20px;
-    }
-    i {
-        margin: auto 0.4em;
-    }
-    span.on {
-        font-weight: bolder;
-    }
+    text-decoration: underline;
+    border-radius: 20px;
+  }
+  i {
+    margin: auto 0.4em;
+  }
+  span.on {
+    font-weight: bolder;
+  }
 }
 button.badge {
-    &.bg-secondary {
-        opacity: 0.5;
-        &:hover {
-            opacity: 0.7;
-        }
+  &.bg-secondary {
+    opacity: 0.5;
+    &:hover {
+      opacity: 0.7;
     }
+  }
 }
 </style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
index 03696e52a..a33de7b50 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
@@ -7,18 +7,19 @@ import "vue-toast-notification/dist/theme-sugar.css";
 import { store } from "./store";
 
 declare global {
-    interface Window {
-        initialTicket: string;
-        ticketPersonPerTicket: 'one'|'multi';
-    }
+  interface Window {
+    initialTicket: string;
+    ticketPersonPerTicket: "one" | "multi";
+  }
 }
 
 const _app = createApp({
-    template: "<app></app>",
+  template: "<app></app>",
 });
 
-_app.use(store)
-    .use(VueToast)
-    .provide("toast", _app.config.globalProperties.$toast)
-    .component("app", App)
-    .mount("#ticketRoot");
+_app
+  .use(store)
+  .use(VueToast)
+  .provide("toast", _app.config.globalProperties.$toast)
+  .component("app", App)
+  .mount("#ticketRoot");
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/index.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/index.ts
index b300c682c..6ddcdb4b3 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/index.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/index.ts
@@ -6,19 +6,19 @@ import { State as AddresseeStates, moduleAddressee } from "./modules/addressee";
 import { State as PersonsState, modulePersons } from "./modules/persons";
 
 export interface RootState {
-    motive: MotiveStates;
-    ticket: TicketStates;
-    comment: CommentStates;
-    addressee: AddresseeStates;
-    persons: PersonsState;
+  motive: MotiveStates;
+  ticket: TicketStates;
+  comment: CommentStates;
+  addressee: AddresseeStates;
+  persons: PersonsState;
 }
 
 export const store = createStore<RootState>({
-    modules: {
-        motive: moduleMotive,
-        ticket: moduleTicket,
-        comment: moduleComment,
-        addressee: moduleAddressee,
-        persons: modulePersons,
-    },
+  modules: {
+    motive: moduleMotive,
+    ticket: moduleTicket,
+    comment: moduleComment,
+    addressee: moduleAddressee,
+    persons: modulePersons,
+  },
 });
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/addressee.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/addressee.ts
index a6c00253a..09917ae25 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/addressee.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/addressee.ts
@@ -1,88 +1,86 @@
 import {
-    fetchResults,
-    makeFetch,
+  fetchResults,
+  makeFetch,
 } from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 
 import { Module } from "vuex";
 import { RootState } from "..";
 
 import {
-    ApiException,
-    User,
-    UserGroup,
-    UserGroupOrUser,
+  ApiException,
+  User,
+  UserGroup,
+  UserGroupOrUser,
 } from "../../../../../../../../ChillMainBundle/Resources/public/types";
 
 export interface State {
-    userGroups: UserGroup[];
-    users: User[];
+  userGroups: UserGroup[];
+  users: User[];
 }
 
 export const moduleAddressee: Module<State, RootState> = {
-    state: () => ({
-        userGroups: [] as UserGroup[],
-        users: [] as User[],
-    }),
-    getters: {
-        getUserGroups(state) {
-            return state.userGroups;
-        },
-        getUsers(state) {
-            return state.users;
-        },
+  state: () => ({
+    userGroups: [] as UserGroup[],
+    users: [] as User[],
+  }),
+  getters: {
+    getUserGroups(state) {
+      return state.userGroups;
     },
-    mutations: {
-        setUserGroups(state, userGroups) {
-            state.userGroups = userGroups;
-        },
-        setUsers(state, users) {
-            state.users = users;
-        },
+    getUsers(state) {
+      return state.users;
+    },
+  },
+  mutations: {
+    setUserGroups(state, userGroups) {
+      state.userGroups = userGroups;
+    },
+    setUsers(state, users) {
+      state.users = users;
+    },
+  },
+  actions: {
+    fetchUserGroups({ commit }) {
+      try {
+        fetchResults("/api/1.0/main/user-group.json").then((results) => {
+          commit("setUserGroups", results);
+        });
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
+    },
+    fetchUsers({ commit }) {
+      try {
+        fetchResults("/api/1.0/main/user.json").then((results) => {
+          commit("setUsers", results);
+        });
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
     },
-    actions: {
-        fetchUserGroups({ commit }) {
-            try {
-                fetchResults("/api/1.0/main/user-group.json").then(
-                    (results) => {
-                        commit("setUserGroups", results);
-                    },
-                );
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
-        fetchUsers({ commit }) {
-            try {
-                fetchResults("/api/1.0/main/user.json").then((results) => {
-                    commit("setUsers", results);
-                });
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
 
-        async setAdressees(
-            { commit },
-            datas: { ticketId: number; addressees: UserGroupOrUser[] },
-        ) {
-            const { ticketId, addressees } = datas;
-            try {
-                const result = await makeFetch(
-                    "POST",
-                    `/api/1.0/ticket/${ticketId}/addressees/set`,
-                    {
-                        addressees: addressees.map((addressee) => {
-                            return { id: addressee.id, type: addressee.type };
-                        }),
-                    },
-                );
-                commit("setTicket", result);
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
+    async setAdressees(
+      { commit },
+      datas: { ticketId: number; addressees: UserGroupOrUser[] },
+    ) {
+      const { ticketId, addressees } = datas;
+      try {
+        const result = await makeFetch(
+          "POST",
+          `/api/1.0/ticket/${ticketId}/addressees/set`,
+          {
+            addressees: addressees.map((addressee) => {
+              return { id: addressee.id, type: addressee.type };
+            }),
+          },
+        );
+        commit("setTicket", result);
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
     },
+  },
 };
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/comment.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/comment.ts
index 2e56ff28a..a786299f7 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/comment.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/comment.ts
@@ -7,32 +7,32 @@ import { Comment } from "../../../../types";
 import { ApiException } from "../../../../../../../../ChillMainBundle/Resources/public/types";
 
 export interface State {
-    comments: Comment[];
+  comments: Comment[];
 }
 
 export const moduleComment: Module<State, RootState> = {
-    state: () => ({
-        comments: [] as Comment[],
-    }),
-    getters: {},
-    mutations: {},
-    actions: {
-        async createComment(
-            { commit },
-            datas: { ticketId: number; content: Comment["content"] },
-        ) {
-            const { ticketId, content } = datas;
-            try {
-                const result = await makeFetch(
-                    "POST",
-                    `/api/1.0/ticket/${ticketId}/comment/add`,
-                    { content },
-                );
-                commit("setTicket", result);
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
+  state: () => ({
+    comments: [] as Comment[],
+  }),
+  getters: {},
+  mutations: {},
+  actions: {
+    async createComment(
+      { commit },
+      datas: { ticketId: number; content: Comment["content"] },
+    ) {
+      const { ticketId, content } = datas;
+      try {
+        const result = await makeFetch(
+          "POST",
+          `/api/1.0/ticket/${ticketId}/comment/add`,
+          { content },
+        );
+        commit("setTicket", result);
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
     },
+  },
 };
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts
index f8e775232..c2bafb97e 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts
@@ -1,6 +1,6 @@
 import {
-    fetchResults,
-    makeFetch,
+  fetchResults,
+  makeFetch,
 } from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 
 import { Module } from "vuex";
@@ -10,57 +10,57 @@ import { Motive } from "../../../../types";
 import { ApiException } from "../../../../../../../../ChillMainBundle/Resources/public/types";
 
 export interface State {
-    motives: Motive[];
+  motives: Motive[];
 }
 
 export const moduleMotive: Module<State, RootState> = {
-    state: () => ({
-        motives: [] as Motive[],
-    }),
-    getters: {
-        getMotives(state) {
-            return state.motives;
-        },
+  state: () => ({
+    motives: [] as Motive[],
+  }),
+  getters: {
+    getMotives(state) {
+      return state.motives;
     },
-    mutations: {
-        setMotives(state, motives) {
-            state.motives = motives;
-        },
+  },
+  mutations: {
+    setMotives(state, motives) {
+      state.motives = motives;
+    },
+  },
+  actions: {
+    async fetchMotives({ commit }) {
+      try {
+        const results = (await fetchResults(
+          "/api/1.0/ticket/motive.json",
+        )) as Motive[];
+        commit("setMotives", results);
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
     },
-    actions: {
-        async fetchMotives({ commit }) {
-            try {
-                const results = (await fetchResults(
-                    "/api/1.0/ticket/motive.json",
-                )) as Motive[];
-                commit("setMotives", results);
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
 
-        async createMotive(
-            { commit },
-            datas: { ticketId: number; motive: Motive },
-        ) {
-            const { ticketId, motive } = datas;
-            try {
-                const result = await makeFetch(
-                    "POST",
-                    `/api/1.0/ticket/${ticketId}/motive/set`,
-                    {
-                        motive: {
-                            id: motive.id,
-                            type: motive.type,
-                        },
-                    },
-                );
-                commit("setTicket", result);
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
+    async createMotive(
+      { commit },
+      datas: { ticketId: number; motive: Motive },
+    ) {
+      const { ticketId, motive } = datas;
+      try {
+        const result = await makeFetch(
+          "POST",
+          `/api/1.0/ticket/${ticketId}/motive/set`,
+          {
+            motive: {
+              id: motive.id,
+              type: motive.type,
+            },
+          },
+        );
+        commit("setTicket", result);
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
     },
+  },
 };
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts
index be09a41a8..ae93039fb 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts
@@ -6,81 +6,81 @@ import { RootState } from "..";
 import { Ticket } from "../../../../types";
 
 export interface State {
-    persons: Person[];
+  persons: Person[];
 }
 
 export const modulePersons: Module<State, RootState> = {
-    state: () => ({
-        persons: [] as Person[],
-    }),
-    getters: {
-        getPersons(state) {
-            return state.persons;
-        },
+  state: () => ({
+    persons: [] as Person[],
+  }),
+  getters: {
+    getPersons(state) {
+      return state.persons;
     },
-    mutations: {
-        setPersons(state, persons: Person[]) {
-            state.persons = persons;
-        },
+  },
+  mutations: {
+    setPersons(state, persons: Person[]) {
+      state.persons = persons;
     },
-    actions: {
-        async setPersons(
-            { commit, rootState: RootState },
-            payload: { persons: Person[] },
-        ) {
-            const persons = payload.persons.map((person: Person) => ({
-                id: person.id,
-                type: person.type,
-            }));
-            try {
-                const result: Ticket = await makeFetch(
-                    "POST",
-                    `/api/1.0/ticket/${RootState.ticket.ticket.id}/persons/set`,
-                    { persons },
-                );
-                commit("setTicket", result);
+  },
+  actions: {
+    async setPersons(
+      { commit, rootState: RootState },
+      payload: { persons: Person[] },
+    ) {
+      const persons = payload.persons.map((person: Person) => ({
+        id: person.id,
+        type: person.type,
+      }));
+      try {
+        const result: Ticket = await makeFetch(
+          "POST",
+          `/api/1.0/ticket/${RootState.ticket.ticket.id}/persons/set`,
+          { persons },
+        );
+        commit("setTicket", result);
 
-                return Promise.resolve();
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
-        async setCaller(
-            { commit, rootState: RootState },
-            payload: { caller: Person | null },
-        ) {
-            try {
-                const caller = payload.caller
-                    ? {
-                          id: payload.caller.id,
-                          type: payload.caller.type,
-                      }
-                    : null;
-                const result: Ticket = await makeFetch(
-                    "POST",
-                    `/api/1.0/ticket/ticket/${RootState.ticket.ticket.id}/set-caller`,
-                    { caller },
-                );
-                commit("setTicket", result as Ticket);
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
-
-        async getSuggestedPersons({ commit, rootState: RootState }) {
-            try {
-                const ticketId = RootState.ticket.ticket.id;
-                const result: Person[] = await makeFetch(
-                    "GET",
-                    `/api/1.0/ticket/ticket/${ticketId}/suggest-person`,
-                );
-                commit("setPersons", result);
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
+        return Promise.resolve();
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
     },
+    async setCaller(
+      { commit, rootState: RootState },
+      payload: { caller: Person | null },
+    ) {
+      try {
+        const caller = payload.caller
+          ? {
+              id: payload.caller.id,
+              type: payload.caller.type,
+            }
+          : null;
+        const result: Ticket = await makeFetch(
+          "POST",
+          `/api/1.0/ticket/ticket/${RootState.ticket.ticket.id}/set-caller`,
+          { caller },
+        );
+        commit("setTicket", result as Ticket);
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
+    },
+
+    async getSuggestedPersons({ commit, rootState: RootState }) {
+      try {
+        const ticketId = RootState.ticket.ticket.id;
+        const result: Person[] = await makeFetch(
+          "GET",
+          `/api/1.0/ticket/ticket/${ticketId}/suggest-person`,
+        );
+        commit("setPersons", result);
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
+    },
+  },
 };
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket.ts
index 25acaeaed..a842d5c6e 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket.ts
@@ -6,89 +6,86 @@ import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import { ApiException } from "../../../../../../../../ChillMainBundle/Resources/public/types";
 
 export interface State {
-    ticket: Ticket;
-    action_icons: object;
+  ticket: Ticket;
+  action_icons: object;
 }
 
 export const moduleTicket: Module<State, RootState> = {
-    state: () => ({
-        ticket: {} as Ticket,
-        action_icons: {
-            add_person: "fa fa-user-plus",
-            add_comment: "fa fa-comment",
-            set_motive: "fa fa-paint-brush",
-            addressees_state: "fa fa-paper-plane",
-            persons_state: "fa fa-user",
-            set_caller: "fa fa-phone",
-            state_change: "",
-            emergency_change: "",
-        },
-    }),
-    getters: {
-        isOpen(state) {
-            return state.ticket.currentState === "open";
-        },
-        isEmergency(state) {
-            return state.ticket.emergency == "yes" ? true : false;
-        },
-        getTicket(state) {
-            state.ticket.history = state.ticket.history.sort((a, b) =>
-                b.at.datetime.localeCompare(a.at.datetime),
-            );
-            return state.ticket;
-        },
+  state: () => ({
+    ticket: {} as Ticket,
+    action_icons: {
+      add_person: "fa fa-user-plus",
+      add_comment: "fa fa-comment",
+      set_motive: "fa fa-paint-brush",
+      addressees_state: "fa fa-paper-plane",
+      persons_state: "fa fa-user",
+      set_caller: "fa fa-phone",
+      state_change: "",
+      emergency_change: "",
+    },
+  }),
+  getters: {
+    isOpen(state) {
+      return state.ticket.currentState === "open";
+    },
+    isEmergency(state) {
+      return state.ticket.emergency == "yes" ? true : false;
+    },
+    getTicket(state) {
+      state.ticket.history = state.ticket.history.sort((a, b) =>
+        b.at.datetime.localeCompare(a.at.datetime),
+      );
+      return state.ticket;
+    },
 
-        getActionIcons(state) {
-            return state.action_icons;
-        },
-        getDistinctAddressesHistory(state) {
-            return state.ticket.history;
-        },
+    getActionIcons(state) {
+      return state.action_icons;
     },
-    mutations: {
-        setTicket(state, ticket: Ticket) {
-            state.ticket = ticket;
-        },
+    getDistinctAddressesHistory(state) {
+      return state.ticket.history;
     },
-    actions: {
-        async closeTicket({ commit, state }) {
-            try {
-                const result: Ticket = await makeFetch(
-                    "POST",
-                    `/api/1.0/ticket/ticket/${state.ticket.id}/close`,
-                );
-                commit("setTicket", result as Ticket);
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
-        async reopenTicket({ commit, state }) {
-            try {
-                const result: Ticket = await makeFetch(
-                    "POST",
-                    `/api/1.0/ticket/ticket/${state.ticket.id}/open`,
-                );
-                commit("setTicket", result as Ticket);
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
-        async toggleEmergency(
-            { commit, state },
-            emergency: TicketEmergencyState,
-        ) {
-            try {
-                const result: Ticket = await makeFetch(
-                    "POST",
-                    `/api/1.0/ticket/ticket/${state.ticket.id}/emergency/${emergency}`,
-                );
-                commit("setTicket", result as Ticket);
-            } catch (e: unknown) {
-                const error = e as ApiException;
-                throw error.name;
-            }
-        },
+  },
+  mutations: {
+    setTicket(state, ticket: Ticket) {
+      state.ticket = ticket;
     },
+  },
+  actions: {
+    async closeTicket({ commit, state }) {
+      try {
+        const result: Ticket = await makeFetch(
+          "POST",
+          `/api/1.0/ticket/ticket/${state.ticket.id}/close`,
+        );
+        commit("setTicket", result as Ticket);
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
+    },
+    async reopenTicket({ commit, state }) {
+      try {
+        const result: Ticket = await makeFetch(
+          "POST",
+          `/api/1.0/ticket/ticket/${state.ticket.id}/open`,
+        );
+        commit("setTicket", result as Ticket);
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
+    },
+    async toggleEmergency({ commit, state }, emergency: TicketEmergencyState) {
+      try {
+        const result: Ticket = await makeFetch(
+          "POST",
+          `/api/1.0/ticket/ticket/${state.ticket.id}/emergency/${emergency}`,
+        );
+        commit("setTicket", result as Ticket);
+      } catch (e: unknown) {
+        const error = e as ApiException;
+        throw error.name;
+      }
+    },
+  },
 };
diff --git a/src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index.ts b/src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index.ts
index 584fac047..057ea6060 100644
--- a/src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index.ts
+++ b/src/Bundle/ChillWopiBundle/src/Resources/public/module/pending/index.ts
@@ -2,39 +2,39 @@ import { is_object_ready } from "ChillDocStoreAssets/vuejs/StoredObjectButton/he
 import { StoredObject } from "ChillDocStoreAssets/types";
 
 declare global {
-    interface Window {
-        stored_object: string | undefined;
-    }
+  interface Window {
+    stored_object: string | undefined;
+  }
 }
 
 async function reload_if_needed(
-    stored_object: StoredObject,
-    i: number,
+  stored_object: StoredObject,
+  i: number,
 ): Promise<void> {
-    const current_status = await is_object_ready(stored_object);
+  const current_status = await is_object_ready(stored_object);
 
-    if (stored_object.status !== current_status.status) {
-        window.location.reload();
-    }
-    wait_before_reload(stored_object, i + 1);
-    return Promise.resolve();
+  if (stored_object.status !== current_status.status) {
+    window.location.reload();
+  }
+  wait_before_reload(stored_object, i + 1);
+  return Promise.resolve();
 }
 
 function wait_before_reload(stored_object: StoredObject, i: number): void {
-    /**
-     * value of the timeout. Set to 5 sec during the first 10 minutes, then every 1 minute
-     */
-    const timeout = i < 1200 ? 5000 : 60000;
+  /**
+   * value of the timeout. Set to 5 sec during the first 10 minutes, then every 1 minute
+   */
+  const timeout = i < 1200 ? 5000 : 60000;
 
-    setTimeout(reload_if_needed, timeout, stored_object, i);
+  setTimeout(reload_if_needed, timeout, stored_object, i);
 }
 
 window.addEventListener("DOMContentLoaded", async function () {
-    if (undefined === window.stored_object) {
-        console.error("window.stored_object is undefined");
-        throw Error("window.stored_object is undefined");
-    }
+  if (undefined === window.stored_object) {
+    console.error("window.stored_object is undefined");
+    throw Error("window.stored_object is undefined");
+  }
 
-    const stored_object = JSON.parse(window.stored_object) as StoredObject;
-    reload_if_needed(stored_object, 0);
+  const stored_object = JSON.parse(window.stored_object) as StoredObject;
+  reload_if_needed(stored_object, 0);
 });
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 8989854c7..e236dd9b8 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,7 +1,7 @@
 declare module "*.vue" {
-    import { defineComponent } from "vue";
+  import { defineComponent } from "vue";
 
-    const Component: ReturnType<typeof defineComponent>;
+  const Component: ReturnType<typeof defineComponent>;
 
-    export default Component;
+  export default Component;
 }
diff --git a/src/vue-multiselect.d.ts b/src/vue-multiselect.d.ts
index efce40fdc..a463890b5 100644
--- a/src/vue-multiselect.d.ts
+++ b/src/vue-multiselect.d.ts
@@ -1,14 +1,14 @@
 declare module "vue-multiselect" {
-    import { defineComponent } from "vue";
+  import { defineComponent } from "vue";
 
-    export interface VueMultiselectProps<T> {
-        options: T;
-        searchable: boolean;
-        trackBy: keyof T;
-        label: keyof T;
-    }
+  export interface VueMultiselectProps<T> {
+    options: T;
+    searchable: boolean;
+    trackBy: keyof T;
+    label: keyof T;
+  }
 
-    const Component: ReturnType<typeof defineComponent<VueMultiselectProps<T>>>;
+  const Component: ReturnType<typeof defineComponent<VueMultiselectProps<T>>>;
 
-    export default Component;
+  export default Component;
 }
diff --git a/src/vuex.d.ts b/src/vuex.d.ts
index 1edfe4fa9..ddb1d87c1 100644
--- a/src/vuex.d.ts
+++ b/src/vuex.d.ts
@@ -1,6 +1,6 @@
 declare module "vuex" {
-    export * from "vuex/types/index.d.ts";
-    export * from "vuex/types/helpers.d.ts";
-    export * from "vuex/types/logger.d.ts";
-    export * from "vuex/types/vue.d.ts";
+  export * from "vuex/types/index.d.ts";
+  export * from "vuex/types/helpers.d.ts";
+  export * from "vuex/types/logger.d.ts";
+  export * from "vuex/types/vue.d.ts";
 }