feat(admin/groups): add groups entity with master-detail sub-routes
Creates the full groups section under /admin/groups/: - +layout.server.ts: loads groups list via GET /api/groups - GroupsListPanel.svelte: left list panel (name + permission count, active state) - +layout.svelte: composes list panel + children slot - +page.svelte: empty selection prompt - [id]/+page.server.ts: update (PATCH) and delete actions - [id]/+page.svelte: edit detail panel with Standard/Administrative permission sections - new/+page.svelte and +page.server.ts: create group form Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
144
frontend/src/routes/admin/groups/[id]/+page.svelte
Normal file
144
frontend/src/routes/admin/groups/[id]/+page.svelte
Normal file
@@ -0,0 +1,144 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
const STANDARD_PERMISSIONS: { value: string; label: string }[] = [
|
||||
{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }
|
||||
];
|
||||
|
||||
const ADMIN_PERMISSIONS: { value: string; label: string }[] = [
|
||||
{ value: 'ADMIN', label: 'Vollzugriff (Admin)' },
|
||||
{ value: 'ADMIN_USER', label: 'Benutzer verwalten' },
|
||||
{ value: 'ADMIN_TAG', label: 'Schlagworte verwalten' },
|
||||
{ value: 'ADMIN_PERMISSION', label: 'Berechtigungen verwalten' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center border-b border-line px-5 py-3">
|
||||
<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 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>
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user