From 6bbd0b1e4c456786eff16e7100c807be69811cc2 Mon Sep 17 00:00:00 2001
From: Sophie Moustard <sophiemoustard@sophies-macbook-pro.home>
Date: Wed, 29 Dec 2021 11:00:15 +0100
Subject: [PATCH] COM-2583 - update trainer directory

---
 .../components/trainers/ProfileInfo.vue       | 14 ++++---
 .../trainers/TrainerCreationModal.vue         | 21 +++++-----
 .../ni/users/trainers/TrainerProfile.vue      |  4 +-
 .../ni/users/trainers/TrainersDirectory.vue   | 38 ++++++++-----------
 src/store/userProfile.js                      |  2 +-
 5 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/src/modules/vendor/components/trainers/ProfileInfo.vue b/src/modules/vendor/components/trainers/ProfileInfo.vue
index e10289db79..689ced52a9 100644
--- a/src/modules/vendor/components/trainers/ProfileInfo.vue
+++ b/src/modules/vendor/components/trainers/ProfileInfo.vue
@@ -5,11 +5,11 @@
       <ni-input v-model.trim="userProfile.identity.firstname" caption="Prénom"
         @focus="saveTmp('identity.firstname')" @blur="updateUser('identity.firstname')" />
       <ni-input v-model.trim="userProfile.identity.lastname" caption="Nom" @focus="saveTmp('identity.lastname')"
-        @blur="updateUser('identity.lastname')" :error="$v.userProfile.identity.lastname.$error" />
+        @blur="updateUser('identity.lastname')" :error="v$.userProfile.identity.lastname.$error" />
       <div class="col-12 col-md-6 row items-center">
         <div class="col-xs-11">
           <ni-input ref="userEmail" name="emailInput" caption="Adresse email" type="email" lower-case
-            :error="$v.userProfile.local.email.$error" :error-message="emailError($v.userProfile)"
+            :error="v$.userProfile.local.email.$error" :error-message="emailError(v$.userProfile)"
             :disable="emailLock" v-model.trim="userProfile.local.email" @focus="saveTmp('local.email')" />
         </div>
         <div :class="['col-xs-1', 'row', 'justify-end', { 'cursor-pointer': emailLock }]">
@@ -17,8 +17,8 @@
         </div>
       </div>
       <ni-input v-model.trim="userProfile.contact.phone" @focus="saveTmp('contact.phone')"
-        :error-message="phoneNbrError($v.userProfile)" @blur="updateUser('contact.phone')" caption="Téléphone"
-        :error="$v.userProfile.contact.phone.$error" />
+        :error-message="phoneNbrError(v$.userProfile)" @blur="updateUser('contact.phone')" caption="Téléphone"
+        :error="v$.userProfile.contact.phone.$error" />
     </div>
     <div class="row gutter-profile q-mb-xl">
       <ni-input caption="Biographie" v-model="userProfile.biography" type="textarea"
@@ -39,10 +39,12 @@ import { required, email } from 'vuelidate/lib/validators';
 import { validationMixin } from '@mixins/validationMixin';
 import { TRAINER } from '@data/constants';
 import { frPhoneNumber } from '@helpers/vuelidateCustomVal';
+import useVuelidate from '@vuelidate/core';
 
 export default {
   name: 'ProfileInfo',
   mixins: [validationMixin, userMixin],
+  setup () { return { v$: useVuelidate() }; },
   components: {
     'ni-input': Input,
     'ni-button': Button,
@@ -70,8 +72,8 @@ export default {
     }),
     ...mapGetters({ vendorRole: 'main/getVendorRole' }),
   },
