From 33c51fa6d6cb6e253f25c40c8d601112ed2e9b1a Mon Sep 17 00:00:00 2001
From: WhyAsh5114 <whyash5114@gmail.com>
Date: Fri, 27 Dec 2024 10:59:22 +0530
Subject: [PATCH] feat: show Date in `<WorkoutExerciseCard>` in ExerciseHistory
 and ExerciseStats

---
 src/routes/exercise-stats/+page.svelte            | 15 ++++++++++++---
 .../exercise-stats/ExerciseStatsChart.svelte      |  2 +-
 .../(components)/WorkoutExerciseCard.svelte       | 10 ++++++++--
 .../(components)/ExerciseHistorySheet.svelte      |  2 +-
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/routes/exercise-stats/+page.svelte b/src/routes/exercise-stats/+page.svelte
index b7b6e69a..94d74dac 100644
--- a/src/routes/exercise-stats/+page.svelte
+++ b/src/routes/exercise-stats/+page.svelte
@@ -22,6 +22,15 @@
 	let selectedExercise = $state<string>();
 	let exerciseInstances = $state<WorkoutExercise[]>();
 
+	let filteredExercisesByMuscleGroup = $derived(
+		exercisesByMuscleGroup
+			?.filter((g) => g.exercises.some((ex) => ex.name.toLowerCase().includes(searchText)))
+			.map(({ group, exercises }) => ({
+				group,
+				exercises: exercises.filter((ex) => ex.name.toLowerCase().includes(searchText))
+			})) ?? []
+	);
+
 	onMount(async () => {
 		const exerciseList = await data.exerciseList;
 		exercisesByMuscleGroup = Object.entries(
@@ -50,7 +59,7 @@
 		</Button>
 	</Popover.Trigger>
 	<Popover.Content sameWidth>
-		<Command.Root class="mb-6 h-fit">
+		<Command.Root class="mb-6 h-fit" shouldFilter={false}>
 			<Command.Input placeholder="Type here" bind:value={searchText} />
 			<Command.List>
 				{#if exercisesByMuscleGroup === undefined}
@@ -64,7 +73,7 @@
 					</Command.Loading>
 				{:else}
 					<Command.Empty>No results found.</Command.Empty>
-					{#each exercisesByMuscleGroup as { exercises, group }}
+					{#each filteredExercisesByMuscleGroup as { group, exercises }}
 						<Command.Group heading={group}>
 							{#each exercises as ex}
 								<Command.Item onclick={() => selectExercise(ex.name)}>{ex.name}</Command.Item>
@@ -82,7 +91,7 @@
 		<ExerciseStatsChart {selectedExercise} exercises={exerciseInstances} />
 		{#if exerciseInstances}
 			{#each exerciseInstances as instance}
-				<WorkoutExerciseCard exercise={instance} />
+				<WorkoutExerciseCard exercise={instance} date={new Date(instance.workout.startedAt)} />
 			{/each}
 		{/if}
 	{/if}
diff --git a/src/routes/exercise-stats/ExerciseStatsChart.svelte b/src/routes/exercise-stats/ExerciseStatsChart.svelte
index a66fa7e1..867e5b45 100644
--- a/src/routes/exercise-stats/ExerciseStatsChart.svelte
+++ b/src/routes/exercise-stats/ExerciseStatsChart.svelte
@@ -105,7 +105,7 @@
 					x: {
 						type: 'time',
 						time: {
-							unit: 'day',
+							unit: 'day'
 						}
 					}
 				},
diff --git a/src/routes/workouts/[workoutId]/(components)/WorkoutExerciseCard.svelte b/src/routes/workouts/[workoutId]/(components)/WorkoutExerciseCard.svelte
index 0ddde724..3452bdbd 100644
--- a/src/routes/workouts/[workoutId]/(components)/WorkoutExerciseCard.svelte
+++ b/src/routes/workouts/[workoutId]/(components)/WorkoutExerciseCard.svelte
@@ -9,13 +9,19 @@
 		exercise: Prisma.WorkoutExerciseGetPayload<{
 			include: { sets: { include: { miniSets: true } } };
 		}>;
+		date?: Date;
 	};
-	let { exercise }: PropsType = $props();
+	let { exercise, date }: PropsType = $props();
 </script>
 
 <div class="flex flex-col gap-0.5 rounded-md border bg-card/50 p-2 backdrop-blur-sm">
-	<div class="flex items-start justify-between">
+	<div class="flex items-center justify-between">
 		<span class="truncate">{exercise.name}</span>
+		{#if date}
+			<span class="text-sm text-muted-foreground">
+				{new Date(date).toLocaleDateString()}
+			</span>
+		{/if}
 	</div>
 	<div class="flex items-center gap-0.5">
 		<span class="mr-auto text-sm lowercase text-muted-foreground">
diff --git a/src/routes/workouts/manage/exercises/(components)/ExerciseHistorySheet.svelte b/src/routes/workouts/manage/exercises/(components)/ExerciseHistorySheet.svelte
index 58355e16..48b9f0bf 100644
--- a/src/routes/workouts/manage/exercises/(components)/ExerciseHistorySheet.svelte
+++ b/src/routes/workouts/manage/exercises/(components)/ExerciseHistorySheet.svelte
@@ -68,7 +68,7 @@
 						})}
 					</span>
 				</div>
-				<WorkoutExerciseCard {exercise} />
+				<WorkoutExerciseCard {exercise} date={new Date(exercise.workout.startedAt)} />
 			{/each}
 			<DefaultInfiniteLoader {loadMore} identifier={workoutRunes.exerciseHistorySheetName} entityPlural="exercises" />
 		</div>