first eslint corrections

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue

@@ -1,7 +1,7 @@
 <template>
-   <concerned-groups v-if="hasPerson"></concerned-groups>
+  <concerned-groups v-if="hasPerson" />
-   <social-issues-acc v-if="hasSocialIssues"></social-issues-acc>
+  <social-issues-acc v-if="hasSocialIssues" />
-   <location v-if="hasLocation"></location>
+  <location v-if="hasLocation" />
 </template>
 
 <script>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue

@@ -1,19 +1,31 @@
 <template>
-   <teleport to="#add-persons" v-if="isComponentVisible">
+  <teleport
-
+    to="#add-persons"
-      <div class="flex-bloc concerned-groups" :class="getContext">
+    v-if="isComponentVisible"
+  >
+    <div
+      class="flex-bloc concerned-groups"
+      :class="getContext"
+    >
       <persons-bloc
         v-for="bloc in contextPersonsBlocs"
-               v-bind:key="bloc.key"
+        :key="bloc.key"
-               v-bind:bloc="bloc"
+        :bloc="bloc"
-               v-bind:blocWidth="getBlocWidth"
+        :bloc-width="getBlocWidth"
-               v-bind:setPersonsInBloc="setPersonsInBloc">
+        :set-persons-in-bloc="setPersonsInBloc"
-         </persons-bloc>
+      />
     </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}`">
+        <li
-                  <person-text v-if="p.type === 'person'" :person="p"></person-text>
+          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>
@@ -22,16 +34,15 @@
     <ul class="record_actions">
       <li class="add-persons">
         <add-persons
-               buttonTitle="activity.add_persons"
+          button-title="activity.add_persons"
-               modalTitle="activity.add_persons"
+          modal-title="activity.add_persons"
-               v-bind:key="addPersons.key"
+          :key="addPersons.key"
-               v-bind:options="addPersonsOptions"
+          :options="addPersonsOptions"
-               @addNewPersons="addNewPersons"
+          @add-new-persons="addNewPersons"
-               ref="addPersons">
+          ref="addPersons"
-            </add-persons>
+        />
       </li>
     </ul>
-
   </teleport>
 </template>
 

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue

@@ -1,8 +1,14 @@
 <template>
   <li>
-      <span :title="person.text" @click.prevent="$emit('remove', person)">
+    <span
+      :title="person.text"
+      @click.prevent="$emit('remove', person)"
+    >
       <span class="chill_denomination">
-            <person-text :person="person" :isCut="true"></person-text>
+        <person-text
+          :person="person"
+          :is-cut="true"
+        />
       </span>
     </span>
   </li>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue

@@ -1,5 +1,8 @@
 <template>
-   <div class="item-bloc" :style="{ 'flex-basis': blocWidth }">
+  <div
+    class="item-bloc"
+    :style="{ 'flex-basis': blocWidth }"
+  >
     <div class="item-row">
       <div class="item-col">
         <h4>{{ $t(bloc.title) }}</h4>
@@ -8,10 +11,10 @@
         <ul class="list-suggest remove-items">
           <person-badge
             v-for="person in bloc.persons"
-                  v-bind:key="person.id"
+            :key="person.id"
-                  v-bind:person="person"
+            :person="person"
-                  @remove="removePerson">
+            @remove="removePerson"
-               </person-badge>
+          />
         </ul>
       </div>
     </div>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue

@@ -22,9 +22,8 @@
           group-values="locations"
           group-label="locationGroup"
           v-model="location"
-                >
+        />
-                </VueMultiselect>
+        <new-location :available-locations="availableLocations" />
-                <new-location v-bind:availableLocations="availableLocations"></new-location>
       </div>
     </div>
   </teleport>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue

@@ -2,32 +2,61 @@
   <div>
     <ul class="record_actions">
       <li>
-                <a class="btn btn-sm btn-create" @click="openModal">
+        <a
+          class="btn btn-sm btn-create"
+          @click="openModal"
+        >
           {{ $t('activity.create_new_location') }}
         </a>
       </li>
     </ul>
 
     <teleport to="body">
-            <modal v-if="modal.showModal"
+      <modal
-                :modalDialogClass="modal.modalDialogClass"
+        v-if="modal.showModal"
-                @close="modal.showModal = false">
+        :modal-dialog-class="modal.modalDialogClass"
-
+        @close="modal.showModal = false"
-                <template v-slot:header>
+      >
-                    <h3 class="modal-title">{{ $t('activity.create_new_location') }}</h3>
+        <template #header>
+          <h3 class="modal-title">
+            {{ $t('activity.create_new_location') }}
+          </h3>
         </template>
-                <template v-slot:body>
+        <template #body>
           <form>
-                        <div class="alert alert-warning" v-if="errors.length">
+            <div
+              class="alert alert-warning"
+              v-if="errors.length"
+            >
               <ul>
-                                <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
+                <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">
+              <select
-                                <option selected disabled value="">{{ $t('activity.choose_location_type') }}</option>
+                class="form-select form-select-lg"
-                                <option v-for="t in locationTypes" :value="t" :key="t.id">
+                id="type"
+                required
+                v-model="selectType"
+              >
+                <option
+                  selected
+                  disabled
+                  value=""
+                >
+                  {{ $t('activity.choose_location_type') }}
+                </option>
+                <option
+                  v-for="t in locationTypes"
+                  :value="t"
+                  :key="t.id"
+                >
                   {{ t.title.fr }}
                 </option>
               </select>
@@ -35,41 +64,69 @@
             </div>
 
             <div class="form-floating mb-3">
-                            <input class="form-control form-control-lg" id="name" v-model="inputName" placeholder />
+              <input
+                class="form-control form-control-lg"
+                id="name"
+                v-model="inputName"
+                placeholder
+              >
               <label for="name">{{ $t('activity.location_fields.name') }}</label>
             </div>
 
             <add-address
               :context="addAddress.context"
               :options="addAddress.options"
-                            :addressChangedCallback="submitNewAddress"
+              :address-changed-callback="submitNewAddress"
               v-if="showAddAddress"
-                            ref="addAddress">
+              ref="addAddress"
-                        </add-address>
+            />
 
-                        <div class="form-floating mb-3" v-if="showContactData">
+            <div
-                            <input class="form-control form-control-lg" id="phonenumber1" v-model="inputPhonenumber1" placeholder />
+              class="form-floating mb-3"
+              v-if="showContactData"
+            >
+              <input
+                class="form-control form-control-lg"
+                id="phonenumber1"
+                v-model="inputPhonenumber1"
+                placeholder
+              >
               <label for="phonenumber1">{{ $t('activity.location_fields.phonenumber1') }}</label>
             </div>
-                        <div class="form-floating mb-3" v-if="hasPhonenumber1">
+            <div
-                            <input class="form-control form-control-lg" id="phonenumber2" v-model="inputPhonenumber2" placeholder />
+              class="form-floating mb-3"
+              v-if="hasPhonenumber1"
+            >
+              <input
+                class="form-control form-control-lg"
+                id="phonenumber2"
+                v-model="inputPhonenumber2"
+                placeholder
+              >
               <label for="phonenumber2">{{ $t('activity.location_fields.phonenumber2') }}</label>
             </div>
-                        <div class="form-floating mb-3" v-if="showContactData">
+            <div
-                            <input class="form-control form-control-lg" id="email" v-model="inputEmail" placeholder />
+              class="form-floating mb-3"
+              v-if="showContactData"
+            >
+              <input
+                class="form-control form-control-lg"
+                id="email"
+                v-model="inputEmail"
+                placeholder
+              >
               <label for="email">{{ $t('activity.location_fields.email') }}</label>
             </div>
-
           </form>
         </template>
-                <template v-slot:footer>
+        <template #footer>
-                    <button class="btn btn-save"
+          <button
+            class="btn btn-save"
             @click.prevent="saveNewLocation"
           >
             {{ $t('action.save') }}
           </button>
         </template>
-
       </modal>
     </teleport>
   </div>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue

@@ -1,19 +1,17 @@
 <template>
   <teleport to="#social-issues-acc">
-
     <div class="mb-3 row">
       <div class="col-4">
         <label :class="socialIssuesClassList">{{ $t('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">
+          @update-selected="updateIssuesSelected"
-            </check-social-issue>
+        />
 
         <div class="my-3">
           <VueMultiselect
@@ -33,10 +31,9 @@
             :loading="issueIsLoading"
             :placeholder="$t('activity.choose_other_social_issue')"
             :options="socialIssuesOther"
-               @select="addIssueInList">
+            @select="addIssueInList"
-            </VueMultiselect>
+          />
         </div>
-
       </div>
     </div>
 
@@ -45,12 +42,14 @@
         <label :class="socialActionsClassList">{{ $t('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>
+          <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg" />
         </div>
 
-            <span v-else-if="socialIssuesSelected.length === 0" class="inline-choice chill-no-data-statement mt-3">
+        <span
+          v-else-if="socialIssuesSelected.length === 0"
+          class="inline-choice chill-no-data-statement mt-3"
+        >
           {{ $t('activity.select_first_a_social_issue') }}
         </span>
 
@@ -61,18 +60,18 @@
             :key="action.id"
             :action="action"
             :selection="socialActionsSelected"
-                  @updateSelected="updateActionsSelected">
+            @update-selected="updateActionsSelected"
-               </check-social-action>
+          />
         </template>
 
-            <span v-else-if="actionAreLoaded && socialActionsList.length === 0" class="inline-choice chill-no-data-statement mt-3">
+        <span
+          v-else-if="actionAreLoaded && socialActionsList.length === 0"
+          class="inline-choice chill-no-data-statement mt-3"
+        >
           {{ $t('activity.social_action_list_empty') }}
         </span>
-
-
       </div>
     </div>
-
   </teleport>
 </template>
 

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue

@@ -2,14 +2,18 @@
   <span class="inline-choice">
     <div class="form-check">
 
-         <input class="form-check-input"
+      <input
+        class="form-check-input"
         type="checkbox"
         v-model="selected"
         name="action"
-            v-bind:id="action.id"
+        :id="action.id"
-            v-bind:value="action"
+        :value="action"
-            />
+      >
-         <label class="form-check-label" v-bind:for="action.id">
+      <label
+        class="form-check-label"
+        :for="action.id"
+      >
         <span class="badge bg-light text-dark">{{ action.text }}</span>
       </label>
 

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue

@@ -2,14 +2,18 @@
   <span class="inline-choice">
     <div class="form-check">
 
-         <input class="form-check-input"
+      <input
+        class="form-check-input"
         type="checkbox"
         v-model="selected"
         name="issue"
-            v-bind:id="issue.id"
+        :id="issue.id"
-            v-bind:value="issue"
+        :value="issue"
-            />
+      >
-         <label class="form-check-label" v-bind:for="issue.id">
+      <label
+        class="form-check-label"
+        :for="issue.id"
+      >
         <span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
       </label>
 

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue

@@ -1,32 +1,35 @@
 <template>
-
   <teleport to="#mainUser">
-
+    <h2 class="chill-red">
-    <h2 class="chill-red">Utilisateur principal</h2>
+      Utilisateur principal
+    </h2>
     <div>
       <div>
         <div v-if="null !== this.$store.getters.getMainUser">
-          <calendar-active :user="this.$store.getters.getMainUser" ></calendar-active>
+          <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] : []"
-          :removableIfSet="false"
+          :removable-if-set="false"
-          :displayPicked="false"
+          :display-picked="false"
           :suggested="this.suggestedUsers"
           :label="'main_user'"
-          @addNewEntity="setMainUser"
+          @add-new-entity="setMainUser"
-        ></pick-entity>
+        />
       </div>
     </div>
   </teleport>
 
-  <concerned-groups></concerned-groups>
+  <concerned-groups />
 
   <teleport to="#schedule">
-    <div class="row mb-3" v-if="activity.startDate !== null">
+    <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') }}
@@ -36,57 +39,148 @@
     </div>
   </teleport>
 
-  <location></location>
+  <location />
 
 
 
   <teleport to="#fullCalendar">
     <div class="calendar-actives">
-        <template class="" v-for="u in getActiveUsers" :key="u.id">
+      <template
-          <calendar-active :user="u" :invite="this.$store.getters.getInviteForUser(u)"></calendar-active>
+        class=""
+        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="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>
+          <label
-            <select v-model="slotDuration" id="slotDuration" class="form-select">
+            class="input-group-text"
-              <option value="00:05:00">5 minutes</option>
+            for="slotDuration"
-              <option value="00:10:00">10 minutes</option>
+          >Durée des créneaux</label>
-              <option value="00:15:00">15 minutes</option>
+          <select
-              <option value="00:30:00">30 minutes</option>
+            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>
+          <label
-            <select v-model="slotMinTime" id="slotMinTime" class="form-select">
+            class="input-group-text"
-              <option value="00:00:00">0h</option>
+            for="slotMinTime"
-              <option value="01:00:00">1h</option>
+          >De</label>
-              <option value="02:00:00">2h</option>
+          <select
-              <option value="03:00:00">3h</option>
+            v-model="slotMinTime"
-              <option value="04:00:00">4h</option>
+            id="slotMinTime"
-              <option value="05:00:00">5h</option>
+            class="form-select"
-              <option value="06:00:00">6h</option>
+          >
-              <option value="07:00:00">7h</option>
+            <option value="00:00:00">
-              <option value="08:00:00">8h</option>
+              0h
-              <option value="09:00:00">9h</option>
+            </option>
-              <option value="10:00:00">10h</option>
+            <option value="01:00:00">
-              <option value="11:00:00">11h</option>
+              1h
-              <option value="12:00:00">12h</option>
+            </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>
+          <label
-            <select v-model="slotMaxTime" id="slotMaxTime" class="form-select">
+            class="input-group-text"
-              <option value="12:00:00">12h</option>
+            for="slotMaxTime"
-              <option value="13:00:00">13h</option>
+          >À</label>
-              <option value="14:00:00">14h</option>
+          <select
-              <option value="15:00:00">15h</option>
+            v-model="slotMaxTime"
-              <option value="16:00:00">16h</option>
+            id="slotMaxTime"
-              <option value="17:00:00">17h</option>
+            class="form-select"
-              <option value="18:00:00">18h</option>
+          >
-              <option value="19:00:00">19h</option>
+            <option value="12:00:00">
-              <option value="20:00:00">20h</option>
+              12h
-              <option value="21:00:00">21h</option>
+            </option>
-              <option value="22:00:00">22h</option>
+            <option value="13:00:00">
-              <option value="23:00:00">23h</option>
+              13h
-              <option value="23:59:59">24h</option>
+            </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>
@@ -94,15 +188,26 @@
         <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">
+              <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>
+            <label
+              for="showHideWE"
+              class="form-check-label input-group-text"
+            >Week-ends</label>
           </div>
         </div>
       </div>
     </div>
-      <FullCalendar ref="fullCalendar" :options="calendarOptions">
+    <FullCalendar
-        <template v-slot:eventContent='arg'>
+      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>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue

@@ -1,22 +1,55 @@
 <template>
-  <div :style="style" class="calendar-active">
+  <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>
+        <i
-        <i v-else-if="invite.status === 'declined'" class="fa fa-times"></i>
+          v-if="invite.status === 'accepted'"
-        <i v-else-if="invite.status === 'pending'" class="fa fa-question-o"></i>
+          class="fa fa-check"
-        <i v-else-if="invite.status === 'tentative'" class="fa fa-question"></i>
+        />
+        <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">
+      <input
-      &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Disponibilités"><i class="fa fa-calendar-check-o"></i></label>
+        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">
+      <input
-      &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Agenda"><i class="fa fa-calendar"></i></label>
+        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>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-     <h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
+    <h2 class="chill-red">
+      {{ $t('choose_your_calendar_user') }}
+    </h2>
     <VueMultiselect
       name="field"
       id="calendarUserSelector"
@@ -19,18 +21,33 @@
       @select="selectUsers"
       @remove="unSelectUsers"
       @close="coloriseSelectedValues"
-        :options="options">
+      :options="options"
-    </VueMultiselect>
+    />
   </div>
   <div class="form-check">
-    <input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
+    <input
-    <label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
+      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" />
+    <input
-    <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
+      type="checkbox"
+      id="weekends"
+      class="form-check-input"
+      @click="toggleWeekends"
+    >
+    <label
+      class="form-check-label"
+      for="weekends"
+    >{{ $t('show_weekends') }}</label>
   </div>
-  
 </template>
 <script>
 

src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue

@@ -14,27 +14,52 @@
           </div>
           <div class="col-md-8">
             <div class="input-group mb-3">
-                            <select class="form-select" v-model="template">
+              <select
-                                <option disabled selected value="">{{ $t('choose_a_template') }}</option>
+                class="form-select"
-                                <template v-for="t in templates" :key="t.id">
+                v-model="template"
-                                    <option :value="t.id" >{{ t.name.fr || 'Aucun nom défini' }}</option>
+              >
+                <option
+                  disabled
+                  selected
+                  value=""
+                >
+                  {{ $t('choose_a_template') }}
+                </option>
+                <template
+                  v-for="t in templates"
+                  :key="t.id"
+                >
+                  <option :value="t.id">
+                    {{ t.name.fr || '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"></i></a>
+              <a
-                            <a v-else class="btn btn-update btn-sm change-icon" href="#" disabled ><i class="fa fa-fw fa-cog"></i></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="row"
+          v-if="hasDescription"
+        >
           <div class="col-md-8 align-self-end">
             <p>{{ getDescription }}</p>
           </div>
         </div>
-
       </div>
     </template>
   </div>
-
 </template>
 
 <script>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue

@@ -1,19 +1,27 @@
 <template>
-   <a :class="btnClasses" :title="$t(buttonTitle)" @click="openModal">
+  <a
+    :class="btnClasses"
+    :title="$t(buttonTitle)"
+    @click="openModal"
+  >
     <span>{{ $t(buttonTitle) }}</span>
   </a>
   <teleport to="body">
     <div>
-         <modal v-if="modal.showModal"
+      <modal
-            :modalDialogClass="modal.modalDialogClass"
+        v-if="modal.showModal"
-            @close="modal.showModal = false">
+        :modal-dialog-class="modal.modalDialogClass"
-
+        @close="modal.showModal = false"
-            <template v-slot:header>
+      >
+        <template #header>
           {{ $t('upload_a_document') }}
         </template>
 
-            <template v-slot:body>
+        <template #body>
-                <div id="dropZoneWrapper" ref="dropZoneWrapper">
+          <div
+            id="dropZoneWrapper"
+            ref="dropZoneWrapper"
+          >
             <div
               data-stored-object="data-stored-object"
               :data-label-preparing="$t('data_label_preparing')"
@@ -28,7 +36,8 @@
               :data-dict-upload-canceled="$t('data_dict_upload_canceled')"
               :data-dict-remove="$t('data_dict_remove')"
               :data-allow-remove="!options.required"
-                        data-temp-url-generator="/asyncupload/temp_url/generate/GET">
+              data-temp-url-generator="/asyncupload/temp_url/generate/GET"
+            >
               <input
                 type="hidden"
                 data-async-file-upload="data-async-file-upload"
@@ -54,13 +63,14 @@
           </div>
         </template>
 
-            <template v-slot:footer>
+        <template #footer>
-               <button class="btn btn-create"
+          <button
-                  @click.prevent="saveDocument">
+            class="btn btn-create"
+            @click.prevent="saveDocument"
+          >
             {{ $t('action.add') }}
           </button>
         </template>
-
       </modal>
     </div>
   </teleport>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUploadDownloader.vue

@@ -2,14 +2,14 @@
   <a
     class="btn btn-download"
     :title="$t(buttonTitle)"
-    :data-key=JSON.stringify(storedObject.keyInfos)
+    :data-key="JSON.stringify(storedObject.keyInfos)"
-    :data-iv=JSON.stringify(storedObject.iv)
+    :data-iv="JSON.stringify(storedObject.iv)"
-    :data-mime-type=storedObject.type
+    :data-mime-type="storedObject.type"
     :data-label-preparing="$t('dataLabelPreparing')"
     :data-label-ready="$t('dataLabelReady')"
     :data-temp-url-get-generator="url"
-    @click.once="downloadDocument">
+    @click.once="downloadDocument"
-  </a>
+  />
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

@@ -1,11 +1,11 @@
 <template>
   <add-address
-      v-bind:key="key"
+    :key="key"
-      v-bind:context="context"
+    :context="context"
-      v-bind:options="options"
+    :options="options"
-      v-bind:addressChangedCallback="submitAddress"
+    :address-changed-callback="submitAddress"
-      ref="addAddress">
+    ref="addAddress"
-   </add-address>
+  />
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue

@@ -1,18 +1,26 @@
 <template>
-   <ul class="record_actions" v-if="!options.onlyButton"
+  <ul
-      :class="{ 'sticky-form-buttons': isStickyForm }">
+    class="record_actions"
-
+    v-if="!options.onlyButton"
-      <li v-if="isStickyForm" class="cancel">
+    :class="{ 'sticky-form-buttons': isStickyForm }"
-         <slot name="before"></slot>
+  >
+    <li
+      v-if="isStickyForm"
+      class="cancel"
+    >
+      <slot name="before" />
     </li>
     <li>
-        <slot name="action"></slot>
+      <slot name="action" />
     </li>
     <li v-if="isStickyForm">
-         <slot name="after"></slot>
+      <slot name="after" />
     </li>
   </ul>
-    <slot v-else name="action"></slot>
+  <slot
+    v-else
+    name="action"
+  />
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

@@ -1,230 +1,295 @@
 <template>
-
   <!-- step0 -->
-   <show-pane v-if="flag.showPane"
+  <show-pane
-      v-bind:context="this.context"
+    v-if="flag.showPane"
-      v-bind:options="this.options"
+    :context="this.context"
-      v-bind:defaultz="this.defaultz"
+    :options="this.options"
-      v-bind:entity="this.entity"
+    :defaultz="this.defaultz"
-      v-bind:flag="this.flag"
+    :entity="this.entity"
-      v-bind:useDatePane="this.useDatePane"
+    :flag="this.flag"
-      @openEditPane="openEditPane"
+    :use-date-pane="this.useDatePane"
-      ref="showAddress">
+    @open-edit-pane="openEditPane"
-   </show-pane>
+    ref="showAddress"
+  />
 
   <!-- step 1 -->
-   <teleport to="body" v-if="inModal">
+  <teleport
-      <modal v-if="flag.suggestPane"
+    to="body"
-         modalDialogClass="modal-dialog-scrollable modal-xl"
+    v-if="inModal"
-         @close="resetPane">
+  >
-
+    <modal
-         <template v-slot:header>
+      v-if="flag.suggestPane"
-            <h2 class="modal-title">{{ $t(getTextTitle) }}
+      modal-dialog-class="modal-dialog-scrollable modal-xl"
-               <span v-if="flag.loading" class="loading">
+      @close="resetPane"
-                  <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
+    >
+      <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 v-slot:body>
+      <template #body>
         <suggest-pane
-               v-bind:context="this.context"
+          :context="this.context"
-               v-bind:options="this.options"
+          :options="this.options"
-               v-bind:defaultz="this.defaultz"
+          :defaultz="this.defaultz"
-               v-bind:entity="this.entity"
+          :entity="this.entity"
-               v-bind:flag="this.flag"
+          :flag="this.flag"
           @pick-address="this.pickAddress"
-               ref="suggestAddress">
+          ref="suggestAddress"
-            </suggest-pane>
+        />
       </template>
 
-         <template v-slot:footer>
+      <template #footer>
-            <button @click="openEditPane"
+        <button
-               class="btn btn-create">
+          @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">
+    <div
+      v-if="flag.suggestPane"
+      class="mt-4 flex-grow-1"
+    >
       <suggest-pane
-            v-bind:context="this.context"
+        :context="this.context"
-            v-bind:options="this.options"
+        :options="this.options"
-            v-bind:defaultz="this.defaultz"
+        :defaultz="this.defaultz"
-            v-bind:entity="this.entity"
+        :entity="this.entity"
-            v-bind:flag="this.flag"
+        :flag="this.flag"
-            v-bind:insideModal="false"
+        :inside-modal="false"
         @pick-address="this.pickAddress"
-            ref="suggestAddress">
+        ref="suggestAddress"
-
+      >
-            <template v-slot:before v-if="!bypassFirstStep">
+        <template
-               <a class="btn btn-cancel" @click="resetPane">
+          #before
+          v-if="!bypassFirstStep"
+        >
+          <a
+            class="btn btn-cancel"
+            @click="resetPane"
+          >
             {{ $t('action.cancel') }}
           </a>
         </template>
-            <template v-slot:action>
+        <template #action>
           <li>
-                  <button @click="openEditPane"
+            <button
-                     class="btn btn-create">
+              @click="openEditPane"
+              class="btn btn-create"
+            >
               {{ $t('create_a_new_address') }}
             </button>
           </li>
         </template>
-
       </suggest-pane>
     </div>
   </template>
 
   <!-- step 2 -->
-   <teleport to="body" v-if="inModal">
+  <teleport
-      <modal v-if="flag.editPane"
+    to="body"
-         modalDialogClass="modal-dialog-scrollable modal-xl"
+    v-if="inModal"
-         @close="resetPane">
+  >
-
+    <modal
-         <template v-slot:header>
+      v-if="flag.editPane"
-            <h2 class="modal-title">{{ $t(getTextTitle) }}
+      modal-dialog-class="modal-dialog-scrollable modal-xl"
-               <span v-if="flag.loading" class="loading">
+      @close="resetPane"
-                  <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
+    >
+      <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 v-slot:body>
+      <template #body>
         <edit-pane
-               v-bind:context="this.context"
+          :context="this.context"
-               v-bind:options="this.options"
+          :options="this.options"
-               v-bind:defaultz="this.defaultz"
+          :defaultz="this.defaultz"
-               v-bind:entity="this.entity"
+          :entity="this.entity"
-               v-bind:flag="this.flag"
+          :flag="this.flag"
-               v-bind:errors="this.errors"
+          :errors="this.errors"
-               v-bind:checkErrors="this.checkErrors"
+          :check-errors="this.checkErrors"
-               @getCities="getCities"
+          @get-cities="getCities"
-               @getReferenceAddresses="getReferenceAddresses">
+          @get-reference-addresses="getReferenceAddresses"
-            </edit-pane>
+        />
       </template>
 
-         <template v-slot:footer>
+      <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">
+        <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"></i>
+          <i class="fa fa-fw fa-arrow-right" />
         </button>
-            <button v-else class="btn btn-save" @click="closeEditPane">
+        <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">
+    <div
+      v-if="flag.editPane"
+      class="mt-4 flex-grow-1"
+    >
       <edit-pane
-            v-bind:context="this.context"
+        :context="this.context"
-            v-bind:options="this.options"
+        :options="this.options"
-            v-bind:defaultz="this.defaultz"
+        :defaultz="this.defaultz"
-            v-bind:entity="this.entity"
+        :entity="this.entity"
-            v-bind:flag="this.flag"
+        :flag="this.flag"
-            v-bind:errors="this.errors"
+        :errors="this.errors"
-            v-bind:checkErrors="this.checkErrors"
+        :check-errors="this.checkErrors"
-            v-bind:insideModal="false"
+        :inside-modal="false"
-            @getCities="getCities"
+        @get-cities="getCities"
-            @getReferenceAddresses="getReferenceAddresses">
+        @get-reference-addresses="getReferenceAddresses"
-
+      >
-            <template v-slot:before>
+        <template #before>
-               <a class="btn btn-cancel" @click="resetPane">
+          <a
+            class="btn btn-cancel"
+            @click="resetPane"
+          >
             {{ $t('action.cancel') }}
           </a>
         </template>
-            <template v-slot:action>
+        <template #action>
           <li v-if="!this.context.edit && this.useDatePane">
-                  <button class="btn btn-update change-icon" @click="closeEditPane">
+            <button
+              class="btn btn-update change-icon"
+              @click="closeEditPane"
+            >
               {{ $t('nav.next') }}
-                     <i class="fa fa-fw fa-arrow-right"></i>
+              <i class="fa fa-fw fa-arrow-right" />
             </button>
           </li>
           <li v-else>
-                  <button class="btn btn-save" @click="closeEditPane">
+            <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">
+  <teleport
-      <modal v-if="flag.datePane"
+    to="body"
-             modalDialogClass="modal-dialog-scrollable modal-xl"
+    v-if="inModal"
-             @close="resetPane">
+  >
-
+    <modal
-         <template v-slot:header>
+      v-if="flag.datePane"
-            <h2 class="modal-title">{{ $t(getTextTitle) }}
+      modal-dialog-class="modal-dialog-scrollable modal-xl"
-               <span v-if="flag.loading" class="loading">
+      @close="resetPane"
-                  <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
+    >
+      <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 v-slot:body>
+      <template #body>
         <date-pane
-               v-bind:context="this.context"
+          :context="this.context"
-               v-bind:options="this.options"
+          :options="this.options"
-               v-bind:defaultz="this.defaultz"
+          :defaultz="this.defaultz"
-               v-bind:entity="this.entity"
+          :entity="this.entity"
-               v-bind:flag="this.flag"
+          :flag="this.flag"
-               ref="dateAddress">
+          ref="dateAddress"
-            </date-pane>
+        />
       </template>
 
-         <template v-slot:footer>
+      <template #footer>
-            <button class="btn btn-misc" @click="openEditPane">
+        <button
-               <i class="fa fa-fw fa-arrow-left"></i>
+          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">
+        <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">
+    <div
+      v-if="flag.datePane"
+      class="mt-4 flex-grow-1"
+    >
       <date-pane
-            v-bind:context="this.context"
+        :context="this.context"
-            v-bind:options="this.options"
+        :options="this.options"
-            v-bind:defaultz="this.defaultz"
+        :defaultz="this.defaultz"
-            v-bind:entity="this.entity"
+        :entity="this.entity"
-            v-bind:flag="this.flag"
+        :flag="this.flag"
-            v-bind:insideModal="false"
+        :inside-modal="false"
-            ref="dateAddress">
+        ref="dateAddress"
-
+      >
-            <template v-slot:before>
+        <template #before>
-               <button class="btn btn-misc" @click="openEditPane">
+          <button
-                  <i class="fa fa-fw fa-arrow-left"></i>
+            class="btn btn-misc"
+            @click="openEditPane"
+          >
+            <i class="fa fa-fw fa-arrow-left" />
             {{ $t('nav.previous') }}
           </button>
         </template>
-            <template v-slot:action>
+        <template #action>
           <li>
-                  <button class="btn btn-save" @click="closeDatePane">
+            <button
+              class="btn btn-save"
+              @click="closeDatePane"
+            >
               {{ $t('action.save') }}
             </button>
           </li>
         </template>
-
       </date-pane>
     </div>
   </template>
-
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue

@@ -1,5 +1,5 @@
 <template>
-   <div id="address_map"></div>
+  <div id="address_map" />
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue

@@ -1,66 +1,91 @@
 <template>
-   <h4 class="h3">{{ $t('fill_an_address') }}</h4>
+  <h4 class="h3">
+    {{ $t('fill_an_address') }}
+  </h4>
   <div class="row my-3">
-      <div class="col-lg-6" v-if="!isNoAddress">
+    <div
+      class="col-lg-6"
+      v-if="!isNoAddress"
+    >
       <div class="form-floating my-1">
-            <input class="form-control"
+        <input
+          class="form-control"
           type="text"
           name="floor"
           :placeholder="$t('floor')"
-            v-model="floor"/>
+          v-model="floor"
+        >
         <label for="floor">{{ $t('floor') }}</label>
       </div>
       <div class="form-floating my-1">
-            <input class="form-control"
+        <input
+          class="form-control"
           type="text"
           name="corridor"
           :placeholder="$t('corridor')"
-            v-model="corridor"/>
+          v-model="corridor"
+        >
         <label for="corridor">{{ $t('corridor') }}</label>
       </div>
       <div class="form-floating my-1">
-            <input class="form-control"
+        <input
+          class="form-control"
           type="text"
           name="steps"
           :placeholder="$t('steps')"
-            v-model="steps"/>
+          v-model="steps"
+        >
         <label for="steps">{{ $t('steps') }}</label>
       </div>
       <div class="form-floating my-1">
-            <input class="form-control"
+        <input
+          class="form-control"
           type="text"
           name="flat"
           :placeholder="$t('flat')"
-            v-model="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">
+      <div
-            <input class="form-control"
+        class="form-floating my-1"
+        v-if="!isNoAddress"
+      >
+        <input
+          class="form-control"
           type="text"
           name="buildingName"
-            maxlength=255
+          maxlength="255"
           :placeholder="$t('buildingName')"
-            v-model="buildingName"/>
+          v-model="buildingName"
+        >
         <label for="buildingName">{{ $t('buildingName') }}</label>
       </div>
       <div class="form-floating my-1">
-            <input class="form-control"
+        <input
+          class="form-control"
           type="text"
           name="extra"
-            maxlength=255
+          maxlength="255"
           :placeholder="$t('extra')"
-            v-model="extra"/>
+          v-model="extra"
+        >
         <label for="extra">{{ $t('extra') }}</label>
       </div>
-         <div class="form-floating my-1" v-if="!isNoAddress">
+      <div
-            <input class="form-control"
+        class="form-floating my-1"
+        v-if="!isNoAddress"
+      >
+        <input
+          class="form-control"
           type="text"
           name="distribution"
-            maxlength=255
+          maxlength="255"
           :placeholder="$t('distribution')"
-            v-model="distribution"/>
+          v-model="distribution"
+        >
         <label for="distribution">{{ $t('distribution') }}</label>
       </div>
     </div>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="my-1">
-      <label class="col-form-label" for="addressSelector">{{ $t('address') }}</label>
+    <label
+      class="col-form-label"
+      for="addressSelector"
+    >{{ $t('address') }}</label>
     <VueMultiselect
       id="addressSelector"
       v-model="value"
@@ -22,28 +25,35 @@
       :multiple="false"
       @tag="addAddress"
       :loading="isLoading"
-         :options="addresses">
+      :options="addresses"
-      </VueMultiselect>
+    />
   </div>
 
-   <div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode || (isEnteredCustomAddress && !isAddressSelectorOpen)">
+  <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"
+        <input
+          class="form-control"
           type="text"
           name="street"
           :placeholder="$t('street')"
-               v-model="street"/>
+          v-model="street"
+        >
         <label for="street">{{ $t('street') }}</label>
       </div>
     </div>
     <div class="col-2">
       <div class="form-floating">
-            <input class="form-control"
+        <input
+          class="form-control"
           type="text"
           name="streetNumber"
           :placeholder="$t('streetNumber')"
-               v-model="streetNumber"/>
+          v-model="streetNumber"
+        >
         <label for="streetNumber">{{ $t('streetNumber') }}</label>
       </div>
     </div>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue

@@ -20,30 +20,37 @@
       :multiple="false"
       :internal-search="false"
       @tag="addPostcode"
-         :tagPlaceholder="$t('create_postal_code')"
+      :tag-placeholder="$t('create_postal_code')"
       :loading="isLoading"
-         :options="cities">
+      :options="cities"
-      </VueMultiselect>
+    />
   </div>
 
-   <div class="custom-postcode row g-1" v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)">
+  <div
+    class="custom-postcode row g-1"
+    v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)"
+  >
     <div class="col-4">
       <div class="form-floating">
-            <input class="form-control"
+        <input
+          class="form-control"
           type="text"
           id="code"
           :placeholder="$t('postalCode_code')"
-               v-model="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"
+        <input
+          class="form-control"
           type="text"
           id="name"
           :placeholder="$t('postalCode_name')"
-               v-model="name"/>
+          v-model="name"
+        >
         <label for="name">{{ $t('postalCode_name') }}</label>
       </div>
     </div>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="my-1">
-      <label class="col-form-label" for="countrySelect">{{ $t('country') }}</label>
+    <label
+      class="col-form-label"
+      for="countrySelect"
+    >{{ $t('country') }}</label>
     <VueMultiselect
       id="countrySelect"
       label="name"
@@ -14,8 +17,7 @@
       :selected-label="$t('multiselect.selected_label')"
       @select="selectCountry"
       @remove="remove"
-      >
+    />
-      </VueMultiselect>
   </div>
 </template>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue

@@ -1,56 +1,83 @@
 <template>
-
+  <div
-   <div v-if="insideModal === false" class="loading">
+    v-if="insideModal === false"
-      <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
+    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">
+  <div
+    v-if="errorMsg && errorMsg.length > 0"
+    class="alert alert-danger"
+  >
     {{ errorMsg }}
   </div>
 
-   <address-render-box :address="selectedAddress"></address-render-box>
+  <address-render-box :address="selectedAddress" />
 
   <div class="row">
-      <div v-if="showDateFrom" class='col-lg-6 address-valid date-since'>
+    <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"></i></span>
+        <span
-            <input type="date" class="form-control form-control-lg" name="validFrom"
+          class="input-group-text"
-                   v-bind:placeholder="$t(getValidFromDateText)"
+          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'>
+    <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"></i></span>
+        <span
-            <input type="date" class="form-control form-control-lg" name="validTo"
+          class="input-group-text"
-                   v-bind:placeholder="$t(getValidToDateText)"
+          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"
+  <action-buttons
+    v-if="insideModal === false"
     :options="this.options"
-      :defaultz="this.defaultz">
+    :defaultz="this.defaultz"
-      <template v-slot:before>
+  >
-         <slot name="before"></slot>
+    <template #before>
+      <slot name="before" />
     </template>
-      <template v-slot:action>
+    <template #action>
-         <slot name="action"></slot>
+      <slot name="action" />
     </template>
-      <template v-slot:after>
+    <template #after>
-         <slot name="after"></slot>
+      <slot name="after" />
     </template>
   </action-buttons>
-
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue

@@ -1,99 +1,122 @@
 <template>
   <div class="address-form">
-
     <!-- Not display in modal -->
-      <div v-if="insideModal === false" class="loading">
+    <div
-         <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
+      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" >
+    <div
+      v-if="errors.length"
+      class="alert alert-warning"
+    >
       <ul>
-            <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
+        <li
+          v-for="(e, i) in errors"
+          :key="i"
+        >
+          {{ e }}
+        </li>
       </ul>
     </div>
 
-      <h4 class="h3">{{ $t('select_an_address_title') }}</h4>
+    <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"
+          <input
+            type="checkbox"
             class="form-check-input"
             id="isConfidential"
             v-model="isConfidential"
-                  :value="valueConfidential" />
+            :value="valueConfidential"
-               <label class="form-check-label" for="isConfidential">
+          >
+          <label
+            class="form-check-label"
+            for="isConfidential"
+          >
             {{ $t('isConfidential') }}
           </label>
         </div>
         <div class="form-check">
-               <input type="checkbox"
+          <input
+            type="checkbox"
             class="form-check-input"
             id="isNoAddress"
             v-model="isNoAddress"
-                  :value="value" />
+            :value="value"
-               <label class="form-check-label" for="isNoAddress">
+          >
+          <label
+            class="form-check-label"
+            for="isNoAddress"
+          >
             {{ $t('isNoAddress') }}
           </label>
         </div>
 
         <country-selection
-               v-bind:context="context"
+          :context="context"
-               v-bind:entity="entity"
+          :entity="entity"
-               v-bind:flag="flag"
+          :flag="flag"
-               v-bind:checkErrors="checkErrors"
+          :check-errors="checkErrors"
-               @getCities="$emit('getCities', selected.country)">
+          @get-cities="$emit('getCities', selected.country)"
-            </country-selection>
+        />
 
         <city-selection
-               v-bind:entity="entity"
+          :entity="entity"
-               v-bind:context="context"
+          :context="context"
-               v-bind:focusOnAddress="focusOnAddress"
+          :focus-on-address="focusOnAddress"
-               v-bind:updateMapCenter="updateMapCenter"
+          :update-map-center="updateMapCenter"
-               v-bind:flag="flag"
+          :flag="flag"
-               v-bind:checkErrors="checkErrors"
+          :check-errors="checkErrors"
-               @getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
+          @get-reference-addresses="$emit('getReferenceAddresses', selected.city)"
-            </city-selection>
+        />
-
-            <address-selection v-if="!isNoAddress"
-               v-bind:entity="entity"
-               v-bind:context="context"
-               v-bind:updateMapCenter="updateMapCenter"
-               v-bind:flag="flag"
-               v-bind:checkErrors="checkErrors">
-            </address-selection>
 
+        <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
-               v-bind:entity="entity"
+          :entity="entity"
-               ref="addressMap">
+          ref="addressMap"
-            </address-map>
+        />
-
       </div>
     </div>
 
     <address-more
-         v-bind:entity="entity"
+      :entity="entity"
-         v-bind:isNoAddress="isNoAddress">
+      :is-no-address="isNoAddress"
-      </address-more>
+    />
 
-      <action-buttons v-if="insideModal === false"
+    <action-buttons
+      v-if="insideModal === false"
       :options="this.options"
-         :defaultz="this.defaultz">
+      :defaultz="this.defaultz"
-         <template v-slot:before>
+    >
-            <slot name="before"></slot>
+      <template #before>
+        <slot name="before" />
       </template>
-         <template v-slot:action>
+      <template #action>
-            <slot name="action"></slot>
+        <slot name="action" />
       </template>
-         <template v-slot:after>
+      <template #after>
-            <slot name="after"></slot>
+        <slot name="after" />
       </template>
     </action-buttons>
-
   </div>
 </template>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue

@@ -1,23 +1,40 @@
 <template>
-
+  <div
-   <div v-if="!onlyButton" class="mt-4 flex-grow-1">
+    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"></i>
+      <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">
+    <div
+      v-if="errorMsg && errorMsg.length > 0"
+      class="alert alert-danger"
+    >
       {{ errorMsg }}
     </div>
 
-      <div v-if="flag.success" class="alert alert-success">
+    <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
+      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"></i>
+        <i
+          class="fa fa-map-marker"
+          aria-hidden="true"
+        />
         <p class="chill-no-data-statement">
           {{ $t('not_yet_address') }}
         </p>
@@ -25,11 +42,17 @@
         <action-buttons
           :options="this.options"
           :defaultz="this.defaultz"
-               class="add-address-btn">
+          class="add-address-btn"
-               <template v-slot:action>
+        >
-                  <button @click.prevent="$emit('openEditPane')"
+          <template #action>
-                     class="btn" :class="getClassButton"
+            <button
-                     type="button" name="button" :title="$t(getTextButton)">
+              @click.prevent="$emit('openEditPane')"
+              class="btn"
+              :class="getClassButton"
+              type="button"
+              name="button"
+              :title="$t(getTextButton)"
+            >
               <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
             </button>
           </template>
@@ -37,39 +60,53 @@
       </div>
     </div>
    
-      <address-render-box :address="address" :isMultiline="false" :useDatePane="useDatePane"></address-render-box>
+    <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">
+        :defaultz="this.defaultz"
-            <template v-slot:action>
+      >
-               <button @click.prevent="$emit('openEditPane')"
+        <template #action>
-                  class="btn" :class="getClassButton"
+          <button
-                  type="button" name="button" :title="$t(getTextButton)">
+            @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">
+      class="add-address-btn"
-         <template v-slot:action>
+    >
-            <button @click.prevent="$emit('openEditPane')"
+      <template #action>
-               class="btn" :class="getClassButton"
+        <button
-               type="button" name="button" :title="$t(getTextButton)">
+          @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>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue

@@ -1,23 +1,42 @@
 <template>
-
+  <div
-   <div v-if="insideModal === false" class="loading">
+    v-if="insideModal === false"
-      <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
+    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
+      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)">
+                <button
+                  class="btn btn-sm btn-choose"
+                  @click="this.pickAddress(a)"
+                >
                   {{ $t('use_this_address') }}
                 </button>
               </li>
@@ -25,8 +44,8 @@
           </div>
           <ul class="list-content fa-ul">
             <li>
-                     <i class="fa fa-li fa-map-marker"></i>
+              <i class="fa fa-li fa-map-marker" />
-                     <address-render-box :address="a"></address-render-box>
+              <address-render-box :address="a" />
             </li>
           </ul>
         </div>
@@ -34,20 +53,21 @@
     </div>
   </div>
 
-   <action-buttons v-if="insideModal === false"
+  <action-buttons
+    v-if="insideModal === false"
     :options="this.options"
-      :defaultz="this.defaultz">
+    :defaultz="this.defaultz"
-      <template v-slot:before>
+  >
-         <slot name="before"></slot>
+    <template #before>
+      <slot name="before" />
     </template>
-      <template v-slot:action>
+    <template #action>
-         <slot name="action"></slot>
+      <slot name="action" />
     </template>
-      <template v-slot:after>
+    <template #after>
-         <slot name="after"></slot>
+      <slot name="after" />
     </template>
   </action-buttons>
-
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue

@@ -1,27 +1,32 @@
 <template>
-
   <h2>{{ $t('main_title') }}</h2>
 
   <ul class="nav nav-tabs">
     <li class="nav-item">
-         <a class="nav-link"
+      <a
+        class="nav-link"
         :class="{'active': activeTab === 'MyCustoms'}"
-            @click="selectTab('MyCustoms')">
+        @click="selectTab('MyCustoms')"
-            <i class="fa fa-dashboard"></i>
+      >
+        <i class="fa fa-dashboard" />
       </a>
     </li>
     <li class="nav-item">
-         <a class="nav-link"
+      <a
+        class="nav-link"
         :class="{'active': activeTab === 'MyNotifications'}"
-            @click="selectTab('MyNotifications')">
+        @click="selectTab('MyNotifications')"
+      >
         {{ $t('my_notifications.tab') }}
-            <tab-counter :count="state.notifications.count"></tab-counter>
+        <tab-counter :count="state.notifications.count" />
       </a>
     </li>
     <li class="nav-item">
-         <a class="nav-link"
+      <a
+        class="nav-link"
         :class="{'active': activeTab === 'MyAccompanyingCourses'}"
-            @click="selectTab('MyAccompanyingCourses')">
+        @click="selectTab('MyAccompanyingCourses')"
+      >
         {{ $t('my_accompanying_courses.tab') }}
       </a>
     </li>
@@ -34,56 +39,68 @@
          </a>
       </li> -->
     <li class="nav-item">
-         <a class="nav-link"
+      <a
+        class="nav-link"
         :class="{'active': activeTab === 'MyEvaluations'}"
-            @click="selectTab('MyEvaluations')">
+        @click="selectTab('MyEvaluations')"
+      >
         {{ $t('my_evaluations.tab') }}
-            <tab-counter :count="state.evaluations.count"></tab-counter>
+        <tab-counter :count="state.evaluations.count" />
       </a>
     </li>
     <li class="nav-item">
-         <a class="nav-link"
+      <a
+        class="nav-link"
         :class="{'active': activeTab === 'MyTasks'}"
-            @click="selectTab('MyTasks')">
+        @click="selectTab('MyTasks')"
+      >
         {{ $t('my_tasks.tab') }}
-            <tab-counter :count="state.tasks.warning.count + state.tasks.alert.count"></tab-counter>
+        <tab-counter :count="state.tasks.warning.count + state.tasks.alert.count" />
       </a>
     </li>
     <li class="nav-item">
-         <a class="nav-link"
+      <a
+        class="nav-link"
         :class="{'active': activeTab === 'MyWorkflows'}"
-            @click="selectTab('MyWorkflows')">
+        @click="selectTab('MyWorkflows')"
+      >
         {{ $t('my_workflows.tab') }}
-            <tab-counter :count="state.workflows.count + state.workflowsCc.count"></tab-counter>
+        <tab-counter :count="state.workflows.count + state.workflowsCc.count" />
       </a>
     </li>
-      <li class="nav-item loading ms-auto py-2" v-if="loading">
+    <li
-         <i class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray" :title="$t('loading')"></i>
+      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'">
+      v-if="activeTab === 'MyCustoms'"
-      </my-customs>
+    />
     <my-works
-         v-else-if="activeTab === 'MyWorks'">
+      v-else-if="activeTab === 'MyWorks'"
-      </my-works>
+    />
     <my-evaluations
-         v-else-if="activeTab === 'MyEvaluations'">
+      v-else-if="activeTab === 'MyEvaluations'"
-      </my-evaluations>
+    />
     <my-tasks
-         v-else-if="activeTab === 'MyTasks'">
+      v-else-if="activeTab === 'MyTasks'"
-      </my-tasks>
+    />
     <my-accompanying-courses
-         v-else-if="activeTab === 'MyAccompanyingCourses'">
+      v-else-if="activeTab === 'MyAccompanyingCourses'"
-      </my-accompanying-courses>
+    />
     <my-notifications
-         v-else-if="activeTab === 'MyNotifications'">
+      v-else-if="activeTab === 'MyNotifications'"
-      </my-notifications>
+    />
     <my-workflows
-         v-else-if="activeTab === 'MyWorkflows'">
+      v-else-if="activeTab === 'MyWorkflows'"
-      </my-workflows>
+    />
   </div>
 </template>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue

@@ -1,42 +1,71 @@
 <template>
-   <div class="alert alert-light">{{ $t('my_accompanying_courses.description') }}</div>
+  <div class="alert alert-light">
-   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+    {{ $t('my_accompanying_courses.description') }}
+  </div>
+  <span
+    v-if="noResults"
+    class="chill-no-data-statement"
+  >{{ $t('no_data') }}</span>
   <tab-table v-else>
-      <template v-slot:thead>
+    <template #thead>
-         <th scope="col">{{ $t('opening_date') }}</th>
+      <th scope="col">
-         <th scope="col">{{ $t('social_issues') }}</th>
+        {{ $t('opening_date') }}
-         <th scope="col">{{ $t('concerned_persons') }}</th>
+      </th>
-         <th scope="col"></th>
+      <th scope="col">
-         <th scope="col"></th>
+        {{ $t('social_issues') }}
+      </th>
+      <th scope="col">
+        {{ $t('concerned_persons') }}
+      </th>
+      <th scope="col" />
+      <th scope="col" />
     </template>
-      <template v-slot:tbody>
+    <template #tbody>
-         <tr v-for="(c, i) in accompanyingCourses.results" :key="`course-${i}`">
+      <tr
+        v-for="(c, i) in accompanyingCourses.results"
+        :key="`course-${i}`"
+      >
         <td>{{ $d(c.openingDate.datetime, 'short') }}</td>
         <td>
-               <span v-for="i in c.socialIssues"
+          <span
-                  class="chill-entity entity-social-issue">
+            v-for="i in c.socialIssues"
+            class="chill-entity entity-social-issue"
+          >
             <span class="badge bg-chill-l-gray text-dark">
               {{ i.title.fr }}
             </span>
           </span>
         </td>
         <td>
-               <span v-for="p in c.participations" class="me-1" :key="p.person.id">
+          <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"
-                     :buttonText="p.person.textAge"
+              :button-text="p.person.textAge"
-                     :displayBadge="'true' === 'true'"
+              :display-badge="'true' === 'true'"
-                     action="show">
+              action="show"
-                  </on-the-fly>
+            />
           </span>
         </td>
         <td>
-               <span v-if="c.emergency" class="badge rounded-pill bg-danger me-1">{{ $t('emergency') }}</span>
+          <span
-               <span v-if="c.confidential" class="badge rounded-pill bg-danger">{{ $t('confidential') }}</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)">
+          <a
+            class="btn btn-sm btn-show"
+            :href="getUrl(c)"
+          >
             {{ $t('show_entity', { entity: $t('the_course') }) }}
           </a>
         </td>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue

@@ -1,38 +1,87 @@
 <template>
-   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_dashboard') }}</span>
+  <span
-   <div v-else id="dashboards" class="container g-3">
+    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">
+              <i18n-t
-                               <template v-slot:n><span>{{ counter.notifications }}</span></template>
+                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">
+              <i18n-t
-                               <template v-slot:n><span>{{ counter.accompanyingCourses }}</span></template>
+                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">
+              <i18n-t
-                               <template v-slot:n><span>{{ counter.works }}</span></template>
+                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">
+              <i18n-t
-                               <template v-slot:n><span>{{ counter.evaluations }}</span></template>
+                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">
+              <i18n-t
-                               <template v-slot:n><span>{{ counter.tasksAlert }}</span></template>
+                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">
+              <i18n-t
-                               <template v-slot:n><span>{{ counter.tasksWarning }}</span></template>
+                keypath="counter.warning_tasks"
+                tag="span"
+                :class="counterClass"
+                :plural="counter.tasksWarning"
+              >
+                <template #n>
+                  <span>{{ counter.tasksWarning }}</span>
+                </template>
               </i18n-t>
             </li>
           </ul>
@@ -41,12 +90,14 @@
 
       <template v-if="this.hasDashboardItems">
         <template v-for="dashboardItem in this.dashboardItems">
-                   <div class="mbloc col-xs-12 col-sm-8 news" v-if="dashboardItem.type === 'news'">
+          <div
+            class="mbloc col-xs-12 col-sm-8 news"
+            v-if="dashboardItem.type === 'news'"
+          >
             <News />
           </div>
         </template>
       </template>
-
     </div>
   </div>
 </template>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue

@@ -1,16 +1,30 @@
 <template>
   <div class="accompanying-course-work">
-   <div class="alert alert-light">{{ $t('my_evaluations.description') }}</div>
+    <div class="alert alert-light">
-   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+      {{ $t('my_evaluations.description') }}
+    </div>
+    <span
+      v-if="noResults"
+      class="chill-no-data-statement"
+    >{{ $t('no_data') }}</span>
     <tab-table v-else>
-      <template v-slot:thead>
+      <template #thead>
-         <th scope="col">{{ $t('max_date') }}</th>
+        <th scope="col">
-         <th scope="col">{{ $t('evaluation') }}</th>
+          {{ $t('max_date') }}
-         <th scope="col">{{ $t('SocialAction') }}</th>
+        </th>
-         <th scope="col"></th>
+        <th scope="col">
+          {{ $t('evaluation') }}
+        </th>
+        <th scope="col">
+          {{ $t('SocialAction') }}
+        </th>
+        <th scope="col" />
       </template>
-      <template v-slot:tbody>
+      <template #tbody>
-         <tr v-for="(e, i) in evaluations.results" :key="`evaluation-${i}`">
+        <tr
+          v-for="(e, i) in evaluations.results"
+          :key="`evaluation-${i}`"
+        >
           <td>{{ $d(e.maxDate.datetime, 'short') }}</td>
           <td>
             {{ e.evaluation.title.fr }}
@@ -22,27 +36,41 @@
               </span>
             </span>
             <h4 class="badge-title">
-                  <span class="title_label"></span>
+              <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">
+            <span
+              v-for="person in e.accompanyingPeriodWork.persons"
+              class="me-1"
+              :key="person.id"
+            >
               <on-the-fly
                 :type="person.type"
                 :id="person.id"
-                     :buttonText="person.textAge"
+                :button-text="person.textAge"
-                     :displayBadge="'true' === 'true'"
+                :display-badge="'true' === 'true'"
-                     action="show">
+                action="show"
-                  </on-the-fly>
+              />
             </span>
           </td>
           <td>
-               <div class="btn-group-vertical" role="group" aria-label="Actions">
+            <div
-                  <a class="btn btn-sm btn-show" :href="getUrl(e)">
+              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)">
+              <a
+                class="btn btn-sm btn-show"
+                :href="getUrl(e.accompanyingPeriodWork.accompanyingPeriod)"
+              >
                 {{ $t('show_entity', { entity: $t('the_course') }) }}
               </a>
             </div>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue

@@ -1,27 +1,47 @@
 <template>
-   <div class="alert alert-light">{{ $t('my_notifications.description') }}</div>
+  <div class="alert alert-light">
-   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+    {{ $t('my_notifications.description') }}
+  </div>
+  <span
+    v-if="noResults"
+    class="chill-no-data-statement"
+  >{{ $t('no_data') }}</span>
   <tab-table v-else>
-      <template v-slot:thead>
+    <template #thead>
-         <th scope="col">{{ $t('Date') }}</th>
+      <th scope="col">
-         <th scope="col">{{ $t('Subject') }}</th>
+        {{ $t('Date') }}
-         <th scope="col">{{ $t('From') }}</th>
+      </th>
-         <th scope="col"></th>
+      <th scope="col">
+        {{ $t('Subject') }}
+      </th>
+      <th scope="col">
+        {{ $t('From') }}
+      </th>
+      <th scope="col" />
     </template>
-      <template v-slot:tbody>
+    <template #tbody>
-         <tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
+      <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"></i>
+            <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-if="n.sender != null">
-            <td v-else>{{ $t('automatic_notification')}}</td>
+          {{ n.sender.text }}
+        </td>
+        <td v-else>
+          {{ $t('automatic_notification') }}
+        </td>
         <td>
-               <a class="btn btn-sm btn-show"
+          <a
-                  :href="getEntityUrl(n)">
+            class="btn btn-sm btn-show"
+            :href="getEntityUrl(n)"
+          >
             {{ $t('show_entity', { entity: getEntityName(n) }) }}
           </a>
         </td>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue

@@ -1,24 +1,42 @@
 <template>
-
+  <div class="alert alert-light">
-   <div class="alert alert-light">{{ $t('my_tasks.description_warning') }}</div>
+    {{ $t('my_tasks.description_warning') }}
-   <span v-if="noResultsAlert" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+  </div>
+  <span
+    v-if="noResultsAlert"
+    class="chill-no-data-statement"
+  >{{ $t('no_data') }}</span>
   <tab-table v-else>
-      <template v-slot:thead>
+    <template #thead>
-         <th scope="col">{{ $t('warning_date') }}</th>
+      <th scope="col">
-         <th scope="col">{{ $t('max_date') }}</th>
+        {{ $t('warning_date') }}
-         <th scope="col">{{ $t('task') }}</th>
+      </th>
-         <th scope="col"></th>
+      <th scope="col">
+        {{ $t('max_date') }}
+      </th>
+      <th scope="col">
+        {{ $t('task') }}
+      </th>
+      <th scope="col" />
     </template>
-      <template v-slot:tbody>
+    <template #tbody>
-         <tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
+      <tr
-            <td v-if="null !== t.warningDate">{{ $d(t.warningDate.datetime, 'short') }}</td>
+        v-for="(t, i) in tasks.alert.results"
-            <td v-else></td>
+        :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)">
+          <a
+            class="btn btn-sm btn-show"
+            :href="getUrl(t)"
+          >
             {{ $t('show_entity', { entity: $t('the_task') }) }}
           </a>
         </td>
@@ -26,31 +44,47 @@
     </template>
   </tab-table>
 
-   <div class="alert alert-light">{{ $t('my_tasks.description_alert') }}</div>
+  <div class="alert alert-light">
-   <span v-if="noResultsWarning" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+    {{ $t('my_tasks.description_alert') }}
+  </div>
+  <span
+    v-if="noResultsWarning"
+    class="chill-no-data-statement"
+  >{{ $t('no_data') }}</span>
   <tab-table v-else>
-      <template v-slot:thead>
+    <template #thead>
-         <th scope="col">{{ $t('warning_date') }}</th>
+      <th scope="col">
-         <th scope="col">{{ $t('max_date') }}</th>
+        {{ $t('warning_date') }}
-         <th scope="col">{{ $t('task') }}</th>
+      </th>
-         <th scope="col"></th>
+      <th scope="col">
+        {{ $t('max_date') }}
+      </th>
+      <th scope="col">
+        {{ $t('task') }}
+      </th>
+      <th scope="col" />
     </template>
-      <template v-slot:tbody>
+    <template #tbody>
-         <tr v-for="(t, i) in tasks.warning.results" :key="`task-warning-${i}`">
+      <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)">
+          <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>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue

@@ -1,8 +1,12 @@
 <template>
-    <div class="alert alert-light">{{ $t('my_workflows.description') }}</div>
+  <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>
+  <div class="alert alert-light">
+    {{ $t('my_workflows.description_cc') }}
+  </div>
   <my-workflows-table :workflows="workflowsCc" />
 </template>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue

@@ -1,36 +1,55 @@
 <template>
-    <span v-if="hasNoResults(workflows)" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+  <span
+    v-if="hasNoResults(workflows)"
+    class="chill-no-data-statement"
+  >{{ $t('no_data') }}</span>
   <tab-table v-else>
-        <template v-slot:thead>
+    <template #thead>
-            <th scope="col">{{ $t('Object_workflow') }}</th>
+      <th scope="col">
-            <th scope="col">{{ $t('Step') }}</th>
+        {{ $t('Object_workflow') }}
-            <th scope="col">{{ $t('concerned_users') }}</th>
+      </th>
-            <th scope="col"></th>
+      <th scope="col">
+        {{ $t('Step') }}
+      </th>
+      <th scope="col">
+        {{ $t('concerned_users') }}
+      </th>
+      <th scope="col" />
     </template>
-        <template v-slot:tbody>
+    <template #tbody>
-            <tr v-for="(w, i) in workflows.results" :key="`workflow-${i}`">
+      <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"></i>
+              <i class="fa fa-circle me-1 text-chill-yellow mx-2" />
               <span class="mx-2">{{ getStep(w) }}</span>
             </div>
           </div>
         </td>
         <td v-if="w.datas.persons !== null">
-                    <span v-for="p in w.datas.persons" class="me-1" :key="p.id">
+          <span
+            v-for="p in w.datas.persons"
+            class="me-1"
+            :key="p.id"
+          >
             <on-the-fly
               :type="p.type"
               :id="p.id"
-                            :buttonText="p.textAge"
+              :button-text="p.textAge"
-                            :displayBadge="'true' === 'true'"
+              :display-badge="'true' === 'true'"
-                            action="show">
+              action="show"
-                        </on-the-fly>
+            />
           </span>
         </td>
         <td>
-                <a class="btn btn-sm btn-show" :href="getUrl(w)">
+          <a
+            class="btn btn-sm btn-show"
+            :href="getUrl(w)"
+          >
             {{ $t('show_entity', { entity: $t('the_workflow') }) }}
           </a>
         </td>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue

@@ -1,17 +1,31 @@
 // CURRENTLY NOT IN USE
 <template>
   <div class="accompanying-course-work">
-   <div class="alert alert-light">{{ $t('my_works.description') }}</div>
+    <div class="alert alert-light">
-   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+      {{ $t('my_works.description') }}
+    </div>
+    <span
+      v-if="noResults"
+      class="chill-no-data-statement"
+    >{{ $t('no_data') }}</span>
     <tab-table v-else>
-      <template v-slot:thead>
+      <template #thead>
-         <th scope="col">{{ $t('StartDate') }}</th>
+        <th scope="col">
-         <th scope="col">{{ $t('SocialAction') }}</th>
+          {{ $t('StartDate') }}
-         <th scope="col">{{ $t('concerned_persons') }}</th>
+        </th>
-         <th scope="col"></th>
+        <th scope="col">
+          {{ $t('SocialAction') }}
+        </th>
+        <th scope="col">
+          {{ $t('concerned_persons') }}
+        </th>
+        <th scope="col" />
       </template>
-      <template v-slot:tbody>
+      <template #tbody>
-         <tr v-for="(w, i) in works.results" :key="`works-${i}`">
+        <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">
@@ -20,29 +34,43 @@
               </span>
             </span>
             <h4 class="badge-title">
-                  <span class="title_label"></span>
+              <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">
+            <span
+              v-for="person in w.persons"
+              class="me-1"
+              :key="person.id"
+            >
               <on-the-fly
                 :type="person.type"
                 :id="person.id"
-                     :buttonText="person.textAge"
+                :button-text="person.textAge"
-                     :displayBadge="'true' === 'true'"
+                :display-badge="'true' === 'true'"
-                     action="show">
+                action="show"
-                  </on-the-fly>
+              />
             </span>
           </td>
           <td>
-               <div class="btn-group-vertical" role="group" aria-label="Actions">
+            <div
-                  <a class="btn btn-sm btn-update" :href="getUrl(w)">
+              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)">
+              <a
+                class="btn btn-sm btn-show"
+                :href="getUrl(w.accompanyingPeriod)"
+              >
                 {{ $t('show_entity', { entity: $t('the_course') }) }}
               </a>
             </div>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue

@@ -1,6 +1,8 @@
 <template>
-   <span v-if="isCounterAvailable"
+  <span
-         class="badge rounded-pill bg-danger">
+    v-if="isCounterAvailable"
+    class="badge rounded-pill bg-danger"
+  >
     {{ count }}
   </span>
 </template>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue

@@ -2,11 +2,11 @@
   <table class="table table-striped table-hover">
     <thead>
       <tr>
-            <slot name="thead"></slot>
+        <slot name="thead" />
       </tr>
     </thead>
     <tbody>
-         <slot name="tbody"></slot>
+      <slot name="tbody" />
     </tbody>
   </table>
 </template>

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue

@@ -3,12 +3,12 @@
     :type="context.type"
     :id="context.id"
     :action="context.action"
-        :buttonText="options.buttonText"
+    :button-text="options.buttonText"
-        :displayBadge="options.displayBadge === 'true'"
+    :display-badge="options.displayBadge === 'true'"
-        :isDead="options.isDead"
+    :is-dead="options.isDead"
     :parent="options.parent"
-        @saveFormOnTheFly="saveFormOnTheFly">
+    @save-form-on-the-fly="saveFormOnTheFly"
-    </on-the-fly>
+  />
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue

@@ -1,17 +1,41 @@
 <template>
   <ul class="nav nav-tabs">
-      <li v-if="allowedTypes.includes('person')" class="nav-item">
+    <li
-         <a class="nav-link" :class="{ active: isActive('person') }">
+      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">
+          <input
+            type="radio"
+            name="person"
+            id="person"
+            v-model="radioType"
+            value="person"
+          >
           {{ $t('onthefly.create.person') }}
         </label>
       </a>
     </li>
-      <li v-if="allowedTypes.includes('thirdparty')" class="nav-item">
+    <li
-         <a class="nav-link" :class="{ active: isActive('thirdparty') }">
+      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">
+          <input
+            type="radio"
+            name="thirdparty"
+            id="thirdparty"
+            v-model="radioType"
+            value="thirdparty"
+          >
           {{ $t('onthefly.create.thirdparty') }}
         </label>
       </a>
@@ -24,16 +48,14 @@
       :action="action"
       :query="query"
       ref="castPerson"
-      >
+    />
-      </on-the-fly-person>
 
     <on-the-fly-thirdparty
       v-if="type === 'thirdparty'"
       :action="action"
       :query="query"
       ref="castThirdparty"
-      >
+    />
-      </on-the-fly-thirdparty>
   </div>
 </template>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue

@@ -1,34 +1,57 @@
 <template>
-
+  <a
-   <a v-if="isDisplayBadge" @click="openModal">
+    v-if="isDisplayBadge"
-      <span class="chill-entity" :class="badgeType">
+    @click="openModal"
+  >
+    <span
+      class="chill-entity"
+      :class="badgeType"
+    >
       {{ buttonText }}<span v-if="isDead"> (‡)</span>
     </span>
   </a>
-   <a v-else class="btn btn-sm" target="_blank"
+  <a
+    v-else
+    class="btn btn-sm"
+    target="_blank"
     :class="classAction"
     :title="$t(titleAction)"
-      @click="openModal">
+    @click="openModal"
+  >
     {{ buttonText }}<span v-if="isDead"> (‡)</span>
   </a>
 
   <teleport to="body">
-      <modal v-if="modal.showModal"
+    <modal
-         :modalDialogClass="modal.modalDialogClass"
+      v-if="modal.showModal"
-         @close="modal.showModal = false">
+      :modal-dialog-class="modal.modalDialogClass"
-
+      @close="modal.showModal = false"
-         <template v-slot:header>
+    >
-            <h3 v-if="parent" class="modal-title">{{ $t(titleModal, {q: parent.text}) }}</h3>
+      <template #header>
-            <h3 v-else class="modal-title">{{ $t(titleModal) }}</h3>
+        <h3
+          v-if="parent"
+          class="modal-title"
+        >
+          {{ $t(titleModal, {q: parent.text}) }}
+        </h3>
+        <h3
+          v-else
+          class="modal-title"
+        >
+          {{ $t(titleModal) }}
+        </h3>
       </template>
 
-         <template v-slot:body v-if="type === 'person'">
+      <template
+        #body
+        v-if="type === 'person'"
+      >
         <on-the-fly-person
           :id="id"
           :type="type"
           :action="action"
-               ref="castPerson">
+          ref="castPerson"
-            </on-the-fly-person>
+        />
         <div v-if="hasResourceComment">
           <h3>{{ $t('onthefly.resource_comment_title') }}</h3>
           <blockquote class="chill-user-quote">
@@ -37,13 +60,16 @@
         </div>
       </template>
 
-         <template v-slot:body v-else-if="type === 'thirdparty'">
+      <template
+        #body
+        v-else-if="type === 'thirdparty'"
+      >
         <on-the-fly-thirdparty
           :id="id"
           :type="type"
           :action="action"
-               ref="castThirdparty">
+          ref="castThirdparty"
-            </on-the-fly-thirdparty>
+        />
         <div v-if="hasResourceComment">
           <h3>{{ $t('onthefly.resource_comment_title') }}</h3>
           <blockquote class="chill-user-quote">
@@ -52,40 +78,48 @@
         </div>
       </template>
 
-         <template v-slot:body v-else-if="parent">
+      <template
+        #body
+        v-else-if="parent"
+      >
         <on-the-fly-thirdparty
           :parent="parent"
           :action="action"
           type="thirdparty"
-               ref="castThirdparty">
+          ref="castThirdparty"
-            </on-the-fly-thirdparty>
+        />
       </template>
 
-         <template v-slot:body v-else>
+      <template
+        #body
+        v-else
+      >
         <on-the-fly-create
           :action="action"
-               :allowedTypes="allowedTypes"
+          :allowed-types="allowedTypes"
           :query="query"
-               ref="castNew">
+          ref="castNew"
-            </on-the-fly-create>
+        />
       </template>
 
-         <template v-slot:footer>
+      <template #footer>
-            <a v-if="action === 'show'"
+        <a
+          v-if="action === 'show'"
           :href="buildLocation(id, type)"
           :title="$t(titleMessage)"
-               class="btn btn-show">{{ $t(buttonMessage) }}
+          class="btn btn-show"
+        >{{ $t(buttonMessage) }}
         </a>
-            <a v-else
+        <a
+          v-else
           class="btn btn-save"
-               @click="saveAction">
+          @click="saveAction"
+        >
           {{ $t('action.save') }}
         </a>
       </template>
-
     </modal>
   </teleport>
-
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -1,6 +1,13 @@
 <template>
-    <ul :class="listClasses" v-if="picked.length && displayPicked">
+  <ul
-        <li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
+    :class="listClasses"
+    v-if="picked.length && displayPicked"
+  >
+    <li
+      v-for="p in picked"
+      @click="removeEntity(p)"
+      :key="p.type+p.id"
+    >
       <span class="chill_denomination">{{ p.text }}</span>
     </li>
   </ul>
@@ -9,16 +16,21 @@
       <add-persons
         :options="addPersonsOptions"
         :key="uniqid"
-                :buttonTitle="translatedListOfTypes"
+        :button-title="translatedListOfTypes"
-                :modalTitle="translatedListOfTypes"
+        :modal-title="translatedListOfTypes"
         ref="addPersons"
-                @addNewPersons="addNewEntity"
+        @add-new-persons="addNewEntity"
-            >
+      />
-            </add-persons>
     </li>
   </ul>
   <ul class="list-suggest add-items inline">
-      <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)"><span>{{ s.text }}</span></li>
+    <li
+      v-for="s in suggested"
+      :key="s.id"
+      @click="addNewSuggested(s)"
+    >
+      <span>{{ s.text }}</span>
+    </li>
   </ul>
 </template>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue

@@ -19,7 +19,8 @@
       :multiple="false"
       :internal-search="false"
       :loading="isLoading"
-       :options="cities"></vue-multiselect>
+      :options="cities"
+    />
   </div>
 </template>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue

@@ -1,17 +1,31 @@
 <template>
-
+  <span
-    <span v-if="entity.type === 'person'" class="badge rounded-pill bg-person">
+    v-if="entity.type === 'person'"
+    class="badge rounded-pill bg-person"
+  >
     {{ $t('person') }}
   </span>
 
-    <span v-if="entity.type === 'thirdparty'" class="badge rounded-pill bg-thirdparty">
+  <span
+    v-if="entity.type === 'thirdparty'"
+    class="badge rounded-pill bg-thirdparty"
+  >
     <template v-if="options.displayLong !== true">
       {{ $t('thirdparty.thirdparty') }}
     </template>
 
-        <i class="fa fa-fw fa-user" v-if="entity.kind === 'child'"></i>
+    <i
-        <i class="fa fa-fw fa-hospital-o" v-else-if="entity.kind === 'company'"></i>
+      class="fa fa-fw fa-user"
-        <i class="fa fa-fw fa-user-md" v-else></i>
+      v-if="entity.kind === 'child'"
+    />
+    <i
+      class="fa fa-fw fa-hospital-o"
+      v-else-if="entity.kind === 'company'"
+    />
+    <i
+      class="fa fa-fw fa-user-md"
+      v-else
+    />
 
     <template v-if="options.displayLong === true">
       <span v-if="entity.kind === 'child'">{{ $t('thirdparty.child') }}</span>
@@ -20,15 +34,19 @@
     </template>
   </span>
 
-    <span v-if="entity.type === 'user'" class="badge rounded-pill bg-user">
+  <span
+    v-if="entity.type === 'user'"
+    class="badge rounded-pill bg-user"
+  >
     {{ $t('user') }}
   </span>
 
-    <span v-if="entity.type === 'household'" class="badge rounded-pill bg-user">
+  <span
+    v-if="entity.type === 'household'"
+    class="badge rounded-pill bg-user"
+  >
     {{ $t('household') }}
   </span>
-
-
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="confidential">
     <div :class="{ 'blur': isBlurred }">
-            <slot name="confidential-content"></slot>
+      <slot name="confidential-content" />
     </div>
     <div class="toggle-container">
-            <i class="fa toggle" :class="toggleIcon" aria-hidden="true" @click="toggleBlur"></i>
+      <i
+        class="fa toggle"
+        :class="toggleIcon"
+        aria-hidden="true"
+        @click="toggleBlur"
+      />
     </div>
   </div>
 </template>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue

@@ -1,29 +1,47 @@
 <template>
-
+  <component
-   <component :is="component" class="chill-entity entity-address">
+    :is="component"
-
+    class="chill-entity entity-address"
-      <component :is="component" class="address" :class="multiline">
+  >
-
+    <component
+      :is="component"
+      class="address"
+      :class="multiline"
+    >
       <div v-if="isConfidential">
-            <confidential :positionBtnFar="true">
+        <confidential :position-btn-far="true">
-               <template v-slot:confidential-content>
+          <template #confidential-content>
             <div v-if="isMultiline === true">
-                     <p v-for="(l, i) in address.lines" :key="`line-${i}`">
+              <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"></address-details-button></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"
+              <p
-                        class="street">
+                v-if="'' !== address.text"
+                class="street"
+              >
                 {{ address.text }}
               </p>
-                     <p v-if="null !== address.postcode"
+              <p
-                        class="postcode">
+                v-if="null !== address.postcode"
+                class="postcode"
+              >
                 {{ address.postcode.code }} {{ address.postcode.name }}
               </p>
-                     <p v-if="null !== address.country"
+              <p
-                        class="country">
+                v-if="null !== address.country"
+                class="country"
+              >
                 {{ address.country.name.fr }}
               </p>
             </div>
@@ -33,22 +51,39 @@
 
       <div v-if="!isConfidential">
         <div v-if="isMultiline === true">
-               <p v-for="(l, i) in address.lines" :key="`line-${i}`">
+          <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"></address-details-button></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"
+          <p
-                  class="street">
+            v-if="address.text"
-                  {{ address.text }} <template v-if="showButtonDetails"><address-details-button :address_id="address.address_id" :address_ref_status="address.refStatus"></address-details-button></template>
+            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="useDatePane === true"
+      class="address-more"
+    >
       <div v-if="address.validFrom">
         <span class="validFrom">
           <b>{{ $t('validFrom') }}</b>: {{ $d(address.validFrom.date) }}
@@ -60,7 +95,6 @@
         </span>
       </div>
     </div>
-
   </component>
 </template>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue

@@ -1,5 +1,5 @@
 <template>
-<i :class="gender.icon"></i>
+  <i :class="gender.icon" />
 </template>
 
 <script setup>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue

@@ -1,7 +1,17 @@
 <template>
   <span class="chill-entity entity-user">
     {{ user.label }}
-    <span class="user-job" v-if="user.user_job !== null">({{ user.user_job.label.fr }})</span> <span class="main-scope" v-if="user.main_scope !== null">({{ user.main_scope.name.fr }})</span> <span v-if="user.isAbsent" class="badge bg-danger rounded-pill" :title="Absent">A</span>
+    <span
+      class="user-job"
+      v-if="user.user_job !== null"
+    >({{ user.user_job.label.fr }})</span> <span
+      class="main-scope"
+      v-if="user.main_scope !== null"
+    >({{ user.main_scope.name.fr }})</span> <span
+      v-if="user.isAbsent"
+      class="badge bg-danger rounded-pill"
+      :title="Absent"
+    >A</span>
   </span>
 </template>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue

@@ -1,19 +1,39 @@
 <template>
   <div class="d-grid gap-2 my-3">
-        <button class="btn btn-misc" type="button" v-if="!subscriberFinal" @click="subscribeTo('subscribe', 'final')">
+    <button
-            <i class="fa fa-check fa-fw"></i>
+      class="btn btn-misc"
+      type="button"
+      v-if="!subscriberFinal"
+      @click="subscribeTo('subscribe', 'final')"
+    >
+      <i class="fa fa-check fa-fw" />
       {{ $t('subscribe_final') }}
     </button>
-        <button class="btn btn-misc" type="button" v-if="subscriberFinal" @click="subscribeTo('unsubscribe', 'final')">
+    <button
-            <i class="fa fa-times fa-fw"></i>
+      class="btn btn-misc"
+      type="button"
+      v-if="subscriberFinal"
+      @click="subscribeTo('unsubscribe', 'final')"
+    >
+      <i class="fa fa-times fa-fw" />
       {{ $t('unsubscribe_final') }}
     </button>
-        <button class="btn btn-misc" type="button" v-if="!subscriberStep" @click="subscribeTo('subscribe', 'step')">
+    <button
-            <i class="fa fa-check fa-fw"></i>
+      class="btn btn-misc"
+      type="button"
+      v-if="!subscriberStep"
+      @click="subscribeTo('subscribe', 'step')"
+    >
+      <i class="fa fa-check fa-fw" />
       {{ $t('subscribe_all_steps') }}
     </button>
-        <button class="btn btn-misc" type="button" v-if="subscriberStep" @click="subscribeTo('unsubscribe', 'step')">
+    <button
-            <i class="fa fa-times fa-fw"></i>
+      class="btn btn-misc"
+      type="button"
+      v-if="subscriberStep"
+      @click="subscribeTo('unsubscribe', 'step')"
+    >
+      <i class="fa fa-times fa-fw" />
       {{ $t('unsubscribe_all_steps') }}
     </button>
   </div>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue

@@ -1,8 +1,13 @@
 <template>
-   <div class="flex-table workflow" id="workflow-list">
+  <div
-      <div v-for="(w, i) in workflows" :key="`workflow-${i}`"
+    class="flex-table workflow"
-         class="item-bloc">
+    id="workflow-list"
-
+  >
+    <div
+      v-for="(w, i) in workflows"
+      :key="`workflow-${i}`"
+      class="item-bloc"
+    >
       <div>
         <div class="item-row col">
           <h2>{{ w.title }}</h2>
@@ -15,22 +20,29 @@
         </div>
 
         <div class="breadcrumb">
-               <template v-for="(step, j) in w.steps" :key="`step-${j}`">
+          <template
-                  <span class="mx-2"
+            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)">
+              :data-bs-content="getPopContent(step)"
+            >
 
-                     <i v-if="step.currentStep.name === 'initial'"
+              <i
-                        class="fa fa-circle me-1 text-chill-yellow">
+                v-if="step.currentStep.name === 'initial'"
-                     </i>
+                class="fa fa-circle me-1 text-chill-yellow"
-                     <i v-if="step.isFreezed"
+              />
-                        class="fa fa-snowflake-o fa-sm me-1">
+              <i
-                     </i>
+                v-if="step.isFreezed"
+                class="fa fa-snowflake-o fa-sm me-1"
+              />
               {{ step.currentStep.text }}
             </span>
             <span v-if="j !== Object.keys(w.steps).length - 1">
@@ -43,23 +55,26 @@
       <div class="item-row">
         <div class="item-col flex-grow-1">
           <p v-if="isUserSubscribedToStep(w)">
-                  <i class="fa fa-check fa-fw"></i>
+            <i class="fa fa-check fa-fw" />
             {{ $t('you_subscribed_to_all_steps') }}
           </p>
           <p v-if="isUserSubscribedToFinal(w)">
-                  <i class="fa fa-check fa-fw"></i>
+            <i class="fa fa-check fa-fw" />
             {{ $t('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="$t('action.show')"></a>
+              <a
+                :href="goToUrl(w)"
+                class="btn btn-sm btn-show"
+                :title="$t('action.show')"
+              />
             </li>
           </ul>
         </div>
       </div>
-
     </div>
   </div>
 </template>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue

@@ -1,48 +1,57 @@
 <template>
-
+  <button
-   <button v-if="hasWorkflow"
+    v-if="hasWorkflow"
     class="btn btn-primary"
-      @click="openModal">
+    @click="openModal"
+  >
     <b>{{ countWorkflows }}</b>
-      <template v-if="countWorkflows > 1">{{ $t('workflows') }}</template>
+    <template v-if="countWorkflows > 1">
-      <template v-else>{{ $t('workflow') }}</template>
+      {{ $t('workflows') }}
+    </template>
+    <template v-else>
+      {{ $t('workflow') }}
+    </template>
   </button>
 
-   <pick-workflow v-else-if="allowCreate"
+  <pick-workflow
-      :relatedEntityClass="this.relatedEntityClass"
+    v-else-if="allowCreate"
-      :relatedEntityId="this.relatedEntityId"
+    :related-entity-class="this.relatedEntityClass"
-      :workflowsAvailables="workflowsAvailables"
+    :related-entity-id="this.relatedEntityId"
-      :preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
+    :workflows-availables="workflowsAvailables"
-      :goToGenerateWorkflowPayload="this.goToGenerateWorkflowPayload"
+    :prevent-default-move-to-generate="this.$props.preventDefaultMoveToGenerate"
+    :go-to-generate-workflow-payload="this.goToGenerateWorkflowPayload"
     @go-to-generate-workflow="goToGenerateWorkflow"
-   ></pick-workflow>
+  />
 
   <teleport to="body">
-      <modal v-if="modal.showModal"
+    <modal
-         :modalDialogClass="modal.modalDialogClass"
+      v-if="modal.showModal"
-         @close="modal.showModal = false">
+      :modal-dialog-class="modal.modalDialogClass"
-
+      @close="modal.showModal = false"
-         <template v-slot:header>
+    >
-            <h2 class="modal-title">{{ $t('workflow_list') }}</h2>
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t('workflow_list') }}
+        </h2>
       </template>
 
-         <template v-slot:body>
+      <template #body>
         <list-workflow-vue
           :workflows="workflows"
-            ></list-workflow-vue>
+        />
       </template>
 
-         <template v-slot:footer>
+      <template #footer>
-            <pick-workflow v-if="allowCreate"
+        <pick-workflow
-               :relatedEntityClass="this.relatedEntityClass"
+          v-if="allowCreate"
-               :relatedEntityId="this.relatedEntityId"
+          :related-entity-class="this.relatedEntityClass"
-               :workflowsAvailables="workflowsAvailables"
+          :related-entity-id="this.relatedEntityId"
-               :preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
+          :workflows-availables="workflowsAvailables"
-               :goToGenerateWorkflowPayload="this.goToGenerateWorkflowPayload"
+          :prevent-default-move-to-generate="this.$props.preventDefaultMoveToGenerate"
+          :go-to-generate-workflow-payload="this.goToGenerateWorkflowPayload"
           @go-to-generate-workflow="this.goToGenerateWorkflow"
-            ></pick-workflow>
+        />
       </template>
-
     </modal>
   </teleport>
 </template>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue

@@ -1,12 +1,28 @@
 <template>
   <template v-if="workflowsAvailables.length >= 1">
     <div class="dropdown d-grid gap-2">
-            <button class="btn btn-primary dropdown-toggle" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
+      <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">
+      <ul
-                <li v-for="w in workflowsAvailables" :key="w.name">
+        class="dropdown-menu"
-                    <a class="dropdown-item" :href="makeLink(w.name)" @click.prevent="goToGenerateWorkflow($event, w.name)">{{ w.text }}</a>
+        aria-labelledby="createWorkflowButton"
+      >
+        <li
+          v-for="w in workflowsAvailables"
+          :key="w.name"
+        >
+          <a
+            class="dropdown-item"
+            :href="makeLink(w.name)"
+            @click.prevent="goToGenerateWorkflow($event, w.name)"
+          >{{ w.text }}</a>
         </li>
       </ul>
     </div>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue

@@ -2,23 +2,46 @@
   <transition name="modal">
     <div class="modal-mask">
       <!-- :: styles bootstrap :: -->
-        <div class="modal fade show" style="display: block" aria-modal="true" role="dialog">
+      <div
-          <div class="modal-dialog" :class="modalDialogClass">
+        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>
+              <slot name="header" />
-                <button class="close btn" @click="$emit('close')">
+              <button
-                  <i class="fa fa-times" aria-hidden="true"></i></button>
+                class="close btn"
+                @click="$emit('close')"
+              >
+                <i
+                  class="fa fa-times"
+                  aria-hidden="true"
+                />
+              </button>
             </div>
             <div class="modal-body">
               <div class="body-head">
-                  <slot name="body-head"></slot>
+                <slot name="body-head" />
               </div>
-                <slot name="body"></slot>
+              <slot name="body" />
             </div>
-              <div class="modal-footer" v-if="!hideFooter">
+            <div
-                <button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
+              class="modal-footer"
-                <slot name="footer"></slot>
+              v-if="!hideFooter"
+            >
+              <button
+                class="btn btn-cancel"
+                @click="$emit('close')"
+              >
+                {{ $t('action.close') }}
+              </button>
+              <slot name="footer" />
             </div>
           </div>
         </div>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue

@@ -12,8 +12,11 @@
       :title="$t('markAsUnread')"
       @click="markAsUnread"
     >
-            <i class="fa fa-sm fa-envelope-o"></i>
+      <i class="fa fa-sm fa-envelope-o" />
-            <span v-if="!buttonNoText" class="ps-2">
+      <span
+        v-if="!buttonNoText"
+        class="ps-2"
+      >
         {{ $t("markAsUnread") }}
       </span>
     </button>
@@ -26,8 +29,11 @@
       :title="$t('markAsRead')"
       @click="markAsRead"
     >
-            <i class="fa fa-sm fa-envelope-open-o"></i>
+      <i class="fa fa-sm fa-envelope-open-o" />
-            <span v-if="!buttonNoText" class="ps-2">
+      <span
+        v-if="!buttonNoText"
+        class="ps-2"
+      >
         {{ $t("markAsRead") }}
       </span>
     </button>
@@ -39,7 +45,7 @@
       :href="showUrl"
       :title="$t('action.show')"
     >
-            <i class="fa fa-sm fa-comment-o"></i>
+      <i class="fa fa-sm fa-comment-o" />
     </a>
 
     <!-- "Mark All Read" button -->
@@ -51,8 +57,11 @@
       :title="$t('markAllRead')"
       @click="markAllRead"
     >
-            <i class="fa fa-sm fa-envelope-o"></i>
+      <i class="fa fa-sm fa-envelope-o" />
-            <span v-if="!buttonNoText" class="ps-2">
+      <span
+        v-if="!buttonNoText"
+        class="ps-2"
+      >
         {{ $t("markAllRead") }}
       </span>
     </button>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue

@@ -1,11 +1,18 @@
 <template>
-   <a v-if="isOpenDocument"
+  <a
-      class="btn" :class="[
+    v-if="isOpenDocument"
+    class="btn"
+    :class="[
       isChangeIcon ? 'change-icon' : '',
       isChangeClass ? options.changeClass : 'btn-wopilink' ]"
-      @click="openModal">
+    @click="openModal"
+  >
       
-      <i v-if="isChangeIcon" class="fa me-2" :class="options.changeIcon"></i>
+    <i
+      v-if="isChangeIcon"
+      class="fa me-2"
+      :class="options.changeIcon"
+    />
       
     <span v-if="!noText">
       {{ $t('online_edit_document') }}
@@ -13,14 +20,22 @@
   </a>
    
   <teleport to="body">
-      <div class="wopi-frame" v-if="isOpenDocument">
+    <div
-         <modal v-if="modal.showModal"
+      class="wopi-frame"
-            :modalDialogClass="modal.modalDialogClass"
+      v-if="isOpenDocument"
-            :hideFooter=true
+    >
-            @close="modal.showModal = false">
+      <modal
-            
+        v-if="modal.showModal"
-            <template v-slot:header>
+        :modal-dialog-class="modal.modalDialogClass"
-               <img class="logo" :src="logo" height="45"/>
+        :hide-footer="true"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <img
+            class="logo"
+            :src="logo"
+            height="45"
+          >
           <span class="ms-auto me-3">
             <span v-if="options.title">{{ options.title }}</span>
           </span>
@@ -32,30 +47,37 @@
                   -->
         </template>
             
-            <template v-slot:body>
+        <template #body>
-               <div v-if="loading" class="loading">
+          <div
-                  <i class="fa fa-circle-o-notch fa-spin fa-3x" :title="$t('loading')"></i>
+            v-if="loading"
+            class="loading"
+          >
+            <i
+              class="fa fa-circle-o-notch fa-spin fa-3x"
+              :title="$t('loading')"
+            />
           </div>
           <iframe
             :src="this.wopiUrl"
             @load="loaded"
-               ></iframe>
+          />
         </template>
-            
       </modal>
     </div>
     <div v-else>
-         <modal v-if="modal.showModal"
+      <modal
-            modalDialogClass="modal-sm"
+        v-if="modal.showModal"
-            @close="modal.showModal = false">
+        modal-dialog-class="modal-sm"
-            
+        @close="modal.showModal = false"
-            <template v-slot:header>
+      >
+        <template #header>
           <h3>{{ $t('invalid_title') }}</h3>
         </template>
-            <template v-slot:body>
+        <template #body>
-               <div class="alert alert-warning">{{ $t('invalid_message') }}</div>
+          <div class="alert alert-warning">
+            {{ $t('invalid_message') }}
+          </div>
         </template>
-   
       </modal>
     </div>
   </teleport>

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

@@ -1,22 +1,26 @@
 <template>
-   <banner></banner>
+  <banner />
-   <sticky-nav></sticky-nav>
+  <sticky-nav />
 
-   <h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
+  <h1 v-if="accompanyingCourse.step === 'DRAFT'">
-   <h1 v-else>{{ $t('course.title.active') }}</h1>
+    {{ $t('course.title.draft') }}
+  </h1>
+  <h1 v-else>
+    {{ $t('course.title.active') }}
+  </h1>
 
-   <persons-associated></persons-associated>
+  <persons-associated />
-   <course-location></course-location>
+  <course-location />
-   <origin-demand></origin-demand>
+  <origin-demand />
-   <admin-location></admin-location>
+  <admin-location />
-   <requestor v-bind:isAnonymous="accompanyingCourse.requestorAnonymous"></requestor>
+  <requestor :is-anonymous="accompanyingCourse.requestorAnonymous" />
-   <social-issue></social-issue>
+  <social-issue />
-   <scopes></scopes>
+  <scopes />
-   <referrer></referrer>
+  <referrer />
-   <resources></resources>
+  <resources />
-   <start-date v-if="accompanyingCourse.step.startsWith('CONFIRMED')"></start-date>
+  <start-date v-if="accompanyingCourse.step.startsWith('CONFIRMED')" />
-   <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
+  <comment v-if="accompanyingCourse.step === 'DRAFT'" />
-   <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
+  <confirm v-if="accompanyingCourse.step === 'DRAFT'" />
 
   <!-- <div v-for="error in errorMsg" v-bind:key="error.id" class="vue-component errors alert alert-danger">
        <p>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-      <h2><a id="section-40"></a>{{ $t('admin_location.title') }}</h2>
+    <h2><a id="section-40" />{{ $t('admin_location.title') }}</h2>
 
     <div class="mb-4">
       <label for="selectAdminLocation">
@@ -22,11 +22,14 @@
         :select-label="$t('multiselect.select_label')"
         :deselect-label="$t('multiselect.deselect_label')"
         :selected-label="$t('multiselect.selected_label')"
-            @select="updateAdminLocation">
+        @select="updateAdminLocation"
-         </VueMultiselect>
+      />
     </div>
 
-      <div v-if="!isAdminLocationValid" class="alert alert-warning to-confirm">
+    <div
+      v-if="!isAdminLocationValid"
+      class="alert alert-warning to-confirm"
+    >
       {{ $t('admin_location.not_valid') }}
     </div>
   </div>

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

@@ -1,28 +1,41 @@
 <template>
-
   <teleport to="#header-accompanying_course-name #banner-flags">
-      <toggle-flags></toggle-flags>
+    <toggle-flags />
   </teleport>
 
   <teleport to="#header-accompanying_course-name #banner-status">
-      <span v-if="accompanyingCourse.step === 'DRAFT'"
+    <span
-         class="text-md-end d-md-block">
+      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
-         <span v-if="accompanyingCourse.step === 'CONFIRMED'" class="d-md-block mb-md-3">
+      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
+        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
+        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>
@@ -31,17 +44,26 @@
         <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
+          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>
+            <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
+      v-else
+      class="text-md-end d-md-block"
+    >
       <span class="badge bg-danger">
         {{ $t('course.step.closed') }}
       </span>
@@ -49,7 +71,10 @@
         <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
+          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>
@@ -59,15 +84,14 @@
   <teleport to="#header-accompanying_course-details #banner-social-issues">
     <social-issue
       v-for="issue in accompanyingCourse.socialIssues"
-         v-bind:key="issue.id"
+      :key="issue.id"
-         v-bind:issue="issue">
+      :issue="issue"
-      </social-issue>
+    />
   </teleport>
 
   <teleport to="#header-accompanying_course-details #banner-persons-associated">
-      <persons-associated :accompanyingCourse="accompanyingCourse"></persons-associated>
+    <persons-associated :accompanying-course="accompanyingCourse" />
   </teleport>
-
 </template>
 
 <script>

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

@@ -1,10 +1,30 @@
 <template>
-   <span v-for="h in personsByHousehold()" :class="{ 'household': householdExists(h.id), 'no-household': !householdExists(h.id) }" :key="h.id">
+  <span
-      <a v-if="householdExists(h.id)" :href="householdLink(h.id)">
+    v-for="h in personsByHousehold()"
-         <i class="fa fa-home fa-fw text-light" :title="$t('persons_associated.show_household_number', { id: h.id })"></i>
+    :class="{ 'household': householdExists(h.id), 'no-household': !householdExists(h.id) }"
+    :key="h.id"
+  >
+    <a
+      v-if="householdExists(h.id)"
+      :href="householdLink(h.id)"
+    >
+      <i
+        class="fa fa-home fa-fw text-light"
+        :title="$t('persons_associated.show_household_number', { id: h.id })"
+      />
     </a>
-      <span v-for="person in h.persons" class="me-1" :key="person.id">
+    <span
-         <on-the-fly :type="person.type" :id="person.id" :buttonText="person.textAge" :displayBadge="'true' === 'true'" action="show"></on-the-fly>
+      v-for="person in h.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>
   </span>
 </template>

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

@@ -1,18 +1,32 @@
 <template>
   <div class="text-md-end">
     <span class="d-block d-sm-inline-block mb-md-2">
-         <a @click="toggleIntensity" class="flag-toggle">
+      <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 }"></i>
+        <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">
+      <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">
+      <button
+        class="badge rounded-pill"
+        :class="{ 'bg-danger': isConfidential, 'bg-secondary': !isConfidential }"
+        @click="toggleConfidential"
+      >
         {{ $t('course.confidential') }}
       </button>
     </span>

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

@@ -1,23 +1,34 @@
 <template>
   <li>
-      <button class="btn btn-sm btn-secondary"
+    <button
+      class="btn btn-sm btn-secondary"
       @click="modal.showModal = true"
-         :title="$t('courselocation.assign_course_address')">
+      :title="$t('courselocation.assign_course_address')"
-         <i class="fa fa-map-marker"></i>
+    >
+      <i class="fa fa-map-marker" />
     </button>
   </li>
 
   <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+    <modal
-         <template v-slot:header>
+      v-if="modal.showModal"
-            <h2 class="modal-title">{{ $t('courselocation.sure') }}</h2>
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t('courselocation.sure') }}
+        </h2>
       </template>
-         <template v-slot:body>
+      <template #body>
-            <address-render-box :address="person.current_household_address"></address-render-box>
+        <address-render-box :address="person.current_household_address" />
         <p>{{ $t('courselocation.sure_description') }}</p>
       </template>
-         <template v-slot:footer>
+      <template #footer>
-            <button class="btn btn-danger" @click="assignAddress">
+        <button
+          class="btn btn-danger"
+          @click="assignAddress"
+        >
           {{ $t('courselocation.ok') }}
         </button>
       </template>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-      <h2><a id="section-100"></a>{{ $t('comment.title') }}</h2>
+    <h2><a id="section-100" />{{ $t('comment.title') }}</h2>
 
     <!--div class="error flash_message" v-if="errors.length > 0">
          {{ errors[0] }}
@@ -9,19 +9,24 @@
 
     <div>
       <form @submit.prevent="submitform">
-
+        <label
-            <label class="col-form-label" for="content">{{ $t('comment.label') }}</label>
+          class="col-form-label"
+          for="content"
+        >{{ $t('comment.label') }}</label>
 
         <ckeditor
           name="content"
           :placeholder="$t('comment.content')"
           :editor="editor"
           v-model="content"
-               tag-name="textarea">
+          tag-name="textarea"
-            </ckeditor>
+        />
 
         <div class="sub-comment">
-               <div v-if="pinnedComment !== null && typeof pinnedComment.creator !== 'undefined'" class="metadata">
+          <div
+            v-if="pinnedComment !== null && typeof pinnedComment.creator !== 'undefined'"
+            class="metadata"
+          >
             {{ $t('comment.created_by', [
               pinnedComment.creator.text,
               $d(pinnedComment.updatedAt.datetime, 'long')
@@ -29,24 +34,28 @@
             }}
           </div>
           <div class="loading">
-                  <i v-if="loading" class="fa fa-circle-o-notch fa-spin" :title="$t('loading')"></i>
+            <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"
+              <a
-                        @click="removeComment">
+                class="btn btn-delete"
+                @click="removeComment"
+              >
                 {{ $t('action.delete') }}
               </a>
             </li>
           </ul>
         </div>
-
       </form>
     </div>
-
   </div>
 </template>
 

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

@@ -1,31 +1,41 @@
 <template>
   <div class="vue-component">
-   <h2><a id="section-110"></a>
+    <h2>
+      <a id="section-110" />
       {{ $t('confirm.title') }}
     </h2>
     <div>
-      <p v-html="$t('confirm.text_draft', [$t('course.step.draft')])"></p>
+      <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>
+            <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"></i>
+                <i class="fa fa-level-up fa-fw" />
               </a>
             </li>
           </ul>
         </div>
         <ul class="record_actions">
           <li>
-               <button class="btn btn-save" disabled>
+            <button
+              class="btn btn-save"
+              disabled
+            >
               {{ $t('confirm.ok') }}
             </button>
           </li>
           <li>
-               <a class="btn btn-delete" :href="deleteLink">
+            <a
+              class="btn btn-delete"
+              :href="deleteLink"
+            >
               {{ $t('confirm.delete') }}
             </a>
           </li>
@@ -33,52 +43,72 @@
       </div>
 
       <div v-else>
-         <p v-html="$t('confirm.text_active', [$t('course.step.active')])"></p>
+        <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">
+              @click="modal.showModal = true"
+            >
               {{ $t('confirm.ok') }}
             </button>
           </li>
           <li>
-               <a class="btn btn-delete" :href="deleteLink">
+            <a
+              class="btn btn-delete"
+              :href="deleteLink"
+            >
               {{ $t('confirm.delete') }}
             </a>
           </li>
         </ul>
       </div>
-
     </div>
 
     <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+      <modal
-         <template v-slot:header>
+        v-if="modal.showModal"
-            <h2 class="modal-title">{{ $t('confirm.sure') }}</h2>
+        :modal-dialog-class="modal.modalDialogClass"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <h2 class="modal-title">
+            {{ $t('confirm.sure') }}
+          </h2>
         </template>
-         <template v-slot:body>
+        <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>
+              <p class="alert alert-warning">
+                {{ $t('confirm.no_suggested_referrer') }}
+              </p>
             </div>
-                <div v-if="usersSuggestedFilteredByJob.length === 1" class="alert alert-info">
+            <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]"></user-render-box-badge>
+                  <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">
+                  <button
+                    class="btn btn-save mr-5"
+                    @click="chooseSuggestedReferrer"
+                  >
                     {{ $t('confirm.choose_button') }}
                   </button>
                 </li>
                 <li>
-                     <button class="btn btn-secondary" @click="doNotChooseSuggestedReferrer">
+                  <button
+                    class="btn btn-secondary"
+                    @click="doNotChooseSuggestedReferrer"
+                  >
                     {{ $t('confirm.do_not_choose_button') }}
                   </button>
                 </li>
@@ -86,14 +116,17 @@
             </div>
           </div>
         </template>
-         <template v-slot:footer>
+        <template #footer>
-            <button class="btn btn-danger" :disabled="disableConfirm" @click="confirmCourse">
+          <button
+            class="btn btn-danger"
+            :disabled="disableConfirm"
+            @click="confirmCourse"
+          >
             {{ $t('confirm.ok') }}
           </button>
         </template>
       </modal>
     </teleport>
-
   </div>
 </template>
 

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

@@ -1,10 +1,15 @@
 <template>
   <div class="vue-component">
-      <h2><a id="section-20"></a>
+    <h2>
+      <a id="section-20" />
       {{ $t('courselocation.title') }}
     </h2>
 
-      <div v-for="error in displayErrors" class="alert alert-danger my-2" :key="error">
+    <div
+      v-for="error in displayErrors"
+      class="alert alert-danger my-2"
+      :key="error"
+    >
       {{ error }}
     </div>
 
@@ -14,34 +19,46 @@
       </label>
     </div>
 
-      <div class="flex-table" v-if="accompanyingCourse.location">
+    <div
+      class="flex-table"
+      v-if="accompanyingCourse.location"
+    >
       <div class="item-bloc">
         <address-render-box
-               :address="accompanyingCourse.location">
+          :address="accompanyingCourse.location"
-            </address-render-box>
+        />
 
-            <div v-if="isPersonLocation" class="alert alert-secondary separator">
+        <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">
+        <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"></i>
+            <i class="fa fa-fw fa-map-marker" />
           </p>
         </div>
       </div>
     </div>
 
-      <div v-if="hasNoPersonLocation" class="alert alert-danger no-person-location">
+    <div
-         <i class="fa fa-warning fa-2x"></i>
+      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"></i>
+            <i class="fa fa-level-up fa-fw" />
           </a>
         </p>
       </div>
@@ -55,17 +72,19 @@
             :key="key"
             :context="context"
             :options="options"
-                  :addressChangedCallback="submitTemporaryAddress"
+            :address-changed-callback="submitTemporaryAddress"
-                  ref="addAddress">
+            ref="addAddress"
-               </add-address>
+          />
         </li>
       </ul>
     </div>
 
-      <div v-if="!isLocationValid" class="alert alert-warning to-confirm">
+    <div
+      v-if="!isLocationValid"
+      class="alert alert-warning to-confirm"
+    >
       {{ $t('courselocation.not_valid') }}
     </div>
-
   </div>
 </template>
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-      <h2><a id="section-30"></a>{{ $t('origin.title') }}</h2>
+    <h2><a id="section-30" />{{ $t('origin.title') }}</h2>
 
     <div class="mb-4">
       <label for="selectOrigin">
@@ -20,11 +20,14 @@
         :select-label="$t('multiselect.select_label')"
         :deselect-label="$t('multiselect.deselect_label')"
         :selected-label="$t('multiselect.selected_label')"
-            @select="updateOrigin">
+        @select="updateOrigin"
-         </VueMultiselect>
+      />
     </div>
 
-      <div v-if="!isOriginValid" class="alert alert-warning to-confirm">
+    <div
+      v-if="!isOriginValid"
+      class="alert alert-warning to-confirm"
+    >
       {{ $t('origin.not_valid') }}
     </div>
   </div>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-   <h2><a id="section-10"></a>{{ $t('persons_associated.title')}}</h2>
+    <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>
@@ -9,47 +9,83 @@
       <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">
+    <div
-      <i class="fa fa-warning fa-2x"></i>
+      v-if="participationWithoutHousehold.length > 0"
-      <form method="GET" action="/fr/person/household/members/editor">
+      class="alert alert-warning no-household"
-         <div class="float-button bottom"><div class="box">
+    >
+      <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>
+              <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>
+            <p class="mb-3">
-            <div class="form-check" v-for="p in participationWithoutHousehold" :key="p.id">
+              {{ $t('persons_associated.person_without_household_warning') }}
-               <input type="checkbox"
+            </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"></person-text>
+                <person-text :person="p.person" />
               </label>
             </div>
-            <input type="hidden" name="expand_suggestions" value="true">
+            <input
-            <input type="hidden" name="returnPath" :value="getReturnPath">
+              type="hidden"
-            <input type="hidden" name="accompanying_period_id" :value="courseId">
+              name="expand_suggestions"
-         </div></div>
+              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"
-         v-bind:participation="participation"
+        :participation="participation"
-         v-bind:key="participation.id"
+        :key="participation.id"
         @remove="removeParticipation"
-         @close="closeParticipation">
+        @close="closeParticipation"
-      </participation-item>
+      />
     </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)">
+        <li
-            <person-text :person="p"></person-text>
+          v-for="p in suggestedPersons"
+          :key="p.id"
+          @click="addSuggestedPerson(p)"
+        >
+          <person-text :person="p" />
         </li>
       </ul>
     </div>
@@ -58,18 +94,23 @@
       <ul class="record_actions">
         <li class="add-persons">
           <add-persons
-               buttonTitle="persons_associated.add_persons"
+            button-title="persons_associated.add_persons"
-               modalTitle="add_persons.title"
+            modal-title="add_persons.title"
-               v-bind:key="addPersons.key"
+            :key="addPersons.key"
-               v-bind:options="addPersons.options"
+            :options="addPersons.options"
-               @addNewPersons="addNewPersons"
+            @add-new-persons="addNewPersons"
-               ref="addPersons"> <!-- to cast child method -->
+            ref="addPersons"
+          >
+            <!-- to cast child method -->
           </add-persons>
         </li>
       </ul>
     </div>
 
-   <div v-if="!isParticipationValid" class="alert alert-warning to-confirm">
+    <div
+      v-if="!isParticipationValid"
+      class="alert alert-warning to-confirm"
+    >
       {{ $t('persons_associated.participation_not_valid') }}
     </div>
   </div>

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

@@ -1,5 +1,6 @@
 <template>
-   <person-render-box render="bloc"
+  <person-render-box
+    render="bloc"
     :options="{
       addInfo : true,
       addId : false,
@@ -13,48 +14,73 @@
       isMultiline: true,
     }"
     :person="participation.person"
-      :returnPath="getAccompanyingCourseReturnPath">
+    :return-path="getAccompanyingCourseReturnPath"
-
+  >
-      <template v-slot:end-bloc>
+    <template #end-bloc>
       <div class="item-row separator">
         <ul class="record_actions">
           <button-location
             v-if="hasCurrentHouseholdAddress && !isPersonLocatingCourse(participation.person)"
-                v-bind:person="participation.person">
+            :person="participation.person"
-            </button-location>
+          />
           <li v-if="participation.person.current_household_id">
-              <a class="btn btn-sm btn-chill-beige"
+            <a
+              class="btn btn-sm btn-chill-beige"
               :href="getCurrentHouseholdUrl"
-                 :title="$t('persons_associated.show_household_number', { id: participation.person.current_household_id })">
+              :title="$t('persons_associated.show_household_number', { id: participation.person.current_household_id })"
-                <i class="fa fa-fw fa-home"></i>
+            >
+              <i class="fa fa-fw fa-home" />
             </a>
           </li>
-            <li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="show"></on-the-fly></li>
-            <li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
           <li>
-              <button v-if="!participation.endDate"
+            <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"
-                      v-bind:title="$t('persons_associated.leave_course')"
+              :title="$t('persons_associated.leave_course')"
-                      @click="modal.showModal = true">
+              @click="modal.showModal = true"
-              </button>
+            />
           </li>
         </ul>
       </div>
-
     </template>
   </person-render-box>
 
 
   <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+    <modal
-         <template v-slot:header>
+      v-if="modal.showModal"
-            <h2 class="modal-title">{{ $t('persons_associated.sure') }}</h2>
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t('persons_associated.sure') }}
+        </h2>
       </template>
-         <template v-slot:body>
+      <template #body>
         <p>{{ $t('persons_associated.sure_description') }}</p>
       </template>
-         <template v-slot:footer>
+      <template #footer>
-            <button class="btn btn-danger" @click.prevent="$emit('close', participation)">
+        <button
+          class="btn btn-danger"
+          @click.prevent="$emit('close', participation)"
+        >
           {{ $t('persons_associated.ok') }}
         </button>
       </template>

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

@@ -1,24 +1,30 @@
 <template>
   <div class="vue-component">
-    <h2><a id="section-80"></a>{{ $t('referrer.title') }}</h2>
+    <h2><a id="section-80" />{{ $t('referrer.title') }}</h2>
 
     <teleport to="body">
-      <modal v-if="modal.showModal"
+      <modal
-             :modalDialogClass="modal.modalDialogClass"
+        v-if="modal.showModal"
-             @close="cancelChange">
+        :modal-dialog-class="modal.modalDialogClass"
-        <template v-slot:header>
+        @close="cancelChange"
-          <h3 class="modal-title">{{ $t('confirm.title') }}</h3>
+      >
+        <template #header>
+          <h3 class="modal-title">
+            {{ $t('confirm.title') }}
+          </h3>
         </template>
 
-        <template v-slot:body-head>
+        <template #body-head>
           <div class="modal-body">
-            <p v-html="$t('confirm.sure_referrer', { referrer: this.value.text })"></p>
+            <p v-html="$t('confirm.sure_referrer', { referrer: this.value.text })" />
           </div>
         </template>
 
-        <template v-slot:footer>
+        <template #footer>
-          <button class="btn btn-save"
+          <button
-                  @click.prevent="this.confirmReferrer">
+            class="btn btn-save"
+            @click.prevent="this.confirmReferrer"
+          >
             {{ $t('confirm.ok_referrer') }}
           </button>
         </template>
@@ -26,8 +32,10 @@
     </teleport>
 
     <div>
-
+      <label
-      <label class="col-form-label" for="selectJob">
+        class="col-form-label"
+        for="selectJob"
+      >
         {{ $t('job.label') }}
       </label>
 
@@ -44,9 +52,12 @@
         :select-label="$t('multiselect.select_label')"
         :deselect-label="$t('multiselect.deselect_label')"
         :selected-label="$t('multiselect.selected_label')"
-      ></VueMultiselect>
+      />
 
-      <label class="col-form-label" for="selectReferrer">
+      <label
+        class="col-form-label"
+        for="selectReferrer"
+      >
         {{ $t('referrer.label') }}
       </label>
 
@@ -64,13 +75,17 @@
         :select-label="$t('multiselect.select_label')"
         :deselect-label="$t('multiselect.deselect_label')"
         :selected-label="$t('multiselect.selected_label')"
-      ></VueMultiselect>
+      />
 
       <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}`">
