Client - fix record order in dashboard cards

This commit is contained in:
Sam 2022-07-03 16:19:59 +02:00
parent fe1d691626
commit f9e03dd139
4 changed files with 38 additions and 6 deletions

View File

@ -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>

View File

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

View File

@ -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

View File

@ -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[],