Lib: Simplify RaceResultCard

src/lib/components/cards/RaceResultCard.svelte

@@ -7,96 +7,69 @@
     type ModalStore,
   } from "@skeletonlabs/skeleton";
   import { Button, Card, Dropdown } from "$lib/components";
-  import type { Driver, Race, RaceResult } from "$lib/schema";
+  import type { Driver, Race, RaceResult, SkeletonData } from "$lib/schema";
   import { get_by_value } from "$lib/database";
   import { race_dropdown_options } from "$lib/dropdown";
   import { enhance } from "$app/forms";
 
   interface RaceResultCardProps {
+    /** Data passed from the page context */
+    data: SkeletonData & { results: RaceResult[] };
+
     /** The [RaceResult] object used to prefill values. */
     result?: RaceResult;
-
-    /** The list of [Drivers] for the driver selection */
-    drivers: Driver[];
-
-    /** The list of [Races] for the race selection + PXX display */
-    races: Race[];
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** Require all inputs if [true] */
-    require_inputs?: boolean;
   }
 
-  let {
-    result = undefined,
-    drivers,
-    races,
-    disable_inputs = false,
-    require_inputs = false,
-  }: RaceResultCardProps = $props();
+  let { data, result = undefined }: RaceResultCardProps = $props();
 
-  // TODO: This does not work at all. Why does it work for other cards???
-  //       Everything exists here, but in the markup it is undefined???
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
-    disable_inputs = meta.disable_inputs;
-    drivers = meta.drivers;
-    races = meta.races;
+    data = meta.data;
     result = meta.result;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
   }
 
-  const currentrace: Race | undefined = get_by_value(races, "id", result?.race ?? "Invalid");
+  const required: boolean = $derived(!result);
+  const disabled: boolean = $derived(!data.admin);
+  const labelwidth: string = "70px";
+  const currentrace: Promise<Race | undefined> = $derived.by(async () =>
+    get_by_value(await data.races, "id", result?.race ?? "Invalid"),
+  );
 
-  // TODO: I have no fucking idea why this solves things...
-  //       Without this, the original values passed through the modalStore
-  //       are undefined within the markup, but not within the <script>...
-  const disable_inputs2 = disable_inputs;
-  const drivers2 = drivers;
-  const races2 = races;
-  const result2 = result;
-  const require_inputs2 = require_inputs;
+  const pxxs_options: Promise<AutocompleteOption<string>[]> = $derived.by(async () =>
+    (await data.drivers).map((driver: Driver) => {
+      return {
+        // NOTE: Because Skeleton displays the values inside the autocomplete input,
+        //       we have to supply the driver code twice and manage a list of ids manually (ugh)
+        label: driver.code,
+        value: driver.code,
+      };
+    }),
+  );
 
-  let race_select_value: string = currentrace?.id ?? "";
+  const pxxs_whitelist: Promise<string[]> = $derived.by(async () =>
+    (await data.drivers).map((driver: Driver) => {
+      return driver.code;
+    }),
+  );
+
+  let race_select_value: string = $state(result?.race ?? "");
 
   let pxxs_input: string = $state("");
-  let pxxs_chips: string[] = $state(
-    result2?.pxxs.map(
-      (id: string, index: number) =>
-        `P${(currentrace?.pxx ?? -10) + index - 3}: ${get_by_value(drivers2, "id", id)?.code ?? "Invalid"}`,
-    ) ?? [],
-  );
+  let pxxs_chips: string[] = $state([]);
+
   let dnfs_input: string = $state("");
-  let dnfs_chips: string[] = $state(
-    result2?.dnfs.map((id: string) => get_by_value(drivers2, "id", id)?.code ?? "Invalid") ?? [],
-  );
+  let dnfs_chips: string[] = $state([]);
 
   // This is the actual data that gets sent through the form
-  let pxxs_ids: string[] = $state(result2?.pxxs ?? []);
-  let dnfs_ids: string[] = $state(result2?.dnfs ?? []);
+  let pxxs_ids: string[] = $state(result?.pxxs ?? []);
+  let dnfs_ids: string[] = $state(result?.dnfs ?? []);
 
-  const pxxs_options: AutocompleteOption<string>[] = drivers2.map((driver: Driver) => {
-    return {
-      // NOTE: Because Skeleton displays the values inside the autocomplete input,
-      //       we have to supply the driver code twice and manage a list of ids manually (ugh)
-      label: driver.code,
-      value: driver.code,
-    };
-  });
-
-  const pxxs_whitelist: string[] = drivers2.map((driver: Driver) => {
-    return driver.code;
-  });
-
-  const on_pxxs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
-    if (disable_inputs2) return;
+  const on_pxxs_chip_select = async (
+    event: CustomEvent<AutocompleteOption<string>>,
+  ): Promise<void> => {
+    if (disabled) return;
 
     // Can only select 7 drivers
     if (pxxs_chips.length >= 7) return;
@@ -105,27 +78,34 @@
     if (pxxs_chips.some((label: string) => label.endsWith(event.detail.value))) return;
 
     // Manage labels that are displayed
-    pxxs_chips.push(`P${(currentrace?.pxx ?? -10) + pxxs_chips.length - 3}: ${event.detail.value}`);
+    pxxs_chips.push(
+      `P${((await currentrace)?.pxx ?? -10) + pxxs_chips.length - 3}: ${event.detail.value}`,
+    );
     pxxs_input = "";
 
     // Manage ids that are submitted via form
-    const id: string = get_by_value(drivers2, "code", event.detail.value)?.id ?? "Invalid";
+    const id: string =
+      get_by_value(await data.drivers, "code", event.detail.value)?.id ?? "Invalid";
     if (!pxxs_ids.includes(id)) {
       pxxs_ids.push(id);
     }
   };
 