+          <li
+            v-for="(u, i) in usersSuggestedFilteredByJob"
+            @click="updateReferrer(u)"
+            :key="`referrer-${i}`"
+          >
             <span>
-                  <user-render-box-badge :user="u"></user-render-box-badge>
+              <user-render-box-badge :user="u" />
             </span>
           </li>
         </ul>
@@ -84,17 +99,20 @@
             class="btn btn-create"
             type="button"
             name="button"
-              @click="assignMe">
+            @click="assignMe"
+          >
             {{ $t('referrer.assign_me') }}
           </button>
         </li>
       </ul>
     </div>
 
-    <div v-if="!isJobValid" class="alert alert-warning to-confirm">
+    <div
+      v-if="!isJobValid"
+      class="alert alert-warning to-confirm"
+    >
       {{ $t('job.not_valid') }}
     </div>
-
   </div>
 </template>
 

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

@@ -1,16 +1,21 @@
 <template>
   <div class="vue-component">
+    <h2><a id="section-50" />{{ $t('requestor.title') }}</h2>
 
-   <h2><a id="section-50"></a>{{ $t('requestor.title') }}</h2>
+    <div
-
+      v-if="accompanyingCourse.requestor && isAnonymous"
-   <div v-if="accompanyingCourse.requestor && isAnonymous" class="flex-table">
+      class="flex-table"
-
+    >
       <label>