-  async mounted () {
-    this.$v.userProfile.$touch();
+  mounted () {
+    this.v$.userProfile.$touch();
     this.isLoaded = true;
   },
   methods: {
diff --git a/src/modules/vendor/components/trainers/TrainerCreationModal.vue b/src/modules/vendor/components/trainers/TrainerCreationModal.vue
index 0e471a7ce4..93ff429ef0 100644
--- a/src/modules/vendor/components/trainers/TrainerCreationModal.vue
+++ b/src/modules/vendor/components/trainers/TrainerCreationModal.vue
@@ -1,17 +1,17 @@
 <template>
-  <ni-modal :value="value" @hide="hide" @input="input">
+  <ni-modal :model-value="modelValue" @hide="hide" @update:model-value="input">
     <template #title>
       Ajouter une <span class="text-weight-bold">personne</span>
     </template>
-    <ni-input in-modal :value="newTrainer.local.email" @input="update($event.trim(), 'local.email')" required-field
+    <ni-input in-modal :model-value="newTrainer.local.email" @update:model-value="update($event.trim(), 'local.email')"
       @blur="validations.local.email.$touch" caption="Email" :error="validations.local.email.$error"
       :error-message="emailError" :last="firstStep" :disable="!firstStep" />
     <template v-if="!firstStep">
-      <ni-input in-modal :value="newTrainer.identity.firstname" @input="update($event.trim(), 'identity.firstname')"
-        caption="Prénom" />
-      <ni-input in-modal :value="newTrainer.identity.lastname" @input="update($event.trim(), 'identity.lastname')"
-        :error="validations.identity.lastname.$error" @blur="validations.identity.lastname.$touch" required-field
-        caption="Nom" last />
+      <ni-input in-modal :model-value="newTrainer.identity.firstname" caption="Prénom"
+        @update:model-value="update($event.trim(), 'identity.firstname')" />
+      <ni-input in-modal :model-value="newTrainer.identity.lastname" @blur="validations.identity.lastname.$touch"
+        @update:model-value="update($event.trim(), 'identity.lastname')" :error="validations.identity.lastname.$error"
+        required-field caption="Nom" last />
     </template>
     <template #footer>
       <q-btn v-if="firstStep" no-caps class="full-width modal-btn" label="Suivant" color="primary"
@@ -30,7 +30,7 @@ import set from 'lodash/set';
 export default {
   name: 'TrainerCreationModal',
   props: {
-    value: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: false },
     newTrainer: { type: Object, default: () => ({}) },
     validations: { type: Object, default: () => ({}) },
     loading: { type: Boolean, default: false },
@@ -41,12 +41,13 @@ export default {
     'ni-input': Input,
     'ni-modal': Modal,
   },
+  emits: ['update:model-value', 'hide', 'submit', 'go-to-next-step', 'update:new-trainer'],
   methods: {
     hide () {
       this.$emit('hide');
     },
     input (event) {
-      this.$emit('input', event);
+      this.$emit('update:model-value', event);
     },
     submit () {
       this.$emit('submit');
@@ -55,7 +56,7 @@ export default {
       this.$emit('go-to-next-step');
     },
     update (event, path) {
-      this.$emit('update:newTrainer', set({ ...this.newTrainer }, path, event));
+      this.$emit('update:new-trainer', set({ ...this.newTrainer }, path, event));
     },
   },
 };
diff --git a/src/modules/vendor/pages/ni/users/trainers/TrainerProfile.vue b/src/modules/vendor/pages/ni/users/trainers/TrainerProfile.vue
index 87fa9901c6..46c05c6eff 100644
--- a/src/modules/vendor/pages/ni/users/trainers/TrainerProfile.vue
+++ b/src/modules/vendor/pages/ni/users/trainers/TrainerProfile.vue
@@ -45,7 +45,7 @@ export default {
     if (this.vendorRole !== TRAINER) {
       await this.$store.dispatch('userProfile/fetchUserProfile', { userId: this.trainerId });
     }
-    this.userIdentity = formatIdentity(get(this, 'userProfile.identity'), 'FL');
+    this.userIdentity = formatIdentity(get(this.userProfile, 'identity'), 'FL');
   },
   computed: {
     ...mapState({
@@ -57,7 +57,7 @@ export default {
   },
   watch: {
     async userProfile () {
-      this.userIdentity = formatIdentity(get(this, 'userProfile.identity'), 'FL');
+      this.userIdentity = formatIdentity(get(this.userProfile, 'identity'), 'FL');
       if (this.vendorRole !== TRAINER) await this.$store.dispatch('userProfile/updateNotifications');
     },
   },
diff --git a/src/modules/vendor/pages/ni/users/trainers/TrainersDirectory.vue b/src/modules/vendor/pages/ni/users/trainers/TrainersDirectory.vue
index fcb5cf715a..c45ef2e1f7 100644
--- a/src/modules/vendor/pages/ni/users/trainers/TrainersDirectory.vue
+++ b/src/modules/vendor/pages/ni/users/trainers/TrainersDirectory.vue
@@ -2,18 +2,19 @@
   <q-page class="vendor-background" padding>
     <ni-directory-header title="Répertoire formateurs" search-placeholder="Rechercher un profil"
       @update-search="updateSearch" :search="searchStr" />
-    <ni-table-list :data="filteredTrainers" :columns="columns" :loading="tableLoading" :pagination.sync="pagination"
+    <ni-table-list :data="filteredTrainers" :columns="columns" :loading="tableLoading" v-model:pagination="pagination"
       @go-to="goToTrainerProfile" />
     <q-btn class="fixed fab-custom" no-caps rounded color="primary" icon="add" label="Ajouter une personne"
       @click="trainerCreationModal = true" :disable="tableLoading" />
 
     <trainer-creation-modal v-model="trainerCreationModal" @hide="resetCreationModal" @submit="createTrainer"
-      :new-trainer.sync="newTrainer" :validations="$v.newTrainer" :loading="modalLoading" @go-to-next-step="nextStep"
-      :email-error="emailError($v.newTrainer)" :first-step="firstStep" />
+      v-model:new-trainer="newTrainer" :validations="v$.newTrainer" :loading="modalLoading" @go-to-next-step="nextStep"
+      :email-error="emailError(v$.newTrainer)" :first-step="firstStep" />
 </q-page>
 </template>
 
 <script>
+import useVuelidate from '@vuelidate/core';
 import pick from 'lodash/pick';
 import get from 'lodash/get';
 import escapeRegExp from 'lodash/escapeRegExp';
@@ -37,6 +38,7 @@ export default {
     'trainer-creation-modal': TrainerCreationModal,
   },
   mixins: [userMixin],
+  setup () { return { v$: useVuelidate() }; },
   data () {
     return {
       trainers: [],
@@ -65,26 +67,24 @@ export default {
   methods: {
     async nextStep () {
       try {
-        this.$v.newTrainer.local.email.$touch();
-        if (this.$v.newTrainer.local.email.$error) {
-          return NotifyWarning('Champ(s) invalide(s)');
-        }
+        this.v$.newTrainer.local.email.$touch();
+        if (this.v$.newTrainer.local.email.$error) return NotifyWarning('Champ(s) invalide(s)');
 
         this.modalLoading = true;
         const userInfo = await Users.exists({ email: this.newTrainer.local.email });
 
-        if (userInfo.exists && get(userInfo, 'user.role.vendor')) {
-          NotifyNegative('Compte déjà existant.');
-        } else if (userInfo.exists) {
+        if (!userInfo.exists) this.firstStep = false;
+        else if (get(userInfo, 'user.role.vendor')) NotifyNegative('Compte déjà existant.');
+        else {
           const roles = await Roles.list({ name: TRAINER });
           if (roles.length === 0) throw new Error('Role not found');
+
           await Users.updateById(userInfo.user._id, { role: roles[0]._id });
           NotifyPositive('Compte créé');
+
           await this.refreshTrainers();
           this.resetCreationModal();
           this.trainerCreationModal = false;
-        } else {
-          this.firstStep = false;
         }
       } catch (e) {
         NotifyNegative('Erreur lors de la création du compte.');
@@ -96,7 +96,7 @@ export default {
     resetCreationModal () {
       this.firstStep = true;
       this.newTrainer = { identity: { lastname: '', firstname: '' }, local: { email: '' } };
-      this.$v.newTrainer.$reset();
+      this.v$.newTrainer.$reset();
     },
     updateSearch (value) {
       this.searchStr = value;
@@ -107,11 +107,7 @@ export default {
     formatTrainer (trainer) {
       const formattedName = formatIdentity(trainer.identity, 'FL');
 
-      return {
-        ...trainer,
-        name: formattedName,
-        noDiacriticsName: removeDiacritics(formattedName),
-      };
+      return { ...trainer, name: formattedName, noDiacriticsName: removeDiacritics(formattedName) };
     },
     async refreshTrainers () {
       try {
@@ -129,10 +125,8 @@ export default {
     },
     async createTrainer () {
       try {
-        this.$v.newTrainer.$touch();
-        if (this.$v.newTrainer.$error) {
-          return NotifyWarning('Champ(s) invalide(s)');
-        }
+        this.v$.newTrainer.$touch();
+        if (this.v$.newTrainer.$error) return NotifyWarning('Champ(s) invalide(s)');
 
         this.modalLoading = true;
 
diff --git a/src/store/userProfile.js b/src/store/userProfile.js
index f7642eaf44..043f1698aa 100644
--- a/src/store/userProfile.js
+++ b/src/store/userProfile.js
@@ -33,7 +33,7 @@ export default {
         const user = await Users.getById(params.userId);
 
         const userClientRole = store.getters['main/getClientRole'];
-        if (userClientRole && !/\/ad\//.test(router.currentRoute.path)) {
+        if (userClientRole && !/\/ad\//.test(router.currentRoute.value.path)) {
           const loggedUserCompany = store.getters['main/getCompany'];
           if (get(user, 'company._id') !== loggedUserCompany._id) return router.replace({ path: '/404' });
         }