Client - handle date string format depending on language

fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue

@@ -130,7 +130,8 @@
   import { TAppConfig } from '@/types/application'
   import { IAuthUserProfile, IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
-  import { formatDate } from '@/utils/dates'
+  import { formatDate, getDateFormat } from '@/utils/dates'
+  import { localeFromLanguage } from '@/utils/locales'
 
   interface Props {
     user: IUserProfile
@@ -143,6 +144,9 @@
   const store = useStore()
 
   const { user, fromAdmin } = toRefs(props)
+  const language: ComputedRef<string> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
+  )
   const authUser: ComputedRef<IAuthUserProfile> = computed(
     () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
   )
@@ -157,7 +161,11 @@
   )
   const birthDate = computed(() =>
     props.user.birth_date
-      ? format(new Date(props.user.birth_date), authUser.value.date_format)
+      ? format(
+          new Date(props.user.birth_date),
+          `${getDateFormat(authUser.value.date_format, language.value)}`,
+          { locale: localeFromLanguage[language.value] }
+        )
       : ''
   )
   const isSuccess = computed(

fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue

@@ -2,11 +2,11 @@
   <div id="user-preferences" class="description-list">
     <dl>
       <dt>{{ $t('user.PROFILE.LANGUAGE') }}:</dt>
-      <dd>{{ language }}</dd>
+      <dd>{{ userLanguage }}</dd>
       <dt>{{ $t('user.PROFILE.TIMEZONE') }}:</dt>
       <dd>{{ timezone }}</dd>
       <dt>{{ $t('user.PROFILE.DATE_FORMAT') }}:</dt>
-      <dd>{{ date_format }}</dd>
+      <dd>{{ getDateFormat(date_format, appLanguage) }}</dd>
       <dt>{{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}:</dt>
       <dd>{{ $t(`user.PROFILE.${fistDayOfWeek}`) }}</dd>
       <dt>{{ $t('user.PROFILE.UNITS.LABEL') }}:</dt>
@@ -30,9 +30,12 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
+  import { computed, ComputedRef } from 'vue'
 
+  import { ROOT_STORE } from '@/store/constants'
   import { IAuthUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+  import { getDateFormat } from '@/utils/dates'
   import { languageLabels } from '@/utils/locales'
 
   interface Props {
@@ -40,7 +43,12 @@
   }
   const props = defineProps<Props>()
 
-  const language = computed(() =>
+  const store = useStore()
+
+  const appLanguage: ComputedRef<string> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
+  )
+  const userLanguage = computed(() =>
     props.user.language
       ? languageLabels[props.user.language]
       : languageLabels['en']
@@ -50,7 +58,7 @@
     props.user.timezone ? props.user.timezone : 'Europe/Paris'
   )
   const date_format = computed(() =>
-    props.user.date_format ? props.user.date_format : 'dd/MM/yyyy'
+    props.user.date_format ? props.user.date_format : 'MM/dd/yyyy'
   )
   const display_ascent = computed(() =>
     props.user.display_ascent ? 'DISPLAYED' : 'HIDDEN'

fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue

@@ -26,15 +26,17 @@
         <label class="form-items">
           {{ $t('user.PROFILE.DATE_FORMAT') }}
           <select
-            name="date_format"
-            :disabled="loading"
+            id="date_format"
             v-model="userForm.date_format"
+            :disabled="loading"
           >
-            <option disabled value="">Please select one:</option>
-            <option value="dd/MM/yyyy">dd/MM/yyyy - 08/07/2022</option>
-            <option value="MM/dd/yyyy">MM/dd/yyyy - 07/08/2022</option>
-            <option value="MMM. do, yyyy">MMM. do, yyyy - Jul. 8th, 2022</option>
-            <option value="yyyy-MM-dd">yyyy-MM-dd - 2022-07-08</option>
+            <option
+              v-for="dateFormat in dateFormatOptions"
+              :value="dateFormat.value"
+              :key="dateFormat.value"
+            >
+              {{ dateFormat.label }}
+            </option>
           </select>
         </label>
         <div class="form-items form-checkboxes">
@@ -120,6 +122,7 @@
   import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
   import { IUserPreferencesPayload, IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
+  import { availableDateFormatOptions } from '@/utils/dates'
   import { availableLanguages } from '@/utils/locales'
 
   interface Props {
@@ -173,6 +176,13 @@
   const errorMessages: ComputedRef<string | string[] | null> = computed(
     () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
   )
+  const dateFormatOptions = computed(() =>
+    availableDateFormatOptions(
+      new Date().toUTCString(),
+      props.user.timezone,
+      userForm.language
+    )
+  )
 
   onMounted(() => {
     if (props.user) {

fittrackee_client/src/utils/dates.ts

@@ -11,6 +11,11 @@ import {
 } from 'date-fns'
 import { utcToZonedTime } from 'date-fns-tz'
 
+import createI18n from '@/i18n'
+import { localeFromLanguage } from '@/utils/locales'
+
+const { locale } = createI18n.global
+
 export const getStartDate = (
   duration: string,
   day: Date,
@@ -70,22 +75,70 @@ export const formatWorkoutDate = (
   if (!dateFormat) {
     dateFormat = 'yyyy/MM/dd'
   }
+  dateFormat = getDateFormat(dateFormat, locale.value)
   if (!timeFormat) {
     timeFormat = 'HH:mm'
   }
   return {
-    workout_date: format(dateTime, dateFormat),
+    workout_date: format(dateTime, dateFormat, {
+      locale: localeFromLanguage[locale.value],
+    }),
     workout_time: format(dateTime, timeFormat),
   }
 }
 
+const availableDateFormats = [
+  'dd/MM/yyyy',
+  'MM/dd/yyyy',
+  'yyyy-MM-dd',
+  'date_string',
+]
+const dateStringFormats: Record<string, string> = {
+  de: 'd MMM yyyy',
+  en: 'MMM. do, yyyy',
+  fr: 'd MMM yyyy',
+}
+
+export const getDateFormat = (dateFormat: string, language: string): string => {
+  return dateFormat === 'date_string' ? dateStringFormats[language] : dateFormat
+}
+
 export const formatDate = (
   dateString: string,
   timezone: string,
   dateFormat: string,
-  withTime = true
-): string =>
-  format(
+  withTime = true,
+  language: string | null = null
+): string => {
+  if (!language) {
+    language = locale.value
+  }
+  return format(
     getDateWithTZ(dateString, timezone),
-    `${dateFormat}${withTime ? ' HH:mm' : ''}`
+    `${getDateFormat(dateFormat, language)}${withTime ? ' HH:mm' : ''}`,
+    { locale: localeFromLanguage[language] }
   )
+}
+
+export const availableDateFormatOptions = (
+  inputDate: string,
+  timezone: string,
+  language: string | null = null
+) => {
+  const l: string = language ? language : locale.value
+  const options: Record<string, string>[] = []
+  availableDateFormats.map((df) => {
+    const dateFormat = getDateFormat(df, l)
+    options.push({
+      label: `${dateFormat} - ${formatDate(
+        inputDate,
+        timezone,
+        dateFormat,
+        false,
+        l
+      )}`,
+      value: df,
+    })
+  })
+  return options
+}

fittrackee_client/src/utils/records.ts

@@ -1,9 +1,12 @@
+import createI18n from '@/i18n'
 import { ITranslatedSport } from '@/types/sports'
 import { TUnit } from '@/types/units'
 import { ICardRecord, IRecord, IRecordsBySports } from '@/types/workouts'
-import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
+import { formatDate, getDateFormat } from '@/utils/dates'
 import { convertDistance, units } from '@/utils/units'
 
+const { locale } = createI18n.global
+
 export const formatRecord = (
   record: IRecord,
   tz: string,
@@ -54,8 +57,7 @@ export const formatRecord = (
       )
   }
   return {
-    workout_date: formatWorkoutDate(getDateWithTZ(record.workout_date, tz), date_format)
-      .workout_date,
+    workout_date: formatDate(record.workout_date, tz, date_format, false),
     workout_id: record.workout_id,
     id: record.id,
     record_type: record.record_type,
@@ -76,8 +78,9 @@ export const getRecordsBySports = (
   useImperialUnits: boolean,
   display_ascent: boolean,
   date_format: string
-): IRecordsBySports =>
-  records
+): IRecordsBySports => {
+  date_format = getDateFormat(date_format, locale.value)
+  return records
     .filter((r) => (display_ascent ? true : r.record_type !== 'HA'))
     .reduce((sportList: IRecordsBySports, record) => {
       const sport = translatedSports.find((s) => s.id === record.sport_id)
@@ -95,3 +98,4 @@ export const getRecordsBySports = (
       }
       return sportList
     }, {})
+}

fittrackee_client/tests/unit/utils/dates.spec.ts

@@ -6,6 +6,8 @@ import {
   getStartDate,
   formatWorkoutDate,
   formatDate,
+  availableDateFormatOptions,
+  getDateFormat,
 } from '@/utils/dates'
 
 describe('startDate (week starting Sunday)', () => {
@@ -290,3 +292,109 @@ describe('formatDate (w/ default value)', () => {
     )
   })
 })
+
+describe('getDateFormat', () => {
+  const testsParams = [
+    {
+      inputParams: {
+        dateFormat: 'dd/MM/yyyy',
+        language: 'en',
+      },
+      expectedFormat: 'dd/MM/yyyy',
+    },
+    {
+      inputParams: {
+        dateFormat: 'MM/dd/yyyy',
+        language: 'en',
+      },
+      expectedFormat: 'MM/dd/yyyy',
+    },
+    {
+      inputParams: {
+        dateFormat: 'yyyy-MM-dd',
+        language: 'en',
+      },
+      expectedFormat: 'yyyy-MM-dd',
+    },
+    {
+      inputParams: {
+        dateFormat: 'date_string',
+        language: 'en',
+      },
+      expectedFormat: 'MMM. do, yyyy',
+    },
+    {
+      inputParams: {
+        dateFormat: 'date_string',
+        language: 'fr',
+      },
+      expectedFormat: 'd MMM yyyy',
+    },
+    {
+      inputParams: {
+        dateFormat: 'date_string',
+        language: 'de',
+      },
+      expectedFormat: 'd MMM yyyy',
+    },
+  ]
+  testsParams.map((testParams) => {
+    it(`get date format for "${testParams.inputParams.language}" and  "${testParams.inputParams.dateFormat}" `, () => {
+      assert.deepEqual(
+        getDateFormat(
+          testParams.inputParams.dateFormat,
+          testParams.inputParams.language
+        ),
+        testParams.expectedFormat
+      )
+    })
+  })
+})
+
+describe('availableDateFormatOptions', () => {
+  const inputDate = `Sun, 9 Oct 2022 18:18:41 GMT`
+  const inputTimezone = `Europe/Paris`
+
+  const testsParams = [
+    {
+      inputLanguage: 'en',
+      expectedOptions: [
+        { label: 'dd/MM/yyyy - 09/10/2022', value: 'dd/MM/yyyy' },
+        { label: 'MM/dd/yyyy - 10/09/2022', value: 'MM/dd/yyyy' },
+        { label: 'yyyy-MM-dd - 2022-10-09', value: 'yyyy-MM-dd' },
+        { label: 'MMM. do, yyyy - Oct. 9th, 2022', value: 'date_string' },
+      ],
+    },
+    {
+      inputLanguage: 'fr',
+      expectedOptions: [
+        { label: 'dd/MM/yyyy - 09/10/2022', value: 'dd/MM/yyyy' },
+        { label: 'MM/dd/yyyy - 10/09/2022', value: 'MM/dd/yyyy' },
+        { label: 'yyyy-MM-dd - 2022-10-09', value: 'yyyy-MM-dd' },
+        { label: 'd MMM yyyy - 9 oct. 2022', value: 'date_string' },
+      ],
+    },
+    {
+      inputLanguage: 'de',
+      expectedOptions: [
+        { label: 'dd/MM/yyyy - 09/10/2022', value: 'dd/MM/yyyy' },
+        { label: 'MM/dd/yyyy - 10/09/2022', value: 'MM/dd/yyyy' },
+        { label: 'yyyy-MM-dd - 2022-10-09', value: 'yyyy-MM-dd' },
+        { label: 'd MMM yyyy - 9 Okt. 2022', value: 'date_string' },
+      ],
+    },
+  ]
+
+  testsParams.map((testParams) => {
+    it(`returns available options for ${testParams.inputLanguage} locale`, () => {
+      assert.deepEqual(
+        availableDateFormatOptions(
+          inputDate,
+          inputTimezone,
+          testParams.inputLanguage
+        ),
+        testParams.expectedOptions
+      )
+    })
+  })
+})