Lib: Simplify TeamCard

src/lib/components/cards/TeamCard.svelte

@@ -5,176 +5,136 @@
   import type { Team } from "$lib/schema";
   import { TEAM_BANNER_HEIGHT, TEAM_BANNER_WIDTH } from "$lib/config";
   import { enhance } from "$app/forms";
+  import { get_team_banner_template, get_team_logo_template } from "$lib/database";
 
   interface TeamCardProps {
+    /** Data from the page context */
+    data: any;
+
     /** 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 banner template preview */
-    banner_template?: string;
-
-    /** The [src] of the team logo template preview */
-    logo_template?: string;
+    team?: Team;
   }
 
-  let {
-    team = undefined,
-    disable_inputs = false,
-    require_inputs = false,
-    banner_template = "",
-    logo_template = "",
-  }: TeamCardProps = $props();
+  let { data, team = undefined }: TeamCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     team = meta.team;
-    disable_inputs = meta.disable_inputs;
-
-    // Stuff thats additionally required for the "create" card
-    require_inputs = meta.require_inputs;
-    banner_template = meta.banner_template;
-    logo_template = meta.logo_template;
   }
 
+  const required: boolean = $derived(!team);
+  const disabled: boolean = $derived(!data.admin);
   const labelwidth: string = "110px";
 
-  let colorpreview: string = $state(team?.color ?? "white");
+  let colorpreview: string = $state(team?.color ?? "Invalid");
 </script>
 
