Client - display records on Dashboard (wip)

fittrackee_client/src/components/Dashboard/UserRecords.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>User records</div>
-</template>

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="records-card">
+    <Card :without-title="false">
+      <template #title>
+        <div>
+          <img
+            class="sport-img"
+            :alt="`${sportLabel} logo`"
+            :src="records.img"
+          />
+        </div>
+        {{ sportLabel }}
+      </template>
+      <template #content>
+        <div class="record" v-for="record in records.records" :key="record.id">
+          <span class="record-type">{{
+            t(`workouts.RECORD_${record.record_type}`)
+          }}</span>
+          <span class="record-value">{{ record.value }}</span>
+          <span class="record-date">{{ record.workout_date }}</span>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import Card from '@/components/Common/Card.vue'
+  import { IRecord } from '@/types/workouts'
+
+  export default defineComponent({
+    name: 'RecordsCard',
+    components: {
+      Card,
+    },
+    props: {
+      records: {
+        type: Object as PropType<IRecord[]>,
+        required: true,
+      },
+      sportLabel: {
+        type: String,
+        required: true,
+      },
+    },
+    setup() {
+      const { t } = useI18n()
+      return { t }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+
+  .records-card {
+    padding: 0;
+    width: 50%;
+    @media screen and (max-width: $small-limit) {
+      width: 100%;
+    }
+
+    ::v-deep(.card) {
+      font-size: 0.9em;
+      .card-title {
+        display: flex;
+        font-size: 0.9em;
+        .sport-img {
+          padding-right: $default-padding;
+          height: 18px;
+          width: 18px;
+        }
+      }
+      .card-content {
+        font-size: 0.9em;
+        padding: $default-padding;
+        .record {
+          display: flex;
+          justify-content: space-between;
+          span {
+            padding: 2px 5px;
+          }
+          .record-type {
+            flex-grow: 1;
+          }
+          .record-value {
+            font-weight: bold;
+            padding-right: $default-padding * 2;
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,66 @@
+<template>
+  <div class="user-records">
+    <Card v-if="Object.keys(recordsBySport).length === 0" class="no-records">
+      <template #content>{{ t('workouts.NO_RECORDS') }}</template>
+    </Card>
+    <RecordsCard
+      v-for="sportLabel in Object.keys(recordsBySport).sort()"
+      :sportLabel="sportLabel"
+      :records="recordsBySport[sportLabel]"
+      :key="sportLabel"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, PropType } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import Card from '@/components/Common/Card.vue'
+  import RecordsCard from '@/components/Dashboard/UserRecords/RecordsCard.vue'
+  import { SPORTS_STORE } from '@/store/constants'
+  import { IAuthUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+  import { getRecordsBySports } from '@/utils/records'
+  import { translateSports } from '@/utils/sports'
+
+  export default defineComponent({
+    name: 'UserRecords',
+    components: {
+      Card,
+      RecordsCard,
+    },
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const store = useStore()
+      const { t } = useI18n()
+      const recordsBySport = computed(() =>
+        getRecordsBySports(
+          props.user.records,
+          translateSports(store.getters[SPORTS_STORE.GETTERS.SPORTS], t),
+          props.user.timezone
+        )
+      )
+      return { recordsBySport, t }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+
+  .user-records {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .no-records {
+      width: 100%;
+    }
+  }
+</style>