Lib: Simplify DriverCard

src/lib/components/cards/DriverCard.svelte

@@ -7,185 +7,138 @@
     type ModalStore,
   } from "@skeletonlabs/skeleton";
   import { Button, Input, Card, Dropdown } from "$lib/components";
-  import type { Driver, Team } from "$lib/schema";
+  import type { Driver } from "$lib/schema";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
   import { team_dropdown_options } from "$lib/dropdown";
   import { enhance } from "$app/forms";
+  import { get_driver_headshot_template } from "$lib/database";
 
   interface DriverCardProps {
+    /** Data passed from the page context */
+    data: any;
+
     /** The [Driver] object used to prefill values. */
-    driver?: Driver | undefined;
+    driver?: Driver;
-
-    /** The teams (for the dropdown options) */
-    teams: Team[];
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
-
-    /** The [src] of the driver headshot template preview */
-    headshot_template?: string;
-
-    /** The value this component's team select dropdown will bind to */
-    // TODO: Move this into this component? Why am I passing it from the outside?
-    //       This also applies to the other card components...
-    team_select_value: string;
-
-    /** The value this component's active switch will bind to */
-    active_value: boolean;
   }
 
-  let {
+  let { data, driver = undefined }: DriverCardProps = $props();
-    driver = undefined,
-    teams,
-    disable_inputs = false,
-    require_inputs = false,
-    headshot_template = undefined,
-    team_select_value,
-    active_value,
-  }: DriverCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     driver = meta.driver;
-    teams = meta.teams;
-    team_select_value = meta.team_select_value;
-    active_value = meta.active_value;
-    disable_inputs = meta.disable_inputs;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    headshot_template = meta.headshot_template;
   }
+
+  const required: boolean = $derived(!driver);
+  const disabled: boolean = $derived(!data.admin);
+  const labelwidth: string = "120px";
+
+  let team_select_value: string = $state(driver?.team ?? "");
+  let active_value: boolean = $state(driver?.active ?? true);
 </script>
 
