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

2022-10-25 15:27:05 -06:00
parent 37e9e88bd8
commit b2509ff1c6
22 changed files with 127 additions and 22 deletions
--- a/fittrackee_client/src/components/Administration/AdminUsers.vue
+++ b/fittrackee_client/src/components/Administration/AdminUsers.vue
@ -64,7 +64,7 @@
                  {{
                    format(
                      getDateWithTZ(user.created_at, authUser.timezone),
-                      'dd/MM/yyyy HH:mm'
+                      `${authUser.date_format} HH:mm`
                    )
                  }}
                </td>
--- a/fittrackee_client/src/components/Dashboard/UserRecords/index.vue
+++ b/fittrackee_client/src/components/Dashboard/UserRecords/index.vue
@ -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>
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
+++ b/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
@ -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(
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
+++ b/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
@ -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'
  )
--- a/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
@ -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(
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
@ -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() {
--- a/fittrackee_client/src/components/User/UserApps/UserApp.vue
+++ b/fittrackee_client/src/components/User/UserApps/UserApp.vue
@ -52,7 +52,7 @@
          {{
            format(
              getDateWithTZ(client.issued_at, authUser.timezone),
-              'dd/MM/yyyy HH:mm'
+              `${authUser.date_format} HH:mm`
            )
          }}
        </dd>
--- a/fittrackee_client/src/components/User/UserApps/UserAppsList.vue
+++ b/fittrackee_client/src/components/User/UserApps/UserAppsList.vue
@ -11,7 +11,7 @@
          {{
            format(
              getDateWithTZ(client.issued_at, authUser.timezone),
-              'dd/MM/yyyy HH:mm'
+              `${authUser.date_format} HH:mm`
            )
          }}
        </span>
--- a/fittrackee_client/src/components/Workout/WorkoutCard.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutCard.vue
@ -31,7 +31,7 @@
          :title="
            format(
              getDateWithTZ(workout.workout_date, user.timezone),
-              'dd/MM/yyyy HH:mm'
+              `${user.date_format} HH:mm`
            )
          "
        >
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
@ -131,7 +131,8 @@
      getDateWithTZ(
        props.workoutData.workout.workout_date,
        props.authUser.timezone
-      )
+      ),
+      props.authUser.date_format
    )
    return {
      ascent: segment ? segment.ascent : workout.ascent,
--- a/fittrackee_client/src/components/Workouts/WorkoutsList.vue
+++ b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
@ -86,7 +86,7 @@
                {{
                  format(
                    getDateWithTZ(workout.workout_date, user.timezone),
-                    'dd/MM/yyyy HH:mm'
+                    `${user.date_format} HH:mm`
                  )
                }}
              </td>
--- a/fittrackee_client/src/locales/de/user.json
+++ b/fittrackee_client/src/locales/de/user.json
@ -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",
--- a/fittrackee_client/src/locales/en/user.json
+++ b/fittrackee_client/src/locales/en/user.json
@ -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",
--- a/fittrackee_client/src/locales/fr/user.json
+++ b/fittrackee_client/src/locales/fr/user.json
@ -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",
--- a/fittrackee_client/src/types/user.ts
+++ b/fittrackee_client/src/types/user.ts
@ -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
 }

--- a/fittrackee_client/src/utils/records.ts
+++ b/fittrackee_client/src/utils/records.ts
@ -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