familienarchiv/frontend/src/routes/admin/groups/[id]/+page.svelte

<script lang="ts">
import { enhance } from '$app/forms';
import { beforeNavigate, goto } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';

let { data, form } = $props();

let isDirty = $state(false);
let showUnsavedWarning = $state(false);
let discardTarget: string | null = $state(null);

beforeNavigate(({ cancel, to }) => {
	if (isDirty) {
		cancel();
		showUnsavedWarning = true;
		discardTarget = to?.url.href ?? null;
	}
});

$effect(() => {
	if (form?.success) {
		isDirty = false;
		showUnsavedWarning = false;
	}
});

const STANDARD_PERMISSIONS = $derived([
	{ value: 'READ_ALL', label: m.admin_perm_read_all() },
	{ value: 'ANNOTATE_ALL', label: m.admin_perm_annotate_all() },
	{ value: 'WRITE_ALL', label: m.admin_perm_write_all() }
]);

const ADMIN_PERMISSIONS = $derived([
	{ value: 'ADMIN', label: m.admin_perm_admin() },
	{ value: 'ADMIN_USER', label: m.admin_perm_admin_user() },
	{ value: 'ADMIN_TAG', label: m.admin_perm_admin_tag() },
	{ value: 'ADMIN_PERMISSION', label: m.admin_perm_admin_permission() }
]);
</script>

<div class="flex flex-1 flex-col overflow-hidden">
	<!-- Header -->
	<div class="flex items-center border-b border-line px-5 py-3">
		<a
			href="/admin/groups"
			class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 hover:text-ink md:hidden"
		>
			<svg
				class="h-4 w-4"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
				stroke-width="2"
				aria-hidden="true"
			>
				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
			</svg>
		</a>
		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
			{m.admin_group_edit_heading({ name: data.group.name })}
		</h2>
		<form
			method="POST"
			action="?/delete"
			use:enhance={({ cancel }) => {
				if (!confirm(m.admin_group_delete_confirm())) cancel();
				return async ({ update }) => {
					await update();
				};
			}}
		>
			<button
				type="submit"
				class="rounded-sm border border-red-200 bg-red-50 px-3 py-1.5 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400 dark:hover:bg-red-950/60"
			>
				{m.btn_delete()}
			</button>
		</form>
	</div>

	<!-- Scrollable body -->
	<div class="flex-1 overflow-y-auto px-5 py-5">
		{#if showUnsavedWarning}
			<div
				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
			>
				<span>{m.admin_unsaved_warning()}</span>
				<button
					type="button"
					onclick={() => {
						isDirty = false;
						showUnsavedWarning = false;
						if (discardTarget) goto(discardTarget);
					}}
					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
				>
					{m.person_discard_changes()}
				</button>
			</div>
		{/if}
		{#if form?.success}
			<div
				class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700 dark:border-green-800 dark:bg-green-950/40 dark:text-green-400"
			>
				{m.admin_group_updated()}
			</div>
		{/if}
		{#if form?.error}
			<div
				class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400"
			>
				{form.error}
			</div>
		{/if}

		<form
			id="edit-group-form"
			method="POST"
			action="?/update"
			use:enhance
			oninput={() => {
				isDirty = true;
				showUnsavedWarning = false;
			}}
		>
			<!-- Group name card -->
			<div class="mb-5 rounded-sm border border-line bg-surface p-5 shadow-sm">
				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.admin_col_name()}
				</h3>
				<input
					type="text"
					name="name"
					value={data.group.name}
					required
					class="bg-background w-full rounded-sm border border-line px-3 py-2 font-sans text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none"
				/>
			</div>

			<!-- Standard permissions card -->
			<div class="mb-5 rounded-sm border border-line bg-surface p-5 shadow-sm">
				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.admin_groups_section_standard()}
				</h3>
				<div class="space-y-3">
					{#each STANDARD_PERMISSIONS as perm (perm.value)}
						<label class="flex items-center gap-2 text-sm text-ink">
							<input
								type="checkbox"
								name="permissions"
								value={perm.value}
								checked={data.group.permissions.includes(perm.value)}
								class="h-4 w-4 rounded border-line text-primary focus:ring-primary"
							/>
							{perm.label}
						</label>
					{/each}
				</div>
			</div>

			<!-- Administrative permissions card -->
			<div
				class="rounded-sm border border-amber-200 bg-amber-50 p-5 shadow-sm dark:border-amber-900 dark:bg-amber-950/30"
			>
				<h3
					class="mb-4 text-xs font-bold tracking-widest text-amber-700 uppercase dark:text-amber-400"
				>
					{m.admin_groups_section_administrative()}
				</h3>
				<div class="space-y-3">
					{#each ADMIN_PERMISSIONS as perm (perm.value)}
						<label
							class="flex items-center gap-2 text-sm {perm.value === 'ADMIN'
								? 'font-semibold text-amber-800 dark:text-amber-300'
								: 'text-ink'}"
						>
							<input
								type="checkbox"
								name="permissions"
								value={perm.value}
								checked={data.group.permissions.includes(perm.value)}
								class="h-4 w-4 rounded border-amber-300 text-amber-600 focus:ring-amber-500 dark:border-amber-700"
							/>
							{perm.label}
						</label>
					{/each}
				</div>
			</div>
		</form>
	</div>

	<!-- Docked footer -->
	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
		<a
			href="/admin/groups"
			class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
		>
			{m.btn_cancel()}
		</a>
		<button
			type="submit"
			form="edit-group-form"
			class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
		>
			{m.btn_save()}
		</button>
	</div>
</div>