From 1fda1515c70edda1905a06d4b7b7408cd868d99b Mon Sep 17 00:00:00 2001
From: Sophie Moustard <sophiemoustard@sophies-macbook-pro.home>
Date: Thu, 23 Dec 2021 11:24:54 +0100
Subject: [PATCH] COM-2583 - update coac interface

---
 src/core/components/form/OptionGroup.vue      |  8 ++++-
 src/core/components/form/SearchAddress.vue    |  6 ++--
 src/core/components/form/Select.vue           |  3 +-
 src/core/components/modal/Modal.vue           |  4 +--
 src/core/components/table/Pagination.vue      |  6 ++--
 src/core/components/table/ResponsiveTable.vue |  6 ++--
 src/core/components/table/SimpleTable.vue     |  7 ++--
 .../auxiliary/AuxiliaryCreationModal.vue      | 29 +++++++--------
 .../customers/CustomerCreationModal.vue       | 17 ++++-----
 .../planning/ChipAuxiliaryIndicator.vue       |  6 ++--
 .../planning/EventCreationModal.vue           | 36 +++++++++----------
 .../components/planning/EventEditionModal.vue | 33 ++++++++++++-----
 .../client/components/planning/Planning.vue   | 13 ++++++-
 .../planning/PlanningModalHeader.vue          |  7 ++--
 .../planning/PlanningNavigation.vue           |  8 +++++
 .../client/mixins/planningActionMixin.js      |  6 +++-
 .../client/pages/ni/auxiliaries/Directory.vue | 22 +++++++-----
 .../pages/ni/customers/CustomersDirectory.vue | 20 ++++++-----
 .../pages/ni/planning/AuxiliaryPlanning.vue   | 10 +++---
 19 files changed, 152 insertions(+), 95 deletions(-)

diff --git a/src/core/components/form/OptionGroup.vue b/src/core/components/form/OptionGroup.vue
index cfbd2232d9..e252830a9b 100644
--- a/src/core/components/form/OptionGroup.vue
+++ b/src/core/components/form/OptionGroup.vue
@@ -7,7 +7,7 @@
       </div>
       <q-field dense borderless :error="error" :error-message="errorMessage" class="col-12">
         <q-option-group :model-value="value" :options="options" :readonly="readOnly" :type="type" :inline="inline" dense
-          :disable="disable" />
+          :disable="disable" @update:model-value="udpate" />
       </q-field>
     </div>
   </div>
@@ -32,6 +32,12 @@ export default {
     displayCaption: { type: Boolean, default: true },
     disable: { type: Boolean, default: false },
   },
+  emits: ['update:value'],
+  methods: {
+    update (value) {
+      this.$emit('update:value', value);
+    },
+  },
 };
 </script>
 
diff --git a/src/core/components/form/SearchAddress.vue b/src/core/components/form/SearchAddress.vue
index ff50daa820..aa243d7f29 100644
--- a/src/core/components/form/SearchAddress.vue
+++ b/src/core/components/form/SearchAddress.vue
@@ -33,7 +33,7 @@ export default {
     disable: { type: Boolean, default: false },
     color: { type: String, default: 'white' },
   },
-  emits: ['blur', 'focus', 'input'],
+  emits: ['blur', 'focus', 'update:value'],
   components: {
     'ni-button': Button,
   },
@@ -70,10 +70,10 @@ export default {
       this.$emit('focus');
     },
     update (value) {
-      this.$emit('input', pick(value, ['fullAddress', 'street', 'city', 'zipCode', 'location']));
+      this.$emit('update:value', pick(value, ['fullAddress', 'street', 'city', 'zipCode', 'location']));
     },
     resetValue () {
-      this.$emit('input', { street: '', zipCode: '', city: '', location: {}, fullAddress: '' });
+      this.$emit('update:value', { street: '', zipCode: '', city: '', location: {}, fullAddress: '' });
     },
   },
 };
diff --git a/src/core/components/form/Select.vue b/src/core/components/form/Select.vue
index 8ce9a227c5..05b2211c8c 100644
--- a/src/core/components/form/Select.vue
+++ b/src/core/components/form/Select.vue
@@ -53,6 +53,7 @@ export default {
     optionSlot: { type: Boolean, default: false },
     noBorder: { type: Boolean, default: false },
   },
+  emits: ['focus', 'blur', 'update:value'],
   components: {
     'ni-button': Button,
   },
