Lib: Fix readonly + required in dropdown component by preventing keypress events

src/lib/components/DriverCard.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import { get_image_preview_event_handler } from "$lib/image";
+  import { FileDropzone } from "@skeletonlabs/skeleton";
+  import Card from "./Card.svelte";
+  import Button from "./Button.svelte";
+  import type { Driver } from "$lib/schema";
+  import Input from "./Input.svelte";
+  import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
+
+  interface DriverCardProps {
+    /** The [Driver] object used to prefill values. */
+    driver?: Driver | undefined;
+
+    /** Disable all inputs if [true] */
+    disable_inputs?: boolean;
+
+    /** Require all inputs if [true] */
+    require_inputs?: boolean;
+
+    /** The [src] of the team logo template preview */
+    logo_template?: string;
+
+    team_select_values: { [key: string]: string };
+
+    team_select_options: DropdownOption[];
+  }
+
+  let {
+    driver = undefined,
+    disable_inputs = false,
+    require_inputs = false,
+    logo_template = "",
+    team_select_values,
+    team_select_options,
+  }: DriverCardProps = $props();
+</script>
+
+<Card
+  imgsrc={driver?.headshot_url ?? logo_template}
+  imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
+>
+  <form method="POST" enctype="multipart/form-data">
+    <!-- This is also disabled, because the ID should only be -->
+    <!-- "leaked" to users that are allowed to use the inputs -->
+    {#if driver && !disable_inputs}
+      <input name="id" type="hidden" value={driver.id} />
+    {/if}
+
+    <div class="flex flex-col gap-2">
+      <!-- Driver name input -->
+      <Input
+        id="driver_first_name_{driver?.id ?? 'create'}"
+        name="firstname"
+        value={driver?.firstname ?? ""}
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}>First Name</Input
+      >
+      <Input
+        id="driver_last_name_{driver?.id ?? 'create'}"
+        name="lastname"
+        value={driver?.lastname ?? ""}
+        labelwidth="120px"
+        disabled={disable_inputs}
+        required={require_inputs}>Last Name</Input
+      >
+      <Input
+        id="driver_code_{driver?.id ?? 'create'}"
+        name="code"
+        value={driver?.code ?? ""}
+        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_values[driver?.id ?? "create"]}
+        options={team_select_options}
+        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"><b>Upload Headshot</b> or Drag and Drop</svelte:fragment>
+      </FileDropzone>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex justify-end gap-2">
+        {#if driver}
+          <Button formaction="?/update_driver" color="secondary" disabled={disable_inputs} submit
+            >Save Changes</Button
+          >
+          <Button color="primary" submit disabled={disable_inputs} formaction="?/delete_driver"
+            >Delete</Button
+          >
+        {:else}
+          <Button formaction="?/create_driver" color="tertiary" submit>Create Driver</Button>
+        {/if}
+      </div>
+    </div>
+  </form>
+</Card>

src/lib/components/Dropdown.svelte

@@ -69,7 +69,7 @@
   <input
     use:popup={popup_settings}
     type="text"
-    readonly
+    onkeypress={(event: Event) => event.preventDefault()}
     value={get_label(input_variable) ?? placeholder}
     {...restProps}
   />

src/lib/components/TeamCard.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { get_image_preview_event_handler } from "$lib/image";
+  import { FileDropzone } from "@skeletonlabs/skeleton";
+  import Card from "./Card.svelte";
+  import Button from "./Button.svelte";
+  import type { Team } from "$lib/schema";
+  import Input from "./Input.svelte";
+
+  interface TeamCardProps {
+    /** The [Team] object used to prefill values. */
+    team?: Team | undefined;
+
+    /** Disable all inputs if [true] */
+    disable_inputs?: boolean;
+
+    /** Require all inputs if [true] */
+    require_inputs?: boolean;
+
+    /** The [src] of the team logo template preview */
+    logo_template?: string;
+  }
+
+  let {
+    team = undefined,
+    disable_inputs = false,
+    require_inputs = false,
+    logo_template = "",
+  }: TeamCardProps = $props();
+</script>
+
+<Card
+  imgsrc={team?.logo_url ?? logo_template}
+  imgid="update_team_logo_preview_{team?.id ?? 'create'}"
+>
+  <form method="POST" enctype="multipart/form-data">
+    <!-- This is also disabled, because the ID should only be -->
+    <!-- "leaked" to users that are allowed to use the inputs -->
+    {#if team && !disable_inputs}
+      <input name="id" type="hidden" value={team.id} />
+    {/if}
+
+    <div class="flex flex-col gap-2">
+      <!-- Team name input -->
+      <Input
+        id="team_name_{team?.id ?? 'create'}"
+        name="name"
+        value={team?.name ?? ""}
+        disabled={disable_inputs}
+        required={require_inputs}>Name</Input
+      >
+
+      <!-- Logo upload -->
+      <FileDropzone
+        name="logo"
+        id="team_logo_{team?.id ?? 'create'}"
+        onchange={get_image_preview_event_handler(
+          `update_team_logo_preview_${team?.id ?? "create"}`,
+        )}
+        disabled={disable_inputs}
+        required={require_inputs}
+      >
+        <svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
+      </FileDropzone>
+
+      <!-- Save/Delete buttons -->
+      <div class="flex justify-end gap-2">
+        {#if team}
+          <Button formaction="?/update_team" color="secondary" disabled={disable_inputs} submit
+            >Save Changes</Button
+          >
+          <Button color="primary" submit disabled={disable_inputs} formaction="?/delete_team"
+            >Delete</Button
+          >
+        {:else}
+          <Button formaction="?/create_team" color="tertiary" submit>Create Team</Button>
+        {/if}
+      </div>
+    </div>
+  </form>
+</Card>

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

@@ -8,6 +8,8 @@
   // TODO: Why does this work but import { type DropdownOption } from "$lib/components" does not?
   import type { DropdownOption } from "$lib/components/Dropdown.svelte";
   import { get_by_value } from "$lib/database";
+  import TeamCard from "$lib/components/TeamCard.svelte";
+  import DriverCard from "$lib/components/DriverCard.svelte";
 
   let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -18,11 +20,11 @@
   }
 
   // Maps driver to team: <driver.id, team.id>
-  let create_driver_team_select_value: string = $state("");
   let update_driver_team_select_values: { [key: string]: string } = $state({});
   data.drivers.forEach((driver: Driver) => {
     update_driver_team_select_values[driver.id] = driver.team;
   });
+  update_driver_team_select_values["create"] = "";
 
   const driver_team_select_options: DropdownOption[] = data.teams.map((team: Team) => {
     return { label: team.name, value: team.id } as DropdownOption;
@@ -57,77 +59,15 @@
       <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
         <!-- List all teams inside the database -->
         {#each data.teams as team}
-          <Card imgsrc={team.logo_url} imgid="update_team_logo_preview_{team.id}">
+          <TeamCard {team} disable_inputs={!data.admin} />
-            <form method="POST" enctype="multipart/form-data">
-              {#if data.admin}
-                <input name="id" type="hidden" value={team.id} />
-              {/if}
-
-              <div class="flex flex-col gap-2">
-                <Input id="team_name_{team.id}" name="name" value={team.name} disabled={!data.admin}
-                  >Name</Input
-                >
-
-                <!-- Logo upload -->
-                <FileDropzone
-                  name="logo"
-                  id="team_logo_{team.id}"
-                  onchange={get_image_preview_event_handler(`update_team_logo_preview_${team.id}`)}
-                  disabled={!data.admin}
-                >
-                  <svelte:fragment slot="message"
-                    ><b>Upload Logo</b> or Drag and Drop</svelte:fragment
-                  >
-                </FileDropzone>
-
-                <!-- Buttons -->
-                <div class="flex justify-end gap-2">
-                  <Button formaction="?/update_team" color="secondary" disabled={!data.admin} submit
-                    >Save Changes</Button
-                  >
-                  <Button color="primary" submit disabled={!data.admin} formaction="?/delete_team"
-                    >Delete</Button
-                  >
-                </div>
-              </div>
-            </form>
-          </Card>
         {/each}
 
         <!-- Add a new team -->
         {#if data.admin}
-          <Card
+          <TeamCard
-            imgsrc={get_by_value(data.graphics, "name", "team_template")?.file_url}
+            logo_template={get_by_value(data.graphics, "name", "team_template")?.file_url}
-            imgid="create_team_logo_preview"
+            require_inputs
-          >
+          />
-            <form method="POST" enctype="multipart/form-data">
-              <div class="flex flex-col gap-2">
-                <!-- Team name input -->
-                <Input id="team_name_create" name="name" required>Name</Input>
-
-                <!-- Logo upload -->
-                <FileDropzone
-                  name="logo"
-                  id="team_logo_create"
-                  onchange={get_image_preview_event_handler("create_team_logo_preview")}
-                  disabled={!data.admin}
-                  required
-                >
-                  <svelte:fragment slot="message"
-                    ><b>Upload Logo</b> or Drag and Drop</svelte:fragment
-                  >
-                </FileDropzone>
-
-                <!-- Buttons -->
-                <div class="flex justify-end gap-2">
-                  <!-- By specifying the formaction on the button (instead of action on the form), -->
-                  <!-- we can have multiple buttons with different actions in a single form. -->
-
-                  <Button formaction="?/create_team" color="tertiary" submit>Create Team</Button>
-                </div>
-              </div>
-            </form>
-          </Card>
         {/if}
       </div>
     {:else if current_tab === 1}
@@ -138,130 +78,22 @@
       <div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
         <!-- List all drivers inside the database -->
         {#each data.drivers as driver}
-          <Card imgsrc={driver.headshot_url} imgid="update_driver_headshot_preview_{driver.id}">
+          <DriverCard
-            <form method="POST" enctype="multipart/form-data">
+            {driver}
-              {#if data.admin}
+            disable_inputs={!data.admin}
-                <input name="id" type="hidden" value={driver.id} />
+            team_select_values={update_driver_team_select_values}
-              {/if}
+            team_select_options={driver_team_select_options}
-
+          />
-              <div class="flex flex-col gap-2">
-                <!-- Driver data input -->
-                <Input
-                  id="driver_first_name_{driver.id}"
-                  name="firstname"
-                  value={driver.firstname}
-                  labelwidth="120px"
-                  disabled={!data.admin}>First Name</Input
-                >
-                <Input
-                  id="driver_last_name_{driver.id}"
-                  name="lastname"
-                  value={driver.lastname}
-                  labelwidth="120px"
-                  disabled={!data.admin}>Last Name</Input
-                >
-                <Input
-                  id="driver_code_{driver.id}"
-                  name="code"
-                  value={driver.code}
-                  labelwidth="120px"
-                  disabled={!data.admin}>Driver Code</Input
-                >
-
-                <!-- Driver team input -->
-                <Dropdown
-                  name="team"
-                  input_variable={update_driver_team_select_values[driver.id]}
-                  labelwidth="120px"
-                  disabled={!data.admin}
-                  options={driver_team_select_options}>Team</Dropdown
-                >
-
-                <!-- Headshot upload -->
-                <FileDropzone
-                  name="headshot"
-                  id="driver_headshot_{driver.id}"
-                  onchange={get_image_preview_event_handler(
-                    `update_driver_headshot_preview_${driver.id}`,
-                  )}
-                  disabled={!data.admin}
-                >
-                  <svelte:fragment slot="message"
-                    ><b>Upload Headshot</b> or Drag and Drop</svelte:fragment
-                  >
-                </FileDropzone>
-
-                <!-- Buttons -->
-                <div class="flex justify-end gap-2">
-                  <Button
-                    formaction="?/update_driver"
-                    color="secondary"
-                    disabled={!data.admin}
-                    submit>Save Changes</Button
-                  >
-                  <Button formaction="?/delete_driver" color="primary" disabled={!data.admin} submit
-                    >Delete</Button
-                  >
-                </div>
-              </div>
-            </form>
-          </Card>
         {/each}
 
         <!-- Add a new driver -->
         {#if data.admin}
-          <Card
+          <DriverCard
-            imgsrc={get_by_value(data.graphics, "name", "driver_template")?.file_url}
+            logo_template={get_by_value(data.graphics, "name", "driver_template")?.file_url}
-            imgid="create_driver_headshot_preview"
+            team_select_values={update_driver_team_select_values}
-          >
+            team_select_options={driver_team_select_options}
-            <form method="POST" enctype="multipart/form-data">
+            require_inputs
-              <div class="flex flex-col gap-2">
+          />
-                <!-- Driver data input -->
-                <Input id="driver_first_name_create" name="firstname" labelwidth="120px" required
-                  >First Name</Input
-                >
-                <Input id="driver_last_name_create" name="lastname" labelwidth="120px" required
-                  >Last Name</Input
-                >
-                <Input
-                  id="driver_code_create"
-                  name="code"
-                  labelwidth="120px"
-                  maxlength={3}
-                  minlength={3}
-                  required>Driver Code</Input
-                >
-
-                <!-- Driver team input -->
-                <Dropdown
-                  input_variable={create_driver_team_select_value}
-                  name="team"
-                  labelwidth="120px"
-                  options={driver_team_select_options}
-                  required>Team</Dropdown
-                >
-
-                <!-- Headshot upload -->
-                <FileDropzone
-                  name="headshot"
-                  id="driver_headshot_create"
-                  onchange={get_image_preview_event_handler("create_driver_headshot_preview")}
-                  required
-                >
-                  <svelte:fragment slot="message"
-                    ><b>Upload Headshot</b> or Drag and Drop</svelte:fragment
-                  >
-                </FileDropzone>
-
-                <!-- Buttons -->
-                <div class="flex justify-end gap-2">
-                  <Button formaction="?/create_driver" color="secondary" submit
-                    >Create Driver</Button
-                  >
-                </div>
-              </div>
-            </form>
-          </Card>
         {/if}
       </div>
     {:else if current_tab === 2}