-         <input type="checkbox" v-model="requestorIsAnonymous" class="me-2" />
+        <input
+          type="checkbox"
+          v-model="requestorIsAnonymous"
+          class="me-2"
+        >
         {{ $t('requestor.is_anonymous') }}
       </label>
       <confidential v-if="accompanyingCourse.requestor.type === 'thirdparty'">
-         <template v-slot:confidential-content>
+        <template #confidential-content>
           <third-party-render-box
             :thirdparty="accompanyingCourse.requestor"
             :options="{
@@ -23,10 +28,24 @@
               isConfidential: true
             }"
           >
-            <template v-slot:record-actions>
+            <template #record-actions>
               <ul class="record_actions">
-                  <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
+                <li>
-                  <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></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>
@@ -34,8 +53,9 @@
       </confidential>
 
       <confidential v-else-if="accompanyingCourse.requestor.type === 'person'">
-         <template v-slot:confidential-content>
+        <template #confidential-content>
-            <person-render-box render="bloc"
+          <person-render-box
+            render="bloc"
             :person="accompanyingCourse.requestor"
             :options="{
               addLink: false,
@@ -49,10 +69,24 @@
               addAge: true,
             }"
           >
-               <template v-slot:record-actions>
+            <template #record-actions>
               <ul class="record_actions">
