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) {