Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add ability to customize format used to display dates throughout the application

Browse Source
This commit is contained in:
Joshua Taillon
2022-10-25 15:27:05 -06:00
committed by Sam
parent 37e9e88bd8
commit b2509ff1c6
22 changed files with 127 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
fittrackee_client/src/components/Administration/AdminUsers.vue
View File

@ -64,7 +64,7 @@
{{
format(
getDateWithTZ(user.created_at, authUser.timezone),
'dd/MM/yyyy HH:mm'
`${authUser.date_format} HH:mm`
)
}}
</td>

3
fittrackee_client/src/components/Dashboard/UserRecords/index.vue
View File

@ -43,7 +43,8 @@
translateSports(props.sports, t),
props.user.timezone,
props.user.imperial_units,
props.user.display_ascent
props.user.display_ascent,
props.user.date_format
)
)
</script>

4
fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
View File

@ -147,12 +147,12 @@
)
const registrationDate = computed(() =>
props.user.created_at
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
? format(new Date(props.user.created_at), `${props.user.date_format} HH:mm`)
: ''
)
const birthDate = computed(() =>
props.user.birth_date
? format(new Date(props.user.birth_date), 'dd/MM/yyyy')
? format(new Date(props.user.birth_date), props.user.date_format)
: ''
)
const isSuccess = computed(

5
fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
View File

@ -5,6 +5,8 @@
<dd>{{ language }}</dd>
<dt>{{ $t('user.PROFILE.TIMEZONE') }}:</dt>
<dd>{{ timezone }}</dd>
<dt>{{ $t('user.PROFILE.DATE_FORMAT') }}:</dt>
<dd>{{ date_format }}</dd>
<dt>{{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}:</dt>
<dd>{{ $t(`user.PROFILE.${fistDayOfWeek}`) }}</dd>
<dt>{{ $t('user.PROFILE.UNITS.LABEL') }}:</dt>
@ -47,6 +49,9 @@
const timezone = computed(() =>
props.user.timezone ? props.user.timezone : 'Europe/Paris'
)
const date_format = computed(() =>
props.user.date_format ? props.user.date_format : 'dd/MM/yyyy'
)
const display_ascent = computed(() =>
props.user.display_ascent ? 'DISPLAYED' : 'HIDDEN'
)

2
fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
View File

@ -84,7 +84,7 @@
})
const registrationDate = computed(() =>
props.user.created_at
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
? format(new Date(props.user.created_at), `${props.user.date_format} HH:mm`)
: ''
)
const loading = computed(

16
fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
View File

@ -23,6 +23,20 @@
@updateTimezone="updateTZ"
/>
</label>
<label class="form-items">
{{ $t('user.PROFILE.DATE_FORMAT') }}
<select
name="date_format"
:disabled="loading"
v-model="userForm.date_format"
>
<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>
</select>
</label>
<div class="form-items form-checkboxes">
<span class="checkboxes-label">
{{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
@ -120,6 +134,7 @@
imperial_units: false,
language: '',
timezone: 'Europe/Paris',
date_format: 'dd/MM/yyyy',
weekm: false,
})
const weekStart = [
@ -170,6 +185,7 @@
userForm.imperial_units = user.imperial_units ? user.imperial_units : false
userForm.language = user.language ? user.language : 'en'
userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
userForm.date_format = user.date_format ? user.date_format : 'dd/MM/yyyy'
userForm.weekm = user.weekm ? user.weekm : false
}
function updateProfile() {

2
fittrackee_client/src/components/User/UserApps/UserApp.vue
View File

@ -52,7 +52,7 @@
{{
format(
getDateWithTZ(client.issued_at, authUser.timezone),
'dd/MM/yyyy HH:mm'
`${authUser.date_format} HH:mm`
)
}}
</dd>

2
fittrackee_client/src/components/User/UserApps/UserAppsList.vue
View File

@ -11,7 +11,7 @@
{{
format(
getDateWithTZ(client.issued_at, authUser.timezone),
'dd/MM/yyyy HH:mm'
`${authUser.date_format} HH:mm`
)
}}
</span>

2
fittrackee_client/src/components/Workout/WorkoutCard.vue
View File

@ -31,7 +31,7 @@
:title="
format(
getDateWithTZ(workout.workout_date, user.timezone),
'dd/MM/yyyy HH:mm'
`${user.date_format} HH:mm`
)
"
>

3
fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
View File

@ -131,7 +131,8 @@
getDateWithTZ(
props.workoutData.workout.workout_date,
props.authUser.timezone
)
),
props.authUser.date_format
)
return {
ascent: segment ? segment.ascent : workout.ascent,

2
fittrackee_client/src/components/Workouts/WorkoutsList.vue
View File

@ -86,7 +86,7 @@
{{
format(
getDateWithTZ(workout.workout_date, user.timezone),
'dd/MM/yyyy HH:mm'
`${user.date_format} HH:mm`
)
}}
</td>

1
fittrackee_client/src/locales/de/user.json
View File

@ -52,6 +52,7 @@
"BACK_TO_PROFILE": "Zurück zum Profil",
"BIO": "Biographie",
"BIRTH_DATE": "Geburtsdatum",
"DATE_FORMAT": "Datumsanzeigeformat",
"EDIT": "Profil bearbeiten",
"EDIT_PREFERENCES": "Einstellungen ändern",
"EDIT_SPORTS_PREFERENCES": "Einstellungen für Sportarten ändern",

1
fittrackee_client/src/locales/en/user.json
View File

@ -52,6 +52,7 @@
"BACK_TO_PROFILE": "Back to profile",
"BIO": "Bio",
"BIRTH_DATE": "Birth date",
"DATE_FORMAT": "Date display format",
"EDIT": "Edit profile",
"EDIT_PREFERENCES": "Edit preferences",
"EDIT_SPORTS_PREFERENCES": "Edit sports preferences",

1
fittrackee_client/src/locales/fr/user.json
View File

@ -52,6 +52,7 @@
"BACK_TO_PROFILE": "Revenir au profil",
"BIO": "Bio",
"BIRTH_DATE": "Date de naissance",
"DATE_FORMAT": "Format d'affichage de la date",
"EDIT": "Modifier le profil",
"EDIT_PREFERENCES": "Modifier les préférences",
"EDIT_SPORTS_PREFERENCES": "Modifier les préférences des sports",

2
fittrackee_client/src/types/user.ts
View File

@ -29,6 +29,7 @@ export interface IAuthUserProfile extends IUserProfile {
imperial_units: boolean
language: string | null
timezone: string
date_format: string
weekm: boolean
}
@ -64,6 +65,7 @@ export interface IUserPreferencesPayload {
imperial_units: boolean
language: string
timezone: string
date_format: string
weekm: boolean
}

10
fittrackee_client/src/utils/records.ts
View File

@ -7,7 +7,8 @@ import { convertDistance, units } from '@/utils/units'
export const formatRecord = (
record: IRecord,
tz: string,
useImperialUnits: boolean
useImperialUnits: boolean,
date_format: string
): Record<string, string | number> => {
const distanceUnitFrom: TUnit = 'km'
const distanceUnitTo: TUnit = useImperialUnits
@ -53,7 +54,7 @@ export const formatRecord = (
)
}
return {
workout_date: formatWorkoutDate(getDateWithTZ(record.workout_date, tz))
workout_date: formatWorkoutDate(getDateWithTZ(record.workout_date, tz), date_format)
.workout_date,
workout_id: record.workout_id,
id: record.id,
@ -73,7 +74,8 @@ export const getRecordsBySports = (
translatedSports: ITranslatedSport[],
tz: string,
useImperialUnits: boolean,
display_ascent: boolean
display_ascent: boolean,
date_format: string
): IRecordsBySports =>
records
.filter((r) => (display_ascent ? true : r.record_type !== 'HA'))
@ -88,7 +90,7 @@ export const getRecordsBySports = (
}
}
sportList[sport.translatedLabel].records.push(
formatRecord(record, tz, useImperialUnits)
formatRecord(record, tz, useImperialUnits, date_format)
)
}
return sportList

