Lib: Simplify TeamCard

src/lib/components/cards/TeamCard.svelte

@@ -5,95 +5,81 @@
   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;
+    team?: Team;
-
-    /** 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;
   }
 
-  let {
+  let { data, team = undefined }: TeamCardProps = $props();
-    team = undefined,
-    disable_inputs = false,
-    require_inputs = false,
-    banner_template = "",
-    logo_template = "",
-  }: 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
+{#await data.graphics then graphics}
-  imgsrc={team?.banner_url ?? banner_template}
+  <Card
-  imgid="update_team_banner_preview_{team?.id ?? 'create'}"
+    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>
+    <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 && !disable_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}
+          {labelwidth}
-        required={require_inputs}
+          {disabled}
+          {required}
         >
           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) => {
+          oninput={(event: Event) => {
             colorpreview = (event.target as HTMLInputElement).value;
           }}
+          {labelwidth}
+          {disabled}
+          {required}
         >
           Color
           <span class="badge ml-2 border" style="color: {colorpreview}; background: {colorpreview}">
@@ -104,34 +90,28 @@
         <!-- Banner upload -->
         <FileDropzone
           name="banner"
-        id="team_banner_{team?.id ?? 'create'}"
+          onchange={get_image_preview_event_handler("banner_preview")}
-        onchange={get_image_preview_event_handler(
+          {disabled}
-          `update_team_banner_preview_${team?.id ?? "create"}`,
+          {required}
-        )}
-        disabled={disable_inputs}
-        required={require_inputs}
-      >
-        <svelte:fragment slot="message"
-          ><span class="font-bold">Upload Banner</span></svelte:fragment
         >
+          <svelte:fragment slot="message">
+            <span class="font-bold">Upload Banner</span>
+          </svelte:fragment>
         </FileDropzone>
 
         <!-- Logo upload -->
         <FileDropzone
           name="logo"
-        id="team_logo_{team?.id ?? 'create'}"
+          onchange={get_image_preview_event_handler("logo_preview")}
-        onchange={get_image_preview_event_handler(
+          {disabled}
-          `update_team_logo_preview_${team?.id ?? "create"}`,
+          {required}
-        )}
-        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}
+                src={team?.logo_url ?? get_team_logo_template(graphics)}
-              id="update_team_logo_preview_{team?.id ?? 'create'}"
+                id="logo_preview"
                 imgwidth={32}
                 imgheight={32}
               />
@@ -142,39 +122,19 @@
         <!-- Save/Delete buttons -->
         <div class="flex justify-end gap-2">
           {#if team}
-          <Button
+            <Button formaction="?/update_team" color="secondary" {disabled} submit width="w-1/2">
-            formaction="?/update_team"
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
               Save
             </Button>
-          <Button
+            <Button formaction="?/delete_team" color="primary" {disabled} submit width="w-1/2">
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_team"
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
               Delete
             </Button>
           {:else}
-          <Button
+            <Button formaction="?/create_team" color="tertiary" {disabled} submit width="w-full">
-            formaction="?/create_team"
-            color="tertiary"
-            submit
-            width="w-full"
-            disabled={disable_inputs}
-            onclick={() => modalStore.close()}
-          >
               Create Team
             </Button>
           {/if}
         </div>
       </div>
     </form>
-</Card>
+  </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}