From 1640a3fee464c2732d1d216c45118dd6ffeb48e3 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Fri, 24 Sep 2021 15:01:59 +0200
Subject: [PATCH] Client - add link to workout in dashboard timeline

---
 .../Dashboard/Timeline/WorkoutCard.vue        | 19 +++++++++++++++++--
 .../src/store/modules/workouts/enums.ts       |  1 +
 .../src/store/modules/workouts/mutations.ts   |  7 +++++++
 .../src/store/modules/workouts/types.ts       |  1 +
 fittrackee_client/src/views/Workout.vue       | 11 ++++++++++-
 5 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue b/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
index b317dd0c..a6268415 100644
--- a/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
+++ b/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
@@ -32,10 +32,21 @@
             }}
           </div>
         </div>
-        <div class="workout-map" v-if="workout.with_gpx">
+        <div
+          class="workout-map"
+          v-if="workout.with_gpx"
+          @click="
+            $router.push({ name: 'Workout', params: { workoutId: workout.id } })
+          "
+        >
           <StaticMap :workout="workout"></StaticMap>
         </div>
-        <div class="workout-data">
+        <div
+          class="workout-data"
+          @click="
+            $router.push({ name: 'Workout', params: { workoutId: workout.id } })
+          "
+        >
           <div>
             <img class="sport-img" alt="workout sport logo" :src="sport.img" />
           </div>
@@ -158,6 +169,10 @@
             text-align: center;
           }
         }
+        .workout-map,
+        .workout-data {
+          cursor: pointer;
+        }
       }
     }
   }
diff --git a/fittrackee_client/src/store/modules/workouts/enums.ts b/fittrackee_client/src/store/modules/workouts/enums.ts
index 57986e74..c871f60c 100644
--- a/fittrackee_client/src/store/modules/workouts/enums.ts
+++ b/fittrackee_client/src/store/modules/workouts/enums.ts
@@ -12,6 +12,7 @@ export enum WorkoutsGetters {
 
 export enum WorkoutsMutations {
   EMPTY_WORKOUTS = 'EMPTY_WORKOUTS',
+  EMPTY_WORKOUT = 'EMPTY_WORKOUT',
   SET_CALENDAR_WORKOUTS = 'SET_CALENDAR_WORKOUTS',
   SET_USER_WORKOUTS = 'SET_USER_WORKOUTS',
   SET_WORKOUT = 'SET_WORKOUT',
diff --git a/fittrackee_client/src/store/modules/workouts/mutations.ts b/fittrackee_client/src/store/modules/workouts/mutations.ts
index 5bc6ec67..14f19215 100644
--- a/fittrackee_client/src/store/modules/workouts/mutations.ts
+++ b/fittrackee_client/src/store/modules/workouts/mutations.ts
@@ -42,4 +42,11 @@ export const mutations: MutationTree<IWorkoutsState> & TWorkoutsMutations = {
     state.calendar_workouts = []
     state.user_workouts = []
   },
+  [WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT](state: IWorkoutsState) {
+    state.workout = {
+      gpx: '',
+      loading: false,
+      workout: <IWorkout>{},
+    }
+  },
 }
diff --git a/fittrackee_client/src/store/modules/workouts/types.ts b/fittrackee_client/src/store/modules/workouts/types.ts
index 0a64adda..9675a647 100644
--- a/fittrackee_client/src/store/modules/workouts/types.ts
+++ b/fittrackee_client/src/store/modules/workouts/types.ts
@@ -52,6 +52,7 @@ export type TWorkoutsMutations<S = IWorkoutsState> = {
     loading: boolean
   ): void
   [WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUTS](state: S): void
+  [WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT](state: S): void
 }
 
 export type TWorkoutsStoreModule<S = IWorkoutsState> = Omit<
diff --git a/fittrackee_client/src/views/Workout.vue b/fittrackee_client/src/views/Workout.vue
index c74e8ad6..24085933 100644
--- a/fittrackee_client/src/views/Workout.vue
+++ b/fittrackee_client/src/views/Workout.vue
@@ -24,7 +24,13 @@
 </template>
 
 <script lang="ts">
-  import { computed, ComputedRef, defineComponent, onBeforeMount } from 'vue'
+  import {
+    computed,
+    ComputedRef,
+    defineComponent,
+    onBeforeMount,
+    onUnmounted,
+  } from 'vue'
   import { useRoute } from 'vue-router'
 
   import Loader from '@/components/Common/Loader.vue'
@@ -60,6 +66,9 @@
       )
       const sports = computed(() => store.getters[SPORTS_STORE.GETTERS.SPORTS])
 
+      onUnmounted(() => {
+        store.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT)
+      })
       return { authUser, sports, workout }
     },
   })