Client - refacto + display fix and improvements

fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="timeline-workout">
-    <Card>
+    <Card :without-title="true">
       <template #content>
         <div class="workout-user-date">
           <div class="workout-user">
@@ -83,7 +83,7 @@
   import { useI18n } from 'vue-i18n'
 
   import Card from '@/components/Common/Card.vue'
-  import SportImage from '@/components/Common/Sports/SportImage.vue'
+  import SportImage from '@/components/Common/SportImage/index.vue'
   import StaticMap from '@/components/Common/StaticMap.vue'
   import { ROOT_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'

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

@@ -1,24 +1,33 @@
 <template>
   <div id="timeline">
     <div class="section-title">{{ t('workouts.LATEST_WORKOUTS') }}</div>
-    <WorkoutCard
-      v-for="workout in workouts"
-      :workout="workout"
-      :sport="
-        workouts.length > 0
-          ? sports.filter((s) => s.id === workout.sport_id)[0]
-          : null
-      "
-      :user="user"
-      :key="workout.id"
-    />
-    <div v-if="workouts.length === 0" class="no-workouts">
-      {{ t('workouts.NO_WORKOUTS') }}
+    <div v-if="user.nb_workouts > 0 && workouts.length === 0">
+      <WorkoutCard
+        v-for="index in [...Array(initWorkoutsCount).keys()]"
+        :user="user"
+        :key="index"
+      />
     </div>
-    <div v-if="moreWorkoutsExist" class="more-workouts">
-      <button @click="loadMoreWorkouts">
-        {{ t('workouts.LOAD_MORE_WORKOUT') }}
-      </button>
+    <div v-else>
+      <WorkoutCard
+        v-for="workout in workouts"
+        :workout="workout"
+        :sport="
+          workouts.length > 0
+            ? sports.filter((s) => s.id === workout.sport_id)[0]
+            : null
+        "
+        :user="user"
+        :key="workout.id"
+      />
+      <div v-if="workouts.length === 0" class="no-workouts">
+        {{ t('workouts.NO_WORKOUTS') }}
+      </div>
+      <div v-if="moreWorkoutsExist" class="more-workouts">
+        <button @click="loadMoreWorkouts">
+          {{ t('workouts.LOAD_MORE_WORKOUT') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -56,12 +65,14 @@
         required: true,
       },
     },
-    setup() {
+    setup(props) {
       const store = useStore()
       const { t } = useI18n()
 
       let page = ref(1)
       const per_page = 5
+      const initWorkoutsCount =
+        props.user.nb_workouts >= per_page ? per_page : props.user.nb_workouts
       onBeforeMount(() => loadWorkouts())
 
       const workouts: ComputedRef<IWorkout[]> = computed(
@@ -85,6 +96,7 @@
       }
 
       return {
+        initWorkoutsCount,
         moreWorkoutsExist,
         per_page,
         workouts,

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarHeader.vue

@@ -23,6 +23,7 @@
 <script lang="ts">
   import { format } from 'date-fns'
   import { defineComponent } from 'vue'
+
   export default defineComponent({
     name: 'CalendarHeader',
     props: {

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue

@@ -25,11 +25,11 @@
   import { defineComponent, PropType } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import SportImage from '@/components/Common/Sports/SportImage.vue'
+  import SportImage from '@/components/Common/SportImage/index.vue'
   import { IWorkout } from '@/types/workouts'
 
   export default defineComponent({
-    name: 'CalendarWorkouts',
+    name: 'CalendarWorkout',
     components: {
       SportImage,
     },

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

@@ -1,6 +1,6 @@
 <template>
   <div id="user-calendar">
-    <Card class="calendar-card">
+    <Card class="calendar-card" :without-title="true">
       <template #content>
         <CalendarHeader
           :day="day"

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="user-month-stats">
-    <Card :without-title="false">
+    <Card>
       <template #title>{{ $t('dashboard.THIS_MONTH') }}</template>
       <template #content>
         <div v-if="Object.keys(statistics).length === 0">

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

@@ -1,6 +1,6 @@
 <template>
   <div class="records-card">
-    <Card :without-title="false">
+    <Card>
       <template #title>
         <SportImage :sport-label="records.label" />
         {{ sportTranslatedLabel }}
@@ -31,7 +31,7 @@
   import { useI18n } from 'vue-i18n'
 
   import Card from '@/components/Common/Card.vue'
-  import SportImage from '@/components/Common/Sports/SportImage.vue'
+  import SportImage from '@/components/Common/SportImage/index.vue'
   import { IRecord } from '@/types/workouts'
 
   export default defineComponent({
@@ -93,7 +93,7 @@
           }
         }
       }
-      @media screen and (max-width: $small-limit) {
+      @media screen and (max-width: $medium-limit) {
         font-size: 1em;
         .card-title {
           font-size: 1em;

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

@@ -52,10 +52,7 @@
           props.user.timezone
         )
       )
-      return {
-        recordsBySport,
-        t,
-      }
+      return { recordsBySport, t }
     },
   })
 </script>

fittrackee_client/src/components/Dashboard/UserStatsCards/UserStatCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="user-stat-card">
-    <Card>
+    <Card :without-title="true">
       <template #content>
         <div class="stat-content">
           <div class="stat-icon">