Client - minor refactor

2021-09-25 11:28:40 +02:00
parent 060c5d42d9
commit 146899c269
12 changed files with 19 additions and 21 deletions
--- a/fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue
+++ b/fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue
@ -0,0 +1,82 @@
+<template>
+  <div id="user-stats">
+    <UserStatCard
+      icon="calendar"
+      :value="user.nb_workouts"
+      :text="t('workouts.WORKOUT', user.nb_workouts)"
+    />
+    <UserStatCard
+      icon="road"
+      :value="Number(user.total_distance).toFixed(2)"
+      :text="t('workouts.KM')"
+    />
+    <UserStatCard
+      icon="clock-o"
+      :value="total_duration.days"
+      :text="total_duration.duration"
+    />
+    <UserStatCard
+      icon="tags"
+      :value="user.nb_sports"
+      :text="t('workouts.SPORT', user.nb_sports)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+  import { ComputedRef, PropType, defineComponent, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import UserStatCard from '@/components/Dashboard/UserStatsCards/UserStatCard.vue'
+  import { IAuthUserProfile } from '@/types/user'
+
+  export default defineComponent({
+    name: 'UserStatsCards',
+    components: {
+      UserStatCard,
+    },
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n()
+      const total_duration: ComputedRef<string> = computed(
+        () => props.user.total_duration
+      )
+
+      function get_duration(total_duration: ComputedRef<string>) {
+        const duration = total_duration.value.match(/day/g)
+          ? total_duration.value.split(', ')[1]
+          : total_duration.value
+        return {
+          days: total_duration.value.match(/day/g)
+            ? `${total_duration.value.split(' ')[0]} ${
+                total_duration.value.match(/days/g)
+                  ? t('common.DAY', 2)
+                  : t('common.DAY', 1)
+              }`
+            : `0 ${t('common.DAY', 2)},`,
+          duration: `${duration.split(':')[0]}h ${duration.split(':')[1]}min`,
+        }
+      }
+
+      return {
+        t,
+        total_duration: computed(() => get_duration(total_duration)),
+      }
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '~@/scss/base';
+  #user-stats {
+    display: flex;
+    flex: 1 0 25%;
+    justify-content: space-around;
+    flex-wrap: wrap;
+  }
+</style>