From 67bb9151ad8d0fb669ed73f5d933f6e576922a7a Mon Sep 17 00:00:00 2001
From: Christian Carlsson <hello@crlssn.com>
Date: Wed, 18 Dec 2024 16:00:09 +0000
Subject: [PATCH] refact: web: workout session  (#248)

---
 server/repo/repo.go                       |  13 +-
 server/testing/factory/factory_workout.go |   6 +
 web/src/ui/components/AppButton.vue       |   6 +-
 web/src/ui/components/AppList.vue         |  16 +-
 web/src/ui/workouts/EditWorkout.vue       |  26 +-
 web/src/ui/workouts/StartWorkout.vue      | 289 +++++++++++++---------
 web/src/utils/numbers.ts                  |   3 +
 7 files changed, 216 insertions(+), 143 deletions(-)
 create mode 100644 web/src/utils/numbers.ts

diff --git a/server/repo/repo.go b/server/repo/repo.go
index e3c9c725..50208e8c 100644
--- a/server/repo/repo.go
+++ b/server/repo/repo.go
@@ -840,12 +840,15 @@ func (r *repo) DeleteWorkout(ctx context.Context, opts ...DeleteWorkoutOpt) erro
 
 func (r *repo) GetPreviousWorkoutSets(ctx context.Context, exerciseIDs []string) (orm.SetSlice, error) {
 	rawQuery := `
-	SELECT * FROM getstronger.sets WHERE workout_id IN (
-		SELECT DISTINCT ON (exercise_id) workout_id	
-		FROM getstronger.sets 
-		WHERE exercise_id = ANY ($1) 
+SELECT * FROM getstronger.sets WHERE (exercise_id, workout_id) IN (
+	SELECT exercise_id, workout_id FROM (
+		SELECT DISTINCT ON (exercise_id) exercise_id, workout_id
+		FROM getstronger.sets
+		WHERE exercise_id = ANY($1)
 		ORDER BY exercise_id, created_at DESC
-	) ORDER BY created_at;
+	) as previous_sets
+)
+ORDER BY created_at;
 `
 
 	var sets orm.SetSlice
diff --git a/server/testing/factory/factory_workout.go b/server/testing/factory/factory_workout.go
index 41f3d915..9aba3d3f 100644
--- a/server/testing/factory/factory_workout.go
+++ b/server/testing/factory/factory_workout.go
@@ -101,3 +101,9 @@ func WorkoutName(name string) WorkoutOpt {
 		workout.Name = name
 	}
 }
+
+func WorkoutCreatedAt(createdAt time.Time) WorkoutOpt {
+	return func(workout *orm.Workout) {
+		workout.CreatedAt = createdAt
+	}
+}
diff --git a/web/src/ui/components/AppButton.vue b/web/src/ui/components/AppButton.vue
index d756c8e9..f2f3aeab 100644
--- a/web/src/ui/components/AppButton.vue
+++ b/web/src/ui/components/AppButton.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 const props = defineProps<{
-  colour: 'amber' | 'gray' | 'green' | 'primary' | 'red'
+  colour: 'amber' | 'gray' | 'green' | 'primary' | 'red' | 'black'
   containerClass?: string
   to?: string
   type: 'button' | 'link' | 'submit'
@@ -57,4 +57,8 @@ button {
 .gray {
   @apply bg-gray-200 border-b-0 py-4 focus-visible:outline-gray-500 text-gray-500;
 }
+
+.black {
+  @apply bg-gray-800 border-b-black text-white;
+}
 </style>
diff --git a/web/src/ui/components/AppList.vue b/web/src/ui/components/AppList.vue
index 2ab5dee9..0b186ec6 100644
--- a/web/src/ui/components/AppList.vue
+++ b/web/src/ui/components/AppList.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { vInfiniteScroll } from '@vueuse/components'
 import { ArrowPathIcon } from '@heroicons/vue/24/outline'
-import AppCard from '@/ui/components/AppCard.vue'
 
 defineProps<{
   canFetch?: boolean
@@ -15,19 +14,18 @@ const onFetch = async () => {
 </script>
 
 <template>
-  <AppCard>
-    <ul role="list">
-      <slot />
-      <li v-if="canFetch" v-infinite-scroll="onFetch" class="fetching">
-        <ArrowPathIcon class="size-7 animate-spin" />
-      </li>
-    </ul>
-  </AppCard>
+  <ul role="list">
+    <slot />
+    <li v-if="canFetch" v-infinite-scroll="onFetch" class="fetching">
+      <ArrowPathIcon class="size-7 animate-spin" />
+    </li>
+  </ul>
 </template>
 
 <style scoped>
 ul {
   @apply divide-y divide-gray-100;
+  @apply bg-white border border-gray-200 mb-4 rounded-md;
 
   li.fetching {
     @apply h-16 flex justify-center items-center text-gray-800;
diff --git a/web/src/ui/workouts/EditWorkout.vue b/web/src/ui/workouts/EditWorkout.vue
index ec078a2c..4e7bf06a 100644
--- a/web/src/ui/workouts/EditWorkout.vue
+++ b/web/src/ui/workouts/EditWorkout.vue
@@ -16,6 +16,7 @@ import AppListItem from '@/ui/components/AppListItem.vue'
 import { MinusCircleIcon } from '@heroicons/vue/24/outline'
 import { getWorkout, updateWorkout } from '@/http/requests.ts'
 import AppListItemInput from '@/ui/components/AppListItemInput.vue'
+import { isNumber } from '@/utils/numbers.ts'
 
 const route = useRoute()
 const workout = ref<Workout>()
@@ -46,6 +47,15 @@ const onUpdateWorkout = async () => {
     return
   }
 
+  workout.value.exerciseSets = workout.value.exerciseSets
+    .map((exerciseSet) => {
+      const sets = exerciseSet.sets.filter((set) => isNumber(set.reps) && isNumber(set.weight))
+      if (!sets.length) return null
+      exerciseSet.sets = sets
+      return exerciseSet
+    })
+    .filter(Boolean) as ExerciseSets[]
+
   const res = await updateWorkout(workout.value)
   if (!res) return
 
@@ -70,11 +80,9 @@ const deleteSet = (exerciseId: string, index: number) => {
     return
   }
 
-  if (confirm('Are you sure you want to delete this set?')) {
-    workout.value.exerciseSets
-      .find((es: ExerciseSets) => es.exercise?.id === exerciseId)
-      ?.sets.splice(index, 1)
-  }
+  workout.value.exerciseSets
+    .find((es: ExerciseSets) => es.exercise?.id === exerciseId)
+    ?.sets.splice(index, 1)
 }
 
 const setStartDateTime = (value: string) => {
@@ -119,7 +127,7 @@ const toDateTime = (timestamp: Timestamp | undefined) => {
                   type="text"
                   inputmode="decimal"
                   placeholder="Weight"
-                  required
+                  :required="isNumber(set.reps)"
                 />
               </div>
               <span class="text-gray-500 font-medium">x</span>
@@ -129,7 +137,7 @@ const toDateTime = (timestamp: Timestamp | undefined) => {
                   type="text"
                   inputmode="numeric"
                   placeholder="Reps"
-                  required
+                  :required="isNumber(set.weight)"
                 />
               </div>
               <MinusCircleIcon
@@ -170,8 +178,8 @@ const toDateTime = (timestamp: Timestamp | undefined) => {
       />
     </AppList>
 
-    <AppButton type="submit" colour="primary">Update Workout</AppButton>
-    <AppButton type="link" :to="`/workouts/${workout?.id}`" colour="gray">
+    <AppButton type="submit" colour="primary" class="mb-2">Update Workout</AppButton>
+    <AppButton type="link" :to="`/workouts/${workout?.id}`" colour="black">
       Cancel Update
     </AppButton>
   </form>
diff --git a/web/src/ui/workouts/StartWorkout.vue b/web/src/ui/workouts/StartWorkout.vue
index c7096ca6..3eb71a5c 100644
--- a/web/src/ui/workouts/StartWorkout.vue
+++ b/web/src/ui/workouts/StartWorkout.vue
@@ -1,115 +1,94 @@
 <script setup lang="ts">
-import type { Exercise, ExerciseSets } from '@/proto/api/v1/shared_pb'
+import type { ExerciseSets } from '@/proto/api/v1/shared_pb'
+import type { Routine } from '@/proto/api/v1/routine_service_pb'
+import type { Set } from '@/types/workout'
 
 import { DateTime } from 'luxon'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import router from '@/router/router'
-import { onMounted, onUnmounted, ref } from 'vue'
-import { useAlertStore } from '@/stores/alerts.ts'
+
+import { useAlertStore } from '@/stores/alerts'
 import { useWorkoutStore } from '@/stores/workout'
-import AppList from '@/ui/components/AppList.vue'
 import { usePageTitleStore } from '@/stores/pageTitle'
+
+import AppList from '@/ui/components/AppList.vue'
 import AppButton from '@/ui/components/AppButton.vue'
-import { MinusCircleIcon } from '@heroicons/vue/24/outline'
-import { type Routine } from '@/proto/api/v1/routine_service_pb'
 import AppListItemInput from '@/ui/components/AppListItemInput.vue'
-import { createWorkout, getPreviousWorkoutSets, getRoutine } from '@/http/requests.ts'
+import { ChevronDownIcon, ChevronUpIcon, MinusCircleIcon } from '@heroicons/vue/24/outline'
+
+import { createWorkout, getPreviousWorkoutSets, getRoutine } from '@/http/requests'
+import { isNumber } from '@/utils/numbers.ts'
 
 const route = useRoute()
-const routine = ref<Routine | undefined>(undefined)
 const routineID = route.params.routine_id as string
-const workoutStore = useWorkoutStore()
-const pageTitleStore = usePageTitleStore()
-const alertStore = useAlertStore()
+const routine = ref<Routine | undefined>(undefined)
+const prevExerciseSets = ref<ExerciseSets[]>([])
 const startDateTime = ref(DateTime.now().toFormat("yyyy-MM-dd'T'HH:mm"))
 const endDateTime = ref(DateTime.now().toFormat("yyyy-MM-dd'T'HH:mm"))
+
+const workoutStore = useWorkoutStore()
+const alertStore = useAlertStore()
+const pageTitleStore = usePageTitleStore()
+
 let dateTimeInterval: ReturnType<typeof setInterval>
-const prevExerciseSets = ref<ExerciseSets[]>([])
 
 onMounted(async () => {
-  await fetchRoutine(routineID)
-  await fetchLatestExerciseSets()
-  pageTitleStore.setPageTitle(routine.value?.name as string)
-  workoutStore.initialiseWorkout(routineID)
-  routine.value?.exercises.forEach((exercise) => {
-    addEmptySetIfNone(exercise.id)
-  })
-  dateTimeInterval = setInterval(updateDateTime, 1000)
+  await initializeRoutine()
+  startDateTimeUpdater()
 })
 
-onUnmounted(() => {
-  clearDateTimeInterval()
-})
+onUnmounted(() => clearDateTimeUpdater())
 
-const fetchLatestExerciseSets = async () => {
-  const exerciseIds = routine.value?.exercises?.map((exercise) => exercise.id) || []
-  const res = await getPreviousWorkoutSets(exerciseIds)
-  if (!res) return
-
-  prevExerciseSets.value = res.exerciseSets
-}
-
-const updateDateTime = () => {
-  endDateTime.value = DateTime.now().toFormat("yyyy-MM-dd'T'HH:mm")
-}
-
-const clearDateTimeInterval = () => {
-  console.log('clearing interval')
-  clearInterval(dateTimeInterval)
-}
+const maxExerciseIndex = computed(() => {
+  if (!routine.value?.exercises) return 0
+  return routine.value.exercises.length - 1
+})
 
-const sets = (exerciseId: string) => {
-  return workoutStore.getSets(routineID, exerciseId)
+const initializeRoutine = async () => {
+  await fetchRoutine(routineID)
+  await fetchPreviousExerciseSets()
+  pageTitleStore.setPageTitle(routine.value?.name || 'Workout')
+  workoutStore.initialiseWorkout(routineID)
+  addEmptySetsFromPreviousSession()
 }
 
 const fetchRoutine = async (id: string) => {
   const res = await getRoutine(id)
-  if (!res) return
-
-  routine.value = res.routine
+  if (res) routine.value = res.routine
 }
 
-const onFinishWorkout = async () => {
-  const exerciseSets = workoutStore.getAllSets(routineID)
-  if (!exerciseSets) {
-    throw new Error('No exercise sets found')
-  }
+const fetchPreviousExerciseSets = async () => {
+  const exerciseIds = routine.value?.exercises?.map((e) => e.id) || []
+  const res = await getPreviousWorkoutSets(exerciseIds)
+  if (res) prevExerciseSets.value = res.exerciseSets
+}
 
-  const eSetsList: ExerciseSets[] = []
-  for (const [exerciseID, sets] of Object.entries(exerciseSets)) {
-    const definedSets = sets.filter((set) => isNumber(set.reps) && isNumber(set.weight))
-    if (definedSets.length === 0) {
-      continue
-    }
+const addEmptySetsFromPreviousSession = () => {
+  routine.value?.exercises.forEach((exercise) =>
+    workoutStore.addEmptySetIfNone(routineID, exercise.id),
+  )
 
-    eSetsList.push({
-      exercise: {
-        id: exerciseID,
-      } as Exercise,
-      sets: definedSets,
-    } as ExerciseSets)
-  }
+  prevExerciseSets.value.forEach((es) => {
+    if (!es.exercise) return
 
-  const res = await createWorkout(
-    routineID,
-    eSetsList,
-    DateTime.fromISO(startDateTime.value),
-    DateTime.fromISO(endDateTime.value),
-  )
-  if (!res) return
+    const missingSets = es.sets.length - workoutStore.getSets(routineID, es.exercise.id).length
+    if (missingSets <= 0) return
 
-  workoutStore.removeWorkout(routineID)
-  alertStore.setSuccess('Workout saved')
-  await router.push('/home')
+    for (let i = 0; i < missingSets; i++) {
+      workoutStore.addEmptySet(routineID, es.exercise.id)
+    }
+  })
 }
 
-const cancelWorkout = async () => {
-  if (confirm('Are you sure you want to cancel this workout?')) {
-    workoutStore.removeWorkout(routineID)
-    await router.push(`/routines/${routineID}`)
-  }
+const startDateTimeUpdater = () => {
+  dateTimeInterval = setInterval(() => {
+    endDateTime.value = DateTime.now().toFormat("yyyy-MM-dd'T'HH:mm")
+  }, 1000)
 }
 
+const clearDateTimeUpdater = () => clearInterval(dateTimeInterval)
+
 const prevSetWeight = (exerciseID: string, index: number) => {
   const prevSet = prevExerciseSets.value.find((set) => set.exercise?.id === exerciseID)?.sets[index]
   return prevSet?.weight?.toString()
@@ -120,38 +99,102 @@ const prevSetReps = (exerciseID: string, index: number) => {
   return prevSet?.reps?.toString()
 }
 
-const isNumber = (value: number | string | undefined) => {
-  return typeof value === 'number' && !Number.isNaN(value)
-}
+const setPrevSetWeightIfEmpty = (event: Event, exerciseId: string, set: Set, index: number) => {
+  if (isNumber(set.weight)) {
+    return
+  }
+  const prevSet = workoutStore.getSets(routineID, exerciseId)[index - 1]
+  if (prevSet == undefined) {
+    return
+  }
 
-const addEmptySet = (exerciseID: string) => {
-  workoutStore.addEmptySet(routineID, exerciseID)
+  set.weight = prevSet.weight
+  const target = event.target as HTMLInputElement
+  target.select()
+  workoutStore.addEmptySetIfNone(routineID, exerciseId)
 }
 
-const addEmptySetIfNone = (exerciseID: string) => {
-  workoutStore.addEmptySetIfNone(routineID, exerciseID)
+const setPrevSetRepIfEmpty = (event: Event, exerciseId: string, set: Set, index: number) => {
+  if (isNumber(set.reps)) {
+    return
+  }
+  const prevSet = workoutStore.getSets(routineID, exerciseId)[index - 1]
+  if (prevSet == undefined) {
+    return
+  }
+
+  set.reps = prevSet.reps
+  const target = event.target as HTMLInputElement
+  target.select()
+  workoutStore.addEmptySetIfNone(routineID, exerciseId)
 }
 
-const deleteSet = (exerciseID: string, index: number) => {
-  if (confirm('Are you sure you want to delete this set?')) {
-    workoutStore.deleteSet(routineID, exerciseID, index)
+const onFinishWorkout = async () => {
+  const exerciseSets = buildWorkoutSets()
+  if (!exerciseSets) return
+
+  const res = await createWorkout(
+    routineID,
+    exerciseSets,
+    DateTime.fromISO(startDateTime.value),
+    DateTime.fromISO(endDateTime.value),
+  )
+
+  if (res) {
+    workoutStore.removeWorkout(routineID)
+    alertStore.setSuccess('Workout saved')
+    await router.push('/home')
   }
 }
 
-const setStartDateTime = (value: string) => {
-  startDateTime.value = value
+const buildWorkoutSets = () => {
+  const allSets = workoutStore.getAllSets(routineID)
+  if (!allSets) throw new Error('No exercise sets found')
+
+  return routine.value?.exercises
+    .map((exercise) => {
+      const sets = allSets[exercise.id]?.filter((set) => isNumber(set.reps) && isNumber(set.weight))
+      return sets?.length ? ({ exercise: { id: exercise.id }, sets } as ExerciseSets) : null
+    })
+    .filter(Boolean) as ExerciseSets[]
 }
 
-const setEndDateTime = (value: string) => {
-  endDateTime.value = value
-  clearDateTimeInterval()
+const cancelWorkout = async () => {
+  if (confirm('Are you sure you want to cancel this workout?')) {
+    workoutStore.removeWorkout(routineID)
+    await router.push(`/routines/${routineID}`)
+  }
+}
+
+const moveExercise = (index: number, direction: 'up' | 'down') => {
+  const exercises = routine.value?.exercises
+  if (!exercises) return
+
+  const newIndex = direction === 'up' ? index - 1 : index + 1
+  if (newIndex < 0 || newIndex >= exercises.length) return
+  ;[exercises[index], exercises[newIndex]] = [exercises[newIndex], exercises[index]]
 }
 </script>
 
 <template>
   <form @submit.prevent="onFinishWorkout">
-    <div v-for="exercise in routine?.exercises" :key="exercise.id">
-      <h6>{{ exercise.name }}</h6>
+    <div v-for="(exercise, index) in routine?.exercises" :key="exercise.id">
+      <div class="flex justify-between pr-4">
+        <h6>{{ exercise.name }}</h6>
+        <div class="flex gap-x-1">
+          <ChevronUpIcon
+            v-if="index > 0"
+            class="size-5 text-gray-500 cursor-pointer"
+            @click="moveExercise(index, 'up')"
+          />
+          <ChevronDownIcon
+            v-if="index < maxExerciseIndex"
+            class="size-5 text-gray-500 cursor-pointer"
+            @click="moveExercise(index, 'down')"
+          />
+        </div>
+      </div>
+
       <div class="table-container">
         <table>
           <thead>
@@ -165,7 +208,18 @@ const setEndDateTime = (value: string) => {
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(set, index) in sets(exercise.id)" :key="index">
+            <tr v-if="workoutStore.getSets(routineID, exercise.id).length === 0">
+              <td colspan="6">
+                <AppButton
+                  colour="primary"
+                  type="button"
+                  @click="workoutStore.addEmptySet(routineID, exercise.id)"
+                >
+                  Add Set
+                </AppButton>
+              </td>
+            </tr>
+            <tr v-for="(set, index) in workoutStore.getSets(routineID, exercise.id)" :key="index">
               <td>{{ index + 1 }}</td>
               <td>
                 <template
@@ -179,8 +233,9 @@ const setEndDateTime = (value: string) => {
                   v-model.number="set.weight"
                   type="text"
                   inputmode="decimal"
-                  :required="sets(exercise.id).length > index + 1"
-                  @keyup="addEmptySetIfNone(exercise.id)"
+                  :required="isNumber(set.reps)"
+                  @input="workoutStore.addEmptySetIfNone(routineID, exercise.id)"
+                  @focus="setPrevSetWeightIfEmpty($event, exercise.id, set, index)"
                 />
               </td>
               <td class="text-center">x</td>
@@ -189,22 +244,22 @@ const setEndDateTime = (value: string) => {
                   v-model.number="set.reps"
                   type="text"
                   inputmode="numeric"
-                  :required="sets(exercise.id).length > index + 1"
-                  @keyup="addEmptySetIfNone(exercise.id)"
+                  :required="isNumber(set.weight)"
+                  @input="workoutStore.addEmptySetIfNone(routineID, exercise.id)"
+                  @focus="setPrevSetRepIfEmpty($event, exercise.id, set, index)"
                 />
               </td>
               <td>
-                <MinusCircleIcon
-                  class="cursor-pointer size-6 text-gray-900"
-                  @click="deleteSet(exercise.id, index)"
-                />
+                <div class="flex justify-center">
+                  <MinusCircleIcon
+                    class="cursor-pointer size-6 text-gray-900"
+                    @click="workoutStore.deleteSet(routineID, exercise.id, index)"
+                  />
+                </div>
               </td>
             </tr>
           </tbody>
         </table>
-        <AppButton colour="primary" type="button" class="w-full" @click="addEmptySet(exercise.id)">
-          Add Set
-        </AppButton>
       </div>
     </div>
 
@@ -214,7 +269,7 @@ const setEndDateTime = (value: string) => {
         :model="startDateTime"
         type="datetime-local"
         required
-        @update="setStartDateTime"
+        @update="(value) => (startDateTime = value)"
       />
     </AppList>
 
@@ -224,30 +279,26 @@ const setEndDateTime = (value: string) => {
         :model="endDateTime"
         type="datetime-local"
         required
-        @update="setEndDateTime"
+        @update="(value) => (endDateTime = value)"
       />
     </AppList>
 
-    <AppButton type="submit" colour="primary" class="mb-4"> Finish Workout </AppButton>
-    <AppButton type="button" colour="gray" @click="cancelWorkout"> Cancel Workout </AppButton>
+    <AppButton type="submit" colour="primary" class="mb-4">Finish Workout</AppButton>
+    <AppButton type="button" colour="black" @click="cancelWorkout">Cancel Workout</AppButton>
   </form>
 </template>
 
 <style scoped>
 .table-container {
-  @apply bg-white px-3 py-4  mb-4 border border-gray-200 rounded-md;
+  @apply bg-white px-3 py-4 mb-4 border border-gray-200 rounded-md;
 }
 
 table {
-  @apply w-full mb-4;
-
-  th {
-    @apply text-left font-medium text-gray-900 px-1 pb-2;
-  }
+  @apply w-full;
+}
 
-  td {
-    @apply text-nowrap px-1;
-  }
+th {
+  @apply text-left font-medium text-gray-900 px-1 pb-2;
 }
 
 input {
diff --git a/web/src/utils/numbers.ts b/web/src/utils/numbers.ts
new file mode 100644
index 00000000..785ce813
--- /dev/null
+++ b/web/src/utils/numbers.ts
@@ -0,0 +1,3 @@
+export const isNumber = (value: number | string | undefined): boolean => {
+  return typeof value === 'number' && !Number.isNaN(value)
+}