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

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>

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>

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(

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

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(

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

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>

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>

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`
             )
           "
         >

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,

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>