From 95cf71055b31c377a0f4ef9f3be145bd87efe5e3 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Tue, 5 Oct 2021 17:52:36 +0200
Subject: [PATCH] Client - display message when no workouts

---
 .../src/components/Common/NoWorkouts.vue      | 35 +++++++++++++++++++
 .../components/Common/StatsChart/index.vue    |  7 +++-
 .../components/Dashboard/Timeline/index.vue   | 11 +++---
 .../components/Dashboard/UserMonthStats.vue   |  1 +
 .../Dashboard/UserRecords/index.vue           |  3 ++
 .../src/components/Statistics/index.vue       |  5 +++
 .../src/components/Workouts/WorkoutsList.vue  |  5 +++
 .../src/locales/en/workouts.json              |  1 +
 .../src/locales/fr/workouts.json              |  1 +
 .../src/views/StatisticsView.vue              | 14 +++++---
 10 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 fittrackee_client/src/components/Common/NoWorkouts.vue

diff --git a/fittrackee_client/src/components/Common/NoWorkouts.vue b/fittrackee_client/src/components/Common/NoWorkouts.vue
new file mode 100644
index 00000000..8a5966c2
--- /dev/null
+++ b/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>
diff --git a/fittrackee_client/src/components/Common/StatsChart/index.vue b/fittrackee_client/src/components/Common/StatsChart/index.vue
index 96ee1c49..98c5a693 100644
--- a/fittrackee_client/src/components/Common/StatsChart/index.vue
+++ b/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,
diff --git a/fittrackee_client/src/components/Dashboard/Timeline/index.vue b/fittrackee_client/src/components/Dashboard/Timeline/index.vue
index 00d7a87c..6631c73d 100644
--- a/fittrackee_client/src/components/Dashboard/Timeline/index.vue
+++ b/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;
diff --git a/fittrackee_client/src/components/Dashboard/UserMonthStats.vue b/fittrackee_client/src/components/Dashboard/UserMonthStats.vue
index ec88b389..98e8709a 100644
--- a/fittrackee_client/src/components/Dashboard/UserMonthStats.vue
+++ b/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>
diff --git a/fittrackee_client/src/components/Dashboard/UserRecords/index.vue b/fittrackee_client/src/components/Dashboard/UserRecords/index.vue
index 591c068b..1870ba4a 100644
--- a/fittrackee_client/src/components/Dashboard/UserRecords/index.vue
+++ b/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>
diff --git a/fittrackee_client/src/components/Statistics/index.vue b/fittrackee_client/src/components/Statistics/index.vue
index ae27b473..72a477f5 100644
--- a/fittrackee_client/src/components/Statistics/index.vue
+++ b/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
diff --git a/fittrackee_client/src/components/Workouts/WorkoutsList.vue b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
index b8d8b55a..6507ca07 100644
--- a/fittrackee_client/src/components/Workouts/WorkoutsList.vue
+++ b/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/ */
diff --git a/fittrackee_client/src/locales/en/workouts.json b/fittrackee_client/src/locales/en/workouts.json
index fd1e01ca..dc666acd 100644
--- a/fittrackee_client/src/locales/en/workouts.json
+++ b/fittrackee_client/src/locales/en/workouts.json
@@ -51,6 +51,7 @@
   "TITLE": "title",
   "TO": "to",
   "TOTAL_DURATION": "total duration",
+  "UPLOAD_FIRST_WORKOUT": "Upload one!",
   "WEATHER": {
     "HUMIDITY": "humidity",
     "TEMPERATURE": "temperature",
diff --git a/fittrackee_client/src/locales/fr/workouts.json b/fittrackee_client/src/locales/fr/workouts.json
index efb38341..ba9f73c7 100644
--- a/fittrackee_client/src/locales/fr/workouts.json
+++ b/fittrackee_client/src/locales/fr/workouts.json
@@ -51,6 +51,7 @@
   "TITLE": "titre",
   "TO": "jusqu'au",
   "TOTAL_DURATION": "durée totale",
+  "UPLOAD_FIRST_WORKOUT": "Ajoutez votre première séance !",
   "WEATHER": {
     "HUMIDITY": "humidité",
     "TEMPERATURE": "température",
diff --git a/fittrackee_client/src/views/StatisticsView.vue b/fittrackee_client/src/views/StatisticsView.vue
index 72c86ae9..3f402abb 100644
--- a/fittrackee_client/src/views/StatisticsView.vue
+++ b/fittrackee_client/src/views/StatisticsView.vue
@@ -4,9 +4,14 @@
       <Card>
         <template #title>{{ $t('statistics.STATISTICS') }}</template>
         <template #content>
-          <Statistics :user="authUser" :sports="sports" />
+          <Statistics
+            :class="{ 'stats-disabled': authUser.nb_workouts === 0 }"
+            :user="authUser"
+            :sports="sports"
+          />
         </template>
       </Card>
+      <NoWorkouts v-if="authUser.nb_workouts === 0"></NoWorkouts>
     </div>
   </div>
 </template>
@@ -15,6 +20,7 @@
   import { ComputedRef, computed, defineComponent } from 'vue'
 
   import Card from '@/components/Common/Card.vue'
+  import NoWorkouts from '@/components/Common/NoWorkouts.vue'
   import Statistics from '@/components/Statistics/index.vue'
   import { USER_STORE, SPORTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
@@ -25,6 +31,7 @@
     name: 'StatisticsView',
     components: {
       Card,
+      NoWorkouts,
       Statistics,
     },
     setup() {
@@ -49,10 +56,9 @@
     width: 100%;
     margin-bottom: 30px;
     .container {
+      display: flex;
+      flex-direction: column;
       width: 100%;
-      ::v-deep(.card) {
-        width: 100%;
-      }
     }
   }
 </style>