-                     <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
+                <li>
-                     <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></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>
@@ -61,18 +95,27 @@
 
       <ul class="record_actions">
         <li>
-            <button class="btn btn-remove"
+          <button
+            class="btn btn-remove"
             :title="$t('action.remove')"
-               @click="removeRequestor">
+            @click="removeRequestor"
+          >
             {{ $t('action.remove') }}
           </button>
         </li>
       </ul>
     </div>
 
-   <div v-else-if="accompanyingCourse.requestor && !isAnonymous" class="flex-table">
+    <div
+      v-else-if="accompanyingCourse.requestor && !isAnonymous"
+      class="flex-table"
+    >
       <label>
-         <input type="checkbox" v-model="requestorIsAnonymous" class="me-2" />
+        <input
+          type="checkbox"
+          v-model="requestorIsAnonymous"
+          class="me-2"
+        >
         {{ $t('requestor.is_anonymous') }}
       </label>
 
@@ -89,15 +132,30 @@
           isConfidential: true
         }"
       >
-         <template v-slot:record-actions>
+        <template #record-actions>
           <ul class="record_actions">
-               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
+            <li>
-               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></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"
+      <person-render-box
+        render="bloc"
         v-if="accompanyingCourse.requestor.type === 'person'"
         :person="accompanyingCourse.requestor"
         :options="{