-  const on_pxxs_chip_remove = (event: CustomEvent): void => {
+  const on_pxxs_chip_remove = async (event: CustomEvent): Promise<void> => {
     pxxs_ids.splice(event.detail.chipIndex, 1);
 
-    pxxs_chips = pxxs_chips.map(
-      (label: string, index: number) =>
-        `P${(currentrace?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`,
+    pxxs_chips = await Promise.all(
+      pxxs_chips.map(
+        async (label: string, index: number) =>
+          `P${((await currentrace)?.pxx ?? -10) + index - 3}: ${label.split(" ").pop()}`,
+      ),
     );
   };
 
-  const on_dnfs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
-    if (disable_inputs2) return;
+  const on_dnfs_chip_select = async (
+    event: CustomEvent<AutocompleteOption<string>>,
+  ): Promise<void> => {
+    if (disabled) return;
 
     // Can only select a driver once
     if (dnfs_chips.includes(event.detail.value)) return;
@@ -135,118 +115,135 @@
     dnfs_input = "";
 
     // Manage ids that are submitted via form
-    const id: string = get_by_value(drivers2, "code", event.detail.value)?.id ?? "Invalid";
+    const id: string =
+      get_by_value(await data.drivers, "code", event.detail.value)?.id ?? "Invalid";
     if (!dnfs_ids.includes(id)) {
       dnfs_ids.push(id);
     }
   };
 
-  const on_dnfs_chip_remove = (event: CustomEvent): void => {
+  const on_dnfs_chip_remove = async (event: CustomEvent): Promise<void> => {
     dnfs_ids.splice(event.detail.chipIndex, 1);
   };
+
+  // Set the pxxs/dnfs states once the drivers are loaded
+  data.drivers.then(async (drivers: Driver[]) => {
+    pxxs_chips = await Promise.all(
+      result?.pxxs.map(
+        async (id: string, index: number) =>
+          `P${((await currentrace)?.pxx ?? -10) + index - 3}: ${get_by_value(drivers, "id", id)?.code ?? "Invalid"}`,
+      ) ?? [],
+    );
+
+    dnfs_chips =
+      result?.dnfs.map((id: string) => get_by_value(drivers, "id", id)?.code ?? "Invalid") ?? [];
+  });
 </script>
 
 <Card width="w-full sm:w-[512px]">
-  <form method="POST" enctype="multipart/form-data" use:enhance>
+  <form method="POST" enctype="multipart/form-data" use:enhance onsubmit={() => modalStore.close()}>
     <!-- This is also disabled, because the ID should only be -->
     <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if result2 && !disable_inputs2}
-      <input name="id" type="hidden" value={result2.id} />
+    {#if result && !disabled}
+      <input name="id" type="hidden" value={result.id} />
     {/if}
 
     <!-- Send the input chips ids -->
     {#each pxxs_ids as pxxs_id}
-      <input name="pxxs" type="hidden" disabled={disable_inputs2} value={pxxs_id} />
+      <input name="pxxs" type="hidden" {disabled} value={pxxs_id} />
     {/each}
     {#each dnfs_ids as dnfs_id}
-      <input name="dnfs" type="hidden" disabled={disable_inputs2} value={dnfs_id} />
+      <input name="dnfs" type="hidden" {disabled} value={dnfs_id} />
     {/each}
 
     <!-- Race select input -->
-    <Dropdown
-      name="race"
-      input_variable={race_select_value}
-      options={race_dropdown_options(races2)}
-      labelwidth="70px"
-      disabled={disable_inputs2}
-      required={require_inputs2}
-    >
-      Race
-    </Dropdown>
+    {#await data.races then races}
+      <Dropdown
+        name="race"
+        input_variable={race_select_value}
+        options={race_dropdown_options(races)}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        Race
+      </Dropdown>
+    {/await}
 
     <div class="mt-2 flex flex-col gap-2">
       <!-- PXXs autocomplete chips -->
-      <InputChip
-        bind:input={pxxs_input}
-        bind:value={pxxs_chips}
-        whitelist={pxxs_whitelist}
-        allowUpperCase
-        placeholder="Select P{(currentrace?.pxx ?? -10) - 3} to P{(currentrace?.pxx ?? -10) + 3}..."
-        name="pxxs_codes"
-        disabled={disable_inputs2}
-        required={require_inputs2}
-        on:remove={on_pxxs_chip_remove}
-      />
+      {#await currentrace then current}
+        {#await pxxs_whitelist then whitelist}
+          <InputChip
+            bind:input={pxxs_input}
+            bind:value={pxxs_chips}
+            {whitelist}
+            allowUpperCase
+            placeholder="Select P{(current?.pxx ?? -10) - 3} to P{(current?.pxx ?? -10) + 3}..."
+            name="pxxs_codes"
+            {disabled}
+            {required}
+            on:remove={on_pxxs_chip_remove}
+          />
+        {/await}
+      {/await}
       <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
-        <Autocomplete
-          bind:input={pxxs_input}
-          options={pxxs_options}
-          denylist={pxxs_chips}
-          on:selection={on_pxxs_chip_select}
-        />
+        {#await pxxs_options then options}
+          <Autocomplete
+            bind:input={pxxs_input}
+            {options}
+            denylist={pxxs_chips}
+            on:selection={on_pxxs_chip_select}
+          />
+        {/await}
       </div>
 
       <!-- DNFs autocomplete chips -->
-      <InputChip
-        bind:input={dnfs_input}
-        bind:value={dnfs_chips}
-        whitelist={pxxs_whitelist}
-        allowUpperCase
-        placeholder="Select DNFs..."
-        name="dnfs_codes"
-        disabled={disable_inputs2}
-        on:remove={on_dnfs_chip_remove}
-      />
-      <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
-        <Autocomplete
+      {#await pxxs_whitelist then whitelist}
+        <InputChip
           bind:input={dnfs_input}
-          options={pxxs_options}
-          denylist={dnfs_chips}
-          on:selection={on_dnfs_chip_select}
+          bind:value={dnfs_chips}
+          {whitelist}
+          allowUpperCase
+          placeholder="Select DNFs..."
+          name="dnfs_codes"
+          {disabled}
+          on:remove={on_dnfs_chip_remove}
         />
+      {/await}
+      <div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
+        {#await pxxs_options then options}
+          <Autocomplete
+            bind:input={dnfs_input}
+            {options}
+            denylist={dnfs_chips}
+            on:selection={on_dnfs_chip_select}
+          />
+        {/await}
       </div>
 
       <!-- Save/Delete buttons -->
       <div class="flex items-center justify-end gap-2">
-        {#if result2}
+        {#if result}
           <Button
             formaction="?/update_raceresult"
             color="secondary"
-            disabled={disable_inputs2}
+            {disabled}
             submit
             width="w-1/2"
-            onclick={() => modalStore.close()}
           >
             Save
           </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs2}
-            formaction="?/delete_raceresult"
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
+          <Button formaction="?/delete_raceresult" color="primary" {disabled} submit width="w-1/2">
             Delete
           </Button>
         {:else}
           <Button
             formaction="?/create_raceresult"
             color="tertiary"
+            {disabled}
             submit
             width="w-full"
-            disabled={disable_inputs2}
-            onclick={() => modalStore.close()}
           >
             Create Result
           </Button>

src/routes/data/raceresults/+page.svelte

@@ -4,10 +4,30 @@
   import { Button, Table, type TableColumn } from "$lib/components";
   import { get_by_value } from "$lib/database";
   import { PXX_COLORS } from "$lib/config";
+  import type { RaceResult } from "$lib/schema";
 
   let { data }: { data: PageData } = $props();
 
-  const results_columns: TableColumn[] = [
+  const modalStore: ModalStore = getModalStore();
+
+  const result_handler = async (event: Event, id?: string) => {
+    const result: RaceResult | undefined = get_by_value(data.results, "id", id ?? "Invalid");
+
+    if (id && !result) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "raceResultCard",
+      meta: {
+        data,
+        result,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const results_columns: TableColumn[] = $derived([
     {
       data_value_name: "race",
       label: "Step",
@@ -58,44 +78,12 @@
         return dnfs_codes.join("");
       },
     },
-  ];
-
-  const modalStore: ModalStore = getModalStore();
-
-  const results_handler = async (event: Event, id: string) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceResultCard",
-      meta: {
-        disable_inputs: !data.admin,
-        drivers: await data.drivers,
-        races: await data.races,
-        result: get_by_value(data.results, "id", id),
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_result_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "raceResultCard",
-      meta: {
-        disable_inputs: !data.admin,
-        drivers: await data.drivers,
-        races: await data.races,
-        require_inputs: true,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
+  ]);
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_result_handler} shadow>
+  <Button width="w-full" color="tertiary" onclick={result_handler} shadow>
     <span class="font-bold">Create Race Result</span>
   </Button>
 </div>
-<Table data={data.results} columns={results_columns} handler={results_handler} />
+<Table data={data.results} columns={results_columns} handler={result_handler} />