Merged dev branch

fittrackee_client/src/components/Dashboard/Timeline.vue

@@ -53,7 +53,7 @@
   const store = useStore()
 
   const { sports, user } = toRefs(props)
-  let page = ref(1)
+  const page = ref(1)
   const per_page = 5
   const initWorkoutsCount =
     props.user.nb_workouts >= per_page ? per_page : props.user.nb_workouts

fittrackee_client/src/components/Dashboard/UserCalendar/index.vue

@@ -33,7 +33,7 @@
   import CalendarHeader from '@/components/Dashboard/UserCalendar/CalendarHeader.vue'
   import { ROOT_STORE, WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
-  import { IUserProfile } from '@/types/user'
+  import { IAuthUserProfile } from '@/types/user'
   import { IWorkout, TWorkoutsPayload } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
   import { getCalendarStartAndEnd } from '@/utils/dates'
@@ -41,7 +41,7 @@
 
   interface Props {
     sports: ISport[]
-    user: IUserProfile
+    user: IAuthUserProfile
   }
   const props = defineProps<Props>()
 
@@ -49,8 +49,8 @@
 
   const { sports, user } = toRefs(props)
   const dateFormat = 'yyyy-MM-dd'
-  let day = ref(new Date())
-  let calendarDates = ref(getCalendarStartAndEnd(day.value, props.user.weekm))
+  const day = ref(new Date())
+  const calendarDates = ref(getCalendarStartAndEnd(day.value, props.user.weekm))
   const calendarWorkouts: ComputedRef<IWorkout[]> = computed(
     () => store.getters[WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS]
   )

fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue

@@ -6,9 +6,13 @@
         {{ sportTranslatedLabel }}
       </template>
       <template #content>
-        <div class="record" v-for="record in records.records" :key="record.id">
+        <div
+          class="record"
+          v-for="record in getTranslatedRecords(records.records)"
+          :key="record.id"
+        >
           <span class="record-type">
-            {{ $t(`workouts.RECORD_${record.record_type}`) }}
+            {{ record.label }}
           </span>
           <span class="record-value">{{ record.value }}</span>
           <span class="record-date">
@@ -29,8 +33,10 @@
 
 <script setup lang="ts">
   import { toRefs } from 'vue'
+  import { useI18n } from 'vue-i18n'
 
-  import { IRecordsBySports } from '@/types/workouts'
+  import { ICardRecord, IRecord, IRecordsBySports } from '@/types/workouts'
+  import { sortRecords } from '@/utils/records'
 
   interface Props {
     records: IRecordsBySports
@@ -39,6 +45,19 @@
   const props = defineProps<Props>()
 
   const { records, sportTranslatedLabel } = toRefs(props)
+
+  const { t } = useI18n()
+
+  function getTranslatedRecords(records: IRecord[]): ICardRecord[] {
+    const translatedRecords: ICardRecord[] = []
+    records.map((record) => {
+      translatedRecords.push({
+        ...record,
+        label: t(`workouts.RECORD_${record.record_type}`),
+      })
+    })
+    return translatedRecords.sort(sortRecords)
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -64,6 +83,7 @@
         padding: $default-padding;
         .record {
           display: flex;
+          align-items: center;
           justify-content: space-between;
           span {
             padding: 2px 5px;
@@ -73,6 +93,7 @@
           }
           .record-value {
             font-weight: bold;
+            white-space: nowrap;
             padding-right: $default-padding * 2;
           }
         }

fittrackee_client/src/components/Dashboard/UserRecords/index.vue

@@ -25,13 +25,13 @@
 
   import RecordsCard from '@/components/Dashboard/UserRecords/RecordsCard.vue'
   import { ISport } from '@/types/sports'
-  import { IUserProfile } from '@/types/user'
+  import { IAuthUserProfile } from '@/types/user'
   import { getRecordsBySports } from '@/utils/records'
   import { translateSports } from '@/utils/sports'
 
   interface Props {
     sports: ISport[]
-    user: IUserProfile
+    user: IAuthUserProfile
   }
   const props = defineProps<Props>()
 

fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue

@@ -34,10 +34,10 @@
 
   import StatCard from '@/components/Common/StatCard.vue'
   import { TUnit } from '@/types/units'
-  import { IUserProfile } from '@/types/user'
+  import { IAuthUserProfile } from '@/types/user'
   import { convertDistance, units } from '@/utils/units'
   interface Props {
-    user: IUserProfile
+    user: IAuthUserProfile
   }
   const props = defineProps<Props>()
 
@@ -52,16 +52,19 @@
   const distanceUnitTo: TUnit = user.value.imperial_units
     ? units[distanceUnitFrom].defaultTarget
     : distanceUnitFrom
-  const totalDistance = user.value.imperial_units
-    ? convertDistance(user.value.total_distance, distanceUnitFrom, distanceUnitTo, 2)
-    : parseFloat(user.value.total_distance.toFixed(2))
+  const totalDistance: ComputedRef<number> = computed(() =>
+    user.value.imperial_units
+      ? convertDistance(user.value.total_distance, distanceUnitFrom, distanceUnitTo, 2)
+      : parseFloat(user.value.total_distance.toFixed(2)))
   const ascentUnitFrom: TUnit = 'm'
   const ascentUnitTo: TUnit = user.value.imperial_units
     ? units[ascentUnitFrom].defaultTarget
     : ascentUnitFrom
-  const totalAscent = user.value.imperial_units
-    ? convertDistance(user.value.total_ascent, ascentUnitFrom, ascentUnitTo, 2)
-    : parseFloat(user.value.total_ascent.toFixed(2))
+  const totalAscent: ComputedRef<number> = computed(() =>
+    user.value.imperial_units
+      ? convertDistance(user.value.total_ascent, ascentUnitFrom, ascentUnitTo, 2)
+      : parseFloat(user.value.total_ascent.toFixed(2)))
+
 
   function get_duration(total_duration: ComputedRef<string>) {
     const duration = total_duration.value.match(/day/g)