refactor date functions

components/Ui/Search/DateRangePicker.vue

@@ -100,8 +100,8 @@ Date range picker, taken from the following non-maintained project https://githu
 </template>
 <script lang="ts">
 import { format, parse, differenceInCalendarDays, addDays } from 'date-fns';
-import { formatIsoDate } from '@/services/utils/date'
 import Vue from "vue";
+import DatesUtils from "~/services/utils/dateUtils";
 
 interface ActionLabels { apply: string, cancel: string, reset: string }
 
@@ -233,7 +233,8 @@ export default Vue.extend({
       pickerStart: this.value.start as string,
       pickerEnd: this.value.end as string,
       highlightDates: [] as Array<string>,
-      highlightClasses: {}
+      highlightClasses: {},
+      dateUtils: new DatesUtils(this.$dateFns, this.$t, this.$i18n)
     };
   },
   computed: {
@@ -242,10 +243,10 @@ export default Vue.extend({
         return '';
       }
       const start = this.displayFormat
-        ? formatIsoDate(this.value.start, this.displayFormat)
+        ? this.dateUtils.formatIsoDate(this.value.start, this.displayFormat)
         : this.value.start;
       const end = this.displayFormat
-        ? formatIsoDate(this.value.end, this.displayFormat)
+        ? this.dateUtils.formatIsoDate(this.value.end, this.displayFormat)
         : this.value.end;
       return `${start}  ${this.separatorLabel}  ${end}`;
     },

pages/events/index.vue

@@ -110,8 +110,8 @@
               justify-sm="start"
             >
               <v-col
-                v-for="event in props.items"
-                :key="event.uuid"
+                v-for="publicEvent in props.items"
+                :key="publicEvent.uuid"
                 :cols="12"
                 :sm="6"
                 :md="4"
@@ -124,7 +124,7 @@
                 >
                   <div class="d-flex justify-center max-w100">
                     <v-img
-                      :src="event.imageId ? 'https://api.opentalent.fr/app.php/_internal/secure/files/' + event.imageId : '/images/event-default.jpg'"
+                      :src="publicEvent.imageId ? 'https://api.opentalent.fr/app.php/_internal/secure/files/' + publicEvent.imageId : '/images/event-default.jpg'"
                       alt="poster"
                       height="160"
                       width="100%"
@@ -136,32 +136,32 @@
 
                   <div class="d-flex flex-column flex-grow-1 px-3">
                     <v-card-title class="title">
-                      <nuxt-link :to="{path: '/events/' + event.uuid, query: { theme: theme }}">
-                        {{ event.name }}
+                      <nuxt-link :to="{path: '/events/' + publicEvent.uuid, query: { theme: theme }}">
+                        {{ publicEvent.name }}
                       </nuxt-link>
                     </v-card-title>
 
                     <v-card-text class="infos pb-0">
                       <table>
-                        <tr v-if="event.datetimeStart" class="pa-1">
+                        <tr v-if="publicEvent.datetimeStart" class="pa-1">
                           <td class="pt-1">
                             <font-awesome-icon :icon="['fas', 'calendar']" class="icon mr-2" />
                           </td>
                           <td class="pa-1">
                             <span>
-                              {{ formatDateIntervalFor(new Date(event.datetimeStart), new Date(event.datetimeEnd)) }}
+                              {{ dateUtils.formatDateIntervalFor(new Date(publicEvent.datetimeStart), new Date(publicEvent.datetimeEnd)) }}
                             </span>
                           </td>
                         </tr>
 
-                        <tr v-if="event.address.addressCity">
+                        <tr v-if="publicEvent.address.addressCity">
                           <td class="pt-1">
                             <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
                           </td>
                           <td class="pa-1">
-                            <span v-if="event.roomName" style="white-space: pre-line;">{{ event.roomName }}<br></span>
-                            <span v-if="event.address.streetAddress" style="white-space: pre-line;">{{ event.address.streetAddress }}<br></span>
-                            <span>{{ event.address.addressCity }}</span>
+                            <span v-if="publicEvent.roomName" style="white-space: pre-line;">{{ publicEvent.roomName }}<br></span>
+                            <span v-if="publicEvent.address.streetAddress" style="white-space: pre-line;">{{ publicEvent.address.streetAddress }}<br></span>
+                            <span>{{ publicEvent.address.addressCity }}</span>
                           </td>
                         </tr>
                       </table>
@@ -171,7 +171,7 @@
                   <v-card-actions class="align-self-end pa-3">
                     <v-btn
                       class="see"
-                      :to="{path: '/event/' + event.uuid, query: { theme: theme, hideTitle: hideTitle }}"
+                      :to="{path: '/events/' + publicEvent.uuid, query: { theme: theme, hideTitle: hideTitle }}"
                       nuxt
                     >
                       <span style="margin-right: 6px;">{{ $t("more_to_know") }}</span>
@@ -201,8 +201,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import EventsProvider from "~/services/data/EventsProvider"
-import {today, todayIso, formatIso} from '@/services/utils/date'
-import locale from 'date-fns/locale/fr'
+import DatesUtils from "~/services/utils/dateUtils";
 
 const defaultDateRange: DateRange = { start: '', end: '' }
 
@@ -219,6 +218,7 @@ export default Vue.extend({
       dateRangeFilter: defaultDateRange,
       totalRecords: 0 as number,
       pagesCount: 1 as number | null,
+      dateUtils: new DatesUtils(this.$dateFns, this.$t, this.$i18n)
     }
   },
   async fetch () {
@@ -236,38 +236,36 @@ export default Vue.extend({
         this.totalRecords = collection.totalItems
         this.page = collection.page ?? 1
         this.pagesCount = collection.lastPage ?? 1
-
-        console.log(this.events)
       })
   },
   computed: {
     dateRangeMin(): string {
-      return todayIso()
+      return this.dateUtils.todayIso()
     },
     dateRangePresets(): Array<DateRangePreset> {
       // Today
       const today_preset: DateRangePreset = {
         label: this.$t('today').toString(),
-        range: {start: todayIso(), end: todayIso()}
+        range: {start: this.dateUtils.todayIso(), end: this.dateUtils.todayIso()}
       }
 
       // Cette semaine
       const week_preset: DateRangePreset = {
         label: this.$t('next_week').toString(),
-        range: {start: todayIso(), end: formatIso(this.$dateFns.addDays(today(), 7))}
+        range: {start: this.dateUtils.todayIso(), end: this.dateUtils.formatIso(this.$dateFns.addDays(this.dateUtils.today(), 7))}
       }
 
       // Ce week-end
-      const sunday: Date = this.$dateFns.nextSunday(today())
+      const sunday: Date = this.$dateFns.nextSunday(this.dateUtils.today())
       const weekend_preset: DateRangePreset = {
         label: this.$t('next_weekend').toString(),
-        range: {start: formatIso(this.$dateFns.addDays(sunday, -2)), end: formatIso(sunday)}
+        range: {start: this.dateUtils.formatIso(this.$dateFns.addDays(sunday, -2)), end: this.dateUtils.formatIso(sunday)}
       }
 
       // Ce mois
       const month_preset: DateRangePreset = {
         label: this.$t('next_month').toString(),
-        range: {start: todayIso(), end: formatIso(this.$dateFns.addMonths(today(), 1))}
+        range: {start: this.dateUtils.todayIso(), end: this.dateUtils.formatIso(this.$dateFns.addMonths(this.dateUtils.today(), 1))}
       }
 
       return [today_preset, week_preset, weekend_preset, month_preset]
@@ -312,37 +310,6 @@ export default Vue.extend({
      */
     enhancedAutocompleteFilter (_: any, queryText: string, itemText: string): boolean {
       return normalize(itemText).includes(normalize(queryText))
-    },
-    formatDate(date: Date, short = true): string {
-      return short ? this.$dateFns.format(date, 'dd/MM/yyyy') : this.$dateFns.format(date, 'dd MMM yyyy', {locale: locale})
-    },
-    formatTime(date: Date): string {
-      return this.$dateFns.format(date, 'HH:mm')
-    },
-    formatDateTime(date: Date): string {
-      return this.formatDate(date) + ' ' + this.$t('on_hour') + ' ' + this.formatTime(date)
-    },
-    formatDateIntervalFor(dateStart: Date | null = null, dateEnd: Date | null = null): string {
-      if (dateStart === null && dateEnd !== null)
-      {
-        return this.formatDateTime(dateEnd)
-      }
-      else if (dateEnd === null && dateStart !== null) {
-        return this.formatDateTime(dateStart)
-      }
-      else if (dateStart !== null && dateEnd !== null) {
-        if (dateStart === dateEnd) {
-          return this.formatDateTime(dateStart)
-        }
-        else if (this.$dateFns.isSameDay(dateStart, dateEnd)) {
-          return this.formatDate(dateStart, false) + ', ' +
-            this.formatTime(dateStart) + ' - ' + this.formatTime(dateEnd)
-        }
-        else {
-          return this.$t('from_day') + ' ' + this.formatDateTime(dateStart) + ' ' + this.$t('to_day') + ' ' + this.formatDateTime(dateEnd)
-        }
-      }
-      return ""
     }
   }
 })

services/data/EventsProvider.ts

@@ -73,7 +73,7 @@ class PublicEventsProvider extends BaseProvider {
     })
   }
 