40
fittrackee_client/tests/unit/utils/records.spec.ts
View File

@ -19,6 +19,7 @@ describe('formatRecord', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
timezone: 'Europe/Paris',
date_format: 'dd/MM/yyyy'
},
expected: {
id: 9,
@ -41,6 +42,7 @@ describe('formatRecord', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
timezone: 'Europe/Paris',
date_format: 'yyyy/MM/dd'
},
expected: {
id: 10,
@ -63,6 +65,7 @@ describe('formatRecord', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
timezone: 'Europe/Paris',
date_format: 'yyyy/MM/dd'
},
expected: {
id: 11,
@ -85,12 +88,13 @@ describe('formatRecord', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
timezone: 'Europe/Paris',
date_format: 'dd/MM/yyyy'
},
expected: {
id: 12,
record_type: 'MS',
value: '18 km/h',
workout_date: '2019/07/08',
workout_date: '08/07/2019',
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
},
@ -107,12 +111,13 @@ describe('formatRecord', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
timezone: 'Europe/Paris',
date_format: 'MMM. do, yyyy'
},
expected: {
id: 13,
record_type: 'HA',
value: '100 m',
workout_date: '2019/07/07',
workout_date: 'Jul. 7th, 2019',
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
},
@ -123,7 +128,8 @@ describe('formatRecord', () => {
formatRecord(
testParams.inputParams.record,
testParams.inputParams.timezone,
false
false,
testParams.inputParams.date_format
),
testParams.expected
)
@ -146,6 +152,7 @@ describe('formatRecord after conversion', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
timezone: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {
id: 9,
@ -168,6 +175,7 @@ describe('formatRecord after conversion', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
timezone: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {
id: 10,
@ -190,6 +198,7 @@ describe('formatRecord after conversion', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
timezone: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {
id: 11,
@ -212,6 +221,7 @@ describe('formatRecord after conversion', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
timezone: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {
id: 12,
@ -234,6 +244,7 @@ describe('formatRecord after conversion', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
timezone: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {
id: 13,
@ -250,7 +261,8 @@ describe('formatRecord after conversion', () => {
formatRecord(
testParams.inputParams.record,
testParams.inputParams.timezone,
true
true,
testParams.inputParams.date_format
),
testParams.expected
)
@ -272,7 +284,8 @@ describe('formatRecord (invalid record type)', () => {
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
},
'Europe/Paris',
false
false,
'yyyy/dd/MM'
)
).to.throw(
'Invalid record type, expected: "AS", "FD", "HA", "LD", "MD", got: "M"'
@ -287,6 +300,7 @@ describe('getRecordsBySports', () => {
input: {
records: [],
tz: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {},
},
@ -305,6 +319,7 @@ describe('getRecordsBySports', () => {
},
],
tz: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {
'Cycling (Sport)': {
@ -355,6 +370,7 @@ describe('getRecordsBySports', () => {
},
],
tz: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {
'Cycling (Sport)': {
@ -401,7 +417,8 @@ describe('getRecordsBySports', () => {
translatedSports,
testParams.input.tz,
false,
true
true,
testParams.input.date_format
),
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
@ -418,6 +435,7 @@ describe('getRecordsBySports after conversion', () => {
input: {
records: [],
tz: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {},
},
@ -436,6 +454,7 @@ describe('getRecordsBySports after conversion', () => {
},
],
tz: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {
'Cycling (Sport)': {
@ -486,6 +505,7 @@ describe('getRecordsBySports after conversion', () => {
},
],
tz: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {
'Cycling (Sport)': {
@ -532,7 +552,8 @@ describe('getRecordsBySports after conversion', () => {
translatedSports,
testParams.input.tz,
true,
true
true,
testParams.input.date_format
),
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
@ -549,6 +570,7 @@ describe('getRecordsBySports with HA record', () => {
input: {
records: [],
tz: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {},
},
@ -576,6 +598,7 @@ describe('getRecordsBySports with HA record', () => {
},
],
tz: 'Europe/Paris',
date_format: 'yyyy/dd/MM'
},
expected: {
'Cycling (Sport)': {
@ -602,7 +625,8 @@ describe('getRecordsBySports with HA record', () => {
translatedSports,
testParams.input.tz,
false,
false
false,
testParams.input.date_format
),
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore