COM-2583 - update coac interface

CompaniTech · Dec 23, 2021 · 1fda151 · 1fda151
1 parent edf6968
commit 1fda151
Show file tree

Hide file tree

Showing 19 changed files with 152 additions and 95 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,36 +46,36 @@
             :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">
             <template #append v-if="customerAddressList(newEvent).length > 1">
               <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" />