@@ -111,19 +169,35 @@
           isConfidential: false
         }"
       >
-         <template v-slot:record-actions>
+        <template #record-actions>
           <ul class="record_actions">
-               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
+            <li>
-               <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></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"
+          <button
+            class="btn btn-remove"
             :title="$t('action.remove')"
-               @click="removeRequestor">
+            @click="removeRequestor"
+          >
             {{ $t('action.remove') }}
           </button>
         </li>
@@ -136,8 +210,15 @@
 
     <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)">
+        <li
-            <person-text v-if="p.type === 'person'" :person="p"></person-text>
+          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>
@@ -146,18 +227,20 @@
     <div>
       <ul class="record_actions">
         <li class="add-persons">
-            <add-persons v-if="accompanyingCourse.requestor === null"
+          <add-persons
-               buttonTitle="requestor.add_requestor"
+            v-if="accompanyingCourse.requestor === null"
-               modalTitle="requestor.add_requestor"
+            button-title="requestor.add_requestor"
-               v-bind:key="addPersons.key"
+            modal-title="requestor.add_requestor"
-               v-bind:options="addPersons.options"
+            :key="addPersons.key"
-               @addNewPersons="addNewPersons"
+            :options="addPersons.options"
-               ref="addPersons"> <!-- to cast child method -->
+            @add-new-persons="addNewPersons"
+            ref="addPersons"
+          >
+            <!-- to cast child method -->
           </add-persons>
         </li>
       </ul>
     </div>
