COM-2583 - update exports

src/modules/client/pages/ni/exports/HistoryExports.vue

@@ -3,15 +3,16 @@
     <ni-title-header title="Historique" class="q-mb-xl" />
     <div class="row q-col-gutter-sm">
       <ni-select caption="Type d'export" :options="exportTypeOptions" v-model="type" />
-      <ni-date-range class="col-md-6 col-xs-12" caption="Période" v-model="dateRange" :error="$v.dateRange.$error"
-        @input="input" :error-message="dateRangeErrorMessage" @blur="$v.dateRange.$touch" />
+      <ni-date-range class="col-md-6 col-xs-12" caption="Période" v-model="dateRange" :error="v$.dateRange.$error"
+        @input="input" :error-message="dateRangeErrorMessage" @blur="v$.dateRange.$touch" />
     </div>
     <q-btn label="Exporter" no-caps unelevated text-color="white" color="primary" icon="import_export"
-      @click="exportCsv" :disable="loading || $v.dateRange.$error" :loading="loading" />
+      @click="exportCsv" :disable="loading || v$.dateRange.$error" :loading="loading" />
   </q-page>
 </template>
 
 <script>
+import useVuelidate from '@vuelidate/core';
 import Exports from '@api/Exports';
 import { NotifyNegative, NotifyPositive, NotifyWarning } from '@components/popup/notify';
 import TitleHeader from '@components/TitleHeader';
@@ -30,6 +31,7 @@ export default {
     'ni-select': Select,
     'ni-date-range': DateRange,
   },
+  setup () { return { v$: useVuelidate() }; },
   data () {
     return {
       exportTypeOptions: EXPORT_HISTORY_TYPES,
@@ -64,8 +66,8 @@ export default {
     async exportCsv () {
       try {
         this.loading = true;
-        await this.$v.dateRange.$touch();
-        if (this.$v.dateRange.$error) return NotifyWarning('Date(s) invalide(s)');
+        await this.v$.dateRange.$touch();
+        if (this.v$.dateRange.$error) return NotifyWarning('Date(s) invalide(s)');
         const type = EXPORT_HISTORY_TYPES.find(t => t.value === this.type);
         if (!type) return NotifyNegative('Impossible de téléchager le document.');