-<Card
+{#await data.graphics then graphics}
-  imgsrc={driver?.headshot_url ?? headshot_template}
+  <Card
-  imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
+    imgsrc={driver?.headshot_url ?? get_driver_headshot_template(graphics)}
-  width="w-full sm:w-auto"
+    imgid="headshot_preview"
-  imgwidth={DRIVER_HEADSHOT_WIDTH}
+    width="w-full sm:w-auto"
-  imgheight={DRIVER_HEADSHOT_HEIGHT}
+    imgwidth={DRIVER_HEADSHOT_WIDTH}
-  imgonclick={(event: Event) => modalStore.close()}
+    imgheight={DRIVER_HEADSHOT_HEIGHT}
->
+    imgonclick={(event: Event) => modalStore.close()}
-  <form method="POST" enctype="multipart/form-data" use:enhance>
+  >
-    <!-- This is also disabled, because the ID should only be -->
+    <form
-    <!-- "leaked" to users that are allowed to use the inputs -->
+      method="POST"
-    {#if driver && !disable_inputs}
+      enctype="multipart/form-data"
-      <input name="id" type="hidden" value={driver.id} />
+      use:enhance
-    {/if}
+      onsubmit={() => modalStore.close()}
+    >
+      <!-- This is also disabled, because the ID should only be -->
+      <!-- "leaked" to users that are allowed to use the inputs -->
+      {#if driver && !disabled}
+        <input name="id" type="hidden" value={driver.id} />
+      {/if}
 
-    <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-2">
-      <!-- Driver name input -->
+        <!-- Driver name input -->
-      <Input
+        <Input name="firstname" value={driver?.firstname ?? ""} {labelwidth} {disabled} {required}>
-        id="driver_first_name_{driver?.id ?? 'create'}"
+          First Name
-        name="firstname"
+        </Input>
-        value={driver?.firstname ?? ""}
+        <Input
-        autocomplete="off"
+          name="lastname"
-        labelwidth="120px"
+          value={driver?.lastname ?? ""}
-        disabled={disable_inputs}
+          autocomplete="off"
-        required={require_inputs}
+          {labelwidth}
-        >First Name
+          {disabled}
-      </Input>
+          {required}
-      <Input
-        id="driver_last_name_{driver?.id ?? 'create'}"
-        name="lastname"
-        value={driver?.lastname ?? ""}
-        autocomplete="off"
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
-        >Last Name
-      </Input>
-      <Input
-        id="driver_code_{driver?.id ?? 'create'}"
-        name="code"
-        value={driver?.code ?? ""}
-        autocomplete="off"
-        minlength={3}
-        maxlength={3}
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
-        >Driver Code
-      </Input>
-
-      <!-- Driver team input -->
-      <Dropdown
-        name="team"
-        input_variable={team_select_value}
-        options={team_dropdown_options(teams)}
-        labelwidth="120px"
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        Team
-      </Dropdown>
-
-      <!-- Headshot upload -->
-      <FileDropzone
-        name="headshot"
-        id="driver_headshot_{driver?.id ?? 'create'}"
-        onchange={get_image_preview_event_handler(
-          `update_driver_headshot_preview_${driver?.id ?? "create"}`,
-        )}
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        <svelte:fragment slot="message"
-          ><span class="font-bold">Upload Headshot</span></svelte:fragment
         >
-      </FileDropzone>
+          Last Name
+        </Input>
+        <Input
+          name="code"
+          value={driver?.code ?? ""}
+          autocomplete="off"
+          minlength={3}
+          maxlength={3}
+          {labelwidth}
+          {disabled}
+          {required}
+        >
+          Driver Code
+        </Input>
 
-      <!-- Save/Delete buttons -->
+        <!-- Driver team input -->
-      <div class="flex items-center justify-end gap-2">
+        {#await data.teams then teams}
-        <div class="mr-auto">
+          <Dropdown
-          <SlideToggle
+            name="team"
-            name="active"
+            input_variable={team_select_value}
-            background="bg-primary-500"
+            options={team_dropdown_options(teams)}
-            active="bg-tertiary-500"
+            {labelwidth}
-            bind:checked={active_value}
+            {disabled}
-            disabled={disable_inputs}
+            {required}
-          />
+          >
+            Team
+          </Dropdown>
+        {/await}
+
+        <!-- Headshot upload -->
+        <FileDropzone
+          name="headshot"
+          onchange={get_image_preview_event_handler("headshot_preview")}
+          {disabled}
+          {required}
+        >
+          <svelte:fragment slot="message">
+            <span class="font-bold">Upload Headshot</span>
+          </svelte:fragment>
+        </FileDropzone>
+
+        <!-- Save/Delete buttons -->
+        <div class="flex items-center justify-end gap-2">
+          <div class="mr-auto">
+            <SlideToggle
+              name="active"
+              background="bg-primary-500"
+              active="bg-tertiary-500"
+              bind:checked={active_value}
+              {disabled}
+            />
+          </div>
+          {#if driver}
+            <Button formaction="?/update_driver" color="secondary" {disabled} submit width="w-1/2">
+              Save
+            </Button>
+            <Button formaction="?/delete_driver" color="primary" {disabled} submit width="w-1/2">
+              Delete
+            </Button>
+          {:else}
+            <Button formaction="?/create_driver" color="tertiary" {disabled} submit width="w-full">
+              Create Driver
+            </Button>
+          {/if}
         </div>
-        {#if driver}
-          <Button
-            formaction="?/update_driver"
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
-            Save
-          </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_driver"
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
-            Delete
-          </Button>
-        {:else}
-          <Button
-            formaction="?/create_driver"
-            color="tertiary"
-            submit
-            width="w-full"
-            disabled={disable_inputs}
-            onclick={() => modalStore.close()}
-          >
-            Create Driver
-          </Button>
-        {/if}
       </div>
-    </div>
+    </form>
-  </form>
+  </Card>
-</Card>
+{/await}

src/routes/data/season/drivers/+page.svelte

@@ -1,24 +1,31 @@
 <script lang="ts">
   import { Button, type TableColumn, Table } from "$lib/components";
-  import { get_by_value, get_driver_headshot_template } from "$lib/database";
+  import { get_by_value } from "$lib/database";
   import type { Driver, Team } from "$lib/schema";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
 
   let { data }: { data: PageData } = $props();
 
-  const update_driver_team_select_values: { [key: string]: string } = $state({}); // <driver.id, team.id>
+  const modalStore: ModalStore = getModalStore();
-  const update_driver_active_values: { [key: string]: boolean } = $state({});
+  const driver_handler = async (event: Event, id?: string) => {
-  data.drivers.then((drivers: Driver[]) =>
+    const driver: Driver | undefined = get_by_value(await data.drivers, "id", id ?? "Invalid");
-    drivers.forEach((driver: Driver) => {
-      update_driver_team_select_values[driver.id] = driver.team;
-      update_driver_active_values[driver.id] = driver.active;
-    }),
-  );
-  update_driver_team_select_values["create"] = "";
-  update_driver_active_values["create"] = true;
 
-  const drivers_columns: TableColumn[] = [
+    if (id && !driver) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "driverCard",
+      meta: {
+        data,
+        driver,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const drivers_columns: TableColumn[] = $derived([
     {
       data_value_name: "code",
       label: "Driver Code",
@@ -32,9 +39,7 @@
       label: "Team",
       valuefun: async (value: string): Promise<string> => {
         const team: Team | undefined = get_by_value(await data.teams, "id", value);
-        return team
+        return `<span class='badge border mr-2' style='color: ${team?.color ?? "#FFFFFF"}; background: ${team?.color ?? "#FFFFFF"};'>C</span>${team?.name ?? "Invalid"}`;
-          ? `<span class='badge border mr-2' style='color: ${team.color}; background: ${team.color};'>C</span>${team.name}`
-          : "<span class='badge variant-filled-primary'>Invalid</span>";
       },
     },
     {
@@ -43,53 +48,14 @@
       valuefun: async (value: boolean): Promise<string> =>
         `<span class='badge variant-filled-${value ? "tertiary" : "primary"} text-center' style='width: 36px;'>${value ? "Yes" : "No"}</span>`,
     },
-  ];
+  ]);
-
-  const modalStore: ModalStore = getModalStore();
-
-  /** Shows the DriverCard modal to edit the clicked driver */
-  const drivers_handler = async (event: Event, id: string) => {
-    const driver: Driver | undefined = get_by_value(await data.drivers, "id", id);
-    if (!driver) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "driverCard",
-      meta: {
-        driver: driver,
-        teams: await data.teams,
-        team_select_value: update_driver_team_select_values[driver.id],
-        active_value: update_driver_active_values[driver.id],
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_driver_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "driverCard",
-      meta: {
-        teams: await data.teams,
-        team_select_value: update_driver_team_select_values["create"],
-        active_value: update_driver_active_values["create"],
-        disable_inputs: !data.admin,
-        require_inputs: true,
-        headshot_template: get_driver_headshot_template(await data.graphics),
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_driver_handler} shadow>
+  <Button width="w-full" color="tertiary" onclick={driver_handler} shadow>
     <span class="font-bold">Create New Driver</span>
   </Button>
 </div>
 {#await data.drivers then drivers}
-  <Table data={drivers} columns={drivers_columns} handler={drivers_handler} />
+  <Table data={drivers} columns={drivers_columns} handler={driver_handler} />
 {/await}