-<Card
-  imgsrc={team?.banner_url ?? banner_template}
-  imgid="update_team_banner_preview_{team?.id ?? 'create'}"
-  width="w-full sm:w-auto"
-  imgwidth={TEAM_BANNER_WIDTH}
-  imgheight={TEAM_BANNER_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 -->
-    <!-- "leaked" to users that are allowed to use the inputs -->
-    {#if team && !disable_inputs}
-      <input name="id" type="hidden" value={team.id} />
-    {/if}
+{#await data.graphics then graphics}
+  <Card
+    imgsrc={team?.banner_url ?? get_team_banner_template(graphics)}
+    imgid="banner_preview"
+    width="w-full sm:w-auto"
+    imgwidth={TEAM_BANNER_WIDTH}
+    imgheight={TEAM_BANNER_HEIGHT}
+    imgonclick={(event: Event) => modalStore.close()}
+  >
+    <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 team && !disabled}
+        <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 ?? ""}
-        {labelwidth}
-        autocomplete="off"
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        Name
-      </Input>
-
-      <!-- Team color input -->
-      <Input
-        id="team_color_{team?.id ?? 'create'}"
-        name="color"
-        value={team?.color ?? ""}
-        {labelwidth}
-        autocomplete="off"
-        placeholder="Enter as '#XXXXXX'"
-        disabled={disable_inputs}
-        required={require_inputs}
-        minlength={7}
-        maxlength={7}
-        onchange={(event: Event) => {
-          colorpreview = (event.target as HTMLInputElement).value;
-        }}
-      >
-        Color
-        <span class="badge ml-2 border" style="color: {colorpreview}; background: {colorpreview}">
-          C
-        </span>
-      </Input>
-
-      <!-- Banner upload -->
-      <FileDropzone
-        name="banner"
-        id="team_banner_{team?.id ?? 'create'}"
-        onchange={get_image_preview_event_handler(
-          `update_team_banner_preview_${team?.id ?? "create"}`,
-        )}
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        <svelte:fragment slot="message"
-          ><span class="font-bold">Upload Banner</span></svelte:fragment
+      <div class="flex flex-col gap-2">
+        <!-- Team name input -->
+        <Input
+          name="name"
+          value={team?.name ?? ""}
+          autocomplete="off"
+          {labelwidth}
+          {disabled}
+          {required}
         >
-      </FileDropzone>
+          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">
-          <div class="inline-flex flex-nowrap items-center gap-2">
-            <span class="font-bold">Upload Logo</span>
-            <LazyImage
-              src={team?.logo_url ?? logo_template}
-              id="update_team_logo_preview_{team?.id ?? 'create'}"
-              imgwidth={32}
-              imgheight={32}
-            />
-          </div>
-        </svelte:fragment>
-      </FileDropzone>
+        <!-- Team color input -->
+        <Input
+          name="color"
+          value={team?.color ?? ""}
+          autocomplete="off"
+          placeholder="Enter as '#XXXXXX'"
+          minlength={7}
+          maxlength={7}
+          oninput={(event: Event) => {
+            colorpreview = (event.target as HTMLInputElement).value;
+          }}
+          {labelwidth}
+          {disabled}
+          {required}
+        >
+          Color
+          <span class="badge ml-2 border" style="color: {colorpreview}; background: {colorpreview}">
+            C
+          </span>
+        </Input>
 
-      <!-- Save/Delete buttons -->
-      <div class="flex justify-end gap-2">
-        {#if team}
-          <Button
-            formaction="?/update_team"
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
-            Save
-          </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_team"
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
-            Delete
-          </Button>
-        {:else}
-          <Button
-            formaction="?/create_team"
-            color="tertiary"
-            submit
-            width="w-full"
-            disabled={disable_inputs}
-            onclick={() => modalStore.close()}
-          >
-            Create Team
-          </Button>
-        {/if}
+        <!-- Banner upload -->
+        <FileDropzone
+          name="banner"
+          onchange={get_image_preview_event_handler("banner_preview")}
+          {disabled}
+          {required}
+        >
+          <svelte:fragment slot="message">
+            <span class="font-bold">Upload Banner</span>
+          </svelte:fragment>
+        </FileDropzone>
+
+        <!-- Logo upload -->
+        <FileDropzone
+          name="logo"
+          onchange={get_image_preview_event_handler("logo_preview")}
+          {disabled}
+          {required}
+        >
+          <svelte:fragment slot="message">
+            <div class="inline-flex flex-nowrap items-center gap-2">
+              <span class="font-bold">Upload Logo</span>
+              <LazyImage
+                src={team?.logo_url ?? get_team_logo_template(graphics)}
+                id="logo_preview"
+                imgwidth={32}
+                imgheight={32}
+              />
+            </div>
+          </svelte:fragment>
+        </FileDropzone>
+
+        <!-- Save/Delete buttons -->
+        <div class="flex justify-end gap-2">
+          {#if team}
+            <Button formaction="?/update_team" color="secondary" {disabled} submit width="w-1/2">
+              Save
+            </Button>
+            <Button formaction="?/delete_team" color="primary" {disabled} submit width="w-1/2">
+              Delete
+            </Button>
+          {:else}
+            <Button formaction="?/create_team" color="tertiary" {disabled} submit width="w-full">
+              Create Team
+            </Button>
+          {/if}
+        </div>
       </div>
-    </div>
-  </form>
-</Card>
+    </form>
+  </Card>
+{/await}

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

@@ -3,11 +3,30 @@
   import type { Team } from "$lib/schema";
   import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
-  import { get_by_value, get_team_banner_template, get_team_logo_template } from "$lib/database";
+  import { get_by_value } from "$lib/database";
 
   let { data }: { data: PageData } = $props();
 
-  const teams_columns: TableColumn[] = [
+  const modalStore: ModalStore = getModalStore();
+  const team_handler = async (event: Event, id?: string) => {
+    const team: Team | undefined = get_by_value(await data.teams, "id", id ?? "Invalid");
+
+    // If we expect to find a team but don't, abort
+    if (id && !team) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "teamCard",
+      meta: {
+        data,
+        team,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const teams_columns: TableColumn[] = $derived([
     {
       data_value_name: "name",
       label: "Name",
@@ -20,47 +39,14 @@
       valuefun: async (value: string): Promise<string> =>
         `<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`,
     },
-  ];
-
-  const modalStore: ModalStore = getModalStore();
-
-  const teams_handler = async (event: Event, id: string) => {
-    const team: Team | undefined = get_by_value(await data.teams, "id", id);
-    if (!team) return;
-
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "teamCard",
-      meta: {
-        team: team,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
-
-  const create_team_handler = async (event: Event) => {
-    const modalSettings: ModalSettings = {
-      type: "component",
-      component: "teamCard",
-      meta: {
-        banner_template: get_team_banner_template(await data.graphics),
-        logo_template: get_team_logo_template(await data.graphics),
-        require_inputs: true,
-        disable_inputs: !data.admin,
-      },
-    };
-
-    modalStore.trigger(modalSettings);
-  };
+  ]);
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_team_handler} shadow>
+  <Button width="w-full" color="tertiary" onclick={team_handler} shadow>
     <span class="font-bold">Create New Team</span>
   </Button>
 </div>
 {#await data.teams then teams}
-  <Table data={teams} columns={teams_columns} handler={teams_handler} />
+  <Table data={teams} columns={teams_columns} handler={team_handler} />
 {/await}