CraftAttack/varo-website
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor admin crud popups
All checks were successful
deploy / build-and-deploy (push) Successful in 23s
Details

Browse Source
This commit is contained in:
bytedream 2025-05-21 17:22:20 +02:00
parent 8b18623232
commit e47268111a
46 changed files with 889 additions and 1041 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/app/admin/admins/Admins.svelte
View File

@ -1,63 +1,52 @@
<script lang="ts">
import Badges from './Badges.svelte';
import BitBadge from '@components/input/BitBadge.svelte';
import { Permissions } from '@util/permissions.ts';
import type { Admin } from './types.ts';
import CreateOrEditPopup from './CreateOrEditPopup.svelte';
import { admins } from './state.ts';
import Icon from '@iconify/svelte';
import { editAdmin } from './actions.ts';
import { admins, editAdmin } from '@app/admin/admins/admins.ts';
import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
import DataTable from '@components/admin/table/DataTable.svelte';
// consts
const availablePermissionBadges = {
[Permissions.Admin.value]: 'Admin',
[Permissions.Users.value]: 'Users',
[Permissions.Reports.value]: 'Reports',
[Permissions.Feedback.value]: 'Feedback',
[Permissions.Settings.value]: 'Settings',
[Permissions.Tools.value]: 'Tools'
};
// states
let editAdminPopupAdmin = $state<Admin | null>(null);
// state
let editPopupAdmin = $state(null);
let editPopupOpen = $derived(!!editPopupAdmin);
</script>
<div class="h-screen overflow-x-auto">
<table class="table table-pin-rows">
<thead>
<tr>
<th style="width: 5%">#</th>
<th style="width: 30%">Benutzername</th>
<th style="width: 60%">Berechtigungen</th>
<th style="width: 5%"></th>
</tr>
</thead>
<tbody>
{#each $admins as admin, i (admin)}
<tr class="hover:bg-base-200">
<td>{i + 1}</td>
<td>{admin.username}</td>
<td>
<Badges available={availablePermissionBadges} set={new Permissions(admin.permissions).toNumberArray()} />
</td>
<td>
<button class="cursor-pointer" onclick={() => (editAdminPopupAdmin = admin)}>
<Icon icon="heroicons:pencil-square" />
</button>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{#snippet permissionsBadge(permissions: number)}
<BitBadge available={Permissions.asOptions()} value={permissions} readonly />
{/snippet}
{#key editAdminPopupAdmin}
<CreateOrEditPopup
popupTitle="Admin bearbeiten"
submitButtonTitle="Admin bearbeiten"
confirmPopupTitle="Admin bearbeiten"
confirmPopupMessage="Bist du sicher, dass du den Admin bearbeiten möchtest?"
admin={editAdminPopupAdmin}
open={editAdminPopupAdmin != null}
onSubmit={editAdmin}
/>
{/key}
<DataTable
data={admins}
count={true}
keys={[
{ key: 'username', label: 'Username', width: 30 },
{ key: 'permissions', label: 'Berechtigungen', width: 60, transform: permissionsBadge }
]}
onEdit={(admin) => (editPopupAdmin = admin)}
/>
<CrudPopup
texts={{
title: 'Admin bearbeiten',
submitButtonTitle: 'Speichern',
confirmPopupTitle: 'Änderungen speichern',
confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
}}
target={editPopupAdmin}
keys={[
[
{ key: 'username', type: 'text', label: 'Username', options: { required: true } },
{ key: 'password', type: 'password', label: 'Passwort', default: null, options: { convert: (v) => v || null } }
],
[
{
key: 'permissions',
type: 'bit-badge',
label: 'Berechtigungen',
default: 0,
options: { available: Permissions.asOptions() }
}
]
]}
onSubmit={editAdmin}
bind:open={editPopupOpen}
/>

50
src/app/admin/admins/Badges.svelte
View File

@ -1,50 +0,0 @@
<script lang="ts">
interface Props {
available: { [k: number]: string };
set: number[];
onUpdate?: (set: number[]) => void;
}
// inputs
let { available, set, onUpdate }: Props = $props();
let reactiveSet = $state(set);
// callbacks
function onOptionSelect(e: Event) {
const value = Number((e.target as HTMLSelectElement).value);
reactiveSet.push(value);
onUpdate?.(reactiveSet);
(e.target as HTMLSelectElement).value = '-';
}
function onBadgeRemove(badge: number) {
const index = reactiveSet.indexOf(badge);
if (index !== -1) {
reactiveSet.splice(index, 1);
onUpdate?.(reactiveSet);
}
}
</script>
<div class="flex flex-col gap-4">
{#if onUpdate}
<select class="select select-xs w-min" onchange={onOptionSelect}>
<option selected hidden>-</option>
{#each Object.entries(available) as [value, badge] (value)}
<option {value} hidden={reactiveSet.indexOf(Number(value)) !== -1}>{badge}</option>
{/each}
</select>
{/if}
<div class="flex flow flex-wrap gap-2">
{#each reactiveSet as badge (badge)}
<div class="badge badge-outline gap-1">
{#if onUpdate}
<button class="cursor-pointer" type="button" onclick={() => onBadgeRemove(badge)}>✕</button>
{/if}
<span>{available[badge]}</span>
</div>
{/each}
</div>
</div>

115
src/app/admin/admins/CreateOrEditPopup.svelte
View File

@ -1,115 +0,0 @@
<script lang="ts">
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
import Input from '@components/input/Input.svelte';
import Badges from './Badges.svelte';
import type { Admin } from './types.ts';
import { Permissions } from '@util/permissions.ts';
import Password from '@components/input/Password.svelte';
// html bindings
let modal: HTMLDialogElement;
let modalForm: HTMLFormElement;
// types
interface Props {
popupTitle: string;
submitButtonTitle: string;
confirmPopupTitle: string;
confirmPopupMessage: string;
admin: Admin | null;
open: boolean;
onSubmit: (admin: Admin & { password: string }) => void;
onClose?: () => void;
}
// consts
const availablePermissionBadges = {
[Permissions.Admin.value]: 'Admin',
[Permissions.Users.value]: 'Users',
[Permissions.Reports.value]: 'Reports',
[Permissions.Feedback.value]: 'Feedback',
[Permissions.Settings.value]: 'Settings',
[Permissions.Tools.value]: 'Tools'
};
// inputs
let { popupTitle, submitButtonTitle, confirmPopupTitle, confirmPopupMessage, admin, open, onSubmit, onClose }: Props =
$props();
// states
let username = $state<string | null>(admin?.username ?? null);
let password = $state<string | null>(null);
let permissions = $state<number | null>(admin?.permissions ?? 0);
let submitEnabled = $derived(!!username && (admin || password));
// lifecycle
$effect(() => {
if (open) modal.show();
});
// callbacks
function onBadgesUpdate(newPermissions: number[]) {
permissions = new Permissions(newPermissions).value;
}
function onSaveButtonClick() {
$confirmPopupState = {
title: confirmPopupTitle,
message: confirmPopupMessage,
onConfirm: () => {
onSubmit({
id: admin?.id ?? -1,
username: username!,
password: password!,
permissions: permissions!
});
}
};
}
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 w-min" 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 gap-x-4 gap-y-2">
<div class="w-[20rem]">
<Input type="text" bind:value={username} label="Username" required />
<Password bind:value={password} label="Password" required={!admin} />
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend">Berechtigungen</legend>
{#key admin}
<Badges
available={availablePermissionBadges}
set={new Permissions(permissions).toNumberArray()}
onUpdate={onBadgesUpdate}
/>
{/key}
</fieldset>
</div>
<div>
<button
class="btn btn-success"
class:disabled={!submitEnabled}
disabled={!submitEnabled}
onclick={onSaveButtonClick}>{submitButtonTitle}</button
>
<button class="btn btn-error" 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>

54
src/app/admin/admins/SidebarActions.svelte
View File

@ -1,34 +1,48 @@
<script lang="ts">
import { addAdmin, fetchAdmins } from './actions.ts';
import Icon from '@iconify/svelte';
import { onMount } from 'svelte';
import CreateOrEditPopup from '@app/admin/admins/CreateOrEditPopup.svelte';
import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
import { addAdmin, fetchAdmins } from '@app/admin/admins/admins.ts';
import { Permissions } from '@util/permissions.ts';
// state
let createPopupOpen = $state(false);
// lifecycle
onMount(() => {
$effect(() => {
fetchAdmins();
});
// states
let newTeamPopupOpen = $state(false);
</script>
<div>
<button class="btn btn-soft w-full" onclick={() => (newTeamPopupOpen = true)}>
<button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
<Icon icon="heroicons:plus-16-solid" />
<span>Neuer Admin</span>
</button>
</div>
{#key newTeamPopupOpen}
<CreateOrEditPopup
popupTitle="Admin erstellen"
submitButtonTitle="Admin erstellen"
confirmPopupTitle="Admin erstellen"
confirmPopupMessage="Bist du sicher, dass du den Admin erstellen möchtest?"
admin={null}
open={newTeamPopupOpen}
onSubmit={addAdmin}
onClose={() => (newTeamPopupOpen = false)}
/>
{/key}
<CrudPopup
texts={{
title: 'Admin erstellen',
submitButtonTitle: 'Erstellen',
confirmPopupTitle: 'Admin erstellen?',
confirmPopupMessage: 'Soll der Admin erstellt werden?'
}}
target={null}
keys={[
[
{ key: 'username', type: 'text', label: 'Username', options: { required: true } },
{ key: 'password', type: 'password', label: 'Passwort', options: { required: true } }
],
[
{
key: 'permissions',
type: 'bit-badge',
label: 'Berechtigungen',
default: 0,
options: { available: Permissions.asOptions() }
}
]
]}
onSubmit={addAdmin}
bind:open={createPopupOpen}
/>

13
src/app/admin/admins/actions.ts → src/app/admin/admins/admins.ts
View File

@ -1,8 +1,15 @@
import type { Admin } from './types.ts';
import { actions } from 'astro:actions';
import { admins } from './state.ts';
import { type ActionReturnType, actions } from 'astro:actions';
import { writable } from 'svelte/store';
import { actionErrorPopup } from '@util/action.ts';
// types
export type Admins = Exclude<ActionReturnType<typeof actions.admin.admins>['data'], undefined>['admins'];
export type Admin = Admins[0];
// state
export const admins = writable<Admin[]>([]);
// actions
export async function fetchAdmins() {
const { data, error } = await actions.admin.admins();
if (error) {

4
src/app/admin/admins/state.ts
View File

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

4
src/app/admin/admins/types.ts
View File

@ -1,4 +0,0 @@
import type { ActionReturnType, actions } from 'astro:actions';
export type Admins = Exclude<ActionReturnType<typeof actions.admin.admins>['data'], undefined>['admins'];
export type Admin = Admins[0];

4
src/app/admin/feedback/BottomBar.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { Feedback } from './types.ts';
import Input from '@components/input/Input.svelte';
import Textarea from '@components/input/Textarea.svelte';
import type { Feedback } from '@app/admin/feedback/feedback.ts';
// types
interface Props {
@ -20,7 +20,7 @@
<div class="w-96">
<Input value={feedback?.event} label="Event" readonly />
<Input value={feedback?.title} label="Titel" readonly />
<Input value={feedback?.user?.username} label="Nutzer" readonly />
<Input value={feedback?.username} label="Nutzer" readonly />
</div>
<div class="divider divider-horizontal"></div>
<div class="w-full">

47
src/app/admin/feedback/Feedback.svelte
View File

@ -1,12 +1,10 @@
<script lang="ts">
import BottomBar from './BottomBar.svelte';
import SortableTr from '@components/admin/table/SortableTr.svelte';
import SortableTh from '@components/admin/table/SortableTh.svelte';
import { feedbacks } from './state.ts';
import { fetchFeedbacks } from './actions.ts';
import { feedbacks, fetchFeedbacks, type Feedback } from '@app/admin/feedback/feedback.ts';
import { onMount } from 'svelte';
import type { Feedback } from './types.ts';
import DataTable from '@components/admin/table/DataTable.svelte';
// consts
// consts
const dateFormat = new Intl.DateTimeFormat('de-DE', {
year: 'numeric',
@ -25,29 +23,20 @@
});
</script>
<div class="min-h-[70vh] max-h-screen overflow-x-auto">
<table class="table table-pin-rows">
<thead>
<SortableTr data={feedbacks}>
<SortableTh style="width: 5%">#</SortableTh>
<SortableTh style="width: 10%">Event</SortableTh>
<SortableTh style="width: 20%" key="user.username">Nutzer</SortableTh>
<SortableTh style="width: 20%" key="lastChanged">Datum</SortableTh>
<SortableTh style="width: 45%">Inhalt</SortableTh>
</SortableTr>
</thead>
<tbody>
{#each $feedbacks as feedback, i (feedback.id)}
<tr class="hover:bg-base-200" onclick={() => (activeFeedback = feedback)}>
<td>{i + 1}</td>
<td>{feedback.event}</td>
<td>{feedback.user?.username}</td>
<td>{dateFormat.format(new Date(feedback.lastChanged))}</td>
<td>{feedback.content}</td>
</tr>
{/each}
</tbody>
</table>
</div>
{#snippet date(value: string)}
{dateFormat.format(new Date(value))}
{/snippet}
<DataTable
data={feedbacks}
count={true}
keys={[
{ key: 'event', label: 'Event', width: 10, sortable: true },
{ key: 'username', label: 'Nutzer', width: 10, sortable: true },
{ key: 'lastChanged', label: 'Datum', width: 10, sortable: true, transform: date },
{ key: 'content', label: 'Inhalt', width: 10 }
]}
onClick={(feedback) => (activeFeedback = feedback)}
/>
<BottomBar feedback={activeFeedback} />

12
src/app/admin/feedback/actions.ts → src/app/admin/feedback/feedback.ts
View File

@ -1,7 +1,15 @@
import { actions } from 'astro:actions';
import { feedbacks } from './state.ts';
import { type ActionReturnType, actions } from 'astro:actions';
import { writable } from 'svelte/store';
import { actionErrorPopup } from '@util/action.ts';
// types
export type Feedbacks = Exclude<ActionReturnType<typeof actions.feedback.feedbacks>['data'], undefined>['feedbacks'];
export type Feedback = Feedbacks[0];
// state
export const feedbacks = writable<Feedbacks>([]);
// actions
export async function fetchFeedbacks(reporter?: string | null, reported?: string | null) {
const { data, error } = await actions.feedback.feedbacks({ reporter: reporter, reported: reported });
if (error) {

4
src/app/admin/feedback/state.ts
View File

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

4
src/app/admin/feedback/types.ts
View File

@ -1,4 +0,0 @@
import type { ActionReturnType, actions } from 'astro:actions';
export type Feedbacks = Exclude<ActionReturnType<typeof actions.feedback.feedbacks>['data'], undefined>['feedbacks'];
export type Feedback = Feedbacks[0];

4
src/app/admin/reports/BottomBar.svelte
View File

@ -1,10 +1,10 @@
<script lang="ts">
import type { Report, ReportStatus, StrikeReasons } from './types.ts';
import type { Report, ReportStatus, StrikeReasons } from './reports.ts';
import Input from '@components/input/Input.svelte';
import Textarea from '@components/input/Textarea.svelte';
import Select from '@components/input/Select.svelte';
import TeamSearch from '@components/admin/search/TeamSearch.svelte';
import { editReportStatus, getReportStatus } from '@app/admin/reports/actions.ts';
import { editReportStatus, getReportStatus } from '@app/admin/reports/reports.ts';
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
// types

97
src/app/admin/reports/CreatePopup.svelte
View File

@ -1,97 +0,0 @@
<script lang="ts">
import Input from '@components/input/Input.svelte';
import TeamSearch from '@components/admin/search/TeamSearch.svelte';
import Textarea from '@components/input/Textarea.svelte';
import Checkbox from '@components/input/Checkbox.svelte';
import type { Report } from './types.ts';
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
// html bindings
let modal: HTMLDialogElement;
let modalForm: HTMLFormElement;
// types
interface Props {
open: boolean;
onSubmit: (report: Report) => void;
onClose?: () => void;
}
// input
let { open, onSubmit, onClose }: Props = $props();
// form
let reason = $state<string | null>(null);
let body = $state<string | null>(null);
let editable = $state<boolean>(true);
let reporter = $state<Report['reporter'] | null>(null);
let reported = $state<Report['reported'] | null>(null);
let submitEnabled = $derived(!!(reason && reporter));
// lifecycle
$effect(() => {
if (open) modal.show();
});
// callbacks
async function onSaveButtonClick(e: Event) {
e.preventDefault();
$confirmPopupState = {
title: 'Report erstellen',
message: 'Bist du sicher, dass du den Report erstellen möchtest?',
onConfirm: () => {
modalForm.submit();
onSubmit({
id: -1,
reason: reason!,
body: body!,
reporter: reporter!,
reported: reported!,
createdAt: editable ? null : new Date().toISOString(),
status: null
});
}
};
}
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" 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-xt font-geist font-bold">Neuer Report</h3>
<div>
<div class="grid grid-cols-2 gap-4">
<TeamSearch label="Report Team" required mustMatch onSubmit={(team) => (reporter = team)} />
<TeamSearch label="Reportetes Team" mustMatch onSubmit={(team) => (reported = team)} />
</div>
<div class="grid grid-cols-1">
<Input label="Grund" bind:value={reason} required dynamicWidth />
<Textarea label="Inhalt" bind:value={body} rows={5} dynamicWidth />
</div>
<div class="grid grid-cols-1 mt-2">
<Checkbox label="Report kann bearbeitet werden" bind:checked={editable} />
</div>
</div>
<div>
<button
class="btn btn-success"
class:disabled={!submitEnabled}
disabled={!submitEnabled}
onclick={onSaveButtonClick}>Erstellen</button
>
<button class="btn btn-error" 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>

46
src/app/admin/reports/Reports.svelte
View File

@ -1,11 +1,8 @@
<script lang="ts">
import SortableTr from '@components/admin/table/SortableTr.svelte';
import { reports } from './state.ts';
import type { Report, StrikeReasons } from './types.ts';
import SortableTh from '@components/admin/table/SortableTh.svelte';
import BottomBar from '@app/admin/reports/BottomBar.svelte';
import { onMount } from 'svelte';
import { getStrikeReasons } from '@app/admin/reports/actions.ts';
import DataTable from '@components/admin/table/DataTable.svelte';
import { type StrikeReasons, getStrikeReasons, reports } from '@app/admin/reports/reports.ts';
// states
let strikeReasons = $state<StrikeReasons>([]);
@ -17,33 +14,18 @@
});
</script>
<div class="h-screen overflow-x-auto">
<table class="table table-pin-rows">
<thead>
<SortableTr data={reports}>
<SortableTh style="width: 5%">#</SortableTh>
<SortableTh>Grund</SortableTh>
<SortableTh>Report Team</SortableTh>
<SortableTh>Reportetes Team</SortableTh>
<SortableTh>Datum</SortableTh>
<SortableTh>Bearbeitungsstatus</SortableTh>
<SortableTh style="width: 5%"></SortableTh>
</SortableTr>
</thead>
<tbody>
{#each $reports as report, i (report.id)}
<tr class="hover:bg-base-200" onclick={() => (activeReport = report)}>
<td>{i + 1}</td>
<td>{report.reason}</td>
<td>{report.reporter.name}</td>
<td>{report.reported?.name}</td>
<td>{report.createdAt}</td>
<td>{report.status?.status}</td>
</tr>
{/each}
</tbody>
</table>
</div>
<DataTable
data={reports}
count={true}
keys={[
{ key: 'reason', label: 'Grund' },
{ key: 'reporter.name', label: 'Report Team' },
{ key: 'reported.name', label: 'Reportetes Team' },
{ key: 'createdAt', label: 'Datum' },
{ key: 'report.status?.status', label: 'Bearbeitungsstatus' }
]}
onClick={(report) => (activeReport = report)}
/>
{#key activeReport}
<BottomBar {strikeReasons} report={activeReport} />

50
src/app/admin/reports/SidebarActions.svelte
View File

@ -1,14 +1,14 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import Input from '@components/input/Input.svelte';
import { addReport, fetchReports } from '@app/admin/reports/actions.ts';
import CreatePopup from '@app/admin/reports/CreatePopup.svelte';
import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
import { addReport, fetchReports } from '@app/admin/reports/reports.ts';
// states
let reporterUsernameFilter = $state<string | null>(null);
let reportedUsernameFilter = $state<string | null>(null);
let newReportPopupOpen = $state(false);
let createPopupOpen = $state(false);
// lifecycle
$effect(() => {
@ -23,12 +23,48 @@
<Input bind:value={reportedUsernameFilter} label="Reporteter Spieler" />
</fieldset>
<div class="divider my-1"></div>
<button class="btn btn-soft w-full" onclick={() => (newReportPopupOpen = true)}>
<button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
<Icon icon="heroicons:plus-16-solid" />
<span>Neuer Report</span>
</button>
</div>
{#key newReportPopupOpen}
<CreatePopup open={newReportPopupOpen} onSubmit={addReport} onClose={() => (newReportPopupOpen = false)} />
{/key}
<CrudPopup
texts={{
title: 'Report erstellen',
submitButtonTitle: 'Erstellen',
confirmPopupTitle: 'Report erstellen?',
confirmPopupMessage: 'Soll der Report erstellt werden?'
}}
target={null}
keys={[
[
{
key: 'reporter',
type: 'team-search',
label: 'Report Team',
default: { id: null, name: null },
options: { required: true, mustMatch: true, validate: (team) => team?.id != null }
},
{
key: 'reported',
type: 'team-search',
label: 'Reportetes Team',
default: { id: null, name: null },
options: { mustMatch: true, validate: (team) => team?.id != null }
}
],
[{ key: 'reason', type: 'text', label: 'Grund', options: { required: true, dynamicWidth: true } }],
[{ key: 'body', type: 'textarea', label: 'Inhalt', default: null, options: { rows: 5, dynamicWidth: true } }],
[
{
key: 'createdAt',
type: 'checkbox',
label: 'Report kann bearbeitet werden',
options: { convert: (v) => (v ? new Date().toISOString() : null) }
}
]
]}
onSubmit={addReport}
bind:open={createPopupOpen}
/>

23
src/app/admin/reports/actions.ts → src/app/admin/reports/reports.ts
View File

@ -1,8 +1,25 @@
import { actions } from 'astro:actions';
import { reports } from './state.ts';
import { type ActionReturnType, actions } from 'astro:actions';
import { writable } from 'svelte/store';
import { actionErrorPopup } from '@util/action.ts';
import type { Report, ReportStatus } from './types.ts';
// types
export type Reports = Exclude<ActionReturnType<typeof actions.report.reports>['data'], undefined>['reports'];
export type Report = Reports[0];
export type ReportStatus = Exclude<
Exclude<ActionReturnType<typeof actions.report.reportStatus>['data'], undefined>['reportStatus'],
null
>;
export type StrikeReasons = Exclude<
ActionReturnType<typeof actions.report.strikeReasons>['data'],
undefined
>['strikeReasons'];
// state
export const reports = writable<Reports>([]);
// actions
export async function fetchReports(reporterUsername: string | null, reportedUsername: string | null) {
const { data, error } = await actions.report.reports({ reporter: reporterUsername, reported: reportedUsername });
if (error) {

4
src/app/admin/reports/state.ts
View File

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

14
src/app/admin/reports/types.ts
View File

@ -1,14 +0,0 @@
import type { ActionReturnType, actions } from 'astro:actions';
export type Reports = Exclude<ActionReturnType<typeof actions.report.reports>['data'], undefined>['reports'];
export type Report = Reports[0];
export type ReportStatus = Exclude<
Exclude<ActionReturnType<typeof actions.report.reportStatus>['data'], undefined>['reportStatus'],
null
>;
export type StrikeReasons = Exclude<
ActionReturnType<typeof actions.report.strikeReasons>['data'],
undefined
>['strikeReasons'];

117
src/app/admin/teams/CreateOrEditPopup.svelte
View File

@ -1,117 +0,0 @@
<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 ?? '#000000');
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} required />
<Input type="text" label="Name" bind:value={name} required />
</div>
<div class="grid grid-cols-2 gap-4">
<UserSearch
label="Spieler 1"
onSubmit={(user) => {
if (user) memberOne = user;
}}
bind:value={memberOne.username}
required
mustMatch
/>
<UserSearch
label="Spieler 2"
onSubmit={(user) => {
if (user) memberTwo = user;
}}
bind:value={memberTwo.username}
required
/>
</div>
<div class="grid grid-cols-2 gap-4">
<Input type="datetime-local" 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>

62
src/app/admin/teams/SidebarActions.svelte
View File

@ -1,14 +1,14 @@
<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';
import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
import { addTeam, fetchTeams } from '@app/admin/teams/teams.ts';
// states
let teamNameFilter = $state<string | null>(null);
let memberUsernameFilter = $state<string | null>(null);
let newTeamPopupOpen = $state(false);
let createPopupOpen = $state(false);
// lifecycle
$effect(() => {
@ -23,21 +23,51 @@
<Input bind:value={memberUsernameFilter} label="Spieler Username" />
</fieldset>
<div class="divider my-1"></div>
<button class="btn btn-soft w-full" onclick={() => (newTeamPopupOpen = true)}>
<button class="btn btn-soft w-full" onclick={() => (createPopupOpen = 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}
<CrudPopup
texts={{
title: 'Team erstellen',
submitButtonTitle: 'Erstellen',
confirmPopupTitle: 'Team erstellen?',
confirmPopupMessage: 'Sollen das neue Team erstellt werden?'
}}
target={null}
keys={[
[
{ key: 'name', type: 'text', label: 'Name', options: { required: true } },
{ key: 'color', type: 'color', label: 'Farbe', options: { required: true } }
],
[
{
key: 'memberOne',
type: 'user-search',
label: 'Spieler 1',
default: { id: null, username: '' },
options: { required: true, validate: (user) => !!user.username }
},
{
key: 'memberTwo',
type: 'user-search',
label: 'Spieler 2',
default: { id: null, username: '' },
options: { required: true, validate: (user) => !!user.username }
}
],
[
{
key: 'lastJoined',
type: 'datetime-local',
label: 'Zuletzt gejoined',
default: null,
options: { convert: (date) => (date ? date : null) }
}
]
]}
onSubmit={addTeam}
bind:open={createPopupOpen}
/>

125
src/app/admin/teams/Teams.svelte
View File

@ -1,65 +1,72 @@
<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';
import { addTeam, teams } from '@app/admin/teams/teams.ts';
import DataTable from '@components/admin/table/DataTable.svelte';
import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
// state
let editTeamPopupTeam = $state<Team | null>(null);
let editPopupTeam = $state(null);
let editPopupOpen = $derived(!!editPopupTeam);
// lifecycle
$effect(() => {
if (!editPopupOpen) editPopupTeam = 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>
{#snippet color(value: string)}
<div class="rounded-sm w-3 h-3" style="background-color: {value}"></div>
{/snippet}
{#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}
<DataTable
data={teams}
count={true}
keys={[
{ key: 'color', label: 'Farbe', width: 5, transform: color },
{ key: 'name', label: 'Name', width: 25 },
{ key: 'memberOne.username', label: 'Spieler 1', width: 30 },
{ key: 'memberTwo.username', label: 'Spieler 2', width: 30 }
]}
onEdit={(team) => (editPopupTeam = team)}
/>
<CrudPopup
texts={{
title: 'Team bearbeiten',
submitButtonTitle: 'Speichern',
confirmPopupTitle: 'Änderungen speichern?',
confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
}}
target={editPopupTeam}
keys={[
[
{ key: 'name', type: 'text', label: 'Name', options: { required: true } },
{ key: 'color', type: 'color', label: 'Farbe', options: { required: true } }
],
[
{
key: 'memberOne',
type: 'user-search',
label: 'Spieler 1',
options: { required: true, validate: (user) => !!user.username }
},
{
key: 'memberTwo',
type: 'user-search',
label: 'Spieler 2',
default: { id: null, username: null },
options: { required: true, validate: (user) => !!user.username }
}
],
[
{
key: 'lastJoined',
type: 'datetime-local',
label: 'Zuletzt gejoined',
default: { id: null, username: null },
options: { convert: (date) => (date ? date : null) }
}
]
]}
onSubmit={addTeam}
bind:open={editPopupOpen}
/>

4
src/app/admin/teams/state.ts
View File

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

15
src/app/admin/teams/actions.ts → src/app/admin/teams/teams.ts
View File

@ -1,8 +1,17 @@
import { actions } from 'astro:actions';
import { teams } from './state.ts';
import type { Team } from './types.ts';
import { type ActionReturnType, actions } from 'astro:actions';
import { writable } from 'svelte/store';
import { actionErrorPopup } from '@util/action.ts';
// types
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'];
// state
export const teams = writable<Teams>([]);
// actions
export async function fetchTeams(name: string | null, username: string | null) {
const { data, error } = await actions.team.teams({ name: name, username: username });
if (error) {

6
src/app/admin/teams/types.ts
View File

@ -1,6 +0,0 @@
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'];

95
src/app/admin/users/CreateOrEditPopup.svelte
View File

@ -1,95 +0,0 @@
<script lang="ts">
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
import Input from '@components/input/Input.svelte';
import { onDestroy } from 'svelte';
import type { User } from './types.ts';
import { userCreateOrEditPopupState } from './state.ts';
// html bindings
let modal: HTMLDialogElement;
let modalForm: HTMLFormElement;
// input
let action = $state<'create' | 'edit' | null>(null);
let user = $state({} as User);
let onUpdate = $state((_: User) => {});
// lifecycle
const cancel = userCreateOrEditPopupState.subscribe((value) => {
if (value && 'create' in value) {
action = 'create';
user = {
id: -1,
username: '',
firstname: '',
lastname: '',
birthday: new Date().toISOString().slice(0, 10),
telephone: '',
uuid: ''
};
onUpdate = value?.create.onUpdate;
modal.show();
} else if (value && 'edit' in value) {
action = 'edit';
user = value.edit.user;
onUpdate = value.edit.onUpdate;
modal.show();
}
});
onDestroy(cancel);
// texts
const texts = {
create: {
title: 'Nutzer erstellen',
buttonTitle: 'Erstellen',
confirmPopupTitle: 'Nutzer erstellen?',
confirmPopupMessage: 'Sollen der neue Nutzer erstellt werden?'
},
edit: {
title: 'Nutzer bearbeiten',
buttonTitle: 'Speichern',
confirmPopupTitle: 'Änderunge speichern?',
confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
},
null: {}
};
// callbacks
function onSaveButtonClick(e: Event) {
e.preventDefault();
$confirmPopupState = {
title: texts[action!].confirmPopupTitle,
message: texts[action!].confirmPopupMessage,
onConfirm: () => {
modalForm.submit();
onUpdate(user);
}
};
}
</script>
<dialog class="modal" bind:this={modal}>
<form method="dialog" class="modal-box" bind:this={modalForm}>
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
<div class="space-y-5">
<h3 class="text-xl font-geist font-bold">{texts[action!].title}</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 w-full sm:w-fit gap-x-4 gap-y-2">
<Input type="text" bind:value={user.firstname} label="Vorname" />
<Input type="text" bind:value={user.lastname} label="Nachname" />
<Input type="date" bind:value={user.birthday} label="Geburtstag" />
<Input type="tel" bind:value={user.telephone} label="Telefonnummer" />
<Input type="text" bind:value={user.username} label="Spielername" />
<Input type="text" bind:value={user.uuid} label="UUID" />
</div>
<div>
<button class="btn btn-success" onclick={onSaveButtonClick}>{texts[action!].buttonTitle}</button>
<button class="btn btn-error">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>

44
src/app/admin/users/SidebarActions.svelte
View File

@ -1,24 +1,18 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { userCreateOrEditPopupState } from './state.ts';
import { addUser, fetchUsers } from './actions.ts';
import Input from '@components/input/Input.svelte';
import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
import { addUser, fetchUsers } from '@app/admin/users/users.ts';
// states
let usernameFilter = $state<string | null>(null);
let createPopupOpen = $state(false);
// lifecycle
$effect(() => {
fetchUsers({ username: usernameFilter });
});
// callbacks
async function onNewUserButtonClick() {
$userCreateOrEditPopupState = {
create: {
onUpdate: addUser
}
};
}
</script>
<div>
@ -27,8 +21,34 @@
<Input bind:value={usernameFilter} label="Username" />
</fieldset>
<div class="divider my-1"></div>
<button class="btn btn-soft w-full" onclick={() => onNewUserButtonClick()}>
<button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
<Icon icon="heroicons:plus-16-solid" />
<span>Neuer Nutzer</span>
</button>
</div>
<CrudPopup
texts={{
title: 'Nutzer erstellen',
submitButtonTitle: 'Erstellen',
confirmPopupTitle: 'Nutzer erstellen?',
confirmPopupMessage: 'Sollen der neue Nutzer erstellt werden?'
}}
target={null}
keys={[
[
{ key: 'firstname', type: 'text', label: 'Vorname', options: { required: true } },
{ key: 'lastname', type: 'text', label: 'Nachname', options: { required: true } }
],
[
{ key: 'birthday', type: 'date', label: 'Geburtstag', options: { required: true } },
{ key: 'telephone', type: 'tel', label: 'Telefonnummer', default: null }
],
[
{ key: 'username', type: 'text', label: 'Spielername', options: { required: true } },
{ key: 'uuid', type: 'text', label: 'UUID', default: null }
]
]}
onSubmit={addUser}
bind:open={createPopupOpen}
/>

100
src/app/admin/users/Users.svelte
View File

@ -1,56 +1,54 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import CreateOrEditPopup from './CreateOrEditPopup.svelte';
import type { User } from './types.ts';
import { userCreateOrEditPopupState, users } from './state.ts';
import { editUser } from './actions.ts';
import SortableTr from '@components/admin/table/SortableTr.svelte';
import SortableTh from '@components/admin/table/SortableTh.svelte';
import DataTable from '@components/admin/table/DataTable.svelte';
import { editUser, users } from '@app/admin/users/users.ts';
import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
// callbacks
async function onUserEditButtonClick(user: User) {
$userCreateOrEditPopupState = {
edit: {
user: user,
onUpdate: editUser
}
};
}
// state
let editPopupUser = $state(null);
let editPopupOpen = $derived(!!editPopupUser);
// lifecycle
$effect(() => {
if (!editPopupOpen) editPopupUser = null;
});
</script>
<div class="h-screen overflow-x-auto">
<table class="table table-pin-rows">
<thead>
<SortableTr data={users}>
<SortableTh style="width: 5%">#</SortableTh>
<SortableTh style="width: 15%" key="firstname">Vorname</SortableTh>
<SortableTh style="width: 15%" key="lastname">Nachname</SortableTh>
<SortableTh style="width: 5%" key="birthday">Geburtstag</SortableTh>
<SortableTh style="width: 12%" key="phone">Telefon</SortableTh>
<SortableTh style="width: 20%" key="username">Username</SortableTh>
<SortableTh style="width: 23%">UUID</SortableTh>
<SortableTh style="width: 5%"></SortableTh>
</SortableTr>
</thead>
<tbody>
{#each $users as user, i (user.id)}
<tr class="hover:bg-base-200">
<td>{i + 1}</td>
<td>{user.firstname}</td>
<td>{user.lastname}</td>
<td>{user.birthday}</td>
<td>{user.telephone}</td>
<td>{user.username}</td>
<td>{user.uuid}</td>
<td>
<button class="cursor-pointer" onclick={() => onUserEditButtonClick(user)}>
<Icon icon="heroicons:pencil-square" />
</button>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<DataTable
data={users}
count={true}
keys={[
{ key: 'firstname', label: 'Vorname', width: 15, sortable: true },
{ key: 'lastname', label: 'Nachname', width: 15, sortable: true },
{ key: 'birthday', label: 'Geburtstag', width: 5, sortable: true },
{ key: 'telephone', label: 'Telefon', width: 12, sortable: true },
{ key: 'username', label: 'Username', width: 20, sortable: true },
{ key: 'uuid', label: 'UUID', width: 23 }
]}
onEdit={(user) => (editPopupUser = user)}
/>
<CreateOrEditPopup />
<CrudPopup
texts={{
title: 'Nutzer bearbeiten',
submitButtonTitle: 'Speichern',
confirmPopupTitle: 'Änderungen speichern?',
confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
}}
target={editPopupUser}
keys={[
[
{ key: 'firstname', type: 'text', label: 'Vorname', options: { required: true } },
{ key: 'lastname', type: 'text', label: 'Nachname', options: { required: true } }
],
[
{ key: 'birthday', type: 'date', label: 'Geburtstag', options: { required: true } },
{ key: 'telephone', type: 'tel', label: 'Telefonnummer' }
],
[
{ key: 'username', type: 'text', label: 'Spielername', options: { required: true } },
{ key: 'uuid', type: 'text', label: 'UUID' }
]
]}
onSubmit={editUser}
bind:open={editPopupOpen}
/>

6
src/app/admin/users/state.ts
View File

@ -1,6 +0,0 @@
import type { UserCreateOrEditPopupState, Users } from './types.ts';
import { writable } from 'svelte/store';
export const users = writable<Users>([]);
export const userCreateOrEditPopupState = writable<UserCreateOrEditPopupState>(null);

9
src/app/admin/users/types.ts
View File

@ -1,9 +0,0 @@
import { type ActionReturnType, actions } from 'astro:actions';
export type Users = Exclude<ActionReturnType<typeof actions.user.users>['data'], undefined>['users'];
export type User = Users[0];
export type UserCreateOrEditPopupState =
| { create: { onUpdate: (user: User) => void } }
| { edit: { user: User; onUpdate: (user: User) => void } }
| null;

13
src/app/admin/users/actions.ts → src/app/admin/users/users.ts
View File

@ -1,8 +1,15 @@
import { actions } from 'astro:actions';
import { users } from './state.ts';
import type { User } from './types.ts';
import { writable } from 'svelte/store';
import { type ActionReturnType, actions } from 'astro:actions';
import { actionErrorPopup } from '@util/action.ts';
// types
export type Users = Exclude<ActionReturnType<typeof actions.user.users>['data'], undefined>['users'];
export type User = Users[0];
// state
export const users = writable<Users>([]);
// actions
export async function fetchUsers(options?: { username?: string | null }) {
const { data, error } = await actions.user.users({ username: options?.username });
if (error) {

101
src/app/admin/usersBlocked/CreateOrEditPopup.svelte
View File

@ -1,101 +0,0 @@
<script lang="ts">
import Input from '@components/input/Input.svelte';
import Textarea from '@components/input/Textarea.svelte';
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
import type { BlockedUser } from '@app/admin/usersBlocked/types.ts';
import { blockedUserCreateOrEditPopupState } from '@app/admin/usersBlocked/state.ts';
import { onDestroy } from 'svelte';
// html bindings
let modal: HTMLDialogElement;
let modalForm: HTMLFormElement;
// states
let action = $state<'create' | 'edit' | null>(null);
let blockedUser = $state({} as BlockedUser);
let onUpdate = $state((_: BlockedUser) => {});
let submitEnabled = $derived(!!blockedUser.uuid);
// lifecycle
const cancel = blockedUserCreateOrEditPopupState.subscribe((value) => {
if (value && 'create' in value) {
action = 'create';
blockedUser = {
id: -1,
uuid: '',
comment: null
};
onUpdate = value?.create.onUpdate;
modal.show();
} else if (value && 'edit' in value) {
action = 'edit';
blockedUser = value.edit.blockedUser;
onUpdate = value.edit.onUpdate;
modal.show();
}
});
onDestroy(cancel);
// texts
const texts = {
create: {
title: 'Blockierten Nutzer erstellen',
buttonTitle: 'Erstellen',
confirmPopupTitle: 'Nutzer blockieren?',
confirmPopupMessage:
'Bist du sicher, dass der Nutzer blockiert werden soll?\nEin blockierter Nutzer kann sich nicht mehr registrieren.'
},
edit: {
title: 'Blockierten Nutzer bearbeiten',
buttonTitle: 'Speichern',
confirmPopupTitle: 'Änderungen speichern?',
confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
},
null: {}
};
// callbacks
async function onSaveButtonClick(e: Event) {
e.preventDefault();
$confirmPopupState = {
title: texts[action!].confirmPopupTitle,
message: texts[action!].confirmPopupMessage,
onConfirm: () => {
modalForm.submit();
onUpdate(blockedUser);
}
};
}
function onCancelButtonClick(e: Event) {
e.preventDefault();
modalForm.submit();
}
</script>
<dialog class="modal" bind:this={modal}>
<form method="dialog" class="modal-box" 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-xt font-geist font-bold">{texts[action!].title}</h3>
<div>
<Input bind:value={blockedUser.uuid} label="UUID" required dynamicWidth />
<Textarea label="Kommentar" bind:value={blockedUser.comment} rows={3} dynamicWidth />
</div>
<div>
<button
class="btn btn-success"
class:disabled={!submitEnabled}
disabled={!submitEnabled}
onclick={onSaveButtonClick}>{texts[action!].buttonTitle}</button
>
<button class="btn btn-error" 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>

35
src/app/admin/usersBlocked/SidebarActions.svelte
View File

@ -1,26 +1,37 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { addBlockedUser, fetchBlockedUsers } from '@app/admin/usersBlocked/actions.ts';
import { blockedUserCreateOrEditPopupState } from '@app/admin/usersBlocked/state.ts';
import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
import { fetchBlockedUsers, addBlockedUser } from '@app/admin/usersBlocked/usersBlocked.ts';
// states
let createPopupOpen = $state(false);
// lifecycle
$effect(() => {
fetchBlockedUsers();
});
// callbacks
async function onNewUserButtonClick() {
$blockedUserCreateOrEditPopupState = {
create: {
onUpdate: addBlockedUser
}
};
}
</script>
<div>
<button class="btn btn-soft w-full" onclick={() => onNewUserButtonClick()}>
<button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
<Icon icon="heroicons:plus-16-solid" />
<span>Neuer blockierter Nutzer</span>
</button>
</div>
<CrudPopup
texts={{
title: 'Blockierten Nutzer erstellen',
submitButtonTitle: 'Erstellen',
confirmPopupTitle: 'Nutzer blockieren',
confirmPopupMessage:
'Bist du sicher, dass der Nutzer blockiert werden soll?\nEin blockierter Nutzer kann sich nicht mehr registrieren.'
}}
target={null}
keys={[
[{ key: 'uuid', type: 'text', label: 'UUID', options: { required: true, dynamicWidth: true } }],
[{ key: 'comment', type: 'textarea', label: 'Kommentar', default: null, options: { dynamicWidth: true } }]
]}
onSubmit={addBlockedUser}
bind:open={createPopupOpen}
/>

78
src/app/admin/usersBlocked/UsersBlocked.svelte
View File

@ -1,48 +1,40 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import CreateOrEditPopup from './CreateOrEditPopup.svelte';
import SortableTr from '@components/admin/table/SortableTr.svelte';
import SortableTh from '@components/admin/table/SortableTh.svelte';
import type { BlockedUser } from '@app/admin/usersBlocked/types.ts';
import { blockedUserCreateOrEditPopupState, blockedUsers } from '@app/admin/usersBlocked/state.ts';
import { editBlockedUser } from '@app/admin/usersBlocked/actions.ts';
import { blockedUsers, editBlockedUser } from '@app/admin/usersBlocked/usersBlocked.ts';
import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
import DataTable from '@components/admin/table/DataTable.svelte';
// callbacks
async function onBlockedUserEditButtonClick(blockedUser: BlockedUser) {
$blockedUserCreateOrEditPopupState = {
edit: {
blockedUser: blockedUser,
onUpdate: editBlockedUser
}
};
}
// state
let blockedUserEditPopupBlockedUser = $state(null);
let blockedUserEditPopupOpen = $derived(!!blockedUserEditPopupBlockedUser);
// lifecycle
$effect(() => {
if (!blockedUserEditPopupOpen) blockedUserEditPopupBlockedUser = null;
});
</script>
<div class="h-screen overflow-x-auto">
<table class="table table-pin-rows">
<thead>
<SortableTr data={blockedUsers}>
<SortableTh style="width: 5%">#</SortableTh>
<SortableTh style="width: 20%" key="uuid">UUID</SortableTh>
<SortableTh style="width: 70%">Kommentar</SortableTh>
<SortableTh style="width: 5%"></SortableTh>
</SortableTr>
</thead>
<tbody>
{#each $blockedUsers as blockedUser, i (blockedUser)}
<tr class="hover:bg-base-200">
<td>{i + 1}</td>
<td>{blockedUser.uuid}</td>
<td>{blockedUser.comment}</td>
<td>
<button class="cursor-pointer" onclick={() => onBlockedUserEditButtonClick(blockedUser)}>
<Icon icon="heroicons:pencil-square" />
</button>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<DataTable
data={blockedUsers}
count={true}
keys={[
{ key: 'uuid', label: 'UUID', width: 20, sortable: true },
{ key: 'comment', label: 'Kommentar', width: 70 }
]}
onEdit={(blockedUser) => (blockedUserEditPopupBlockedUser = blockedUser)}
/>
<CreateOrEditPopup />
<CrudPopup
texts={{
title: 'Blockierten Nutzer bearbeiten',
submitButtonTitle: 'Speichern',
confirmPopupTitle: 'Änderungen speichern',
confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
}}
target={blockedUserEditPopupBlockedUser}
keys={[
[{ key: 'uuid', type: 'text', label: 'UUID', options: { required: true, dynamicWidth: true } }],
[{ key: 'comment', type: 'textarea', label: 'Kommentar', options: { dynamicWidth: true } }]
]}
onSubmit={editBlockedUser}
bind:open={blockedUserEditPopupOpen}
/>

6
src/app/admin/usersBlocked/state.ts
View File

@ -1,6 +0,0 @@
import { writable } from 'svelte/store';
import type { BlockedUserCreateOrEditPopupState, BlockedUsers } from '@app/admin/usersBlocked/types.ts';
export const blockedUsers = writable<BlockedUsers>([]);
export const blockedUserCreateOrEditPopupState = writable<BlockedUserCreateOrEditPopupState>(null);

9
src/app/admin/usersBlocked/types.ts
View File

@ -1,9 +0,0 @@
import { type ActionReturnType, actions } from 'astro:actions';
export type BlockedUsers = Exclude<ActionReturnType<typeof actions.user.blocked>['data'], undefined>['blocked'];
export type BlockedUser = BlockedUsers[0];
export type BlockedUserCreateOrEditPopupState =
| { create: { onUpdate: (blockedUser: BlockedUser) => void } }
| { edit: { blockedUser: BlockedUser; onUpdate: (blockedUser: BlockedUser) => void } }
| null;

17
src/app/admin/usersBlocked/actions.ts → src/app/admin/usersBlocked/usersBlocked.ts
View File

@ -1,8 +1,15 @@
import { actions } from 'astro:actions';
import { type ActionReturnType, actions } from 'astro:actions';
import { writable } from 'svelte/store';
import { actionErrorPopup } from '@util/action.ts';
import { blockedUsers } from '@app/admin/usersBlocked/state.ts';
import type { BlockedUser } from '@app/admin/usersBlocked/types.ts';
// types
export type BlockedUsers = Exclude<ActionReturnType<typeof actions.user.blocked>['data'], undefined>['blocked'];
export type BlockedUser = BlockedUsers[0];
// state
export const blockedUsers = writable<BlockedUsers>([]);
// actions
export async function fetchBlockedUsers() {
const { data, error } = await actions.user.blocked();
if (error) {
@ -27,14 +34,14 @@ export async function addBlockedUser(blockedUser: BlockedUser) {
}
export async function editBlockedUser(blockedUser: BlockedUser) {
const { data, error } = await actions.user.editBlocked(blockedUser);
const { error } = await actions.user.editBlocked(blockedUser);
if (error) {
actionErrorPopup(error);
return;
}
blockedUsers.update((old) => {
const index = old.findIndex((a) => a.id == user.id);
const index = old.findIndex((a) => a.id == blockedUser.id);
old[index] = blockedUser;
return old;
});

255
src/components/admin/popup/CrudPopup.svelte Normal file
View File

@ -0,0 +1,255 @@
<script lang="ts">
import Input from '@components/input/Input.svelte';
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
import Textarea from '@components/input/Textarea.svelte';
import Password from '@components/input/Password.svelte';
import BitBadge from '@components/input/BitBadge.svelte';
import UserSearch from '@components/admin/search/UserSearch.svelte';
import Checkbox from '@components/input/Checkbox.svelte';
import TeamSearch from '@components/admin/search/TeamSearch.svelte';
// html bindings
let modal: HTMLDialogElement;
let modalForm: HTMLFormElement;
// types
interface Props<T> {
texts: {
title: string;
submitButtonTitle: string;
confirmPopupTitle: string;
confirmPopupMessage: string;
};
target: T | null;
keys: Key<any>[][];
onSubmit: (target: T) => void;
onClose?: () => void;
open: boolean;
}
type Key<T extends KeyInputType> = {
key: string;
type: T | null;
label: string;
default?: any;
options?: KeyInputTypeOptions<T>;
};
type KeyInputType =
| 'bit-badge'
| 'checkbox'
| 'color'
| 'date'
| 'datetime-local'
| 'password'
| 'tel'
| 'team-search'
| 'text'
| 'textarea'
| 'user-search';
type KeyInputTypeOptions<T extends KeyInputType> = {
['bit-badge']: {
available: Record<number, string>;
};
['checkbox']: {};
['color']: {};
['date']: {};
['datetime-local']: {};
['password']: {};
['tel']: {};
['team-search']: {};
['text']: {};
['textarea']: {
rows?: boolean;
};
['user-search']: {
mustMatch?: boolean;
};
}[T] & {
convert?: (value: any) => any;
validate?: (value: any) => boolean;
required?: boolean;
dynamicWidth?: boolean;
};
// input
let { texts, target, keys, onSubmit, onClose, open = $bindable() }: Props<any> = $props();
onInit();
// state
let submitEnabled = $state(false);
$effect(() => {
if (!open) return;
onInit();
modal.show();
});
$effect.pre(() => {
if (target == null) onInit();
updateSubmitEnabled();
});
// function
function onInit() {
if (target == null) target = {};
for (const key of keys) {
for (const k of key) {
if (k.default !== undefined && target[k.key] === undefined)
target[k.key] = k.options?.convert ? k.options.convert(k.default) : k.default;
}
}
}
function updateSubmitEnabled() {
submitEnabled = false;
for (const key of keys) {
for (const k of key) {
if (k.options?.required) {
if (k.options?.validate) {
if (!k.options.validate(target[k.key])) return;
} else {
if (!target[k.key]) return;
}
}
}
}
submitEnabled = true;
}
// callbacks
function onBindChange(key: string, value: any, options?: KeyInputTypeOptions<any>) {
target[key] = options?.convert ? options.convert(value) : value;
updateSubmitEnabled();
}
async function onSaveButtonClick(e: Event) {
e.preventDefault();
$confirmPopupState = {
title: texts.confirmPopupTitle,
message: texts.confirmPopupMessage,
onConfirm: () => {
modalForm.submit();
onSubmit(target);
}
};
}
function onCancelButtonClick(e: Event) {
e.preventDefault();
modalForm.submit();
}
function onModalClose() {
setTimeout(() => {
open = false;
target = null;
modalForm.reset();
onClose?.();
}, 300);
}
</script>
<dialog class="modal" bind:this={modal} onclose={onModalClose}>
<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">{texts.title}</h3>
<div class="w-full flex flex-col">
{#each keys as key (key)}
<div
class="grid grid-flow-col gap-4"
class:grid-cols-1={key.length === 1}
class:grid-cols-2={key.length === 2}
>
{#each key as k (k)}
{#if k.type === 'color' || k.type === 'date' || k.type === 'datetime-local' || k.type === 'tel' || k.type === 'text'}
<Input
type={k.type}
bind:value={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
label={k.label}
required={k.options?.required}
dynamicWidth={k.options?.dynamicWidth}
/>
{:else if k.type === 'textarea'}
<Textarea
bind:value={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
label={k.label}
required={k.options?.required}
rows={k.options?.rows}
dynamicWidth={k.options?.dynamicWidth}
/>
{:else if k.type === 'checkbox'}
<Checkbox
bind:checked={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
label={k.label}
required={k.options?.required}
/>
{:else if k.type === 'user-search'}
<UserSearch
bind:value={
() =>
target[k.key] ? (target[k.key]['username'] ?? null) : k.default ? k.default['username'] : null,
(v) =>
k.options.mustMatch
? onBindChange(k.key, { id: null, username: null }, k.options)
: onBindChange(k.key, { id: null, username: v }, k.options)
}
onSubmit={(user) => onBindChange(k.key, user, k.options)}
label={k.label}
required={k.options?.required}
mustMatch={k.options?.mustMatch}
/>
{:else if k.type === 'team-search'}
<TeamSearch
bind:value={
() => (target[k.key] ? (target[k.key]['name'] ?? null) : k.default ? k.default['name'] : null),
(v) =>
k.options.mustMatch
? onBindChange(k.key, { id: null, name: null, color: null }, k.options)
: onBindChange(k.key, { id: null, name: v, color: null }, k.options)
}
onSubmit={(team) => onBindChange(k.key, team, k.options)}
label={k.label}
required={k.options?.required}
mustMatch={k.options?.mustMatch}
/>
{:else if k.type === 'password'}
<Password
bind:value={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
label={k.label}
required={k.options?.required}
/>
{:else if k.type === 'bit-badge'}
<BitBadge
available={k.options?.available}
bind:value={
() => (target[k.key] ? (target[k.key]['name'] ?? target[k.key]) : k.default),
(v) => onBindChange(k.key, v, k.options)
}
/>
{/if}
{/each}
</div>
{/each}
</div>
<div>
<button
class="btn btn-success"
class:disabled={!submitEnabled}
disabled={!submitEnabled}
onclick={onSaveButtonClick}>{texts.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>

6
src/components/admin/search/Search.svelte
View File

@ -20,7 +20,7 @@
let { id, value = $bindable(), label, readonly, required, mustMatch, requestSuggestions, onSubmit }: Props = $props();
// states
let inputValue = $state(value);
let inputValue = $derived(value);
let suggestions = $state<string[]>([]);
let matched = $state(false);
@ -38,7 +38,7 @@
if (suggestion != null) {
inputValue = value = suggestion;
matched = true;
onSubmit?.(value);
onSubmit?.(suggestion);
} else if (!mustMatch) {
value = inputValue;
matched = false;
@ -52,7 +52,7 @@
function onSuggestionClick(suggestion: string) {
inputValue = value = suggestion;
suggestions = [];
onSubmit?.(value);
onSubmit?.(suggestion);
}
</script>

73
src/components/admin/table/DataTable.svelte Normal file
View File

@ -0,0 +1,73 @@
<script lang="ts">
import type { Writable } from 'svelte/store';
import SortableTr from '@components/admin/table/SortableTr.svelte';
import SortableTh from '@components/admin/table/SortableTh.svelte';
import Icon from '@iconify/svelte';
import type { Snippet } from 'svelte';
import { getObjectEntryByKey } from '@util/objects.ts';
// types
interface Props<T> {
data: Writable<T[]>;
count?: boolean;
keys: {
key: string;
label: string;
width?: number;
sortable?: boolean;
transform?: Snippet<[T]>;
}[];
onClick?: (t: T) => void;
onEdit?: (t: T) => void;
}
// input
let { data, count, keys, onClick, onEdit }: Props<any> = $props();
</script>
<div class="h-screen overflow-x-auto">
<table class="table table-pin-rows">
<thead>
<SortableTr {data}>
{#if count}
<SortableTh style="width: 5%">#</SortableTh>
{/if}
{#each keys as key (key.key)}
<SortableTh style={key.width ? `width: ${key.width}%` : undefined} key={key.sortable ? key.key : undefined}
>{key.label}</SortableTh
>
{/each}
{#if onEdit}
<SortableTh style="width: 5%"></SortableTh>
{/if}
</SortableTr>
</thead>
<tbody>
{#each $data as d, i (d)}
<tr class="hover:bg-base-200" onclick={() => onClick?.(d)}>
{#if count}
<td>{i + 1}</td>
{/if}
{#each keys as key (key.key)}
<td>
{#if key.transform}
{@render key.transform(getObjectEntryByKey(key.key, d))}
{:else}
{getObjectEntryByKey(key.key, d)}
{/if}
</td>
{/each}
{#if onEdit}
<td>
<button class="cursor-pointer" onclick={() => onEdit(d)}>
<Icon icon="heroicons:pencil-square" />
</button>
</td>
{/if}
</tr>
{/each}
</tbody>
</table>
</div>

15
src/components/admin/table/SortableTr.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import { setContext, type Snippet } from 'svelte';
import { type Writable, writable } from 'svelte/store';
import { getObjectEntryByKey } from '@util/objects.ts';
// types
interface Props {
@ -21,8 +22,8 @@
function onSort(key: string, order: 'asc' | 'desc') {
data.update((old) => {
old.sort((a, b) => {
let entryA = getDataEntryByKey(key, a);
let entryB = getDataEntryByKey(key, b);
let entryA = getObjectEntryByKey(key, a);
let entryB = getObjectEntryByKey(key, b);
if (entryA === undefined || entryB === undefined) return 0;
@ -40,16 +41,6 @@
return old;
});
}
function getDataEntryByKey(key: string, data: { [key: string]: any }): any | undefined {
let entry = data;
for (const part of key.split('.')) {
if ((entry = entry[part]) === undefined) {
return undefined;
}
}
return entry;
}
</script>
<tr {...restProps}>

50
src/components/input/BitBadge.svelte Normal file
View File

@ -0,0 +1,50 @@
<script lang="ts">
interface Props {
available: Record<number, string>;
value: number;
readonly?: boolean;
}
// inputs
let { available, value = $bindable(), readonly }: Props = $props();
// idk why, but this is needed to trigger loop reactivity
let reactiveValue = $derived(value);
// callbacks
function onOptionSelect(e: Event) {
const selected = Number((e.target as HTMLSelectElement).value);
reactiveValue |= selected;
(e.target as HTMLSelectElement).value = '-';
}
function onBadgeRemove(flag: number) {
reactiveValue &= ~flag;
}
</script>
<div class="flex flex-col gap-4">
{#if !readonly}
<select class="select select-xs w-min" onchange={onOptionSelect}>
<option selected hidden>-</option>
{#each Object.entries(available) as [flag, badge] (flag)}
<option value={flag} hidden={(reactiveValue & Number(flag)) !== 0}>{badge}</option>
{/each}
</select>
{/if}
<div class="flex flow flex-wrap gap-2">
{#each Object.entries(available) as [flag, badge] (flag)}
{#if (reactiveValue & Number(flag)) !== 0}
<div class="badge badge-outline gap-1">
{#if !readonly}
<button class="cursor-pointer" type="button" onclick={() => onBadgeRemove(Number(flag))}>✕</button>
{/if}
<span>{badge}</span>
</div>
{/if}
{/each}
</div>
</div>

4
src/db/schema/blockedUser.ts
View File

@ -12,13 +12,13 @@ export const blockedUser = mysqlTable('blocked_user', {
export type AddBlockedUserReq = {
uuid: string;
comment: string | null;
comment?: string | null;
};
export type EditBlockedUserReq = {
id: number;
uuid: string;
comment: string | null;
comment?: string | null;
};
export type GetBlockedUserByUuidReq = {

5
src/db/schema/feedback.ts
View File

@ -68,10 +68,7 @@ export async function getFeedbacks(db: Database, values: GetFeedbacksReq) {
content: feedback.content,
urlHash: feedback.urlHash,
lastChanged: feedback.lastChanged,
user: {
id: user.id,
username: user.username
}
username: user.username
})
.from(feedback)
.leftJoin(user, eq(feedback.userId, user.id));

9
src/util/objects.ts Normal file
View File

@ -0,0 +1,9 @@
export function getObjectEntryByKey(key: string, data: { [key: string]: any }): any | undefined {
let entry = data;
for (const part of key.split('.')) {
if ((entry = entry[part]) === undefined) {
return undefined;
}
}
return entry;
}

19
src/util/permissions.ts
View File

@ -32,16 +32,15 @@ export class Permissions {
return this.value;
}
toNumberArray() {
const array = [];
if (this.admin) array.push(Permissions.Admin.value);
if (this.users) array.push(Permissions.Users.value);
if (this.reports) array.push(Permissions.Reports.value);
if (this.feedback) array.push(Permissions.Feedback.value);
if (this.settings) array.push(Permissions.Settings.value);
if (this.tools) array.push(Permissions.Tools.value);
return array;
static asOptions() {
return {
[Permissions.Admin.value]: 'Admin',
[Permissions.Users.value]: 'Users',
[Permissions.Reports.value]: 'Reports',
[Permissions.Feedback.value]: 'Feedback',
[Permissions.Settings.value]: 'Settings',
[Permissions.Tools.value]: 'Tools'
};
}
get admin() {