Client - fix record order in dashboard cards
This commit is contained in:
parent
fe1d691626
commit
f9e03dd139
@ -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>
|
||||
|
@ -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>()
|
||||
|
||||
|
@ -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
|
||||
|
@ -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[],
|
||||
|
Loading…
Reference in New Issue
Block a user