Client - date formatting refactoring (WIP)

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

@@ -130,6 +130,7 @@
   import { TAppConfig } from '@/types/application'
   import { IAuthUserProfile, IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
+  import { formatDate } from '@/utils/dates'
 
   interface Props {
     user: IUserProfile
@@ -147,12 +148,16 @@
   )
   const registrationDate = computed(() =>
     props.user.created_at
-      ? format(new Date(props.user.created_at), `${props.user.date_format} HH:mm`)
+      ? formatDate(
+          props.user.created_at,
+          authUser.value.timezone,
+          authUser.value.date_format
+        )
       : ''
   )
   const birthDate = computed(() =>
     props.user.birth_date
-      ? format(new Date(props.user.birth_date), props.user.date_format)
+      ? format(new Date(props.user.birth_date), authUser.value.date_format)
       : ''
   )
   const isSuccess = computed(

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

@@ -65,11 +65,12 @@
   import { ComputedRef, computed, reactive, onMounted, onUnmounted } from 'vue'
 
   import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
-  import { IUserProfile, IUserPayload } from '@/types/user'
+  import { IUserProfile, IUserPayload, IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
+  import { formatDate } from '@/utils/dates'
 
   interface Props {
-    user: IUserProfile
+    user: IAuthUserProfile
   }
   const props = defineProps<Props>()
 
@@ -84,7 +85,11 @@
   })
   const registrationDate = computed(() =>
     props.user.created_at
-      ? format(new Date(props.user.created_at), `${props.user.date_format} HH:mm`)
+      ? formatDate(
+          props.user.created_at,
+          props.user.timezone,
+          props.user.date_format
+        )
       : ''
   )
   const loading = computed(

fittrackee_client/src/components/User/UserApps/UserApp.vue

@@ -50,9 +50,10 @@
         <dt>{{ capitalize($t('oauth2.APP.ISSUE_AT')) }}:</dt>
         <dd>
           {{
-            format(
-              getDateWithTZ(client.issued_at, authUser.timezone),
-              `${authUser.date_format} HH:mm`
+            formatDate(
+              client.issued_at,
+              authUser.timezone,
+              authUser.date_format
             )
           }}
         </dd>
@@ -105,7 +106,6 @@
 </template>
 
 <script setup lang="ts">
-  import { format } from 'date-fns'
   import {
     ComputedRef,
     Ref,
@@ -124,7 +124,7 @@
   import { IOAuth2Client } from '@/types/oauth'
   import { IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
-  import { getDateWithTZ } from '@/utils/dates'
+  import { formatDate } from '@/utils/dates'
 
   interface Props {
     authUser: IAuthUserProfile

fittrackee_client/src/components/User/UserApps/UserAppsList.vue

@@ -9,9 +9,10 @@
         <span class="app-issued-at">
           {{ $t('oauth2.APP.ISSUE_AT') }}
           {{
-            format(
-              getDateWithTZ(client.issued_at, authUser.timezone),
-              `${authUser.date_format} HH:mm`
+            formatDate(
+              client.issued_at,
+              authUser.timezone,
+              authUser.date_format
             )
           }}
         </span>
@@ -34,7 +35,6 @@
 </template>
 
 <script setup lang="ts">
-  import { format } from 'date-fns'
   import { ComputedRef, computed, onBeforeMount, toRefs, watch } from 'vue'
   import { LocationQuery, useRoute } from 'vue-router'
 
@@ -45,7 +45,7 @@
   import { IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
   import { defaultPage, getNumberQueryValue } from '@/utils/api'
-  import { getDateWithTZ } from '@/utils/dates'
+  import { formatDate } from '@/utils/dates'
 
   interface Props {
     authUser: IAuthUserProfile