-
   </div>
 </template>
 

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

@@ -1,7 +1,6 @@
 <template>
   <div class="vue-component">
-
+    <h2><a id="section-90" />{{ $t('resources.title') }}</h2>
-   <h2><a id="section-90"></a>{{ $t('resources.title')}}</h2>
 
     <div v-if="resources.length > 0">
       <label class="col-form-label">{{ $tc('resources.counter', counter) }}</label>
@@ -13,16 +12,23 @@
     <div class="flex-table mb-3">
       <resource-item
         v-for="resource in resources"
-         v-bind:resource="resource"
+        :resource="resource"
-         v-bind:key="resource.id"
+        :key="resource.id"
-         @remove="removeResource">
+        @remove="removeResource"
-      </resource-item>
+      />
     </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)">
+        <li
-            <person-text v-if="p.type === 'person'" :person="p"></person-text>
+          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>
@@ -32,17 +38,18 @@
       <ul class="record_actions">
         <li class="add-persons">
           <add-persons
-            buttonTitle="resources.add_resources"
+            button-title="resources.add_resources"
-            modalTitle="resources.add_resources"
+            modal-title="resources.add_resources"
-            v-bind:key="addPersons.key"
+            :key="addPersons.key"
-            v-bind:options="addPersons.options"
+            :options="addPersons.options"
-            @addNewPersons="addNewPersons"
+            @add-new-persons="addNewPersons"
-            ref="addPersons"> <!-- to cast child method -->
+            ref="addPersons"
+          >
+            <!-- to cast child method -->
           </add-persons>
         </li>
       </ul>
     </div>
-
   </div>
 </template>
 

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

@@ -1,5 +1,6 @@
 <template>
-   <person-render-box render="bloc"
+  <person-render-box
+    render="bloc"
     v-if="resource.resource.type === 'person'"
     :person="resource.resource"
     :options="{
@@ -11,23 +12,24 @@
       addAge : false,
       hLevel : 3,
       isConfidential : true
-      }">
+    }"
-      <template v-slot:end-bloc>
+  >
+    <template #end-bloc>
       <div class="item-row separator">
         <ul class="record_actions">
           <li>
             <write-comment
               :resource="resource"
-                  @updateComment="updateComment"
+              @update-comment="updateComment"
-              ></write-comment>
+            />
           </li>
           <li>
             <on-the-fly
               :parent="parent"
               :type="resource.resource.type"
               :id="resource.resource.id"
-                  action="show">
+              action="show"
-              </on-the-fly>
+            />
           </li>
           <li>
             <on-the-fly
@@ -35,16 +37,16 @@
               :type="resource.resource.type"
               :id="resource.resource.id"
               action="edit"
-                  @saveFormOnTheFly="saveFormOnTheFly"
+              @save-form-on-the-fly="saveFormOnTheFly"
-                  ref="onTheFly">
+              ref="onTheFly"
-              </on-the-fly>
+            />
           </li>
           <li>
             <button
               class="btn btn-sm btn-remove"
               :title="$t('action.remove')"
-                  @click.prevent="$emit('remove', resource)">
+              @click.prevent="$emit('remove', resource)"
-              </button>
+            />
           </li>
         </ul>
       </div>
@@ -60,23 +62,24 @@
       addEntity: true,
       addInfo: false,
       hLevel: 3
-      }">
+    }"
-      <template v-slot:end-bloc>
+  >
+    <template #end-bloc>
       <div class="item-row separator">
         <ul class="record_actions">
           <li>
             <write-comment
               :resource="resource"
-                  @updateComment="updateComment"
+              @update-comment="updateComment"
-              ></write-comment>
+            />
           </li>
           <li>
             <on-the-fly
               :parent="parent"
               :type="resource.resource.type"
               :id="resource.resource.id"
-                  action="show">
+              action="show"
-              </on-the-fly>
+            />
           </li>
           <li>
             <on-the-fly
@@ -84,16 +87,16 @@
               :type="resource.resource.type"
               :id="resource.resource.id"
               action="edit"
-                  @saveFormOnTheFly="saveFormOnTheFly"
+              @save-form-on-the-fly="saveFormOnTheFly"
-                  ref="onTheFly">
+              ref="onTheFly"
-              </on-the-fly>
+            />
           </li>
           <li>
             <button
               class="btn btn-sm btn-remove"
               :title="$t('action.remove')"
-                  @click.prevent="$emit('remove', resource)">
+              @click.prevent="$emit('remove', resource)"
-              </button>
+            />
           </li>
         </ul>
       </div>

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

@@ -1,37 +1,38 @@
 <template>
-   <a class="btn btn-sm btn-misc change-icon"
+  <a
+    class="btn btn-sm btn-misc change-icon"
     :title="$t('write_comment')"
     @click="openModal"
-   ><i class="fa fa-pencil-square-o"></i>
+  ><i class="fa fa-pencil-square-o" />
   </a>
 
   <teleport to="body">
-      <modal v-if="modal.showModal"
+    <modal
-             :modalDialogClass="modal.modalDialogClass"
+      v-if="modal.showModal"
-             @close="modal.showModal = false">
+      :modal-dialog-class="modal.modalDialogClass"
-         <template v-slot:header>
+      @close="modal.showModal = false"
-
+    >
-            <h3 class="modal-title">{{ $t('write_comment_about', { 'r': resource.resource.text }) }}</h3>
+      <template #header>
-
+        <h3 class="modal-title">
+          {{ $t('write_comment_about', { 'r': resource.resource.text }) }}
+        </h3>
       </template>
-         <template v-slot:body>
+      <template #body>
-
         <ckeditor
           name="content"
-               v-bind:placeholder="$t('comment_placeholder')"
+          :placeholder="$t('comment_placeholder')"
           :editor="editor"
           v-model="content"
-               tag-name="textarea">
+          tag-name="textarea"
-            </ckeditor>
+        />
-
       </template>
-         <template v-slot:footer>
+      <template #footer>
-
+        <a
-            <a class="btn btn-save"
+          class="btn btn-save"
-               @click="saveAction">
+          @click="saveAction"
+        >
           {{ $t('action.save') }}
         </a>
-
       </template>
     </modal>
   </teleport>

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

@@ -1,20 +1,31 @@
 <template>
   <div class="vue-component">
-     <h2><a id="section-70"></a>{{ $t('scopes.title') }}</h2>
+    <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">
+      <div
-          <input class="form-check-input" type="checkbox" v-model="checkedScopes" :value="s"/>
+        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">
           {{ s.name.fr }}
         </label>
       </div>
     </div>
 
-    <div v-if="!isScopeValid" class="alert alert-warning to-confirm">
+    <div
+      v-if="!isScopeValid"
+      class="alert alert-warning to-confirm"
+    >
       {{ $t('scopes.add_at_least_one') }}
     </div>
-
   </div>
 </template>
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-     <h2><a id="section-60"></a>{{ $t('social_issue.title') }}</h2>
+    <h2><a id="section-60" />{{ $t('social_issue.title') }}</h2>
 
     <div class="my-4">
       <!--label for="field">{{ $t('social_issue.label') }}</label
@@ -17,14 +17,16 @@
         :placeholder="$t('social_issue.label')"
         @update:model-value="updateSocialIssues"
         :model-value="value"
-           :options="options">
+        :options="options"
-        </VueMultiselect>
+      />
     </div>
 
-     <div v-if="!isSocialIssueValid" class="alert alert-warning to-confirm">
+    <div
+      v-if="!isSocialIssueValid"
+      class="alert alert-warning to-confirm"
+    >
       {{ $t('social_issue.not_valid') }}
     </div>
-
   </div>
 </template>
 

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

@@ -1,17 +1,22 @@
 <template>
   <div class="vue-component">
-    <h2><a id="section-110"></a>
+    <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">
+          <input
+            class="form-control"
+            type="date"
+            id="startDate"
+            v-model="startDateInput"
+          >
         </div>
       </div>
     </div>
   </div>
-
 </template>
 
 <script>