@@ -90,7 +91,7 @@ export default {
       this.$emit('blur');
     },
     onInput (val) {
-      this.$emit('input', val);
+      this.$emit('update:value', val);
       this.$refs.selectInput.blur();
     },
     formatStringForFiltering (str) {
diff --git a/src/core/components/modal/Modal.vue b/src/core/components/modal/Modal.vue
index 4467b42b31..e3c08fb30b 100644
--- a/src/core/components/modal/Modal.vue
+++ b/src/core/components/modal/Modal.vue
@@ -1,6 +1,6 @@
 <template>
-  <q-dialog :model-value="value" @update:model-value="$emit('update:value')" @update:show="$emit('show')"
-    @update:hide="$emit('hide')">
+  <q-dialog :model-value="value" @update:model-value="$emit('update:value')" @show="$emit('show')"
+    @hide="$emit('hide')">
     <div :class="containerClass">
       <div class="modal-padding">
         <div class="row justify-between items-start">
diff --git a/src/core/components/table/Pagination.vue b/src/core/components/table/Pagination.vue
index 05ed9b22b8..e6e91ea757 100644
--- a/src/core/components/table/Pagination.vue
+++ b/src/core/components/table/Pagination.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="row justify-between full-width text-copper-grey-600">
     <div class="row items-center">
-      <q-btn-toggle class="on-left no-shadow" :value="rowsPerPage" :options="rowsPerPageOptions" size="12px"
-        toggle-text-color="primary" toggle-color="white" no-caps dense @input="update($event, 'rowsPerPage')" />
+      <q-btn-toggle class="on-left no-shadow" :model-value="rowsPerPage" :options="rowsPerPageOptions" size="12px"
+        toggle-text-color="primary" toggle-color="white" no-caps dense
+        @update:model-value="update($event, 'rowsPerPage')" />
       <div>Eléments par page</div>
     </div>
     <div class="row items-center">
@@ -29,6 +30,7 @@ export default {
     pagination: { type: Object, default: () => ({}) },
     options: { type: Array, default: () => [15, 50, 100, 200, 300] },
   },
+  emits: ['update:pagination'],
   data () {
     return {
       rowsPerPage: 0,
diff --git a/src/core/components/table/ResponsiveTable.vue b/src/core/components/table/ResponsiveTable.vue
index dae5c5a13d..1959cfdd42 100644
--- a/src/core/components/table/ResponsiveTable.vue
+++ b/src/core/components/table/ResponsiveTable.vue
@@ -3,8 +3,8 @@
     <q-table v-if="!loading" :rows="data" :columns="columns" :row-key="rowKey" :pagination="pagination"
       binary-state-sort :visible-columns="formattedVisibleColumns" flat :separator="data.length ? separator : 'none'"
       :hide-bottom="hideBottom" :rows-per-page-options="rowsPerPageOptions" class="table-responsive q-pa-sm"
-      @update:pagination="$emit('update:pagination')" @update:selected="$emit('update:selected')"
-      @update:expanded="$emit('update:expanded')" @update:row-click="$emit('update:row-click')" :color="'#ff0000'">
+      @update:pagination="$emit('update:pagination')" @selected="$emit('selected')" @expanded="$emit('expanded')"
+      @row-click="$emit('row-click')" :color="'#ff0000'">
       <template #header="props">
         <slot name="header" :props="props">
           <q-tr :props="props">
@@ -51,7 +51,7 @@ export default {
     hideBottom: { type: Boolean, default: true },
     noDataLabel: { type: String, default: '' },
   },
-  emits: ['update:pagination', 'update:selected', 'update:expanded', 'update:row-click'],
+  emits: ['update:pagination', 'selected', 'expanded', 'row-click'],
   computed: {
     formattedVisibleColumns () {
       return this.visibleColumns.length ? this.visibleColumns : this.columns.map(col => col.name);
diff --git a/src/core/components/table/SimpleTable.vue b/src/core/components/table/SimpleTable.vue
index 94ca9bdf96..ad315e26f9 100644
--- a/src/core/components/table/SimpleTable.vue
+++ b/src/core/components/table/SimpleTable.vue
@@ -2,9 +2,8 @@
   <div class="relative-position table-spinner-container">
     <q-table v-if="!loading" :rows="data" :columns="columns" :pagination="pagination" binary-state-sort
       flat :separator="separator" :selection="selection" :row-key="rowKey" :selected="selected"
-      :visible-columns="formattedVisibleColumns" :hide-bottom="shouldHideBottom"
-      @update:pagination="$emit('update:pagination')" @update:selected="$emit('update:selected')"
-      @update:expanded="$emit('update:expanded')" @update:row-click="$emit('update:row-click')"
+      :visible-columns="formattedVisibleColumns" :hide-bottom="shouldHideBottom" @row-click="$emit('row-click')"
+      @update:pagination="$emit('update:pagination')" @selected="$emit('selected')" @expanded="$emit('expanded')"
       :class="['q-pa-sm large-table sticky-header', isClientInterface ? 'client-header' : 'vendor-header']">
       <template #header="props">
         <slot name="header" :props="props">
@@ -64,7 +63,7 @@ export default {
     hideBottom: { type: Boolean, default: false },
     rowsPerPage: { type: Array, default: () => [15, 50, 100, 200, 300] },
   },
-  emits: ['update:pagination', 'update:selected', 'update:expanded', 'update:row-click', 'update:pagination'],
+  emits: ['update:pagination', 'selected', 'expanded', 'row-click'],
   components: {
     'ni-pagination': Pagination,
   },
diff --git a/src/modules/client/components/auxiliary/AuxiliaryCreationModal.vue b/src/modules/client/components/auxiliary/AuxiliaryCreationModal.vue
index 8653ea39d5..1cac49ac79 100644
--- a/src/modules/client/components/auxiliary/AuxiliaryCreationModal.vue
+++ b/src/modules/client/components/auxiliary/AuxiliaryCreationModal.vue
@@ -1,37 +1,37 @@
 <template>
-  <ni-modal :value="value" @hide="hide" @input="input">
-    <template slot="title">
+  <ni-modal :value="value" @hide="hide" @update:value="input">
+    <template #title>
       Ajouter une <span class="text-weight-bold">personne</span>
     </template>
     <ni-input in-modal :disable="!firstStep" :value="newUser.local.email" caption="Email"
       :error="validations.local.email.$error" @blur="validations.local.email.$touch" required-field
-      :error-message="emailError" @input="updateUser($event.trim(), 'local.email')" />
+      :error-message="emailError" @update:value="updateUser($event.trim(), 'local.email')" />
     <template v-if="!firstStep">
       <ni-select in-modal :value="newUser.identity.title" :options="civilityOptions" caption="Civilité"
         required-field :error="validations.identity.title.$error" @blur="validations.identity.title.$touch"
-        @input="updateUser($event, 'identity.title')" />
+        @update:value="updateUser($event, 'identity.title')" />
       <ni-input in-modal :value="newUser.identity.lastname" :error="validations.identity.lastname.$error" caption="Nom"
         @blur="validations.identity.lastname.$touch" required-field
-        @input="updateUser($event.trim(), 'identity.lastname')" />
+        @update:value="updateUser($event.trim(), 'identity.lastname')" />
       <ni-input in-modal :value="newUser.identity.firstname" :error="validations.identity.firstname.$error"
         caption="Prénom" @blur="validations.identity.firstname.$touch" required-field
-        @input="updateUser($event.trim(), 'identity.firstname')" />
+        @update:value="updateUser($event.trim(), 'identity.firstname')" />
       <ni-input in-modal :value="newUser.contact.phone" :error="validations.contact.phone.$error" required-field
         caption="Numéro de téléphone" @blur="validations.contact.phone.$touch" :error-message="mobilePhoneError"
-        @input="updateUser($event, 'contact.phone')" />
+        @update:value="updateUser($event, 'contact.phone')" />
       <ni-search-address :value="newUser.contact.address" color="white" inverted-light
         @blur="validations.contact.address.$touch" error-message="Adresse non valide"
-        :error="validations.contact.address.$error" in-modal @input="updateUser($event, 'contact.address')" />
+        :error="validations.contact.address.$error" in-modal @update:value="updateUser($event, 'contact.address')" />
       <ni-select-sector :value="newUser.sector" @blur="validations.sector.$touch" :error-message="REQUIRED_LABEL"
-        :company-id="companyId" :error="validations.sector.$error" in-modal @input="updateUser($event, 'sector')"
+        :company-id="companyId" :error="validations.sector.$error" in-modal @update:value="updateUser($event, 'sector')"
         required-field />
       <div class="row margin-input last">
-        <q-checkbox :value="sendWelcomeMsg" label="Envoyer SMS d'accueil" dense @input="updateSendWelcome" />
+        <q-checkbox :value="sendWelcomeMsg" label="Envoyer SMS d'accueil" dense @update:value="updateSendWelcome" />
       </div>
     </template>
-    <template slot="footer">
-      <q-btn v-if="firstStep" no-caps class="full-width modal-btn" label="Suivant" color="primary"
-        :loading="loading" icon-right="add" @click="goToNextStep" />
+    <template #footer>
+      <q-btn v-if="firstStep" no-caps class="full-width modal-btn" label="Suivant" color="primary" :loading="loading"
+        icon-right="add" @click="goToNextStep" />
       <q-btn v-else no-caps class="full-width modal-btn" label="Ajouter la personne" color="primary"
         :loading="loading" icon-right="add" @click="submit" />
     </template>
@@ -66,6 +66,7 @@ export default {
     'ni-modal': Modal,
     'ni-select-sector': SelectSector,
   },
+  emits: ['hide', 'update:value', 'submit', 'go-to-next-step', 'update:send-welcome-msg', 'update-new-user'],
   data () {
     return {
       REQUIRED_LABEL,
@@ -86,7 +87,7 @@ export default {
       this.$emit('hide');
     },
     input (event) {
-      this.$emit('input', event);
+      this.$emit('update:value', event);
     },
     submit () {
       this.$emit('submit');
diff --git a/src/modules/client/components/customers/CustomerCreationModal.vue b/src/modules/client/components/customers/CustomerCreationModal.vue
index bbf47ae25a..b7001a14d2 100644
--- a/src/modules/client/components/customers/CustomerCreationModal.vue
+++ b/src/modules/client/components/customers/CustomerCreationModal.vue
@@ -1,22 +1,22 @@
 <template>
-  <ni-modal :value="value" @hide="hide" @input="input">
-    <template slot="title">
+  <ni-modal :value="value" @hide="hide" @update:value="input">
+    <template #title>
       Créer une nouvelle <span class="text-weight-bold">fiche bénéficiaire</span>
     </template>
     <ni-select in-modal :value="newCustomer.identity.title" :error="validations.identity.title.$error"
       :options="civilityOptions" caption="Civilité" @blur="validations.identity.title.$touch" required-field
-      @input="update($event, 'identity.title')" />
+      @update:value="update($event, 'identity.title')" />
     <ni-input in-modal :value="newCustomer.identity.lastname" :error="validations.identity.lastname.$error"
       caption="Nom" @blur="validations.identity.lastname.$touch" required-field
-      @input="update($event.trim(), 'identity.lastname')" />
+      @update:value="update($event.trim(), 'identity.lastname')" />
     <ni-input in-modal :value="newCustomer.identity.firstname" caption="Prénom"
-      @input="update($event.trim(), 'identity.firstname')" />
+      @update:value="update($event.trim(), 'identity.firstname')" />
     <div class="row margin-input last">
       <ni-search-address :value="newCustomer.contact.primaryAddress" in-modal required-field
         :error="validations.contact.primaryAddress.$error" :error-message="primaryAddressError"
-        @blur="validations.contact.primaryAddress.$touch" @input="update($event, 'contact.primaryAddress')" />
+        @blur="validations.contact.primaryAddress.$touch" @update:value="update($event, 'contact.primaryAddress')" />
     </div>
-    <template slot="footer">
+    <template #footer>
       <q-btn no-caps class="full-width modal-btn" label="Créer la fiche" icon-right="add" color="primary"
         :loading="loading" @click="submit" />
     </template>
@@ -40,6 +40,7 @@ export default {
     civilityOptions: { type: Array, default: () => [] },
     loading: { type: Boolean, default: false },
   },
+  emits: ['hide', 'submit', 'update:newCustomer', 'update:value'],
   components: {
     'ni-search-address': SearchAddress,
     'ni-input': Input,
@@ -56,7 +57,7 @@ export default {
       this.$emit('hide');
     },
     input (event) {
-      this.$emit('input', event);
+      this.$emit('update:value', event);
     },
     submit () {
       this.$emit('submit');
diff --git a/src/modules/client/components/planning/ChipAuxiliaryIndicator.vue b/src/modules/client/components/planning/ChipAuxiliaryIndicator.vue
index 3bdbd1b795..6164cb61f2 100644
--- a/src/modules/client/components/planning/ChipAuxiliaryIndicator.vue
+++ b/src/modules/client/components/planning/ChipAuxiliaryIndicator.vue
@@ -11,7 +11,7 @@
         </q-chip>
       </div>
     </div>
-    <div class="person-name overflow-hidden-nowrap">{{ person.identity | formatIdentity('Fl') }}</div>
+    <div class="person-name overflow-hidden-nowrap">{{ formatIdentity(person.identity, 'Fl') }}</div>
 
     <!-- Indicators modal -->
     <q-dialog v-model="indicatorsModal">
@@ -118,6 +118,7 @@ export default {
     },
   },
   methods: {
+    formatIdentity,
     getAvatar (picture) {
       return (get(picture, 'link')) || DEFAULT_AVATAR;
     },
@@ -150,9 +151,6 @@ export default {
       }
     },
   },
-  filters: {
-    formatIdentity,
-  },
 };
 </script>
 
diff --git a/src/modules/client/components/planning/EventCreationModal.vue b/src/modules/client/components/planning/EventCreationModal.vue
index 03779329d0..78245dc1c3 100644
--- a/src/modules/client/components/planning/EventCreationModal.vue
+++ b/src/modules/client/components/planning/EventCreationModal.vue
@@ -1,19 +1,19 @@
 <template>
-  <q-dialog v-if="Object.keys(newEvent).length !== 0" :value="creationModal" @hide="reset(false)">
+  <q-dialog v-if="Object.keys(newEvent).length !== 0" :model-value="creationModal" @hide="reset(false)">
     <div class="modal-container-md">
       <div class="modal-padding">
         <ni-planning-modal-header v-if="isCustomerPlanning" :value="newEvent.customer"
           :selected-person="selectedCustomer" @close="close" />
         <ni-planning-modal-header v-else :value="newEvent.auxiliary" :options="auxiliariesOptions"
           :selected-person="selectedAuxiliary" @close="close" @update:sector="updateSectorEvent"
-          @input="updateEvent('auxiliary', $event)" />
-        <ni-btn-toggle :value="newEvent.type" :options="eventTypeOptions" @input="updateType($event)" />
-        <template v-if="newEvent.type !== ABSENCE">
+          @update:value="updateEvent('auxiliary', $event)" />
+        <ni-btn-toggle :value="newEvent.type" :options="eventTypeOptions" @update:value="updateType($event)" />
+        <!-- <template v-if="newEvent.type !== ABSENCE">
           <ni-datetime-range caption="Dates et heures de l'évènement" :value="newEvent.dates" required-field
             :error="validations.dates.$error" @blur="validations.dates.$touch" disable-end-date
             @input="updateEvent('dates', $event)" :max="customerStoppedDate" />
-        </template>
-        <template v-if="newEvent.type === INTERVENTION">
+        </template> -->
+        <!-- <template v-if="newEvent.type === INTERVENTION">
           <ni-select v-if="isCustomerPlanning" in-modal caption="Auxiliaire" :value="newEvent.auxiliary"
             :options="auxiliariesOptions" :error="validations.auxiliary.$error" required-field
             @blur="validations.auxiliary.$touch" @input="updateEvent('auxiliary', $event)" />
@@ -23,8 +23,8 @@
           <ni-select in-modal caption="Service" :value="newEvent.subscription" :error="validations.subscription.$error"
             :options="customerSubscriptionsOptions" required-field @blur="validations.subscription.$touch"
             data-cy="event-creation-service" @input="updateEvent('subscription', $event)" />
-        </template>
-        <template v-if="newEvent.type === ABSENCE">
+        </template> -->
+        <!-- <template v-if="newEvent.type === ABSENCE">
           <ni-select in-modal caption="Nature" :value="newEvent.absenceNature" :options="absenceNatureOptions"
             :error="validations.absenceNature.$error" required-field @blur="validations.absenceNature.$touch"
             @input="updateAbsenceNature($event)" />
@@ -46,28 +46,28 @@
             :entity="newEvent" name="file" :url="docsUploadUrl" @uploaded="documentUploaded" :extensions="extensions"
             :additional-value="additionalValue" required-field in-modal :disable="!selectedAuxiliary._id" drive-storage
             :error="validations.attachment.link.$error" @delete="deleteDocument(newEvent.attachment.driveId)" />
-        </template>
-        <template v-if="newEvent.type === INTERNAL_HOUR">
+        </template> -->
+        <!-- <template v-if="newEvent.type === INTERNAL_HOUR">
           <ni-select in-modal caption="Type d'heure interne" :value="newEvent.internalHour"
             :options="internalHourOptions" required-field :error="validations.internalHour.$error"
             @blur="validations.internalHour.$touch" @input="updateEvent('internalHour', $event)" />
-        </template>
-        <template v-if="newEvent.type !== ABSENCE && newEvent.repetition">
+        </template> -->
+        <!-- <template v-if="newEvent.type !== ABSENCE && newEvent.repetition">
           <ni-select in-modal caption="Répétition de l'évènement" :value="newEvent.repetition.frequency"
             :options="repetitionOptions" required-field @blur="validations.repetition.frequency.$touch"
             :disable="!isRepetitionAllowed" @input="updateEvent('repetition.frequency', $event)"
             :error="validations.repetition.frequency.$error" />
-        </template>
-        <template v-if="newEvent.type === INTERNAL_HOUR">
+        </template> -->
+        <!-- <template v-if="newEvent.type === INTERNAL_HOUR">
           <ni-search-address :value="newEvent.address" :error-message="addressError" @blur="validations.address.$touch"
             :error="validations.address.$error" in-modal @input="updateEvent('address', $event)" />
-        </template>
+        </template> -->
         <ni-input in-modal type="textarea" :value="newEvent.misc" caption="Notes" @blur="validations.misc.$touch"
           :error="validations.misc.$error" :required-field="newEvent.type === ABSENCE && newEvent.absence === OTHER"
-          @input="updateEvent('misc', $event)" />
+          @update:value="updateEvent('misc', $event)" />
       </div>
       <div v-if="newEvent.type === INTERVENTION && customerAddressList(newEvent).length > 0" class="customer-info">
-        <div class="row items-center no-wrap">
+        <!-- <div class="row items-center no-wrap">
           <q-select borderless dense :value="newEvent.address" @input="updateCustomerAddress($event)" emit-value
             :options="customerAddressList(newEvent)" :readonly="customerAddressList(newEvent).length === 1"
             :display-value="newEvent.address.fullAddress" ref="addressSelect" behavior="menu">
@@ -75,7 +75,7 @@
               <ni-button icon="swap_vert" class="select-icon primary-icon" @click.stop="toggleAddressSelect" />
             </template>
           </q-select>
-        </div>
+        </div> -->
       </div>
       <q-btn class="full-width modal-btn" no-caps :loading="loading" label="Créer l'évènement" color="primary"
         @click="submit" icon-right="add" data-cy="event-creation-button" />
diff --git a/src/modules/client/components/planning/EventEditionModal.vue b/src/modules/client/components/planning/EventEditionModal.vue
index 0bda0acdd7..8f4c9f1d2f 100644
--- a/src/modules/client/components/planning/EventEditionModal.vue
+++ b/src/modules/client/components/planning/EventEditionModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-dialog :value="editionModal" @hide="hide">
+  <q-dialog :model-value="editionModal" @hide="hide">
     <div class="modal-container-md">
       <div class="modal-padding">
         <ni-planning-modal-header v-if="isCustomerPlanning" :value="editedEvent.customer"
@@ -21,8 +21,8 @@
             @input="updateEvent('dates', $event)" @blur="validations.dates.$touch"
             :disable-start-date="isEventTimeStamped" :max="customerStoppedDate"
             :disable-start-hour="!!startDateTimeStamped" :disable-end-hour="!!endDateTimeStamped"
-            :start-locked="!!startDateTimeStamped" @startLockClick="openTimeStampCancellationModal(true)"
-            :end-locked="!!endDateTimeStamped" @endLockClick="openTimeStampCancellationModal(false)" />
+            :start-locked="!!startDateTimeStamped" @start-lock-click="openTimeStampCancellationModal(true)"
+            :end-locked="!!endDateTimeStamped" @end-lock-click="openTimeStampCancellationModal(false)" />
         </template>
         <template v-if="editedEvent.type === INTERVENTION">
           <ni-select v-if="isCustomerPlanning" in-modal caption="Auxiliaire" :value="editedEvent.auxiliary"
@@ -128,14 +128,15 @@
         :disable="historiesLoading" />
     </div>
     <ni-history-cancellation-modal v-model="historyCancellationModal" @hide="resetHistoryCancellationModal"
-      @cancelTimeStamping="cancelTimeStamping" :start="isStartCancellation" :reason.sync="timeStampCancellationReason"
-      :validations="$v.timeStampCancellationReason" />
+      @cancel-time-stamping="cancelTimeStamping" :start="isStartCancellation"
+      :validations="v$.timeStampCancellationReason" v-model:reason="timeStampCancellationReason" />
   </q-dialog>
 </template>
 
 <script>
 import get from 'lodash/get';
-import { required } from 'vuelidate/lib/validators';
+import useVuelidate from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import EventHistories from '@api/EventHistories';
 import Button from '@components/Button';
 import { NotifyPositive, NotifyNegative, NotifyWarning } from '@components/popup/notify';
@@ -161,11 +162,25 @@ export default {
     eventHistories: { type: Array, default: () => [] },
     historiesLoading: { type: Boolean, default: false },
   },
+  setup () {
+    return { v$: useVuelidate() };
+  },
   components: {
     'ni-button': Button,
     'ni-event-history': NiEventHistory,
     'ni-history-cancellation-modal': NiHistoryCancellationModal,
   },
+  emits: [
+    'refresh-histories',
+    'delete-event',
+    'delete-event-repetition',
+    'submit',
+    'document-uploaded',
+    'delete-document',
+    'hide',
+    'close',
+    'update-event',
+  ],
   data () {
     return {
       displayHistory: false,
@@ -320,15 +335,15 @@ export default {
       this.timeStampCancellationReason = '';
       this.historyCancellationModal = false;
       this.historyToCancel = {};
-      this.$v.timeStampCancellationReason.$reset();
+      this.v$.timeStampCancellationReason.$reset();
     },
     async refreshHistories (eventId) {
       await this.$emit('refresh-histories', eventId);
     },
     async cancelTimeStamping () {
       try {
-        this.$v.timeStampCancellationReason.$touch();
-        if (this.$v.timeStampCancellationReason.$error) return NotifyWarning('Champ(s) invalide(s)');
+        this.v$.timeStampCancellationReason.$touch();
+        if (this.v$.timeStampCancellationReason.$error) return NotifyWarning('Champ(s) invalide(s)');
 
         await EventHistories.updateById(
           this.historyToCancel._id,
diff --git a/src/modules/client/components/planning/Planning.vue b/src/modules/client/components/planning/Planning.vue
index 5c288a8f0b..d18635ccf0 100644
--- a/src/modules/client/components/planning/Planning.vue
+++ b/src/modules/client/components/planning/Planning.vue
@@ -150,6 +150,17 @@ export default {
     eventHistories: { type: Array, default: () => [] },
     filters: { type: Array, default: () => [] },
   },
+  emits: [
+    'update-feeds',
+    'refresh',
+    'toggle-all-sectors',
+    'update-start-of-week',
+    'toggle-history',
+    'on-drop',
+    'open-creation-modal',
+    'open-edition-modal',
+    'open-customer-absence-edition-modal',
+  ],
   data () {
     return {
       terms: [],
@@ -167,7 +178,7 @@ export default {
       timeout: null,
     };
   },
-  beforeDestroy () {
+  beforeUnmount () {
     if (this.isCoach) {
       if (!this.isCustomerPlanning) {
         this.$q.localStorage.set('lastSearchAuxiliaries', JSON.stringify(this.termIds));
diff --git a/src/modules/client/components/planning/PlanningModalHeader.vue b/src/modules/client/components/planning/PlanningModalHeader.vue
index 7e583b39fa..8f2b163959 100644
--- a/src/modules/client/components/planning/PlanningModalHeader.vue
+++ b/src/modules/client/components/planning/PlanningModalHeader.vue
@@ -4,12 +4,12 @@
       <img :src="avatar" class="avatar">
       <div class="person-name-text" v-if="options.length === 0">{{ formattedIdentity }}</div>
       <div v-else :class="{ 'col-md-6': $q.platform.is.desktop }" class="person-name-select">
-        <ni-select no-border :value="value" :options="options" @input="input" no-error icon="swap_vert"
+        <ni-select no-border :value="value" :options="options" @update:value="input" no-error icon="swap_vert"
           :disable="disable" />
       </div>
     </div>
     <div class="col-1 cursor-pointer modal-btn-close">
-      <ni-button icon="close" @click.native="close" />
+      <ni-button icon="close" @click="close" />
     </div>
   </div>
 </template>
@@ -33,6 +33,7 @@ export default {
     'ni-select': Select,
     'ni-button': Button,
   },
+  emits: ['close', 'update-value'],
   computed: {
     formattedIdentity () {
       return formatIdentity(this.selectedPerson.identity, 'FL');
@@ -45,7 +46,7 @@ export default {
   },
   methods: {
     input (event) {
-      this.$emit('input', event);
+      this.$emit('update-value', event);
     },
     close () {
       this.$emit('close');
diff --git a/src/modules/client/components/planning/PlanningNavigation.vue b/src/modules/client/components/planning/PlanningNavigation.vue
index 8e32e471c8..04676569fa 100644
--- a/src/modules/client/components/planning/PlanningNavigation.vue
+++ b/src/modules/client/components/planning/PlanningNavigation.vue
@@ -46,6 +46,14 @@ export default {
   components: {
     'ni-button': Button,
   },
+  emits: [
+    'go-to-next-week',
+    'go-to-previous-week',
+    'go-to-week',
+    'go-to-today',
+    'open-delete-events-modal',
+    'toggle-history', 'update-view-mode',
+  ],
   data () {
     return {
       datimeModal: false,
diff --git a/src/modules/client/mixins/planningActionMixin.js b/src/modules/client/mixins/planningActionMixin.js
index dc05c403e5..2eb1cc1da4 100644
--- a/src/modules/client/mixins/planningActionMixin.js
+++ b/src/modules/client/mixins/planningActionMixin.js
@@ -4,7 +4,8 @@ import get from 'lodash/get';
 import pick from 'lodash/pick';
 import pickBy from 'lodash/pickBy';
 import cloneDeep from 'lodash/cloneDeep';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import useVuelidate from '@vuelidate/core';
+import { required, requiredIf } from '@vuelidate/validators';
 import { subject } from '@casl/ability';
 import InternalHours from '@api/InternalHours';
 import Gdrive from '@api/GoogleDrive';
@@ -32,6 +33,9 @@ import { validationMixin } from '@mixins/validationMixin';
 
 export const planningActionMixin = {
   mixins: [validationMixin],
+  setup () {
+    return { v$: useVuelidate() };
+  },
   data () {
     return {
       editedEventHistories: [],
diff --git a/src/modules/client/pages/ni/auxiliaries/Directory.vue b/src/modules/client/pages/ni/auxiliaries/Directory.vue
index 723e442fed..83ffd0bcb1 100644
--- a/src/modules/client/pages/ni/auxiliaries/Directory.vue
+++ b/src/modules/client/pages/ni/auxiliaries/Directory.vue
@@ -2,7 +2,7 @@
   <q-page class="client-background" padding>
     <ni-directory-header title="Répertoire auxiliaires" toggle-label="Actifs" :toggle-value="activeUsers" display-toggle
       @update-search="updateSearch" @toggle="activeUsers = !activeUsers" :search="searchStr" />
-    <ni-table-list :data="filteredUsers" :columns="columns" :loading="tableLoading" :pagination.sync="pagination"
+    <ni-table-list :data="filteredUsers" :columns="columns" :loading="tableLoading" v-model:pagination="pagination"
       @go-to="goToUserProfile" :rows-per-page="[15, 50, 100, 200]">
       <template #body="{ props, col }">
         <q-item v-if="col.name === 'name'">
@@ -25,14 +25,15 @@
       @click="auxiliaryCreationModal = true" :disable="tableLoading" />
 
     <auxiliary-creation-modal v-model="auxiliaryCreationModal" :new-user="newUser"
-      :validations="$v.newUser" :company-id="company._id" :loading="loading" :email-error="emailError($v.newUser)"
-      :first-step="firstStep" :send-welcome-msg.sync="sendWelcomeMsg" :civility-options="civilityOptions"
+      :validations="v$.newUser" :company-id="company._id" :loading="loading" :email-error="emailError(v$.newUser)"
+      :first-step="firstStep" v-model:send-welcome-msg="sendWelcomeMsg" :civility-options="civilityOptions"
       @hide="resetForm" @submit="submit" @go-to-next-step="nextStep" @update-new-user="setNewUser" />
   </q-page>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex';
+import useVuelidate from '@vuelidate/core';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import cloneDeep from 'lodash/cloneDeep';
@@ -62,6 +63,9 @@ export default {
     'auxiliary-creation-modal': AuxiliaryCreationModal,
   },
   mixins: [validationMixin, userMixin],
+  setup () {
+    return { v$: useVuelidate() };
+  },
   data () {
     return {
       tableLoading: false,
@@ -219,7 +223,7 @@ export default {
       this.$router.push({ name: 'ni auxiliaries info', params: { auxiliaryId: row.auxiliary._id } });
     },
     resetForm () {
-      this.$v.newUser.$reset();
+      this.v$.newUser.$reset();
       this.newUser = cloneDeep(this.defaultNewUser);
       this.firstStep = true;
       this.fetchedUser = {};
@@ -281,8 +285,8 @@ export default {
     },
     async nextStep () {
       try {
-        this.$v.newUser.$touch();
-        if (this.$v.newUser.local.email.$error) return NotifyWarning('Champ(s) invalide(s).');
+        this.v$.newUser.$touch();
+        if (this.v$.newUser.local.email.$error) return NotifyWarning('Champ(s) invalide(s).');
 
         this.loading = true;
         const userExistsInfo = await Users.exists({ email: this.newUser.local.email });
@@ -304,7 +308,7 @@ export default {
         }
 
         this.firstStep = false;
-        this.$v.newUser.$reset();
+        this.v$.newUser.$reset();
       } catch (e) {
         NotifyNegative('Erreur lors de la création de l\'auxiliaire.');
       } finally {
@@ -315,8 +319,8 @@ export default {
       let editedUser = {};
       try {
         this.loading = true;
-        this.$v.newUser.$touch();
-        const isValid = await this.waitForFormValidation(this.$v.newUser);
+        this.v$.newUser.$touch();
+        const isValid = await this.waitForFormValidation(this.v$.newUser);
         if (!isValid) return NotifyWarning('Champ(s) invalide(s)');
 
         const folderId = get(this.company, 'auxiliariesFolderId');
diff --git a/src/modules/client/pages/ni/customers/CustomersDirectory.vue b/src/modules/client/pages/ni/customers/CustomersDirectory.vue
index b9b386b6fc..6736246725 100644
--- a/src/modules/client/pages/ni/customers/CustomersDirectory.vue
+++ b/src/modules/client/pages/ni/customers/CustomersDirectory.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page class="client-background" padding>
     <ni-directory-header title="Répertoire bénéficiaires" @update-search="updateSearch" :search="searchStr" />
-    <ni-table-list :data="filteredCustomers" :columns="columns" :pagination.sync="pagination"
+    <ni-table-list :data="filteredCustomers" :columns="columns" v-model:pagination="pagination"
       @go-to="goToCustomerProfile" :loading="tableLoading" :rows-per-page="[15, 50, 100, 200]">
       <template #body="{ props, col }">
         <q-item v-if="col.name === 'fullName'">
@@ -19,13 +19,14 @@
     <q-btn class="fixed fab-custom" no-caps rounded color="primary" icon="add" label="Ajouter une personne"
       @click="customerCreationModal = true" :disable="tableLoading" />
 
-    <customer-creation-modal v-model="customerCreationModal" :new-customer.sync="newCustomer" :loading="loading"
-      :validations="$v.newCustomer" :civility-options="civilityOptions" @hide="resetForm" @submit="createCustomer" />
+    <customer-creation-modal v-model="customerCreationModal" v-model:new-customer="newCustomer" :loading="loading"
+      :validations="v$.newCustomer" :civility-options="civilityOptions" @hide="resetForm" @submit="createCustomer" />
   </q-page>
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import useVuelidate from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import get from 'lodash/get';
 import escapeRegExp from 'lodash/escapeRegExp';
 import Customers from '@api/Customers';
@@ -50,6 +51,9 @@ export default {
     'customer-creation-modal': CustomerCreationModal,
     'ni-table-list': TableList,
   },
+  setup () {
+    return { v$: useVuelidate() };
+  },
   data () {
     return {
       userCreated: null,
@@ -148,7 +152,7 @@ export default {
       },
     },
   },
-  async created () {
+  async mounted () {
     await this.getCustomers();
   },
   computed: {
@@ -197,7 +201,7 @@ export default {
       this.$router.push({ name: 'ni customers info', params: { customerId: customer._id } });
     },
     resetForm () {
-      this.$v.newCustomer.$reset();
+      this.v$.newCustomer.$reset();
       this.newCustomer = {
         identity: { title: '', lastname: '', firstname: '' },
         contact: {
@@ -208,8 +212,8 @@ export default {
     async createCustomer () {
       try {
         this.loading = true;
-        this.$v.newCustomer.$touch();
-        const isValid = await this.waitForFormValidation(this.$v.newCustomer);
+        this.v$.newCustomer.$touch();
+        const isValid = await this.waitForFormValidation(this.v$.newCustomer);
         if (!isValid) return NotifyWarning('Champ(s) invalide(s)');
 
         const payload = this.newCustomer;
diff --git a/src/modules/client/pages/ni/planning/AuxiliaryPlanning.vue b/src/modules/client/pages/ni/planning/AuxiliaryPlanning.vue
index 7e6a31c06b..3fbffa47ed 100644
--- a/src/modules/client/pages/ni/planning/AuxiliaryPlanning.vue
+++ b/src/modules/client/pages/ni/planning/AuxiliaryPlanning.vue
@@ -8,14 +8,14 @@
       @update-feeds="updateEventHistories" :working-stats="workingStats" @refresh="refresh" />
 
     <!-- Event creation modal -->
-    <ni-event-creation-modal :validations="$v.newEvent" :loading="loading" :new-event="newEvent"
+    <ni-event-creation-modal :validations="v$.newEvent" :loading="loading" :new-event="newEvent"
       :creation-modal="creationModal" :internal-hours="internalHours" @close="closeCreationModal" :customers="customers"
       :person-key="personKey" :active-auxiliaries="activeAuxiliaries" @reset="resetCreationForm"
-      @delete-document="validateDocumentDeletion" @document-uploaded="documentUploaded"
-      @submit="validateCreationEvent" @update-event="setEvent" />
+      @delete-document="validateDocumentDeletion" @document-uploaded="documentUploaded" @update-event="setEvent"
+      @submit="validateCreationEvent" />
 
     <!-- Event edition modal -->
-    <ni-event-edition-modal :validations="$v.editedEvent" :loading="loading" :edited-event="editedEvent"
+    <ni-event-edition-modal :validations="v$.editedEvent" :loading="loading" :edited-event="editedEvent"
       :edition-modal="editionModal" :internal-hours="internalHours" :active-auxiliaries="activeAuxiliaries"
       @hide="resetEditionForm" @delete-document="validateDocumentDeletion" @refresh-histories="refreshHistories"
       @document-uploaded="documentUploaded" @close="closeEditionModal" @delete-event="validateEventDeletion"
@@ -26,6 +26,7 @@
 </template>
 
 <script>
+import useVuelidate from '@vuelidate/core';
 import { mapGetters, mapActions, mapState } from 'vuex';
 import cloneDeep from 'lodash/cloneDeep';
 import uniqBy from 'lodash/uniqBy';
@@ -65,6 +66,7 @@ export default {
   props: {
     targetedAuxiliaryId: { type: String, default: '' },
   },
+  setup () { return { v$: useVuelidate() }; },
   data () {
     return {
       loading: false,