Lib: Simplify TeamCard
This commit is contained in:
@ -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}
|
||||
|
||||
Reference in New Issue
Block a user