Client - date formatting refactoring (WIP)

This commit is contained in:
Sam
2022-11-01 08:03:47 +01:00
parent 3777ac0a11
commit 6fce510a0a
9 changed files with 99 additions and 31 deletions

View File

@ -62,9 +62,10 @@
{{ $t('user.PROFILE.REGISTRATION_DATE') }}
</span>
{{
format(
getDateWithTZ(user.created_at, authUser.timezone),
`${authUser.date_format} HH:mm`
formatDate(
user.created_at,
authUser.timezone,
authUser.date_format
)
}}
</td>
@ -130,7 +131,6 @@
</template>
<script setup lang="ts">
import { format } from 'date-fns'
import {
ComputedRef,
Ref,
@ -152,7 +152,7 @@
import { IAuthUserProfile, IUserProfile } from '@/types/user'
import { useStore } from '@/use/useStore'
import { getQuery, sortList } from '@/utils/api'
import { getDateWithTZ } from '@/utils/dates'
import { formatDate } from '@/utils/dates'
const store = useStore()
const route = useRoute()

View File

@ -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(

View File

@ -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(

View File

@ -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

View File

@ -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

View File

@ -29,10 +29,7 @@
class="workout-date"
v-if="workout.workout_date && user"
:title="
format(
getDateWithTZ(workout.workout_date, user.timezone),
`${user.date_format} HH:mm`
)
formatDate(workout.workout_date, user.timezone, user.date_format)
"
>
{{
@ -141,7 +138,7 @@
</template>
<script setup lang="ts">
import { Locale, format, formatDistance } from 'date-fns'
import { Locale, formatDistance } from 'date-fns'
import { ComputedRef, computed, toRefs, withDefaults } from 'vue'
import StaticMap from '@/components/Common/StaticMap.vue'
@ -151,7 +148,7 @@
import { IUserProfile } from '@/types/user'
import { IWorkout } from '@/types/workouts'
import { useStore } from '@/use/useStore'
import { getDateWithTZ } from '@/utils/dates'
import { formatDate } from '@/utils/dates'
interface Props {
user: IUserProfile

View File

@ -84,9 +84,10 @@
{{ $t('workouts.DATE') }}
</span>
{{
format(
getDateWithTZ(workout.workout_date, user.timezone),
`${user.date_format} HH:mm`
formatDate(
workout.workout_date,
user.timezone,
user.date_format
)
}}
</td>
@ -162,7 +163,6 @@
</template>
<script setup lang="ts">
import { format } from 'date-fns'
import {
ComputedRef,
Ref,
@ -186,7 +186,7 @@
import { IWorkout, TWorkoutsPayload } from '@/types/workouts'
import { useStore } from '@/use/useStore'
import { getQuery, sortList, workoutsPayloadKeys } from '@/utils/api'
import { getDateWithTZ } from '@/utils/dates'
import { formatDate } from '@/utils/dates'
import { getSportColor, getSportLabel } from '@/utils/sports'
import { convertDistance } from '@/utils/units'
import { defaultOrder } from '@/utils/workouts'