refact: web: workout session (#248)

crlssn · Dec 18, 2024 · 67bb915 · 67bb915
1 parent f8f8a77
commit 67bb915
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 143 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>