Client - fix record order in dashboard cards

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>

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/types/workouts.ts

@@ -16,6 +16,13 @@ export interface IWorkoutSegment {
   workout_id: string
 }
 
+export interface ICardRecord {
+  id: number
+  value: number | string
+  workout_date: string
+  workout_id: string
+  label: string
+}
 export interface IRecord {
   id: number
   record_type: string

fittrackee_client/src/utils/records.ts

@@ -1,6 +1,6 @@
 import { ITranslatedSport } from '@/types/sports'
 import { TUnit } from '@/types/units'
-import { IRecord, IRecordsBySports } from '@/types/workouts'
+import { ICardRecord, IRecord, IRecordsBySports } from '@/types/workouts'
 import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
 import { convertDistance, units } from '@/utils/units'
 
@@ -45,6 +45,12 @@ export const formatRecord = (
   }
 }
 
+export const sortRecords = (a: ICardRecord, b: ICardRecord): number => {
+  const recordALabel = a.label.toLowerCase()
+  const recordBLabel = b.label.toLowerCase()
+  return recordALabel > recordBLabel ? 1 : recordALabel < recordBLabel ? -1 : 0
+}
+
 export const getRecordsBySports = (
   records: IRecord[],
   translatedSports: ITranslatedSport[],