Persist players tab to assessments table

apps/api/src/server.ts

@@ -482,7 +482,7 @@ export const app = new Elysia()
     .group("/assessments", (app) => app
         .guard({ auth: true }, (app) => app
             .post("/me", async ({ body: { player, activityPerformances }, accountId }) => {
-                await s.Assessments.create(player, activityPerformances, accountId);
+                return await s.Assessments.create(player, activityPerformances, accountId);
             }, {
                 body: t.Object({
                     player: PlayerSchema,
@@ -490,9 +490,13 @@ export const app = new Elysia()
                 })
             })
             .get("/me", async ({ accountId }) => {
-                const assessments = await s.Assessments.list({ filter: { accountId } });
+                return await s.Assessments.list({ filter: { accountId } });
-                if (!assessments) throw new NotFoundError("Assessments not found");
+            })
-                return assessments;
+            .delete("/me/:id", async ({ params: { id }, accountId }) => {
+                const deleted = await s.Assessments.delete(id, accountId);
+                if (!deleted) throw new NotFoundError("Assessment not found");
+            }, {
+                params: t.Object({ id: t.String() })
             })
         )
         .guard({ authAdmin: true }, (app) => app

apps/api/src/services/assessments.ts

@@ -39,4 +39,12 @@ export class AssessmentsService {
             .$if(opt.offset !== undefined, (qb) => qb.offset(opt.offset!))
             .execute();
     }
+
+    async delete(id: string, accountId: string): Promise<boolean> {
+        const result = await db.deleteFrom("assessments")
+            .where("id", "=", id)
+            .where("account_id", "=", accountId)
+            .executeTakeFirst();
+        return result.numDeletedRows > 0n;
+    }
 }

apps/portal/src/lib/components/PlayersTable.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import {
         LevelCalculator,
         type LevelCalculatorOutput,
@@ -13,11 +14,22 @@
         type ActivityPerformance,
         type Player,
     } from "@blade-and-brawn/domain";
+    import { api } from "$lib/api";
+
+    type AssessmentRow = NonNullable<
+        Awaited<ReturnType<typeof api.assessments.me.get>>["data"]
+    >[number];
 
     interface CalcData {
+        key: string;
+        id?: string;
         levels?: LevelCalculatorOutput;
         player: Player;
         activityPerformances: ActivityPerformance[];
+        saving?: boolean;
+        saveError?: string;
+        deleting?: boolean;
+        deleteError?: string;
     }
 
     interface Props {
@@ -28,7 +40,97 @@
 
     const levelCalculator = $derived(new LevelCalculator(allStandards));
 
-    let calculations = $state([] as CalcData[]);
+    let calculations = $state<CalcData[]>([]);
+    let loading = $state(true);
+    let loadError = $state<string | null>(null);
+
+    const PERF_COLUMN = {
+        [Activity.BackSquat]: "perf_back_squat",
+        [Activity.Deadlift]: "perf_deadlift",
+        [Activity.BenchPress]: "perf_bench_press",
+        [Activity.Run]: "perf_run",
+        [Activity.BroadJump]: "perf_broad_jump",
+        [Activity.ConeDrill]: "perf_cone_drill",
+    } as const satisfies Record<Activity, keyof AssessmentRow>;
+
+    function assessmentToCalc(assessment: AssessmentRow): CalcData {
+        return {
+            key: crypto.randomUUID(),
+            id: assessment.id,
+            player: {
+                name: assessment.name,
+                metrics: {
+                    age: assessment.age,
+                    weight: assessment.weight,
+                    gender: assessment.gender as Gender,
+                },
+            },
+            activityPerformances: Object.values(Activity).map((a) => ({
+                activity: a,
+                performance: (assessment[PERF_COLUMN[a]] as number | null) ?? 0,
+            })),
+        };
+    }
+
+    function errorMessage(err: unknown): string {
+        const value = (err as { value?: { error?: string } })?.value;
+        return (
+            value?.error ??
+            (err instanceof Error ? err.message : "Unknown error")
+        );
+    }
+
+    async function loadAssessments() {
+        loading = true;
+        loadError = null;
+        try {
+            const res = await api.assessments.me.get();
+            if (res.error) throw res.error;
+            calculations = (res.data ?? []).map(assessmentToCalc);
+        } catch (err) {
+            loadError = errorMessage(err);
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function saveCalculation(calculation: CalcData) {
+        calculation.saving = true;
+        calculation.saveError = undefined;
+        try {
+            const res = await api.assessments.me.post({
+                player: calculation.player,
+                activityPerformances: calculation.activityPerformances,
+            });
+            if (res.error) throw res.error;
+            calculation.id = res.data?.id;
+        } catch (err) {
+            calculation.saveError = errorMessage(err);
+        } finally {
+            calculation.saving = false;
+        }
+    }
+
+    async function deleteCalculation(calculation: CalcData, index: number) {
+        if (!calculation.id) {
+            calculations.splice(index, 1);
+            return;
+        }
+
+        calculation.deleting = true;
+        calculation.deleteError = undefined;
+        try {
+            const res = await api.assessments.me({ id: calculation.id }).delete();
+            if (res.error) throw res.error;
+            calculations.splice(index, 1);
+        } catch (err) {
+            calculation.deleteError = errorMessage(err);
+        } finally {
+            calculation.deleting = false;
+        }
+    }
+
+    onMount(loadAssessments);
 
     $effect(() => {
         for (const calculation of calculations) {
@@ -39,19 +141,9 @@
         }
     });
 
-    $effect(() => {
+    const createCalculation = function (name: string): CalcData {
-        const savedCalcs = localStorage.getItem("calculations");
-        if (savedCalcs) calculations = JSON.parse(savedCalcs);
-    });
-
-    $effect(() => {
-        localStorage.setItem("calculations", JSON.stringify(calculations));
-    });
-
-    $inspect(calculations[0]);
-
-    const createCalculation = function (name: string) {
         return {
+            key: crypto.randomUUID(),
             player: {
                 name: name,
                 metrics: {
@@ -67,21 +159,6 @@
         };
     };
 
-    function downloadObject(obj: unknown, filename = "data.json") {
-        const json = JSON.stringify(obj, null, 2);
-        const blob = new Blob([json], { type: "application/json" });
-        const url = URL.createObjectURL(blob);
-
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-
-        a.remove();
-        URL.revokeObjectURL(url);
-    }
-
     const formatMs = (ms: number) => {
         const total = Math.floor(ms / 1000);
         const m = Math.floor(total / 60);
@@ -149,7 +226,15 @@
     };
 </script>
 
-<div class="mt-5 mb-5 flex w-full">
+<div class="mt-5 mb-5 flex w-full items-center">
+    <button
+        onclick={loadAssessments}
+        class="btn btn-secondary btn-sm"
+        disabled={loading}
+    >
+        {loading ? "Refreshing..." : "Refresh"}
+    </button>
+
     <div class="ml-auto">
         <button
             onclick={() =>
@@ -158,17 +243,19 @@
                 )}
             class="btn btn-primary">New</button
         >
-        <button
-            onclick={() => downloadObject(calculations)}
-            class="btn btn-secondary">Export</button
-        >
     </div>
 </div>
 
+{#if loadError}
+    <div role="alert" class="alert alert-error w-full mb-4">
+        <span>{loadError}</span>
+    </div>
+{/if}
+
 <section
     class="w-full px-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
 >
-    {#each calculations as calculation, index}
+    {#each calculations as calculation, index (calculation.key)}
         <div
             class="card card-compact bg-base-200 p-4 shadow-lg max-w-sm w-full"
         >
@@ -192,7 +279,7 @@
                         </div>
                     </li>
 
-                    {#each Object.values(Attribute) as attribute}
+                    {#each Object.values(Attribute) as attribute (attribute)}
                         <li class="p-3">
                             <div class="flex items-center justify-between">
                                 <div class="opacity-80 text-sm">
@@ -223,7 +310,7 @@
                                 class="select select-bordered select-sm w-full"
                                 bind:value={calculation.player.metrics.gender}
                             >
-                                {#each Object.values(Gender) as gender}
+                                {#each Object.values(Gender) as gender (gender)}
                                     <option value={gender}>{gender}</option>
                                 {/each}
                             </select>
@@ -247,7 +334,7 @@
                                 class="select select-bordered select-sm w-full"
                                 bind:value={calculation.player.metrics.weight}
                             >
-                                {#each range(400) as weight}
+                                {#each range(400) as weight (weight)}
                                     <option value={lbToKg(weight)}
                                         >{weight}</option
                                     >
@@ -266,7 +353,7 @@
                         ))}
                 >
                     <div class="grid grid-cols-2 gap-3">
-                        {#each calculation.activityPerformances as activityPerformance}
+                        {#each calculation.activityPerformances as activityPerformance (activityPerformance.activity)}
                             <label class="form-control space-y-1">
                                 <span class="label mb-1 text-xs">
                                     {activityPerformance.activity}
@@ -275,7 +362,7 @@
                                     class="select select-bordered select-sm w-full"
                                     bind:value={activityPerformance.performance}
                                 >
-                                    {#each performanceOptionsFromActivity(activityPerformance.activity) as option}
+                                    {#each performanceOptionsFromActivity(activityPerformance.activity) as option (option.value)}
                                         <option value={option.value}
                                             >{option.name}</option
                                         >
@@ -285,13 +372,36 @@
                         {/each}
                     </div>
                 </fieldset>
+
+                {#if calculation.saveError}
+                    <div role="alert" class="alert alert-error alert-sm">
+                        <span class="text-xs">{calculation.saveError}</span>
+                    </div>
+                {/if}
+                {#if calculation.deleteError}
+                    <div role="alert" class="alert alert-error alert-sm">
+                        <span class="text-xs">{calculation.deleteError}</span>
+                    </div>
+                {/if}
+            </div>
+            <div class="flex gap-2">
+                <button
+                    onclick={() => saveCalculation(calculation)}
+                    disabled={calculation.saving}
+                    class="btn btn-primary btn-sm flex-1"
+                >
+                    {calculation.saving ? "Saving..." : "Save"}
+                </button>
+                <button
+                    onclick={() =>
+                        confirm(`Remove ${calculation.player.name}?`) &&
+                        deleteCalculation(calculation, index)}
+                    disabled={calculation.deleting}
+                    class="btn btn-error btn-sm w-1/4"
+                >
+                    {calculation.deleting ? "..." : "Delete"}
+                </button>
             </div>
-            <button
-                onclick={() =>
-                    confirm(`Delete ${calculation.player.name}?`) &&
-                    calculations.splice(index, 1)}
-                class="btn btn-error btn-sm w-1/4">Delete</button
-            >
         </div>
     {/each}
 </section>