Client - edit a workout

fittrackee_client/src/views/EditWorkout.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="edit-workout">
+    <div class="container">
+      <AddOrEditWorkout :sports="sports" :workout="workoutData.workout" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    computed,
+    defineComponent,
+    watch,
+    onBeforeMount,
+    ComputedRef,
+  } from 'vue'
+  import { useRoute } from 'vue-router'
+
+  import AddOrEditWorkout from '@/components/Workout/WorkoutEdition.vue'
+  import { SPORTS_STORE, WORKOUTS_STORE } from '@/store/constants'
+  import { ISport } from '@/types/sports'
+  import { IWorkoutData } from '@/types/workouts'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'EditWorkout',
+    components: {
+      AddOrEditWorkout,
+    },
+    setup() {
+      const route = useRoute()
+      const store = useStore()
+
+      onBeforeMount(() => {
+        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, {
+          workoutId: route.params.workoutId,
+        })
+      })
+
+      const sports: ComputedRef<ISport[]> = computed(
+        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
+      )
+      const workoutData: ComputedRef<IWorkoutData> = computed(
+        () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]
+      )
+
+      watch(
+        () => route.params.workoutId,
+        async (newWorkoutId) => {
+          if (!newWorkoutId) {
+            store.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT)
+          }
+        }
+      )
+
+      return { sports, workoutData }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+</style>

fittrackee_client/src/views/Workout.vue

@@ -55,6 +55,7 @@
   import WorkoutNotes from '@/components/Workout/WorkoutNotes.vue'
   import WorkoutSegments from '@/components/Workout/WorkoutSegments.vue'
   import { SPORTS_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
+  import { ISport } from '@/types/sports'
   import { IAuthUserProfile } from '@/types/user'
   import { IWorkoutData, IWorkoutPayload, TCoordinates } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
@@ -92,7 +93,9 @@
       const authUser: ComputedRef<IAuthUserProfile> = computed(
         () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
       )
-      const sports = computed(() => store.getters[SPORTS_STORE.GETTERS.SPORTS])
+      const sports: ComputedRef<ISport[]> = computed(
+        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
+      )
       let markerCoordinates: Ref<TCoordinates> = ref({
         latitude: null,
         longitude: null,