Client - add link to workout in dashboard timeline

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;
+        }
       }
     }
   }

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',

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>{},
+    }
+  },
 }

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<

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 }
     },
   })