Client - delete a workout

fittrackee_client/src/components/Common/Modal.vue

@@ -0,0 +1,113 @@
+<template>
+  <div id="modal">
+    <div class="custom-modal">
+      <Card :without-title="false">
+        <template #title>
+          {{ title }}
+        </template>
+        <template #content>
+          <div class="modal-message">{{ message }}</div>
+          <ErrorMessage :message="errorMessages" v-if="errorMessages" />
+          <div class="modal-buttons">
+            <button class="confirm" @click="emit('confirmAction')">
+              {{ t('buttons.YES') }}
+            </button>
+            <button class="cancel" @click="emit('cancelAction')">
+              {{ t('buttons.NO') }}
+            </button>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ComputedRef, computed, defineComponent, onUnmounted } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import Card from '@/components/Common/Card.vue'
+  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
+  import { ROOT_STORE } from '@/store/constants'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'Modal',
+    components: {
+      Card,
+      ErrorMessage,
+    },
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      message: {
+        type: String,
+        required: true,
+      },
+    },
+    emits: ['cancelAction', 'confirmAction'],
+    setup(props, { emit }) {
+      const { t } = useI18n()
+      const store = useStore()
+      const errorMessages: ComputedRef<string | string[] | null> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+      )
+      onUnmounted(() => store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES))
+      return { errorMessages, t, emit }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+  #modal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--modal-background-color);
+    padding: $default-padding;
+    z-index: 1240;
+
+    .custom-modal {
+      background-color: var(--app-background-color);
+      border-radius: $border-radius;
+      max-width: 500px;
+      margin: 25% auto;
+      z-index: 1250;
+
+      ::v-deep(.card) {
+        border: 0;
+        margin: 0;
+
+        .card-content {
+          display: flex;
+          flex-direction: column;
+
+          .modal-message {
+            padding: $default-padding;
+          }
+
+          .modal-buttons {
+            display: flex;
+            justify-content: flex-end;
+
+            button {
+              margin: $default-padding * 0.5;
+            }
+          }
+        }
+      }
+    }
+
+    @media screen and (max-width: $small-limit) {
+      .custom-modal {
+        margin: 20% 0;
+        width: 100%;
+      }
+    }
+  }
+</style>

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue

@@ -23,6 +23,11 @@
       <div class="workout-title-date">
         <div class="workout-title" v-if="workoutObject.type === 'WORKOUT'">
           {{ workoutObject.title }}
+          <i
+            class="fa fa-trash"
+            aria-hidden="true"
+            @click="emit('displayModal', true)"
+          />
         </div>
         <div class="workout-title" v-else>
           {{ workoutObject.title }}
@@ -86,9 +91,10 @@
         required: true,
       },
     },
-    setup() {
+    emits: ['displayModal'],
+    setup(props, { emit }) {
       const { t } = useI18n()
-      return { t }
+      return { t, emit }
     },
   })
 </script>

fittrackee_client/src/components/Workout/WorkoutDetail/index.vue

@@ -1,8 +1,19 @@
 <template>
   <div class="workout-detail">
+    <Modal
+      v-if="displayModal"
+      :title="t('common.CONFIRMATION')"
+      :message="t('workouts.WORKOUT_DELETION_CONFIRMATION')"
+      @confirmAction="deleteWorkout(workoutObject.workoutId)"
+      @cancelAction="updateDisplayModal(false)"
+    />
     <Card :without-title="false">
       <template #title>
-        <WorkoutCardTitle :sport="sport" :workoutObject="workoutObject" />
+        <WorkoutCardTitle
+          :sport="sport"
+          :workoutObject="workoutObject"
+          @displayModal="updateDisplayModal(true)"
+        />
       </template>
       <template #content>
         <WorkoutMap
@@ -29,9 +40,11 @@
   import { useRoute } from 'vue-router'
 
   import Card from '@/components/Common/Card.vue'
+  import Modal from '@/components/Common/Modal.vue'
   import WorkoutCardTitle from '@/components/Workout/WorkoutDetail/WorkoutCardTitle.vue'
   import WorkoutData from '@/components/Workout/WorkoutDetail/WorkoutData.vue'
   import WorkoutMap from '@/components/Workout/WorkoutDetail/WorkoutMap.vue'
+  import { WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
   import { IAuthUserProfile } from '@/types/user'
   import {
@@ -41,12 +54,14 @@
     IWorkoutSegment,
     TCoordinates,
   } from '@/types/workouts'
+  import { useStore } from '@/use/useStore'
   import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
 
   export default defineComponent({
     name: 'WorkoutDetail',
     components: {
       Card,
+      Modal,
       WorkoutCardTitle,
       WorkoutData,
       WorkoutMap,
@@ -74,6 +89,7 @@
     },
     setup(props) {
       const route = useRoute()
+      const store = useStore()
       const { t } = useI18n()
 
       function getWorkoutObjectUrl(
@@ -137,6 +153,14 @@
           workoutTime: workoutDate.workout_time,
         }
       }
+      function updateDisplayModal(value: boolean) {
+        displayModal.value = value
+      }
+      function deleteWorkout(workoutId: string) {
+        store.dispatch(WORKOUTS_STORE.ACTIONS.DELETE_WORKOUT, {
+          workoutId: workoutId,
+        })
+      }
 
       const workout: ComputedRef<IWorkout> = computed(
         () => props.workoutData.workout
@@ -149,6 +173,7 @@
           ? workout.value.segments[+segmentId.value - 1]
           : null
       )
+      let displayModal: Ref<boolean> = ref(false)
 
       watch(
         () => route.params.segmentId,
@@ -170,7 +195,10 @@
         workoutObject: computed(() =>
           getWorkoutObject(workout.value, segment.value)
         ),
+        displayModal,
         t,
+        deleteWorkout,
+        updateDisplayModal,
       }
     },
   })