Lib: Simplify TeamCard

This commit is contained in:
2025-02-05 01:15:17 +01:00
parent 347b5e1470
commit 603c7d0e40
2 changed files with 135 additions and 189 deletions

View File

@ -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}