-  async getById (eventUuid: number): Promise<PublicEvent> {
+  async getById (eventUuid: string): Promise<PublicEvent> {
     return await this.get(
       `/api/public/events/${eventUuid}`
     ).then((s) => {

services/utils/date.ts

@@ -1,25 +0,0 @@
-import { format, parse, differenceInCalendarDays, addDays } from 'date-fns';
-
-const ISO_FORMAT = 'yyyy-MM-dd';
-
-function formatIso(date: Date): string {
-  return format(date, ISO_FORMAT)
-}
-
-function today(): Date {
-  return new Date()
-}
-
-function todayIso(): string {
-  return formatIso(today())
-}
-
-function formatIsoDate(date: string, fmt: string): string {
-  return format(parse(date, ISO_FORMAT, new Date()), fmt);
-}
-
-function reformatDate(date: string, fromFormat: string, toFormat: string): string {
-  return format(parse(date, fromFormat, new Date()), toFormat);
-}
-
-export { today, formatIso, todayIso, formatIsoDate }

services/utils/dateUtils.ts

@@ -0,0 +1,66 @@
+import { format, parse } from 'date-fns';
+import locale from "date-fns/locale/fr";
+
+export default class DatesUtils {
+  private $dateFns: dateFns;
+  private $t: any
+  private $i18n: any
+
+  private ISO_FORMAT = 'yyyy-MM-dd';
+
+  constructor(dateFns: dateFns, t: any, i18n: any) {
+    this.$dateFns = dateFns
+    this.$t = t
+    this.$i18n = i18n
+  }
+
+  formatIso(date: Date): string {
+    return format(date, this.ISO_FORMAT)
+  }
+
+  today(): Date {
+    return new Date()
+  }
+
+  todayIso(): string {
+    return this.formatIso(this.today())
+  }
+
+  formatIsoDate(date: string, fmt: string): string {
+    return format(parse(date, this.ISO_FORMAT, new Date()), fmt);
+  }
+
+  reformatDate(date: string, fromFormat: string, toFormat: string): string {
+    return format(parse(date, fromFormat, new Date()), toFormat);
+  }
+
+  formatDate(date: Date, short = true): string {
+    return short ? this.$dateFns.format(date, 'dd/MM/yyyy') : this.$dateFns.format(date, 'dd MMM yyyy', {locale: locale})
+  }
+
+  formatTime(date: Date): string {
+    return this.$dateFns.format(date, 'HH:mm')
+  }
+
+  formatDateTime(date: Date): string {
+    return this.formatDate(date) + ' ' + this.$t('on_hour') + ' ' + this.formatTime(date)
+  }
+
+  formatDateIntervalFor(dateStart: Date | null = null, dateEnd: Date | null = null): string {
+    if (dateStart === null && dateEnd !== null) {
+      return this.formatDateTime(dateEnd)
+    } else if (dateEnd === null && dateStart !== null) {
+      return this.formatDateTime(dateStart)
+    } else if (dateStart !== null && dateEnd !== null) {
+      if (dateStart === dateEnd) {
+        return this.formatDateTime(dateStart)
+      } else if (this.$dateFns.isSameDay(dateStart, dateEnd)) {
+        return this.formatDate(dateStart, false) + ', ' +
+          this.formatTime(dateStart) + ' - ' + this.formatTime(dateEnd)
+      } else {
+        return this.$t('from_day') + ' ' + this.formatDateTime(dateStart) + ' ' + this.$t('to_day') + ' ' + this.formatDateTime(dateEnd)
+      }
+    }
+    return ""
+  }
+}