Client - display message when no workouts

fittrackee_client/src/components/Common/NoWorkouts.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="no-workouts">
+    <div>
+      {{ t('workouts.NO_WORKOUTS') }}
+      <router-link to="/workouts/add">
+        {{ t('workouts.UPLOAD_FIRST_WORKOUT') }}
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  export default defineComponent({
+    name: 'NoWorkouts',
+    setup() {
+      const { t } = useI18n()
+      return { t }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+  .no-workouts {
+    display: flex;
+    justify-content: center;
+    border: solid 1px var(--card-border-color);
+    border-radius: $border-radius;
+    padding: $default-padding;
+    margin: $default-margin;
+  }
+</style>

fittrackee_client/src/components/Common/StatsChart/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="start-chart">
-    <div v-if="labels.length === 0">
+    <div v-if="hideChartIfNoData && emptyStats">
       {{ t('workouts.NO_WORKOUTS') }}
     </div>
     <div v-else>
@@ -99,6 +99,10 @@
         type: Boolean,
         default: false,
       },
+      hideChartIfNoData: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props) {
       const store = useStore()
@@ -162,6 +166,7 @@
           () => formattedStats.value.datasets[displayedData.value]
         ),
         labels: computed(() => formattedStats.value.labels),
+        emptyStats: computed(() => Object.keys(statistics.value).length === 0),
         displayedData,
         t,
         updateDisplayData,

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

@@ -20,9 +20,7 @@
         :user="user"
         :key="workout.id"
       />
-      <div v-if="workouts.length === 0" class="no-workouts">
-        {{ t('workouts.NO_WORKOUTS') }}
-      </div>
+      <NoWorkouts v-if="workouts.length === 0" />
       <div v-if="moreWorkoutsExist" class="more-workouts">
         <button @click="loadMoreWorkouts">
           {{ t('workouts.LOAD_MORE_WORKOUT') }}
@@ -43,6 +41,7 @@
   } from 'vue'
   import { useI18n } from 'vue-i18n'
 
+  import NoWorkouts from '@/components/Common/NoWorkouts.vue'
   import WorkoutCard from '@/components/Dashboard/Timeline/WorkoutCard.vue'
   import { WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
@@ -53,6 +52,7 @@
   export default defineComponent({
     name: 'Timeline',
     components: {
+      NoWorkouts,
       WorkoutCard,
     },
     props: {
@@ -115,10 +115,7 @@
 
   #timeline {
     margin-bottom: 20px;
-    .no-workouts {
-      margin-bottom: $default-margin * 2;
-      padding: $default-padding;
-    }
+
     .more-workouts {
       display: flex;
       justify-content: center;

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -8,6 +8,7 @@
           :user="user"
           :chart-params="chartParams"
           :displayed-sport-ids="selectedSportIds"
+          :hide-chart-if-no-data="true"
         />
       </template>
     </Card>

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

@@ -62,7 +62,10 @@
 
   .user-records {
     .no-records {
+      border: solid 1px var(--card-border-color);
+      border-radius: $border-radius;
       padding: $default-padding;
+      margin: $default-margin;
     }
   }
 </style>

fittrackee_client/src/components/Statistics/index.vue

@@ -123,6 +123,11 @@
   @import '~@/scss/base';
 
   #user-statistics {
+    &.stats-disabled {
+      opacity: 0.3;
+      pointer-events: none;
+    }
+
     ::v-deep(.chart-radio) {
       justify-content: space-around;
       padding: $default-padding * 3 $default-padding

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -93,6 +93,7 @@
         </div>
       </template>
     </Card>
+    <NoWorkouts v-if="workouts.length === 0" />
     <div v-if="moreWorkoutsExist" class="more-workouts">
       <button @click="loadMoreWorkouts">
         {{ t('workouts.LOAD_MORE_WORKOUT') }}
@@ -116,6 +117,7 @@
   import { useI18n } from 'vue-i18n'
 
   import Card from '@/components/Common/Card.vue'
+  import NoWorkouts from '@/components/Common/NoWorkouts.vue'
   import SportImage from '@/components/Common/SportImage/index.vue'
   import StaticMap from '@/components/Common/StaticMap.vue'
   import { WORKOUTS_STORE } from '@/store/constants'
@@ -130,6 +132,7 @@
     name: 'WorkoutsList',
     components: {
       Card,
+      NoWorkouts,
       SportImage,
       StaticMap,
     },
@@ -211,6 +214,8 @@
 
     ::v-deep(.card) {
       .card-content {
+        margin-bottom: 15px;
+
         .workouts-table {
           /* responsive table, adapted from: */
           /* https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */