initial commit

src/app/admin/teams/CreateOrEditPopup.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import UserSearch from '@components/admin/search/UserSearch.svelte';
+  import Input from '@components/input/Input.svelte';
+  import type { Team } from '@app/admin/teams/types.ts';
+  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
+
+  // html bindings
+  let modal: HTMLDialogElement;
+  let modalForm: HTMLFormElement;
+
+  // types
+  interface Props {
+    popupTitle: string;
+    submitButtonTitle: string;
+    confirmPopupTitle: string;
+    confirmPopupMessage: string;
+
+    team: Team | null;
+
+    open: boolean;
+
+    onSubmit: (team: Team) => void;
+    onClose?: () => void;
+  }
+
+  // inputs
+  let { popupTitle, submitButtonTitle, confirmPopupTitle, confirmPopupMessage, team, open, onSubmit, onClose }: Props =
+    $props();
+
+  // states
+  let name = $state<string | null>(team?.name ?? null);
+  let color = $state<string | null>(team?.color ?? null);
+  let lastJoined = $state<string | null>(team?.lastJoined ?? null);
+  let memberOne = $state<Team['memberOne']>(team?.memberOne ?? ({ username: null } as unknown as Team['memberOne']));
+  let memberTwo = $state<Team['memberOne']>(team?.memberTwo ?? ({ username: null } as unknown as Team['memberOne']));
+
+  let submitEnabled = $derived(!!(name && color && memberOne.username && memberTwo.username));
+
+  // lifecycle
+  $effect(() => {
+    if (open) modal.show();
+  });
+
+  // callbacks
+  async function onSaveButtonClick(e: Event) {
+    e.preventDefault();
+    $confirmPopupState = {
+      title: confirmPopupTitle,
+      message: confirmPopupMessage,
+      onConfirm: () => {
+        modalForm.submit();
+        onSubmit({
+          id: team?.id ?? -1,
+          name: name!,
+          color: color!,
+          lastJoined: lastJoined!,
+          memberOne: memberOne!,
+          memberTwo: memberTwo!
+        });
+      }
+    };
+  }
+
+  function onCancelButtonClick(e: Event) {
+    e.preventDefault();
+    modalForm.submit();
+  }
+</script>
+
+<dialog class="modal" bind:this={modal} onclose={() => setTimeout(() => onClose?.(), 300)}>
+  <form method="dialog" class="modal-box overflow-visible" bind:this={modalForm}>
+    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onCancelButtonClick}>✕</button>
+    <div class="space-y-5">
+      <h3 class="text-xl font-geist font-bold">{popupTitle}</h3>
+      <div class="w-full flex flex-col">
+        <div class="grid grid-cols-2 gap-4">
+          <Input type="color" label="Farbe" bind:value={color} />
+          <Input type="text" label="Name" bind:value={name} />
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <UserSearch label="Spieler 1" bind:value={memberOne.username} required mustMatch />
+          <UserSearch label="Spieler 2" bind:value={memberTwo.username} required />
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <Input type="date" label="Zuletzt gejoined" bind:value={lastJoined}></Input>
+        </div>
+      </div>
+      <div>
+        <button
+          class="btn btn-success"
+          class:disabled={!submitEnabled}
+          disabled={!submitEnabled}
+          onclick={onSaveButtonClick}>{submitButtonTitle}</button
+        >
+        <button class="btn btn-error" type="button" onclick={onCancelButtonClick}>Abbrechen</button>
+      </div>
+    </div>
+  </form>
+  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+    <button class="!cursor-default">close</button>
+  </form>
+</dialog>

src/app/admin/teams/SidebarActions.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import Input from '@components/input/Input.svelte';
+  import Icon from '@iconify/svelte';
+  import { addTeam, fetchTeams } from './actions.ts';
+  import CreateOrEditPopup from '@app/admin/teams/CreateOrEditPopup.svelte';
+
+  // states
+  let teamNameFilter = $state<string | null>(null);
+  let memberUsernameFilter = $state<string | null>(null);
+
+  let newTeamPopupOpen = $state(false);
+
+  // lifecycle
+  $effect(() => {
+    fetchTeams(teamNameFilter, memberUsernameFilter);
+  });
+</script>
+
+<div>
+  <fieldset class="fieldset border border-base-content/50 rounded-box p-2">
+    <legend class="fieldset-legend">Filter</legend>
+    <Input bind:value={teamNameFilter} label="Team Name" />
+    <Input bind:value={memberUsernameFilter} label="Spieler Username" />
+  </fieldset>
+  <div class="divider my-1"></div>
+  <button class="btn btn-soft w-full" onclick={() => (newTeamPopupOpen = true)}>
+    <Icon icon="heroicons:plus-16-solid" />
+    <span>Neues Team</span>
+  </button>
+</div>
+
+{#key newTeamPopupOpen}
+  <CreateOrEditPopup
+    popupTitle="Neues Team"
+    submitButtonTitle="Team erstellen"
+    confirmPopupTitle="Team erstellen"
+    confirmPopupMessage="Bist du sicher, dass du das Team erstellen möchtest?"
+    team={null}
+    open={newTeamPopupOpen}
+    onSubmit={addTeam}
+    onClose={() => (newTeamPopupOpen = false)}
+  />
+{/key}

src/app/admin/teams/Teams.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { teams } from './state.ts';
+  import type { Team } from './types.ts';
+  import { editTeam } from './actions.ts';
+  import Icon from '@iconify/svelte';
+  import SortableTr from '@components/admin/table/SortableTr.svelte';
+  import SortableTh from '@components/admin/table/SortableTh.svelte';
+  import CreateOrEditPopup from '@app/admin/teams/CreateOrEditPopup.svelte';
+
+  // state
+  let editTeamPopupTeam = $state<Team | null>(null);
+</script>
+
+<div class="h-screen overflow-x-auto">
+  <table class="table table-pin-rows">
+    <thead>
+      <SortableTr data={teams}>
+        <SortableTh style="width: 5%">#</SortableTh>
+        <SortableTh style="width: 5%">Farbe</SortableTh>
+        <SortableTh style="width: 25%" key="name">Name</SortableTh>
+        <SortableTh style="width: 30%" key="memberOne.username">Spieler 1</SortableTh>
+        <SortableTh style="width: 30%" key="memberTwo.username">Spieler 2</SortableTh>
+        <SortableTh style="width: 5%"></SortableTh>
+      </SortableTr>
+    </thead>
+    <tbody>
+      {#each $teams as team, i (team.id)}
+        <tr class="hover:bg-base-200">
+          <td>{i + 1}</td>
+          <td>
+            <div class="rounded-sm w-3 h-3" style="background-color: {team.color}"></div>
+          </td>
+          <td>{team.name}</td>
+          {#if team.memberOne.id != null}
+            <td>{team.memberOne.username}</td>
+          {:else}
+            <td class="text-base-content/30">{team.memberOne.username}</td>
+          {/if}
+          {#if team.memberTwo.id != null}
+            <td>{team.memberTwo.username}</td>
+          {:else}
+            <td class="text-base-content/30">{team.memberTwo.username}</td>
+          {/if}
+          <td>
+            <button class="cursor-pointer" onclick={() => (editTeamPopupTeam = team)}>
+              <Icon icon="heroicons:pencil-square" />
+            </button>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+{#key editTeamPopupTeam}
+  <CreateOrEditPopup
+    popupTitle="Team bearbeiten"
+    submitButtonTitle="Team bearbeiten"
+    confirmPopupTitle="Team bearbeiten"
+    confirmPopupMessage="Bist du sicher, dass du das Team bearbeiten möchtest?"
+    team={editTeamPopupTeam}
+    open={editTeamPopupTeam != null}
+    onSubmit={editTeam}
+  />
+{/key}

src/app/admin/teams/actions.ts

@@ -0,0 +1,41 @@
+import { actions } from 'astro:actions';
+import { teams } from './state.ts';
+import type { Team } from './types.ts';
+import { actionErrorPopup } from '@util/action.ts';
+
+export async function fetchTeams(name: string | null, username: string | null) {
+  const { data, error } = await actions.team.teams({ name: name, username: username });
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  teams.set(data.teams);
+}
+
+export async function addTeam(team: Team) {
+  const { data, error } = await actions.team.addTeam(team);
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  teams.update((old) => {
+    old.push(Object.assign(team, { id: data.id }));
+    return old;
+  });
+}
+
+export async function editTeam(team: Team) {
+  const { error } = await actions.team.editTeam(team);
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  teams.update((old) => {
+    const index = old.findIndex((a) => a.id == team.id);
+    old[index] = team;
+    return old;
+  });
+}

src/app/admin/teams/state.ts

@@ -0,0 +1,4 @@
+import type { Teams } from './types.ts';
+import { writable } from 'svelte/store';
+
+export const teams = writable<Teams>([]);

src/app/admin/teams/types.ts

@@ -0,0 +1,6 @@
+import { type ActionReturnType, actions } from 'astro:actions';
+
+export type Teams = Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
+export type Team = Teams[0];
+
+export type Users = Exclude<ActionReturnType<typeof actions.user.users>['data'], undefined>['users'];