Client - check distance and duration before adding workout w/o gpx

fittrackee_client/src/components/Workout/WorkoutEdition.vue

@@ -135,6 +135,7 @@
                         id="workout-duration-hour"
                         name="workout-duration-hour"
                         class="workout-duration"
+                        :class="{ errored: isDurationInvalid() }"
                         type="text"
                         placeholder="HH"
                         minlength="1"
@@ -150,6 +151,7 @@
                         id="workout-duration-minutes"
                         name="workout-duration-minutes"
                         class="workout-duration"
+                        :class="{ errored: isDurationInvalid() }"
                         type="text"
                         pattern="^([0-5][0-9])$"
                         minlength="2"
@@ -165,6 +167,7 @@
                         id="workout-duration-seconds"
                         name="workout-duration-seconds"
                         class="workout-duration"
+                        :class="{ errored: isDurationInvalid() }"
                         type="text"
                         pattern="^([0-5][0-9])$"
                         minlength="2"
@@ -185,6 +188,7 @@
                     }}):
                   </label>
                   <input
+                    :class="{ errored: isDistanceInvalid() }"
                     name="workout-distance"
                     type="number"
                     min="0"
@@ -228,6 +232,7 @@
 <script setup lang="ts">
   import {
     ComputedRef,
+    Ref,
     computed,
     reactive,
     ref,
@@ -306,6 +311,7 @@
   )
   let gpxFile: File | null = null
   const formErrors = ref(false)
+  const payloadErrorMessages: Ref<string[]> = ref([])
 
   onMounted(() => {
     if (props.workout.id) {
@@ -347,15 +353,28 @@
       workoutForm.workoutDurationSeconds = duration[2]
     }
   }
+  function isDistanceInvalid() {
+    return payloadErrorMessages.value.includes('workouts.INVALID_DISTANCE')
+  }
+  function isDurationInvalid() {
+    return payloadErrorMessages.value.includes('workouts.INVALID_DURATION')
+  }
   function formatPayload(payload: IWorkoutForm) {
+    payloadErrorMessages.value = []
     payload.title = workoutForm.title
-    payload.distance = authUser.value.imperial_units
-      ? convertDistance(+workoutForm.workoutDistance, 'mi', 'km', 3)
-      : +workoutForm.workoutDistance
     payload.duration =
       +workoutForm.workoutDurationHour * 3600 +
       +workoutForm.workoutDurationMinutes * 60 +
       +workoutForm.workoutDurationSeconds
+    if (payload.duration <= 0) {
+      payloadErrorMessages.value.push('workouts.INVALID_DURATION')
+    }
+    payload.distance = authUser.value.imperial_units
+      ? convertDistance(+workoutForm.workoutDistance, 'mi', 'km', 3)
+      : +workoutForm.workoutDistance
+    if (payload.distance <= 0) {
+      payloadErrorMessages.value.push('workouts.INVALID_DISTANCE')
+    }
     payload.workout_date = `${workoutForm.workoutDate} ${workoutForm.workoutTime}`
   }
   function updateWorkout() {
@@ -384,7 +403,17 @@
         store.dispatch(WORKOUTS_STORE.ACTIONS.ADD_WORKOUT, payload)
       } else {
         formatPayload(payload)
-        store.dispatch(WORKOUTS_STORE.ACTIONS.ADD_WORKOUT_WITHOUT_GPX, payload)
+        if (payloadErrorMessages.value.length > 0) {
+          store.commit(
+            ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES,
+            payloadErrorMessages.value
+          )
+        } else {
+          store.dispatch(
+            WORKOUTS_STORE.ACTIONS.ADD_WORKOUT_WITHOUT_GPX,
+            payload
+          )
+        }
       }
     }
   }
@@ -521,5 +550,9 @@
         margin-top: 0;
       }
     }
+
+    .errored {
+      outline: 2px solid var(--input-error-color);
+    }
   }
 </style>