@@ -20,7 +25,7 @@ import { dateToISO, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
 import { mapState } from 'vuex';
 
 export default {
-    name: 'startDate',
+    name: 'StartDate',
     data() {
         return {
             lastRecordedDate: null

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

@@ -2,16 +2,19 @@
   <teleport to="#content">
     <div id="navmap">
       <nav>
-            <a class="top" href="#top">
+        <a
-               <i class="fa fa-fw fa-square"></i>
+          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">
+          :step="step"
-            </item>
+        />
       </nav>
     </div>
   </teleport>

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

@@ -4,7 +4,7 @@
     :href="item.id"
     :class="{ 'active': isActive }"
   >
-      <i class="fa fa-fw fa-square"></i>
+    <i class="fa fa-fw fa-square" />
     <span>{{ item.key }}</span>
   </a>
   <a
@@ -12,7 +12,7 @@
     :href="item.id"
     :class="{ 'active': isActive }"
   >
-      <i class="fa fa-fw fa-square"></i>
+    <i class="fa fa-fw fa-square" />
     <span>{{ item.key }}</span>
   </a>
 </template>

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

@@ -5,23 +5,35 @@
     <!-- Modal -->
     <ul class="record_actions">
       <li>
-         <button class="btn btn-create" @click="modal1.showModal = true">
+        <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">
+        <button
+          class="btn btn-create"
+          @click="modal2.showModal = true"
+        >
           Ouvrir une seconde modale
         </button>
       </li>
     </ul>
    
     <teleport to="body">
-   <modal v-if="modal1.showModal" :modalDialogClass="modal1.modalDialogClass" @close="modal1.showModal = false">      
+      <modal
-      <template v-slot:header>
+        v-if="modal1.showModal"
-         <h2 class="modal-title">Le titre de ma modale</h2>
+        :modal-dialog-class="modal1.modalDialogClass"
+        @close="modal1.showModal = false"
+      >      
+        <template #header>
+          <h2 class="modal-title">
+            Le titre de ma modale
+          </h2>
         </template>
-      <template v-slot:body>
+        <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>
@@ -29,29 +41,42 @@
           <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 v-slot:footer>
+        <template #footer>
-         <button class="btn btn-create" @click="modal1.showModal = false; modal2.showModal = true">
+          <button
-            {{ $t('action.next')}}</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" :modalDialogClass="modal2.modalDialogClass" @close="modal2.showModal = false">      
+      <modal
-      <template v-slot:header>
+        v-if="modal2.showModal"
-         <h2 class="modal-title">Une autre modale</h2>
+        :modal-dialog-class="modal2.modalDialogClass"
+        @close="modal2.showModal = false"
+      >      
+        <template #header>
+          <h2 class="modal-title">
+            Une autre modale
+          </h2>
         </template>
-      <template v-slot:body>
+        <template #body>
           <p>modal 2</p>
         </template>
-      <template v-slot:footer>
+        <template #footer>
-         <button class="btn btn-create" @click="modal2.showModal = false">
+          <button
-            {{ $t('action.save')}}</button>
+            class="btn btn-create"
+            @click="modal2.showModal = false"
+          >
+            {{ $t('action.save') }}
+          </button>
         </template>
       </modal>
     </teleport>
     <!-- END Modal -->
-   
   </div>
 </template>
 

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

@@ -1,14 +1,23 @@
 <template>
-
   <h2>{{ $t('pick_social_issue') }}</h2>
 
 
   <div id="awc_create_form">
-
+    <div
-      <div id="picking" class="">
+      id="picking"
+      class=""
+    >
       <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
-          <div v-for="si in socialIssues" :key="si.id">
+      <div
-            <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
+        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">
@@ -29,11 +38,14 @@
             :loading="issueIsLoading"
             :placeholder="$t('choose_other_social_issue')"
             :options="socialIssuesOther"
-              @select="addIssueInList">
+            @select="addIssueInList"
-          </vue-multiselect>
+          />
         </div>
       </div>
-      <div v-if="hasSocialIssuePicked" class="mb-3">
+      <div
+        v-if="hasSocialIssuePicked"
+        class="mb-3"
+      >
         <h2>{{ $t('pick_an_action') }}</h2>
         <div class="col-11">
           <vue-multiselect
@@ -44,48 +56,79 @@
             :close-on-select="true"
             :show-labels="true"
             track-by="id"
-          ></vue-multiselect>
+          />
         </div>
       </div>
 
       <div v-if="isLoadingSocialActions">
-        <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
+        <i class="fa fa-circle-o-notch fa-spin fa-fw" />
       </div>
 
-      <div v-if="hasSocialActionPicked" id="persons" class="mb-5">
+      <div
+        v-if="hasSocialActionPicked"
+        id="persons"
+        class="mb-5"
+      >
         <h2>{{ $t('persons_involved') }}</h2>
 
         <ul>
-          <li v-for="p in personsReachables" :key="p.id">
+          <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">
+              <input
-              <label class="form-check-label" :for="'person_check' + p.id">
+                type="checkbox"
-                <person-text :person="p"></person-text>
+                :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">
+      <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"/>
+          <input
+            class="form-control"
+            type="date"
+            v-model="startDate"
+          >
         </div>
       </div>
 
       <!-- <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">
+      <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"/>
+          <input
+            class="form-control"
+            type="date"
+            v-model="endDate"
+          >
         </div>
       </div>
     </div>
@@ -94,7 +137,10 @@
         <p>{{ $t('form_has_errors') }}</p>
 
         <ul>
-          <li v-for="e in errors" :key="e.id">
+          <li
+            v-for="e in errors"
+            :key="e.id"
+          >
             {{ e }}
           </li>
         </ul>
@@ -103,15 +149,26 @@
       <div>
         <ul class="record_actions">
           <li class="cancel">
-            <button class="btn btn-cancel" @click="goToPrevious">
+            <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">
+            <button
+              class="btn btn-save"
+              v-show="!isPostingWork"
+              @click="submit"
+            >
               {{ $t('action.save') }}
             </button>
-            <button class="btn btn-save" v-show="isPostingWork" disabled>
+            <button
+              class="btn btn-save"
+              v-show="isPostingWork"
+              disabled
+            >
               {{ $t('action.save') }}
             </button>
           </li>
@@ -119,7 +176,6 @@
       </div>
     </div>
   </div>
-
 </template>
 
 

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

@@ -1,6 +1,12 @@
 <template>
-   <div id="workEditor" class="my-4">
+  <div
-      <div id="title" class="action-row">
+    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">
@@ -9,42 +15,70 @@
         </p>
       </div>
       <h2 class="badge-title">
-            <span class="title_label"></span>
+        <span class="title_label" />
         <span class="title_action">{{ work.socialAction.text }}</span>
       </h2>
     </div>
 
-      <div id="startDate" class="action-row">
+    <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/>
+      <input
+        v-model="startDate"
+        type="date"
+        required="true"
+        class="form-control"
+        v-once
+      >
     </div>
 
-      <div id="endDate" class="action-row">
+    <div
+      id="endDate"
+      class="action-row"
+    >
       <label class="col-form-label">{{ $t('endDate') }}</label>
-         <input v-model="endDate" type="date" class="form-control" />
+      <input
+        v-model="endDate"
+        type="date"
+        class="form-control"
+      >
     </div>
 
-      <div id="privateComment" class="action-row">
+    <div
+      id="privateComment"
+      class="action-row"
+    >
       <label class="col-form-label">{{ $t('private_comment') }}</label>
       <ckeditor
         v-model="privateComment"
         :editor="editor"
         tag-name="textarea"
-         ></ckeditor>
+      />
     </div>
 
-      <div id="comment" class="action-row">
+    <div
+      id="comment"
+      class="action-row"
+    >
       <label class="col-form-label">{{ $t('comments') }}</label>
       <ckeditor
         v-model="note"
         :editor="editor"
         tag-name="textarea"
-         ></ckeditor>
+      />
     </div>
 
 
-      <div id="objectives" class="action-row">
+    <div
-         <div aria="hidden" class="title">
+      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>
@@ -55,55 +89,87 @@
           {{ $t('results_without_objective') }}
         </div>
         <div>
-               <add-result :availableResults="resultsForAction" destination="action"></add-result>
+          <add-result
+            :available-results="resultsForAction"
+            destination="action"
+          />
         </div>
       </div>
 
       <!-- results which **are** attached to an objective -->
-         <div v-for="g in goalsPicked" :key="g.goal.id">
+      <div
-            <div class="item-title" @click="removeGoal(g)">
+        v-for="g in goalsPicked"
+        :key="g.goal.id"
+      >
+        <div
+          class="item-title"
+          @click="removeGoal(g)"
+        >
           <span class="removable">{{ g.goal.title.fr }}</span>
         </div>
         <div>
-               <add-result :goal="g.goal" destination="goal"></add-result>
+          <add-result
+            :goal="g.goal"
+            destination="goal"
+          />
         </div>
       </div>
-         <div class="accordion" id="expandedSuggestions">
+      <div
-            <div v-if="availableForCheckGoal.length > 0" class="accordion-item">
+        class="accordion"
-               <h2 class="accordion-header" id="heading_expanded_suggestions">
+        id="expandedSuggestions"
-
+      >
-                  <button v-if="isExpanded"
+        <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">
+              @click="toggleSelect"
+            >
               Masquer
             </button>
 
-                  <button v-else
+            <button
+              v-else
               class="accordion-button collapsed"
               type="button"
               data-bs-toggle="collapse"
               aria-expanded="false"
-                     @click="toggleSelect">
+              @click="toggleSelect"
+            >
               Motifs, objectifs et dispositfs disponibles
             </button>
-
           </h2>
-               <div class="accordion-collapse" id="collapse_expanded_suggestions"
+          <div
-                  aria-labelledby="heading_expanded_suggestions" data-bs-parent="#expandedSuggestions">
+            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">
+                <li
+                  v-for="g in availableForCheckGoal"
+                  @click="addGoal(g)"
+                  :key="g.id"
+                >
                   <span>{{ g.title.fr }}</span>
                 </li>
               </ul>
             </template>
-
           </div>
-               <p v-if="goalsPicked.length ===0" class="chill-no-data-statement">
+          <p
+            v-if="goalsPicked.length ===0"
+            class="chill-no-data-statement"
+          >
             Aucun objectif associé
           </p>
         </div>
@@ -113,32 +179,51 @@
       </div>
     </div>
 
-      <div id="evaluations" class="action-row">
+    <div
-         <div aria="hidden" class="title">
+      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"
+        :key="e.key"
-            v-bind:evaluation="e"
+        :evaluation="e"
-            v-bind:docAnchorId="this.docAnchorId">
+        :doc-anchor-id="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">
+            <li
+              v-for="e in evaluationsForAction"
+              @click="addEvaluation(e)"
+              :key="e.id"
+            >
               <span>{{ e.title.fr }}</span>
             </li>
           </ul>
         </div>
-            <ul class="record_actions" v-if="evaluationsForAction.length > 0">
+        <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>
+            <button
+              :title="$t('add_an_evaluation')"
+              class="btn btn-create"
+              @click="toggleAddEvaluation"
+            >
+              {{ $t('add_an_evaluation') }}
+            </button>
           </li>
         </ul>
         <div v-else>
@@ -147,31 +232,58 @@
       </div>
     </div>
 
-      <div id="persons" class="action-row">
+    <div
-         <h3 class="mb-3">{{ $t('persons_involved') }}</h3>
+      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">
+        <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">
+            <input
-                  <label :for="'person_check'+p.id" class="form-check-label">
+              v-model="personsPicked"
-                     <person-text :person="p"></person-text>
+              :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" />
             </label>
           </div>
         </li>
       </ul>
     </div>
 
-      <div id="referrers" class="action-row">
+    <div
+      id="referrers"
+      class="action-row"
+    >
       <h3>{{ $t('referrers') }}</h3>
 
       <div v-if="!hasReferrers">
-            <p class="chill-no-data-statement">{{ $t('no_referrers') }}</p>
+        <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)">
+          <li
+            v-for="u in referrers"
+            :key="u.id"
+            :title="$t('remove_referrer')"
+            @click="removeReferrer(u)"
+          >
             <span>
               {{ u.text }}
             </span>
@@ -184,16 +296,19 @@
           <add-persons
             ref="referrerPicker"
             :key="referrerPicker.key"
-                  :buttonTitle="$t('add_referrers')"
+            :button-title="$t('add_referrers')"
-                  :modalTitle="$t('choose_referrers')"
+            :modal-title="$t('choose_referrers')"
             :options="referrerPicker.options"
-                  @addNewPersons="addReferrers">
+            @add-new-persons="addReferrers"
-               </add-persons>
+          />
         </li>
       </ul>
     </div>
 
-      <div id="handlingThirdParty" class="action-row">
+    <div
+      id="handlingThirdParty"
+      class="action-row"
+    >
       <h3>{{ $t('handling_thirdparty') }}</h3>
 
       <div v-if="!hasHandlingThirdParty">
@@ -205,16 +320,21 @@
           <li class="add-persons">
             <add-persons
               ref="handlingThirdPartyPicker"
-                     v-bind:key="handlingThirdPartyPicker.key"
+              :key="handlingThirdPartyPicker.key"
-                     v-bind:buttonTitle="$t('precise_handling_thirdparty')"
+              :button-title="$t('precise_handling_thirdparty')"
-                     v-bind:modalTitle="$t('choose_a_thirdparty')"
+              :modal-title="$t('choose_a_thirdparty')"
-                     v-bind:options="handlingThirdPartyPicker.options"
+              :options="handlingThirdPartyPicker.options"
-                     @addNewPersons="setHandlingThirdParty"> <!-- to cast child method -->
+              @add-new-persons="setHandlingThirdParty"
+            >
+              <!-- to cast child method -->
             </add-persons>
           </li>
         </ul>
       </div>
-         <div v-else class="flex-table">
+      <div
+        v-else
+        class="flex-table"
+      >
         <third-party-render-box
           :thirdparty="handlingThirdParty"
           :options="{
@@ -225,21 +345,30 @@
             hLevel: 3,
             isMultiline: true,
             isConfidential: false
-                     }"></third-party-render-box>
+          }"
+        />
         <ul class="record_actions">
           <li>
-                  <button :title="$t('remove_handling_thirdparty')" class="btn btn-remove" @click="removeHandlingThirdParty"/>
+            <button
+              :title="$t('remove_handling_thirdparty')"
+              class="btn btn-remove"
+              @click="removeHandlingThirdParty"
+            />
           </li>
         </ul>
       </div>
-
     </div>
 
-      <div id="thirdParties" class="action-row">
+    <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>
+        <p class="chill-no-data-statement">
+          {{ $t('no_thirdparty_intervener') }}
+        </p>
       </div>
 
       <div v-else>
@@ -250,12 +379,30 @@
             :thirdparty="thirdparty"
             :options="{ addLink : false, addId : false, addEntity: true, addInfo: false, hLevel: 3 }"
           >
-                     <template v-slot:record-actions>
+            <template #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)" />
+                  <on-the-fly
+                    :type="thirdparty.type"
+                    :id="thirdparty.id"
+                    action="show"
+                  />
+                </li>
+                <li>
+                  <on-the-fly
+                    :type="thirdparty.type"
+                    :id="thirdparty.id"
+                    action="edit"
+                    @save-form-on-the-fly="saveFormOnTheFly"
+                    ref="onTheFly"
+                  />
+                </li>
+                <li>
+                  <button
+                    :title="$t('remove_thirdparty')"
+                    class="btn btn-sm btn-remove"
+                    @click="removeThirdParty(thirdparty)"
+                  />
                 </li>
               </ul>
             </template>
@@ -267,63 +414,101 @@
         <li class="add-persons">
           <add-persons
             ref="thirdPartyPicker"
-                  v-bind:key="thirdPartyPicker.key"
+            :key="thirdPartyPicker.key"
-                  v-bind:buttonTitle="$t('add_thirdparties')"
+            :button-title="$t('add_thirdparties')"
-                  v-bind:modalTitle="$t('choose_thirdparties')"
+            :modal-title="$t('choose_thirdparties')"
-                  v-bind:options="thirdPartyPicker.options"
+            :options="thirdPartyPicker.options"
-                  @addNewPersons="addThirdParties"> <!-- to cast child method -->
+            @add-new-persons="addThirdParties"
+          >
+            <!-- to cast child method -->
           </add-persons>
         </li>
       </ul>
     </div>
 
-      <div v-if="errors.length > 0" id="errors" class="alert alert-danger flashbag">
+    <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>
+        <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"
+        :allow-create="true"
-            relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
+        related-entity-class="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
-            :relatedEntityId="this.work.id"
+        :related-entity-id="this.work.id"
-            :workflowsAvailables="this.work.workflows_availables"
+        :workflows-availables="this.work.workflows_availables"
-            :preventDefaultMoveToGenerate="true"
+        :prevent-default-move-to-generate="true"
         @go-to-generate-workflow="goToGenerateWorkflow"
-         ></list-workflow-modal>
+      />
     </li>
 
     <li>
-         <button v-if="AmIRefferer"
+      <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>
+        <button
-            <ul class="dropdown-menu" aria-labelledby="btnGroupNotifyButtons">
+          id="btnGroupNotifyButtons"
-               <li><a class="dropdown-item" @click="goToGenerateNotification(true)">{{ $t('notification_notify_referrer') }}</a></li>
+          type="button"
-               <li><a class="dropdown-item" @click="goToGenerateNotification(false)">{{ $t('notification_notify_any') }}</a></li>
+          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">
+      <button
+        class="btn btn-save"
+        @click="submit"
+      >
         {{ $t('action.save') }}
       </button>
     </li>
 
     <li v-if="isPosting">
-         <button class="btn btn-save" disabled>
+      <button
+        class="btn btn-save"
+        disabled
+      >
         {{ $t('action.save') }}
       </button>
     </li>
-
   </ul>
 </template>
 

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

@@ -1,47 +1,72 @@
 <template>
   <div>
-      <a id="evaluations"></a>
+    <a id="evaluations" />
-      <div class="item-title" :title="evaluation.id || 'no id yet'">
+    <div
+      class="item-title"
+      :title="evaluation.id || 'no id yet'"
+    >
       <span>{{ evaluation.evaluation.title.fr }}</span>
     </div>
 
-      <div class="item-url mt-3 mb-4" v-if="evaluation.evaluation.url">
+    <div
-         <i class="fa fa-link fa-lg"></i>
+      class="item-url mt-3 mb-4"
-         <a :href="evaluation.evaluation.url" target="_blank">{{ evaluation.evaluation.url }}</a>
+      v-if="evaluation.evaluation.url"
+    >
+      <i class="fa fa-link fa-lg" />
+      <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>
+      <form-evaluation
+        ref="FormEvaluation"
+        :key="evaluation.key"
+        :evaluation="evaluation"
+        :doc-anchor-id="docAnchorId"
+      />
 
       <ul class="record_actions">
         <li v-if="evaluation.workflows_availables.length > 0">
-
           <list-workflow-modal
             :workflows="evaluation.workflows"
-                 :allowCreate="true"
+            :allow-create="true"
-                 relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+            related-entity-class="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
-                 :relatedEntityId="evaluation.id"
+            :related-entity-id="evaluation.id"
-                 :workflowsAvailables="evaluation.workflows_availables"
+            :workflows-availables="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>
+          <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">
+      <modal
-            <template v-slot:header>
+        v-if="modal.showModal"
-               <h2 class="modal-title">{{ $t('delete.sure') }}</h2>
+        :modal-dialog-class="modal.modalDialogClass"
+        @close="modal.showModal = false"
+      >
+        <template #header>
+          <h2 class="modal-title">
+            {{ $t('delete.sure') }}
+          </h2>
         </template>
-            <template v-slot:body>
+        <template #body>
           <p>{{ $t('delete.sure_description') }}</p>
         </template>
-            <template v-slot:footer>
+        <template #footer>
-               <button class="btn btn-danger" @click="removeEvaluation(evaluation)">
+          <button
+            class="btn btn-danger"
+            @click="removeEvaluation(evaluation)"
+          >
             {{ $t('delete.ok') }}
           </button>
         </template>

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

@@ -1,58 +1,83 @@
 <template>
-   <div v-if="hasResult" class="addResult">
+  <div
-
+    v-if="hasResult"
-      <p v-if="pickedResults.length ===0" class="chill-no-data-statement">
+    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">
+      <li
+        v-for="r in pickedResults"
+        @click="removeResult(r)"
+        :key="r.id"
+      >
         <span>
           {{ r.title.fr }}
         </span>
       </li>
     </ul>
 
-      <div class="accordion" id="expandedSuggestions">
+    <div
+      class="accordion"
+      id="expandedSuggestions"
+    >
       <div class="accordion-item">
-            <h2 class="accordion-header" id="heading_expanded_suggestions">
+        <h2
-
+          class="accordion-header"
-               <button v-if="isExpanded"
+          id="heading_expanded_suggestions"
+        >
+          <button
+            v-if="isExpanded"
             class="accordion-button"
             type="button"
             data-bs-toggle="collapse"
             aria-expanded="true"
-                  @click="toggleSelect">
+            @click="toggleSelect"
+          >
             Masquer
           </button>
 
-               <button v-else
+          <button
+            v-else
             class="accordion-button collapsed"
             type="button"
             data-bs-toggle="collapse"
             aria-expanded="false"
-                  @click="toggleSelect">
+            @click="toggleSelect"
+          >
             Résultats et orientations disponibles
           </button>
-
         </h2>
-            <div class="accordion-collapse" id="collapse_expanded_suggestions"
+        <div
-               aria-labelledby="heading_expanded_suggestions" data-bs-parent="#expandedSuggestions">
+          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">
+              <li
+                v-for="r in availableForCheckResults"
+                @click="addResult(r)"
+                :key="r.id"
+              >
                 <span>{{ r.title.fr }}</span>
               </li>
             </ul>
           </template>
-
         </div>
       </div>
     </div>
-
   </div>
-   <div v-if="!hasResult" class="noResult">
+  <div
+    v-if="!hasResult"
+    class="noResult"
+  >
     <div class="chill-no-data-statement">
       {{ $t('goal_has_no_result') }}
     </div>

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

@@ -22,14 +22,22 @@
           {{ $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"/>
+          <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"/>
+          <input
+            class="form-control form-control-sm"
+            type="date"
+            v-model="endDate"
+          >
         </div>
       </div>
 
@@ -38,14 +46,22 @@
           {{ $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"/>
+          <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"/>
+          <input
+            class="form-control form-control-sm"
+            type="number"
+            v-model.number="warningInterval"
+          >
         </div>
       </div>
 
@@ -54,9 +70,21 @@
           {{ $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">
+          <select
-           <option disabled value="">{{ $t('select_time_spent') }}</option>
+            class="form-control form-control-sm"
-           <option v-for="time in timeSpentChoices" :value="time.value">
+            type="time"
+            v-model="timeSpent"
+          >
+            <option
+              disabled
+              value=""
+            >
+              {{ $t('select_time_spent') }}
+            </option>
+            <option
+              v-for="time in timeSpentChoices"
+              :value="time.value"
+            >
               {{ time.text }}
             </option>
           </select>
@@ -71,16 +99,27 @@
             :placeholder="$t('evaluation_comment_placeholder')"
             v-model="comment"
             tag-name="textarea"
-            ></ckeditor>
+          />
         </div>
       </div>
 
-     <div v-if="evaluation.documents.length > 0" class="row mb-3">
+      <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
-           <div :id="`document_${d.id}`" class="item-row">
+            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">
@@ -90,14 +129,20 @@
                     :value="d.title"
                     :id="d.id"
                     :data-key="i"
-                        @input="onInputDocumentTitle"/>
+                    @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/>
+                <p
-                  Le {{ $d(ISOToDatetime(d.createdAt.datetime), 'long') }}</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">
@@ -106,26 +151,48 @@
                   <li v-if="d.workflows_availables.length > 0">
                     <list-workflow-modal
                       :workflows="d.workflows"
-                          :allowCreate="true"
+                      :allow-create="true"
-                          relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluationDocument"
+                      related-entity-class="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluationDocument"
-                          :relatedEntityId="d.id"
+                      :related-entity-id="d.id"
-                          :workflowsAvailables="d.workflows_availables"
+                      :workflows-availables="d.workflows_availables"
-                          :preventDefaultMoveToGenerate="true"
+                      :prevent-default-move-to-generate="true"
-                          :goToGenerateWorkflowPayload="{doc: d}"
+                      :go-to-generate-workflow-payload="{doc: d}"
                       @go-to-generate-workflow="goToGenerateWorkflowEvaluationDocument"
-                       ></list-workflow-modal>
+                    />
                   </li>
                   <li>
                     <button
                       v-if="AmIRefferer"
                       class="btn btn-notify"
-                         @click="goToGenerateDocumentNotification(d, false)">
+                      @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>
+                      <button
-                         <ul class="dropdown-menu" aria-labelledby="btnGroupNotifyButtons">
+                        id="btnGroupNotifyButtons"
-                            <li><a class="dropdown-item" @click="goToGenerateDocumentNotification(d, true)">{{ $t('notification_notify_referrer') }}</a></li>
+                        type="button"
-                            <li><a class="dropdown-item" @click="goToGenerateDocumentNotification(d, false)">{{ $t('notification_notify_any') }}</a></li>
+                        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>
@@ -135,23 +202,24 @@
                       :filename="d.title"
                       :can-edit="true"
                       :execute-before-leave="submitBeforeLeaveToEditor"
-                         :davLink="d.storedObject._links?.dav_link.href"
+                      :dav-link="d.storedObject._links?.dav_link.href"
-                         :davLinkExpiration="d.storedObject._links?.dav_link.expiration"
+                      :dav-link-expiration="d.storedObject._links?.dav_link.expiration"
                       @on-stored-object-status-change="onStatusDocumentChanged"
-                     ></document-action-buttons-group>
+                    />
                   </li>
                   <li>
                     <add-async-upload
-                          :buttonTitle="$t('replace')"
+                      :button-title="$t('replace')"
                       :options="asyncUploadOptions"
-                          :btnClasses="{'btn': true, 'btn-edit': true}"
+                      :btn-classes="{'btn': true, 'btn-edit': true}"
-                          @addDocument="(arg) => replaceDocument(d, arg)"
+                      @add-document="(arg) => replaceDocument(d, arg)"
-                       >
+                    />
-                       </add-async-upload>
                   </li>
                   <li v-if="d.workflows.length === 0">
-                     <a class="btn btn-delete" @click="removeDocument(d)">
+                    <a
-                     </a>
+                      class="btn btn-delete"
+                      @click="removeDocument(d)"
+                    />
                   </li>
                 </ul>
               </div>
@@ -163,13 +231,13 @@
       <div class="row mb-3">
         <h6>{{ $t('document_add') }} :</h6>
         <pick-template
-           entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+          entity-class="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
           :id="evaluation.id"
           :templates="getTemplatesAvailables"
-           :preventDefaultMoveToGenerate="true"
+          :prevent-default-move-to-generate="true"
           @go-to-generate-document="submitBeforeGenerate"
         >
-         <template v-slot:title>
+          <template #title>
             <label class="col-form-label">{{ $t('evaluation_generate_a_document') }}</label>
           </template>
         </pick-template>
@@ -178,15 +246,13 @@
           <ul class="record_actions document-upload">
             <li>
               <add-async-upload
-                  :buttonTitle="$t('browse')"
+                :button-title="$t('browse')"
                 :options="asyncUploadOptions"
-                  @addDocument="addDocument"
+                @add-document="addDocument"
-               >
+              />
-               </add-async-upload>
             </li>
           </ul>
         </div>
-
       </div>
     </div>
   </div>

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

@@ -1,10 +1,13 @@
 <template>
-
+  <fieldset
-      <fieldset class="mb-3" id="actionType">
+    class="mb-3"
+    id="actionType"
+  >
     <div class="row">
-            <legend class="col-sm-4 col-form-label">{{ $t('action.label')}}</legend>
+      <legend class="col-sm-4 col-form-label">
+        {{ $t('action.label') }}
+      </legend>
       <div class="col-sm-8">
-
         <VueMultiselect
           v-model="action"
           :options="actions.options"
@@ -16,17 +19,20 @@
           :custom-label="formatSocialAction"
           track-by="id"
           :searchable="true"
-               ></VueMultiselect>
+        />
-
       </div>
     </div>
   </fieldset>
 
-      <fieldset class="mb-3" id="goal">
+  <fieldset
+    class="mb-3"
+    id="goal"
+  >
     <div class="row">
-            <legend class="col-sm-4 col-form-label">{{ $t('goal.label')}}</legend>
+      <legend class="col-sm-4 col-form-label">
+        {{ $t('goal.label') }}
+      </legend>
       <div class="col-sm-8">
-
         <VueMultiselect
           v-model="goal"
           :options="goals.options"
@@ -39,17 +45,20 @@
           :custom-label="transTitle"
           track-by="id"
           :searchable="true"
-               ></VueMultiselect>
+        />
-
       </div>
     </div>
   </fieldset>
 
-      <fieldset class="mb-3" id="result">
+  <fieldset
+    class="mb-3"
+    id="result"
+  >
     <div class="row">
-            <legend class="col-sm-4 col-form-label">{{ $t('result.label')}}</legend>
+      <legend class="col-sm-4 col-form-label">
+        {{ $t('result.label') }}
+      </legend>
       <div class="col-sm-8">
-
         <VueMultiselect
           v-model="result"
           :options="results.options"
@@ -62,8 +71,7 @@
           :custom-label="transTitle"
           track-by="id"
           :searchable="true"
-               ></VueMultiselect>
+        />
-
       </div>
     </div>
   </fieldset>

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

@@ -3,36 +3,60 @@
     <li
       v-for="s in steps"
       :key="s"
-        class="breadcrumb-item" :class="{ active: step === s }"
+      class="breadcrumb-item"
+      :class="{ active: step === s }"
     >
       {{ $t('household_members_editor.app.steps.'+s) }}
     </li>
   </ol>
-  <concerned v-if="step === 'concerned'"></concerned>
+  <concerned v-if="step === 'concerned'" />
-  <household v-if="step === 'household'" @ready-to-go="goToNext"></household>
+  <household
-  <household-address v-if="step === 'household_address'"></household-address>
+    v-if="step === 'household'"
-  <positioning v-if="step === 'positioning'"></positioning>
+    @ready-to-go="goToNext"
-  <dates v-if="step === 'confirm'"></dates>
+  />
-  <confirmation v-if="step === 'confirm'"></confirmation>
+  <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'">
+    <li
-      <button class="btn btn-cancel" @click="goToPrevious">
+      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">
+    <li
-      <button class="btn btn-cancel" @click="goToPrevious">
+      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">
+      <button
-        {{ $t('household_members_editor.app.next') }}&nbsp;<i class="fa fa-arrow-right"></i>
+        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">
+      <button
+        class="btn btn-save"
+        @click="confirm"
+        :disabled="hasWarnings || !lastStepIsSaveAllowed"
+      >
         {{ $t('household_members_editor.app.save') }}
       </button>
     </li>

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

@@ -1,5 +1,7 @@
 <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">
@@ -10,33 +12,47 @@
     <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)">
+      <li
-        <span><person-text :person="c.person"></person-text></span>
+        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">
+    <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">
+      <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>.
+          <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
-          buttonTitle="household_members_editor.concerned.add_persons"
+        button-title="household_members_editor.concerned.add_persons"
-          modalTitle="household_members_editor.concerned.search"
+        modal-title="household_members_editor.concerned.search"
-          v-bind:key="addPersons.key"
+        :key="addPersons.key"
-          v-bind:options="addPersons.options"
+        :options="addPersons.options"
-          @addNewPersons="addNewPersons"
+        @add-new-persons="addNewPersons"
-          ref="addPersons"> <!-- to cast child method -->
+        ref="addPersons"
+      >
+        <!-- to cast child method -->
       </add-persons>
     </li>
   </ul>

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

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="hasWarning" class="alert alert-warning">
+  <div
+    v-if="hasWarning"
+    class="alert alert-warning"
+  >
     {{ $t('household_members_editor.confirmation.there_are_warnings') }}
   </div>
 
@@ -8,10 +11,18 @@
   </p>
 
   <ul>
-    <li v-for="(msg, i) in warnings" class="warning" :key="i">
+    <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">
+    <li
+      v-for="(msg, i) in errors"
+      class="error"
+      :key="i"
+    >
       {{ msg }}
     </li>
   </ul>

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

@@ -1,18 +1,24 @@
 <template>
-  <div class="flex-table mb-5" v-if="hasHousehold">
+  <div
+    class="flex-table mb-5"
+    v-if="hasHousehold"
+  >
     <div class="item-bloc">
-      <household-render-box :household="fakeHouseholdWithConcerned"></household-render-box>
+      <household-render-box :household="fakeHouseholdWithConcerned" />
     </div>
   </div>
-  <div class="flex-table" v-if="isModeLeave">
+  <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>
+                <i class="fa fa-home fa-stack-1x" />
-                     <i class="fa fa-ban fa-stack-2x text-danger"></i>
+                <i class="fa fa-ban fa-stack-2x text-danger" />
               </span>
               {{ $t('household_members_editor.household.leave_without_household') }}
             </div>

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

@@ -1,15 +1,21 @@
 <template>
-
+  <current-household />
-  <current-household></current-household>
 
   <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">
+    <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" />
+      <input
+        type="date"
+        v-model="startDate"
+        class="form-control"
+      >
     </div>
   </div>
 
@@ -18,15 +24,30 @@
     <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">
+        <select
-          <option v-for="t in householdCompositionTypes" :key="t.id" :value="t.id">{{ t.label.fr }}</option>
+          v-model="householdCompositionType"
+          class="form-select form-control"
+        >
+          <option
+            v-for="t in householdCompositionTypes"
+            :key="t.id"
+            :value="t.id"
+          >
+            {{ t.label.fr }}
+          </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"/>
+        <input
+          type="number"
+          v-model="numberOfChildren"
+          min="0"
+          max="30"
+          class="form-control"
+        >
       </div>
     </div>
   </div>

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

@@ -1,49 +1,77 @@
 <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"
-  <div class="alert alert-info" v-if="!hasHousehold">
+    v-if="!hasHousehold"
+  >
     {{ $t('household_members_editor.household.no_household_choose_one') }}
   </div>
   <template v-else>
-    <current-household></current-household>
+    <current-household />
   </template>
 
-  <div v-if="hasHouseholdSuggestion" class="householdSuggestions my-5">
+  <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"
+      id="householdSuggestions"
+    >
       <div class="accordion-item">
-        <h2 class="accordion-header" id="heading_household_suggestions">
+        <h2
-          <button v-if="!showHouseholdSuggestion"
+          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">
+            @click="toggleHouseholdSuggestion"
+          >
             {{ $tc('household_members_editor.show_household_suggestion', countHouseholdSuggestion) }}
           </button>
-          <button v-if="showHouseholdSuggestion"
+          <button
+            v-if="showHouseholdSuggestion"
             class="accordion-button"
             type="button"
             data-bs-toggle="collapse"
             aria-expanded="true"
-                  @click="toggleHouseholdSuggestion">
+            @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"
+        <div
-             aria-labelledby="heading_household_suggestions" data-bs-parent="#householdSuggestions">
+          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}`">
+              <div
-                <household-render-box :household="s.household"></household-render-box>
+                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)">
+                    <button
+                      class="btn btn-sm btn-choose"
+                      @click="selectHousehold(s.household)"
+                    >
                       {{ $t('household_members_editor.select_household') }}
                     </button>
                   </li>
@@ -59,24 +87,42 @@
 
   <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>
+      <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">
+    <li
+      v-if="!hasHousehold"
+      class="add-persons"
+    >
       <add-persons
-          modalTitle="Chercher un ménage existant"
+        modal-title="Chercher un ménage existant"
-          buttonTitle="Chercher un ménage existant"
+        button-title="Chercher un ménage existant"
-          v-bind:key="addPersons.key"
+        :key="addPersons.key"
-          v-bind:options="addPersons.options"
+        :options="addPersons.options"
-          @addNewPersons="pickHouseholdFound"
+        @add-new-persons="pickHouseholdFound"
-          ref="pickHousehold"> <!-- to cast child method -->
+        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>
+      <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">
+      <button
-        <i class="fa fa-sign-out"></i>
+        @click="setModeLeave"
+        class="btn btn-sm btn-misc"
+      >
+        <i class="fa fa-sign-out" />
         {{ $t('household_members_editor.household.leave') }}
       </button>
     </li>

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

@@ -1,5 +1,5 @@
 <template>
-  <current-household></current-household>
+  <current-household />
 
   <ul class="record_actions">
     <!-- <li v-if="!hasHouseholdAddress && !isHouseholdForceAddress">
@@ -12,17 +12,18 @@
         :context="getAddressContext"
         :key="addAddress.key"
         :options="addAddress.options"
-          :addressChangedCallback="addressChanged"
+        :address-changed-callback="addressChanged"
-      ></add-address>
+      />
     </li>
     <li v-if="hasHouseholdAddress">
-      <button class="btn btn-remove"
+      <button
-              @click="removeHouseholdAddress">
+        class="btn btn-remove"
+        @click="removeHouseholdAddress"
+      >
         {{ $t('household_members_editor.household_address.remove_address') }}
       </button>
     </li>
   </ul>
-
 </template>
 
 <script>

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

@@ -3,17 +3,26 @@
     <div class="item-row">
       <div class="item-col">
         <div>
-          <person-render-box render="badge" :options="{}" :person="conc.person"></person-render-box>
+          <person-render-box
-          <span v-if="isHolder" class="badge bg-primary holder">
+            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 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"></i>
+            <i class="fa fa-li fa-map-marker" />
             <span class="chill-no-data-statement">Sans adresse</span>
           </li>
         </ul>
@@ -21,24 +30,42 @@
     </div>
 
     <div class="item-row comment">
-      <ckeditor :editor="editor" v-model="comment" tag-name="textarea"></ckeditor>
+      <ckeditor
+        :editor="editor"
+        v-model="comment"
+        tag-name="textarea"
+      />
     </div>
 
     <div class="item-row participation-details">
-      <div v-if="conc.position.allowHolder" class="action">
+      <div
-        <button class="btn" :class="{ 'btn-primary': isHolder, 'btn-secondary': !isHolder}" @click="toggleHolder">
+        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">
+        <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">
+        <button
+          v-if="conc.allowRemove"
+          @click="removeConcerned"
+          class="btn btn-primary"
+        >
           {{ $t('household_members_editor.remove_concerned') }}
         </button>
       </div>

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

@@ -1,11 +1,11 @@
 <template>
   <ckeditor
     name="content"
-      v-bind:placeholder="$t('household_members_editor.positioning.comment_placeholder')"
+    :placeholder="$t('household_members_editor.positioning.comment_placeholder')"
     :editor="editor"
     v-model="content"
-      tag-name="textarea">
+    tag-name="textarea"
-  </ckeditor>
+  />
 </template>
 
 <script>

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

@@ -1,5 +1,5 @@
 <template>
-  <current-household></current-household>
+  <current-household />
 
   <h2>{{ $t('household_members_editor.positioning.persons_to_positionnate') }}</h2>
 
@@ -7,12 +7,12 @@
     <div
       v-for="conc in concerned"
       class="item-bloc"
-          v-bind:key="conc.person.id"
+      :key="conc.person.id"
     >
       <div class="pick-position item-row">
         <div class="person">
           <!-- <h3>{{ conc.person.text }}</h3> -->
-              <h3><person-text :person="conc.person"></person-text></h3>
+          <h3><person-text :person="conc.person" /></h3>
         </div>
         <div class="holder">
           <button
@@ -41,7 +41,7 @@
       <div class="item-row">
         <div>
           <h6>{{ $t('household_members_editor.positioning.comment') }}</h6>
-              <person-comment :conc="conc"></person-comment>
+          <person-comment :conc="conc" />
         </div>
       </div>
     </div>

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

@@ -1,33 +1,48 @@
 <template>
-
+  <div id="visgraph" />
-   <div id="visgraph"></div>
 
   <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">
+        <button
-               <i class="fa fa-plus"></i> {{ $t('visgraph.add_link') }}
+          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">
+        <a
-               <i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
+          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">
+      <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}`">
+          <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>
@@ -36,23 +51,34 @@
   </teleport>
 
   <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+    <modal
-         <template v-slot:header>
+      v-if="modal.showModal"
-            <h2 class="modal-title">{{ $t(modal.title) }}</h2>
+      :modal-dialog-class="modal.modalDialogClass"
+      @close="modal.showModal = false"
+    >
+      <template #header>
+        <h2 class="modal-title">
+          {{ $t(modal.title) }}
+        </h2>
         <!-- {{ modal.data.id }} -->
       </template>
-         <template v-slot:body>
+      <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-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">
+                <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>
@@ -64,7 +90,10 @@
               <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">
+                <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>
@@ -87,8 +116,7 @@
                 :options="relations"
                 v-model="relation"
                 :value="relation"
-                        >
+              />
-                     </VueMultiselect>
             </div>
             <div class="form-check form-switch">
               <input
@@ -97,29 +125,40 @@
                 id="reverse"
                 v-model="reverse"
               >
-                     <label class="form-check-label" for="reverse">{{ $t('visgraph.reverse_relation') }}</label>
+              <label
+                class="form-check-label"
+                for="reverse"
+              >{{ $t('visgraph.reverse_relation') }}</label>
             </div>
           </form>
         </div>
       </template>
-         <template v-slot:footer>
+      <template #footer>
-            <button class="btn" :class="modal.button.class" @click="submitRelationship">
+        <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"></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
-           buttonTitle="visgraph.add_person"
+        button-title="visgraph.add_person"
-           modalTitle="visgraph.add_person"
+        modal-title="visgraph.add_person"
-           v-bind:key="addPersons.key"
+        :key="addPersons.key"
-           v-bind:options="addPersons.options"
+        :options="addPersons.options"
-           @addNewPersons="addNewPersons"
+        @add-new-persons="addNewPersons"
-           ref="addPersons">
+        ref="addPersons"
-       </add-persons>
+      />
     </li>
   </ul>
 </template>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue

@@ -1,6 +1,15 @@
 <template>
-<ul class="list-suggest add-items" v-if="suggested.length > 0">
+  <ul
-  <li v-for="(r, i) in suggested" @click="setReferrer(r)" :key="i"><span>{{ r.text }}</span></li>
+    class="list-suggest add-items"
+    v-if="suggested.length > 0"
+  >
+    <li
+      v-for="(r, i) in suggested"
+      @click="setReferrer(r)"
+      :key="i"
+    >
+      <span>{{ r.text }}</span>
+    </li>
   </ul>
 </template>
 

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

@@ -1,42 +1,66 @@
 <template>
-   <a class="btn" :class="getClassButton" :title="$t(buttonTitle || '')" @click="openModal">
+  <a
+    class="btn"
+    :class="getClassButton"
+    :title="$t(buttonTitle || '')"
+    @click="openModal"
+  >
     <span v-if="displayTextButton">{{ $t(buttonTitle || '') }}</span>
   </a>
 
   <teleport to="body">
-      <modal v-if="modal.showModal"
+    <modal
-         :modalDialogClass="modal.modalDialogClass"
+      v-if="modal.showModal"
-         @close="modal.showModal = false">
+      :modal-dialog-class="modal.modalDialogClass"
-
+      @close="modal.showModal = false"
-         <template v-slot:header>
+    >
-            <h3 class="modal-title">{{ $t(modalTitle) }}</h3>
+      <template #header>
+        <h3 class="modal-title">
+          {{ $t(modalTitle) }}
+        </h3>
       </template>
 
-         <template v-slot:body-head>
+      <template #body-head>
         <div class="modal-body">
           <div class="search">
-
+            <label
-                  <label class="col-form-label" style="float: right;">
+              class="col-form-label"
+              style="float: right;"
+            >
               {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
             </label>
 
-                  <input id="search-persons"
+            <input
+              id="search-persons"
               name="query"
               v-model="query"
               :placeholder="$t('add_persons.search_some_persons')"
-                     ref="search" />
+              ref="search"
-                  <i class="fa fa-search fa-lg"></i>
+            >
-                  <i class="fa fa-times" v-if="queryLength >= 3" @click="resetSuggestion"></i>
+            <i class="fa fa-search fa-lg" />
-
+            <i
+              class="fa fa-times"
+              v-if="queryLength >= 3"
+              @click="resetSuggestion"
+            />
           </div>
         </div>
-            <div class="modal-body" v-if="checkUniq === 'checkbox'">
+        <div
+          class="modal-body"
+          v-if="checkUniq === 'checkbox'"
+        >
           <div class="count">
             <span>
-                     <a v-if="suggestedCounter > 2" @click="selectAll">
+              <a
+                v-if="suggestedCounter > 2"
+                @click="selectAll"
+              >
                 {{ $t('action.check_all') }}
               </a>
-                     <a v-if="selectedCounter > 0" @click="resetSelection">
+              <a
+                v-if="selectedCounter > 0"
+                @click="resetSelection"
+              >
                 <i v-if="suggestedCounter > 2"> • </i>
                 {{ $t('action.reset') }}
               </a>
@@ -48,42 +72,41 @@
         </div>
       </template>
 
-         <template v-slot:body>
+      <template #body>
         <div class="results">
-
           <person-suggestion
             v-for="item in this.selectedAndSuggested.slice().reverse()"
-                  v-bind:key="itemKey(item)"
+            :key="itemKey(item)"
-                  v-bind:item="item"
+            :item="item"
-                  v-bind:search="search"
+            :search="search"
-                  v-bind:type="checkUniq"
+            :type="checkUniq"
-                  @saveFormOnTheFly="saveFormOnTheFly"
+            @save-form-on-the-fly="saveFormOnTheFly"
-                  @newPriorSuggestion="newPriorSuggestion"
+            @new-prior-suggestion="newPriorSuggestion"
-                  @updateSelected="updateSelected">
+            @update-selected="updateSelected"
-               </person-suggestion>
+          />
 
           <div class="create-button">
             <on-the-fly
               v-if="queryLength >= 3 && (options.type.includes('person') || options.type.includes('thirdparty'))"
-                     :buttonText="$t('onthefly.create.button', {q: query})"
+              :button-text="$t('onthefly.create.button', {q: query})"
-                     :allowedTypes="options.type"
+              :allowed-types="options.type"
               :query="query"
               action="create"
-                     @saveFormOnTheFly="saveFormOnTheFly"
+              @save-form-on-the-fly="saveFormOnTheFly"
-                     ref="onTheFly">
+              ref="onTheFly"
-                  </on-the-fly>
+            />
           </div>
-
         </div>
       </template>
 
-         <template v-slot:footer>
+      <template #footer>
-            <button class="btn btn-create"
+        <button
-               @click.prevent="$emit('addNewPersons', { selected, modal })">
+          class="btn btn-create"
+          @click.prevent="$emit('addNewPersons', { selected, modal })"
+        >
           {{ $t('action.add') }}
         </button>
       </template>
-
     </modal>
   </teleport>
 </template>

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

@@ -1,38 +1,40 @@
 <template>
-   <div class="list-item" :class="{ checked: isChecked }">
+  <div
-
+    class="list-item"
+    :class="{ checked: isChecked }"
+  >
     <label>
       <div>
         <input
-               v-bind:type="type"
+          :type="type"
           v-model="selected"
           name="item"
-               v-bind:id="item"
+          :id="item"
-               v-bind:value="setValueByType(item, type)" />
+          :value="setValueByType(item, type)"
+        >
       </div>
 
       <suggestion-person
         v-if="item.result.type === 'person'"
-            v-bind:item="item">
+        :item="item"
-         </suggestion-person>
+      />
 
       <suggestion-third-party
         v-if="item.result.type === 'thirdparty'"
-            @newPriorSuggestion="newPriorSuggestion"
+        @new-prior-suggestion="newPriorSuggestion"
-            v-bind:item="item">
+        :item="item"
-         </suggestion-third-party>
+      />
 
       <suggestion-user
         v-if="item.result.type === 'user'"
-            v-bind:item="item">
+        :item="item"
-         </suggestion-user>
+      />
 
       <suggestion-household
         v-if="item.result.type === 'household'"
-               v-bind:item="item">
+        :item="item"
-         </suggestion-household>
+      />
     </label>
-
   </div>
 </template>
 

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

@@ -1,13 +1,16 @@
 <template>
   <div class="container household">
-     <household-render-box :household="item.result" :isAddressMultiline="false"></household-render-box>
+    <household-render-box
+      :household="item.result"
+      :is-address-multiline="false"
+    />
   </div>
 
   <div class="right_actions">
     <badge-entity
       :entity="item.result"
-        :options="{ displayLong: true }">
+      :options="{ displayLong: true }"
-      </badge-entity>
+    />
   </div>
 </template>
 

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

@@ -1,12 +1,18 @@
 <template>
   <div class="container">
     <span class="name">
-         <person-text :person="item.result"></person-text>
+      <person-text :person="item.result" />
     </span>
-      <span class="birthday" v-if="hasBirthdate">
+    <span
+      class="birthday"
+      v-if="hasBirthdate"
+    >
       {{ $d(item.result.birthdate.datetime, 'short') }}
     </span>
-      <span class="location" v-if="hasAddress">
+    <span
+      class="location"
+      v-if="hasAddress"
+    >
       {{ item.result.current_household_address.text }} -
       {{ item.result.current_household_address.postcode.name }}
     </span>
@@ -15,13 +21,13 @@
   <div class="right_actions">
     <badge-entity
       :entity="item.result"
-        :options="{ displayLong: true }">
+      :options="{ displayLong: true }"
-      </badge-entity>
+    />
     <on-the-fly
       type="person"
-         v-bind:id="item.result.id"
+      :id="item.result.id"
-         action="show">
+      action="show"
-      </on-the-fly>
+    />
   </div>
 </template>