feat: Admin section redesign (Concept C) + Persons redesign (Concept A) #160
@@ -61,6 +61,7 @@ public class UserController {
|
||||
}
|
||||
|
||||
@GetMapping("users/{id}")
|
||||
@RequirePermission(Permission.ADMIN_USER)
|
||||
public ResponseEntity<AppUser> getUser(@PathVariable UUID id) {
|
||||
AppUser user = userService.getById(id);
|
||||
user.setPassword(null);
|
||||
|
||||
@@ -50,4 +50,29 @@ class UserControllerTest {
|
||||
.andExpect(status().isOk())
|
||||
.andExpect(jsonPath("$.username").value("anna"));
|
||||
}
|
||||
|
||||
// ─── GET /api/users/{id} ──────────────────────────────────────────────────
|
||||
|
||||
@Test
|
||||
@WithMockUser(username = "reader")
|
||||
void getUser_returns403_whenCallerLacksAdminUserPermission() throws Exception {
|
||||
UUID id = UUID.randomUUID();
|
||||
AppUser target = AppUser.builder().id(id).username("target").build();
|
||||
when(userService.getById(id)).thenReturn(target);
|
||||
|
||||
mockMvc.perform(get("/api/users/" + id))
|
||||
.andExpect(status().isForbidden());
|
||||
}
|
||||
|
||||
@Test
|
||||
@WithMockUser(username = "admin", authorities = {"ADMIN_USER"})
|
||||
void getUser_returns200_whenCallerHasAdminUserPermission() throws Exception {
|
||||
UUID id = UUID.randomUUID();
|
||||
AppUser user = AppUser.builder().id(id).username("target").build();
|
||||
when(userService.getById(id)).thenReturn(user);
|
||||
|
||||
mockMvc.perform(get("/api/users/" + id))
|
||||
.andExpect(status().isOk())
|
||||
.andExpect(jsonPath("$.username").value("target"));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,6 +155,14 @@
|
||||
"admin_multiselect_hint_full": "Strg+Klick für Mehrfachauswahl",
|
||||
"admin_section_tags": "Schlagworte",
|
||||
"admin_tags_warning": "Warnung: Umbenennen oder Löschen wirkt sich auf alle verknüpften Dokumente aus.",
|
||||
"admin_tags_list_title": "Alle Schlagworte",
|
||||
"admin_tags_empty": "Keine Schlagworte vorhanden.",
|
||||
"admin_tags_select_prompt": "W\u00e4hle ein Schlagwort aus der Liste.",
|
||||
"admin_tag_edit_heading": "Schlagwort: {name}",
|
||||
"admin_tag_updated": "Schlagwort umbenannt.",
|
||||
"admin_unsaved_warning": "Du hast ungespeicherte Änderungen – speichere oder verwerfe, bevor du wechselst.",
|
||||
"admin_btn_collapse_list": "Liste einklappen",
|
||||
"admin_btn_expand_list": "Liste ausklappen",
|
||||
"admin_btn_edit_tag_label": "Schlagwort bearbeiten",
|
||||
"admin_tag_delete_confirm": "Wirklich löschen? Das Schlagwort wird aus allen Dokumenten entfernt.",
|
||||
"admin_btn_delete_tag_label": "Schlagwort löschen",
|
||||
@@ -167,6 +175,21 @@
|
||||
"admin_group_name_placeholder": "Gruppenname (z.B. Editoren)",
|
||||
"admin_user_delete_confirm": "Benutzer {username} wirklich löschen?",
|
||||
"admin_btn_new_user": "Neuer Benutzer",
|
||||
"admin_users_list_title": "Alle Benutzer",
|
||||
"admin_users_search_placeholder": "Benutzer suchen\u2026",
|
||||
"admin_users_empty": "Keine Benutzer vorhanden.",
|
||||
"admin_users_select_prompt": "W\u00e4hle einen Benutzer aus der Liste.",
|
||||
"admin_btn_new_group": "Neue Gruppe",
|
||||
"admin_groups_list_title": "Alle Gruppen",
|
||||
"admin_groups_empty": "Keine Gruppen vorhanden.",
|
||||
"admin_groups_select_prompt": "W\u00e4hle eine Gruppe aus der Liste.",
|
||||
"admin_groups_permission_count": "{count} Berechtigungen",
|
||||
"admin_group_new_heading": "Neue Gruppe anlegen",
|
||||
"admin_group_edit_heading": "Gruppe: {name}",
|
||||
"admin_group_updated": "Gruppe gespeichert.",
|
||||
"admin_group_created": "Gruppe erstellt.",
|
||||
"admin_groups_section_standard": "Standard",
|
||||
"admin_groups_section_administrative": "Administrativ",
|
||||
"admin_user_new_heading": "Neuen Benutzer anlegen",
|
||||
"admin_user_edit_heading": "Benutzer bearbeiten: {username}",
|
||||
"admin_user_created": "Benutzer wurde erstellt.",
|
||||
@@ -250,6 +273,14 @@
|
||||
"admin_system_backfill_hashes_description": "Berechnet den SHA-256-Hash für alle bereits hochgeladenen Dokumente, die noch keinen Hash haben. Dadurch werden Annotationen korrekt mit ihrer Dateiversion verknüpft und wieder angezeigt.",
|
||||
"admin_system_backfill_hashes_btn": "Datei-Hashes berechnen",
|
||||
"admin_system_backfill_hashes_success": "{count} Dokumente wurden aktualisiert.",
|
||||
"admin_system_import_heading": "Massenimport",
|
||||
"admin_system_import_description": "Importiert Dokumente und Metadaten aus der Importdatei im /import-Verzeichnis.",
|
||||
"admin_system_import_btn_start": "Import starten",
|
||||
"admin_system_import_btn_retry": "Erneut starten",
|
||||
"admin_system_import_status_idle": "Kein Import gestartet.",
|
||||
"admin_system_import_status_running": "Import läuft…",
|
||||
"admin_system_import_status_done": "Import abgeschlossen – {count} Dokumente verarbeitet.",
|
||||
"admin_system_import_status_failed": "Fehler: {message}",
|
||||
"comp_expandable_show_more": "Mehr anzeigen",
|
||||
"comp_expandable_show_less": "Weniger anzeigen",
|
||||
"error_comment_not_found": "Der Kommentar wurde nicht gefunden.",
|
||||
|
||||
@@ -155,6 +155,14 @@
|
||||
"admin_multiselect_hint_full": "Ctrl+Click for multiple selection",
|
||||
"admin_section_tags": "Tags",
|
||||
"admin_tags_warning": "Warning: Renaming or deleting affects all linked documents.",
|
||||
"admin_tags_list_title": "All Tags",
|
||||
"admin_tags_empty": "No tags found.",
|
||||
"admin_tags_select_prompt": "Select a tag from the list.",
|
||||
"admin_tag_edit_heading": "Tag: {name}",
|
||||
"admin_tag_updated": "Tag renamed.",
|
||||
"admin_unsaved_warning": "You have unsaved changes — save or discard before switching.",
|
||||
"admin_btn_collapse_list": "Collapse list",
|
||||
"admin_btn_expand_list": "Expand list",
|
||||
"admin_btn_edit_tag_label": "Edit tag",
|
||||
"admin_tag_delete_confirm": "Really delete? The tag will be removed from all documents.",
|
||||
"admin_btn_delete_tag_label": "Delete tag",
|
||||
@@ -167,6 +175,21 @@
|
||||
"admin_group_name_placeholder": "Group name (e.g. Editors)",
|
||||
"admin_user_delete_confirm": "Really delete user {username}?",
|
||||
"admin_btn_new_user": "New User",
|
||||
"admin_users_list_title": "All Users",
|
||||
"admin_users_search_placeholder": "Search users\u2026",
|
||||
"admin_users_empty": "No users found.",
|
||||
"admin_users_select_prompt": "Select a user from the list.",
|
||||
"admin_btn_new_group": "New Group",
|
||||
"admin_groups_list_title": "All Groups",
|
||||
"admin_groups_empty": "No groups found.",
|
||||
"admin_groups_select_prompt": "Select a group from the list.",
|
||||
"admin_groups_permission_count": "{count} permissions",
|
||||
"admin_group_new_heading": "Create new group",
|
||||
"admin_group_edit_heading": "Group: {name}",
|
||||
"admin_group_updated": "Group saved.",
|
||||
"admin_group_created": "Group created.",
|
||||
"admin_groups_section_standard": "Standard",
|
||||
"admin_groups_section_administrative": "Administrative",
|
||||
"admin_user_new_heading": "Create new user",
|
||||
"admin_user_edit_heading": "Edit user: {username}",
|
||||
"admin_user_created": "User has been created.",
|
||||
@@ -250,6 +273,14 @@
|
||||
"admin_system_backfill_hashes_description": "Computes the SHA-256 hash for all previously uploaded documents that do not have one yet. This ensures annotations are correctly linked to their file version and shown again.",
|
||||
"admin_system_backfill_hashes_btn": "Compute file hashes",
|
||||
"admin_system_backfill_hashes_success": "{count} documents were updated.",
|
||||
"admin_system_import_heading": "Mass import",
|
||||
"admin_system_import_description": "Imports documents and metadata from the spreadsheet file in the /import directory.",
|
||||
"admin_system_import_btn_start": "Start import",
|
||||
"admin_system_import_btn_retry": "Start again",
|
||||
"admin_system_import_status_idle": "No import started.",
|
||||
"admin_system_import_status_running": "Import running…",
|
||||
"admin_system_import_status_done": "Import complete – {count} documents processed.",
|
||||
"admin_system_import_status_failed": "Error: {message}",
|
||||
"comp_expandable_show_more": "Show more",
|
||||
"comp_expandable_show_less": "Show less",
|
||||
"error_comment_not_found": "The comment could not be found.",
|
||||
|
||||
@@ -155,6 +155,14 @@
|
||||
"admin_multiselect_hint_full": "Ctrl+Clic para selección múltiple",
|
||||
"admin_section_tags": "Etiquetas",
|
||||
"admin_tags_warning": "Advertencia: Renombrar o eliminar afecta a todos los documentos vinculados.",
|
||||
"admin_tags_list_title": "Todas las etiquetas",
|
||||
"admin_tags_empty": "No hay etiquetas.",
|
||||
"admin_tags_select_prompt": "Selecciona una etiqueta de la lista.",
|
||||
"admin_tag_edit_heading": "Etiqueta: {name}",
|
||||
"admin_tag_updated": "Etiqueta renombrada.",
|
||||
"admin_unsaved_warning": "Tienes cambios sin guardar — guarda o descarta antes de cambiar.",
|
||||
"admin_btn_collapse_list": "Contraer lista",
|
||||
"admin_btn_expand_list": "Expandir lista",
|
||||
"admin_btn_edit_tag_label": "Editar etiqueta",
|
||||
"admin_tag_delete_confirm": "¿Realmente eliminar? La etiqueta se eliminará de todos los documentos.",
|
||||
"admin_btn_delete_tag_label": "Eliminar etiqueta",
|
||||
@@ -167,6 +175,21 @@
|
||||
"admin_group_name_placeholder": "Nombre del grupo (p.ej. Editores)",
|
||||
"admin_user_delete_confirm": "¿Realmente eliminar al usuario {username}?",
|
||||
"admin_btn_new_user": "Nuevo usuario",
|
||||
"admin_users_list_title": "Todos los usuarios",
|
||||
"admin_users_search_placeholder": "Buscar usuarios\u2026",
|
||||
"admin_users_empty": "No hay usuarios.",
|
||||
"admin_users_select_prompt": "Selecciona un usuario de la lista.",
|
||||
"admin_btn_new_group": "Nuevo grupo",
|
||||
"admin_groups_list_title": "Todos los grupos",
|
||||
"admin_groups_empty": "No hay grupos.",
|
||||
"admin_groups_select_prompt": "Selecciona un grupo de la lista.",
|
||||
"admin_groups_permission_count": "{count} permisos",
|
||||
"admin_group_new_heading": "Crear nuevo grupo",
|
||||
"admin_group_edit_heading": "Grupo: {name}",
|
||||
"admin_group_updated": "Grupo guardado.",
|
||||
"admin_group_created": "Grupo creado.",
|
||||
"admin_groups_section_standard": "Est\u00e1ndar",
|
||||
"admin_groups_section_administrative": "Administrativo",
|
||||
"admin_user_new_heading": "Crear nuevo usuario",
|
||||
"admin_user_edit_heading": "Editar usuario: {username}",
|
||||
"admin_user_created": "Usuario creado.",
|
||||
@@ -250,6 +273,14 @@
|
||||
"admin_system_backfill_hashes_description": "Calcula el hash SHA-256 para todos los documentos ya subidos que aún no tienen uno. Así las anotaciones se vinculan correctamente a su versión del archivo y vuelven a mostrarse.",
|
||||
"admin_system_backfill_hashes_btn": "Calcular hashes de archivo",
|
||||
"admin_system_backfill_hashes_success": "{count} documentos fueron actualizados.",
|
||||
"admin_system_import_heading": "Importación masiva",
|
||||
"admin_system_import_description": "Importa documentos y metadatos desde el archivo en el directorio /import.",
|
||||
"admin_system_import_btn_start": "Iniciar importación",
|
||||
"admin_system_import_btn_retry": "Iniciar de nuevo",
|
||||
"admin_system_import_status_idle": "No hay importación iniciada.",
|
||||
"admin_system_import_status_running": "Importación en curso…",
|
||||
"admin_system_import_status_done": "Importación completada – {count} documentos procesados.",
|
||||
"admin_system_import_status_failed": "Error: {message}",
|
||||
"comp_expandable_show_more": "Mostrar más",
|
||||
"comp_expandable_show_less": "Mostrar menos",
|
||||
"error_comment_not_found": "El comentario no pudo encontrarse.",
|
||||
|
||||
40
frontend/src/routes/admin/+layout.server.ts
Normal file
40
frontend/src/routes/admin/+layout.server.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
import { getErrorMessage } from '$lib/errors';
|
||||
|
||||
type UserGroup = { permissions: string[] };
|
||||
|
||||
function hasPerm(user: { groups?: UserGroup[] } | undefined, perm: string): boolean {
|
||||
return user?.groups?.some((g) => g.permissions.includes(perm)) ?? false;
|
||||
}
|
||||
|
||||
function hasAnyAdminPerm(user: { groups?: UserGroup[] } | undefined): boolean {
|
||||
return (
|
||||
hasPerm(user, 'ADMIN') ||
|
||||
hasPerm(user, 'ADMIN_USER') ||
|
||||
hasPerm(user, 'ADMIN_TAG') ||
|
||||
hasPerm(user, 'ADMIN_PERMISSION')
|
||||
);
|
||||
}
|
||||
|
||||
export async function load({ fetch, locals }) {
|
||||
const user = locals.user;
|
||||
if (!hasAnyAdminPerm(user)) throw error(403, getErrorMessage('FORBIDDEN'));
|
||||
|
||||
const api = createApiClient(fetch);
|
||||
const [usersResult, groupsResult, tagsResult] = await Promise.all([
|
||||
api.GET('/api/users'),
|
||||
api.GET('/api/groups'),
|
||||
api.GET('/api/tags')
|
||||
]);
|
||||
|
||||
return {
|
||||
userCount: (usersResult.data ?? []).length,
|
||||
groupCount: (groupsResult.data ?? []).length,
|
||||
tagCount: (tagsResult.data ?? []).length,
|
||||
canManageUsers: hasPerm(user, 'ADMIN_USER'),
|
||||
canManageTags: hasPerm(user, 'ADMIN_TAG'),
|
||||
canManageGroups: hasPerm(user, 'ADMIN_PERMISSION'),
|
||||
canRunMaintenance: hasPerm(user, 'ADMIN')
|
||||
};
|
||||
}
|
||||
33
frontend/src/routes/admin/+layout.svelte
Normal file
33
frontend/src/routes/admin/+layout.svelte
Normal file
@@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import EntityNav from './EntityNav.svelte';
|
||||
|
||||
let { data, children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Admin · Familienarchiv</title>
|
||||
</svelte:head>
|
||||
|
||||
<!--
|
||||
-mt-6: cancel the global layout's pt-6 on <main>
|
||||
Height fills from below the global header (64px) to bottom of viewport.
|
||||
-->
|
||||
<div class="-mt-6 flex overflow-hidden" style="height: calc(100vh - 65px)">
|
||||
<!-- Entity Nav: hidden on mobile, icon strip on tablet, full labels on desktop -->
|
||||
<div class="hidden md:flex">
|
||||
<EntityNav
|
||||
userCount={data.userCount}
|
||||
groupCount={data.groupCount}
|
||||
tagCount={data.tagCount}
|
||||
canManageUsers={data.canManageUsers}
|
||||
canManageTags={data.canManageTags}
|
||||
canManageGroups={data.canManageGroups}
|
||||
canRunMaintenance={data.canRunMaintenance}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Right side: list panel + detail panel (or full-width for system) -->
|
||||
<div class="flex min-w-0 flex-1 overflow-hidden">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,116 +0,0 @@
|
||||
import { error, fail } from '@sveltejs/kit';
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
import { getErrorMessage } from '$lib/errors';
|
||||
|
||||
type ApiResult = { response: Response; error?: unknown };
|
||||
|
||||
function toActionResult(result: ApiResult) {
|
||||
if (!result.response.ok) {
|
||||
const code = (result.error as { code?: string } | undefined)?.code;
|
||||
return fail(result.response.status, { success: false, message: getErrorMessage(code) });
|
||||
}
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function load({ fetch, locals }) {
|
||||
const user = locals.user;
|
||||
const hasAdmin = user?.groups?.some((g: { permissions: string[] }) =>
|
||||
g.permissions.includes('ADMIN')
|
||||
);
|
||||
if (!hasAdmin) throw error(403, getErrorMessage('FORBIDDEN'));
|
||||
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const [usersResult, groupsResult, tagsResult] = await Promise.all([
|
||||
api.GET('/api/users'),
|
||||
api.GET('/api/groups'),
|
||||
api.GET('/api/tags')
|
||||
]);
|
||||
|
||||
return {
|
||||
users: usersResult.data ?? [],
|
||||
groups: groupsResult.data ?? [],
|
||||
tags: tagsResult.data ?? []
|
||||
};
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
deleteUser: async ({ request, fetch }) => {
|
||||
const data = await request.formData();
|
||||
const id = data.get('id') as string;
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const result = await api.DELETE('/api/users/{id}', {
|
||||
params: { path: { id } }
|
||||
});
|
||||
|
||||
return toActionResult(result);
|
||||
},
|
||||
|
||||
updateTag: async ({ request, fetch }) => {
|
||||
const data = await request.formData();
|
||||
const id = data.get('id') as string;
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const result = await api.PUT('/api/tags/{id}', {
|
||||
params: { path: { id } },
|
||||
body: { name: data.get('name') as string }
|
||||
});
|
||||
|
||||
return toActionResult(result);
|
||||
},
|
||||
|
||||
deleteTag: async ({ request, fetch }) => {
|
||||
const data = await request.formData();
|
||||
const id = data.get('id') as string;
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const result = await api.DELETE('/api/tags/{id}', {
|
||||
params: { path: { id } }
|
||||
});
|
||||
|
||||
return toActionResult(result);
|
||||
},
|
||||
|
||||
createGroup: async ({ request, fetch }) => {
|
||||
const data = await request.formData();
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const result = await api.POST('/api/groups', {
|
||||
body: {
|
||||
name: data.get('name') as string,
|
||||
permissions: data.getAll('permissions') as string[]
|
||||
}
|
||||
});
|
||||
|
||||
return toActionResult(result);
|
||||
},
|
||||
|
||||
updateGroup: async ({ request, fetch }) => {
|
||||
const data = await request.formData();
|
||||
const id = data.get('id') as string;
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const result = await api.PATCH('/api/groups/{id}', {
|
||||
params: { path: { id } },
|
||||
body: {
|
||||
name: data.get('name') as string,
|
||||
permissions: data.getAll('permissions') as string[]
|
||||
}
|
||||
});
|
||||
|
||||
return toActionResult(result);
|
||||
},
|
||||
|
||||
deleteGroup: async ({ request, fetch }) => {
|
||||
const data = await request.formData();
|
||||
const id = data.get('id') as string;
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const result = await api.DELETE('/api/groups/{id}', {
|
||||
params: { path: { id } }
|
||||
});
|
||||
|
||||
return toActionResult(result);
|
||||
}
|
||||
};
|
||||
@@ -1,78 +1,68 @@
|
||||
<script lang="ts">
|
||||
import { slide } from 'svelte/transition';
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import UsersTab from './UsersTab.svelte';
|
||||
import TagsTab from './TagsTab.svelte';
|
||||
import GroupsTab from './GroupsTab.svelte';
|
||||
import SystemTab from './SystemTab.svelte';
|
||||
|
||||
let { data, form } = $props();
|
||||
let { data } = $props();
|
||||
|
||||
let activeTab = $state('users');
|
||||
// On desktop/tablet the layout shell with EntityNav is visible.
|
||||
// On mobile this page IS the entity picker — tapping an entity pushes
|
||||
// the user to that route so the browser back button returns here.
|
||||
onMount(() => {
|
||||
if (window.matchMedia('(min-width: 768px)').matches) {
|
||||
goto('/admin/users', { replaceState: true });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{m.page_title_admin()}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="mx-auto max-w-7xl px-4 py-8 font-sans sm:px-6 lg:px-8">
|
||||
<div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 class="font-serif text-3xl text-ink">{m.admin_heading()}</h1>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="grid grid-cols-2 rounded-lg border border-line bg-surface p-1 shadow-sm sm:flex">
|
||||
<button
|
||||
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
|
||||
'users'
|
||||
? 'bg-primary text-primary-fg'
|
||||
: 'text-ink-2 hover:text-ink'}"
|
||||
onclick={() => (activeTab = 'users')}>{m.admin_tab_users()}</button
|
||||
>
|
||||
<button
|
||||
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
|
||||
'groups'
|
||||
? 'bg-primary text-primary-fg'
|
||||
: 'text-ink-2 hover:text-ink'}"
|
||||
onclick={() => (activeTab = 'groups')}>{m.admin_tab_groups()}</button
|
||||
>
|
||||
<button
|
||||
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
|
||||
'tags'
|
||||
? 'bg-primary text-primary-fg'
|
||||
: 'text-ink-2 hover:text-ink'}"
|
||||
onclick={() => (activeTab = 'tags')}>{m.admin_tab_tags()}</button
|
||||
>
|
||||
<button
|
||||
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
|
||||
'system'
|
||||
? 'bg-primary text-primary-fg'
|
||||
: 'text-ink-2 hover:text-ink'}"
|
||||
onclick={() => (activeTab = 'system')}>{m.admin_tab_system()}</button
|
||||
>
|
||||
</div>
|
||||
<!-- Mobile entity picker (md+ viewports redirect to /admin/users on mount) -->
|
||||
<div class="flex flex-1 flex-col bg-surface">
|
||||
<div class="border-b border-line px-4 py-4">
|
||||
<h1 class="font-sans text-lg font-bold text-ink">{m.admin_heading()}</h1>
|
||||
</div>
|
||||
|
||||
{#if form?.message}
|
||||
<div class="mb-6 rounded border border-accent/50 bg-accent/20 p-4 text-ink">
|
||||
{form.message}
|
||||
</div>
|
||||
{/if}
|
||||
<nav class="divide-y divide-line" aria-label={m.admin_heading()}>
|
||||
{#if data.canManageUsers}
|
||||
<a href="/admin/users" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
|
||||
<div>
|
||||
<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_users()}</div>
|
||||
<div class="mt-0.5 font-sans text-xs text-ink-3">{data.userCount}</div>
|
||||
</div>
|
||||
<span class="text-ink-3">›</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if activeTab === 'users'}
|
||||
<div in:slide>
|
||||
<UsersTab users={data.users} />
|
||||
</div>
|
||||
{:else if activeTab === 'tags'}
|
||||
<div in:slide>
|
||||
<TagsTab tags={data.tags} />
|
||||
</div>
|
||||
{:else if activeTab === 'groups'}
|
||||
<div in:slide>
|
||||
<GroupsTab groups={data.groups} />
|
||||
</div>
|
||||
{:else if activeTab === 'system'}
|
||||
<div in:slide>
|
||||
<SystemTab />
|
||||
</div>
|
||||
{/if}
|
||||
{#if data.canManageGroups}
|
||||
<a href="/admin/groups" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
|
||||
<div>
|
||||
<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_groups()}</div>
|
||||
<div class="mt-0.5 font-sans text-xs text-ink-3">{data.groupCount}</div>
|
||||
</div>
|
||||
<span class="text-ink-3">›</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if data.canManageTags}
|
||||
<a href="/admin/tags" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
|
||||
<div>
|
||||
<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_tags()}</div>
|
||||
<div class="mt-0.5 font-sans text-xs text-ink-3">{data.tagCount}</div>
|
||||
</div>
|
||||
<span class="text-ink-3">›</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if data.canRunMaintenance}
|
||||
<a href="/admin/system" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
|
||||
<div>
|
||||
<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_system()}</div>
|
||||
</div>
|
||||
<span class="text-ink-3">›</span>
|
||||
</a>
|
||||
{/if}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
492
frontend/src/routes/admin/EntityNav.svelte
Normal file
492
frontend/src/routes/admin/EntityNav.svelte
Normal file
@@ -0,0 +1,492 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let {
|
||||
userCount,
|
||||
groupCount,
|
||||
tagCount,
|
||||
canManageUsers,
|
||||
canManageTags,
|
||||
canManageGroups,
|
||||
canRunMaintenance
|
||||
}: {
|
||||
userCount: number;
|
||||
groupCount: number;
|
||||
tagCount: number;
|
||||
canManageUsers: boolean;
|
||||
canManageTags: boolean;
|
||||
canManageGroups: boolean;
|
||||
canRunMaintenance: boolean;
|
||||
} = $props();
|
||||
|
||||
const currentPath = $derived(page.url.pathname);
|
||||
const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`);
|
||||
|
||||
let flyoutOpen = $state(false);
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape' && flyoutOpen) {
|
||||
flyoutOpen = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:document onkeydown={handleKeydown} />
|
||||
|
||||
<!--
|
||||
Desktop (lg+): 120px with text labels
|
||||
Tablet (md–lg): 48px icon-only strip with flyout panel
|
||||
-->
|
||||
<nav
|
||||
class="flex flex-shrink-0 flex-col bg-brand-navy md:w-12 lg:w-30"
|
||||
aria-label={m.admin_heading()}
|
||||
>
|
||||
<!-- Desktop-only heading -->
|
||||
<div
|
||||
class="hidden px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase lg:block"
|
||||
>
|
||||
{m.admin_heading()}
|
||||
</div>
|
||||
|
||||
{#if canManageUsers}
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_users()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
{isActive('users')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('users') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[9px] font-bold {isActive('users') ? 'text-white/80' : 'text-white/35'}">
|
||||
{userCount}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
href="/admin/users"
|
||||
class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
|
||||
{isActive('users')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('users') ? 'page' : undefined}
|
||||
title={m.admin_tab_users()}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('users') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/20'}">
|
||||
{userCount}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('users') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_users()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if canManageGroups}
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_groups()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
{isActive('groups')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('groups') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[9px] font-bold {isActive('groups') ? 'text-white/80' : 'text-white/35'}">
|
||||
{groupCount}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
href="/admin/groups"
|
||||
class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
|
||||
{isActive('groups')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('groups') ? 'page' : undefined}
|
||||
title={m.admin_tab_groups()}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('groups') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/20'}">
|
||||
{groupCount}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('groups') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_groups()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if canManageTags}
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_tags()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
{isActive('tags')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('tags') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
|
||||
/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
|
||||
</svg>
|
||||
<span class="text-[9px] font-bold {isActive('tags') ? 'text-white/80' : 'text-white/35'}">
|
||||
{tagCount}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
href="/admin/tags"
|
||||
class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
|
||||
{isActive('tags')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('tags') ? 'page' : undefined}
|
||||
title={m.admin_tab_tags()}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('tags') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
|
||||
/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
|
||||
</svg>
|
||||
<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/20'}">
|
||||
{tagCount}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('tags') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_tags()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="flex-1"></div>
|
||||
|
||||
{#if canRunMaintenance}
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_system()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-t border-l-[3px] border-white/10 py-3 transition-colors lg:hidden
|
||||
{isActive('system')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-l-transparent hover:bg-white/5'}"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('system') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
|
||||
/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
href="/admin/system"
|
||||
class="hidden flex-col items-start justify-center gap-0.5 border-t border-l-[3px] border-white/10 px-3.5 py-2.5 transition-colors lg:flex
|
||||
{isActive('system')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-l-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('system') ? 'page' : undefined}
|
||||
title={m.admin_tab_system()}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('system') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
|
||||
/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('system') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_system()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
{#if flyoutOpen}
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
data-flyout-backdrop
|
||||
role="none"
|
||||
class="fixed inset-0 z-40 bg-black/40"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
></div>
|
||||
|
||||
<!-- Flyout panel -->
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={m.admin_heading()}
|
||||
class="fixed top-0 left-12 z-50 flex h-full w-40 flex-col bg-brand-navy shadow-xl"
|
||||
style="transform: translateX(0); transition: transform 180ms ease-out;"
|
||||
>
|
||||
<!-- Heading -->
|
||||
<div class="px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase">
|
||||
{m.admin_heading()}
|
||||
</div>
|
||||
|
||||
{#if canManageUsers}
|
||||
<a
|
||||
href="/admin/users"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
||||
{isActive('users')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('users') ? 'page' : undefined}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('users') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/20'}"
|
||||
>
|
||||
{userCount}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('users') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_users()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if canManageGroups}
|
||||
<a
|
||||
href="/admin/groups"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
||||
{isActive('groups')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('groups') ? 'page' : undefined}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('groups') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/20'}"
|
||||
>
|
||||
{groupCount}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('groups') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_groups()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if canManageTags}
|
||||
<a
|
||||
href="/admin/tags"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
||||
{isActive('tags')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('tags') ? 'page' : undefined}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('tags') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
|
||||
/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
|
||||
</svg>
|
||||
<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/20'}">
|
||||
{tagCount}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('tags') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_tags()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="flex-1"></div>
|
||||
|
||||
{#if canRunMaintenance}
|
||||
<a
|
||||
href="/admin/system"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-t border-l-[3px] border-white/10 px-3.5 py-2.5 transition-colors
|
||||
{isActive('system')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-l-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('system') ? 'page' : undefined}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('system') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('system') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_system()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,221 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let { groups }: { groups: { id: string; name: string; permissions: string[] }[] } = $props();
|
||||
|
||||
const availablePermissions = ['WRITE_ALL', 'ADMIN', 'ADMIN_USER', 'ADMIN_TAG', 'ADMIN_PERMISSION'];
|
||||
|
||||
let editingGroupId: string | null = $state(null);
|
||||
|
||||
function startEditGroup(id: string) {
|
||||
editingGroupId = id;
|
||||
}
|
||||
|
||||
function cancelEditGroup() {
|
||||
editingGroupId = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm">
|
||||
<div class="flex items-center justify-between border-b border-line-2 p-6">
|
||||
<h2 class="text-lg font-bold text-ink-2">{m.admin_section_groups()}</h2>
|
||||
</div>
|
||||
|
||||
<table class="min-w-full divide-y divide-line">
|
||||
<thead class="bg-muted">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
|
||||
>{m.admin_col_name()}</th
|
||||
>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
|
||||
>{m.admin_col_permissions()}</th
|
||||
>
|
||||
<th class="px-6 py-3 text-right text-xs font-bold tracking-wider text-ink-2 uppercase"
|
||||
>{m.admin_col_actions()}</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-line bg-surface">
|
||||
{#each groups as group (group.id)}
|
||||
<tr class="group/row hover:bg-muted">
|
||||
{#if editingGroupId === group.id}
|
||||
<!-- EDIT MODE -->
|
||||
<td colspan="3" class="px-6 py-4">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/updateGroup"
|
||||
use:enhance={() =>
|
||||
async ({ update }) => {
|
||||
await update();
|
||||
cancelEditGroup();
|
||||
}}
|
||||
class="flex w-full flex-col items-start gap-4 sm:flex-row"
|
||||
>
|
||||
<input type="hidden" name="id" value={group.id} />
|
||||
|
||||
<div class="w-full sm:w-1/3">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={group.name}
|
||||
class="w-full rounded border-accent text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex h-full flex-1 flex-wrap items-center gap-4 pt-2">
|
||||
{#each availablePermissions as perm (perm)}
|
||||
<label class="inline-flex items-center text-xs font-bold text-ink-2 uppercase">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="permissions"
|
||||
value={perm}
|
||||
checked={group.permissions.includes(perm)}
|
||||
class="mr-2 rounded border-line text-ink focus:ring-accent"
|
||||
/>
|
||||
{perm.replace('_', ' ')}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 self-start sm:self-center">
|
||||
<button
|
||||
type="submit"
|
||||
aria-label={m.btn_save()}
|
||||
class="p-1 text-green-600 hover:text-green-800"
|
||||
>
|
||||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={cancelEditGroup}
|
||||
aria-label={m.btn_cancel()}
|
||||
class="p-1 text-ink-3 hover:text-red-500"
|
||||
>
|
||||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
{:else}
|
||||
<!-- VIEW MODE -->
|
||||
<td class="px-6 py-4 text-sm font-bold whitespace-nowrap text-ink">
|
||||
{group.name}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-ink-2">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{#each group.permissions as perm (perm)}
|
||||
<span
|
||||
class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase
|
||||
{perm === 'ADMIN'
|
||||
? 'border-red-100 bg-red-50 text-red-700'
|
||||
: 'border-line bg-muted text-ink-2'}"
|
||||
>
|
||||
{perm}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right whitespace-nowrap">
|
||||
<div class="flex items-center justify-end gap-3">
|
||||
<button
|
||||
onclick={() => startEditGroup(group.id)}
|
||||
class="text-sm font-bold tracking-wide text-primary uppercase hover:text-ink-2"
|
||||
>
|
||||
{m.btn_edit()}
|
||||
</button>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/deleteGroup"
|
||||
use:enhance={({ cancel }) => {
|
||||
if (!confirm(m.admin_group_delete_confirm())) {
|
||||
cancel();
|
||||
}
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={group.id} />
|
||||
<button
|
||||
class="p-1 text-ink-3 transition-colors hover:text-red-600"
|
||||
title={m.btn_delete()}
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- CREATE GROUP FORM -->
|
||||
<div class="border-t border-line bg-muted p-6">
|
||||
<h3 class="mb-4 text-xs font-bold tracking-wide text-ink-2 uppercase">
|
||||
{m.admin_section_new_group()}
|
||||
</h3>
|
||||
<form
|
||||
method="POST"
|
||||
action="?/createGroup"
|
||||
use:enhance
|
||||
class="flex flex-col items-start gap-4 md:flex-row md:items-center"
|
||||
>
|
||||
<div class="w-full flex-1">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder={m.admin_group_name_placeholder()}
|
||||
required
|
||||
class="w-full rounded border-line text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
{#each availablePermissions as perm (perm)}
|
||||
<label class="inline-flex items-center text-xs font-bold text-ink-2 uppercase">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="permissions"
|
||||
value={perm}
|
||||
class="mr-2 rounded border-line text-ink focus:ring-accent"
|
||||
/>
|
||||
{perm.replace('_', ' ')}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full rounded bg-primary px-6 py-2 text-sm font-bold text-primary-fg uppercase hover:bg-accent hover:text-ink md:w-auto"
|
||||
>
|
||||
{m.btn_create()}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,72 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let backfillResult: number | null = $state(null);
|
||||
let backfillLoading = $state(false);
|
||||
let backfillHashesResult: number | null = $state(null);
|
||||
let backfillHashesLoading = $state(false);
|
||||
|
||||
async function backfillVersions() {
|
||||
backfillLoading = true;
|
||||
backfillResult = null;
|
||||
try {
|
||||
const res = await fetch('/api/admin/backfill-versions', { method: 'POST' });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
backfillResult = data.count;
|
||||
}
|
||||
} finally {
|
||||
backfillLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function backfillFileHashes() {
|
||||
backfillHashesLoading = true;
|
||||
backfillHashesResult = null;
|
||||
try {
|
||||
const res = await fetch('/api/admin/backfill-file-hashes', { method: 'POST' });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
backfillHashesResult = data.count;
|
||||
}
|
||||
} finally {
|
||||
backfillHashesLoading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-1 text-lg font-bold text-ink-2">{m.admin_system_backfill_heading()}</h2>
|
||||
<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_description()}</p>
|
||||
<button
|
||||
onclick={backfillVersions}
|
||||
disabled={backfillLoading}
|
||||
class="rounded bg-primary px-6 py-2 text-sm font-bold text-primary-fg uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{backfillLoading ? '…' : m.admin_system_backfill_btn()}
|
||||
</button>
|
||||
{#if backfillResult !== null}
|
||||
<p class="mt-4 text-sm font-medium text-ink">
|
||||
{m.admin_system_backfill_success({ count: backfillResult })}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mt-4 rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-1 text-lg font-bold text-ink-2">
|
||||
{m.admin_system_backfill_hashes_heading()}
|
||||
</h2>
|
||||
<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_hashes_description()}</p>
|
||||
<button
|
||||
onclick={backfillFileHashes}
|
||||
disabled={backfillHashesLoading}
|
||||
class="rounded bg-primary px-6 py-2 text-sm font-bold text-primary-fg uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{backfillHashesLoading ? '…' : m.admin_system_backfill_hashes_btn()}
|
||||
</button>
|
||||
{#if backfillHashesResult !== null}
|
||||
<p class="mt-4 text-sm font-medium text-ink">
|
||||
{m.admin_system_backfill_hashes_success({ count: backfillHashesResult })}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,127 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let { tags }: { tags: { id: string; name: string }[] } = $props();
|
||||
|
||||
let editingTagId: string | null = $state(null);
|
||||
let editingTagName = $state('');
|
||||
|
||||
function startEditTag(tag: { id: string; name: string }) {
|
||||
editingTagId = tag.id;
|
||||
editingTagName = tag.name;
|
||||
}
|
||||
|
||||
function cancelEditTag() {
|
||||
editingTagId = null;
|
||||
editingTagName = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm">
|
||||
<div class="border-b border-line-2 bg-yellow-50/50 p-6">
|
||||
<h2 class="text-lg font-bold text-ink-2">{m.admin_section_tags()}</h2>
|
||||
<p class="mt-1 text-xs text-yellow-800">
|
||||
{m.admin_tags_warning()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="max-h-[600px] divide-y divide-line-2 overflow-y-auto">
|
||||
{#each tags as tag (tag.id)}
|
||||
<li class="group flex items-center justify-between px-6 py-3 hover:bg-muted">
|
||||
{#if editingTagId === tag.id}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/updateTag"
|
||||
use:enhance={() =>
|
||||
async ({ update }) => {
|
||||
await update();
|
||||
cancelEditTag();
|
||||
}}
|
||||
class="flex flex-1 items-center gap-2"
|
||||
>
|
||||
<input type="hidden" name="id" value={tag.id} />
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
bind:value={editingTagName}
|
||||
class="flex-1 rounded border-accent px-2 py-1 text-sm ring-1 ring-accent"
|
||||
/>
|
||||
<button aria-label={m.btn_save()} class="text-green-600 hover:text-green-800"
|
||||
><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/></svg
|
||||
></button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={cancelEditTag}
|
||||
aria-label={m.btn_cancel()}
|
||||
class="text-ink-3 hover:text-ink-2"
|
||||
><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/></svg
|
||||
></button
|
||||
>
|
||||
</form>
|
||||
{:else}
|
||||
<span class="rounded bg-muted px-2 py-1 text-sm font-medium text-ink">
|
||||
{tag.name}
|
||||
</span>
|
||||
<div class="flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<button
|
||||
onclick={() => startEditTag(tag)}
|
||||
aria-label={m.admin_btn_edit_tag_label()}
|
||||
class="p-1 text-ink-3 hover:text-ink"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
<form
|
||||
method="POST"
|
||||
action="?/deleteTag"
|
||||
use:enhance={({ cancel }) => {
|
||||
if (!confirm(m.admin_tag_delete_confirm())) {
|
||||
cancel();
|
||||
}
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
};
|
||||
}}
|
||||
class="inline"
|
||||
>
|
||||
<input type="hidden" name="id" value={tag.id} />
|
||||
<button
|
||||
aria-label={m.admin_btn_delete_tag_label()}
|
||||
class="p-1 text-ink-3 hover:text-red-600"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,120 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let {
|
||||
users
|
||||
}: {
|
||||
users: {
|
||||
id: string;
|
||||
username: string;
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
groups?: { id: string; name: string }[];
|
||||
}[];
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm">
|
||||
<div class="flex items-center justify-between border-b border-line-2 p-6">
|
||||
<h2 class="text-lg font-bold text-ink-2">{m.admin_section_users()}</h2>
|
||||
<a
|
||||
href="/admin/users/new"
|
||||
class="inline-flex items-center gap-1 rounded-sm bg-primary px-4 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
{m.admin_btn_new_user()}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<table class="min-w-full divide-y divide-line">
|
||||
<thead class="bg-muted">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
|
||||
>{m.admin_col_login()}</th
|
||||
>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
|
||||
>{m.admin_col_full_name()}</th
|
||||
>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
|
||||
>{m.admin_col_groups()}</th
|
||||
>
|
||||
<th class="px-6 py-3 text-right text-xs font-bold tracking-wider text-ink-2 uppercase"
|
||||
>{m.admin_col_actions()}</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-line bg-surface">
|
||||
{#each users as user (user.id)}
|
||||
<tr class="group/row hover:bg-muted">
|
||||
<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-ink">
|
||||
{user.username}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm whitespace-nowrap text-ink-2">
|
||||
{#if user.firstName || user.lastName}
|
||||
{user.firstName ?? ''} {user.lastName ?? ''}
|
||||
{:else}
|
||||
<span class="text-ink-3 italic">–</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-ink-2">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{#if user.groups && user.groups.length > 0}
|
||||
{#each user.groups as group (group.id)}
|
||||
<span
|
||||
class="rounded-full border border-blue-100 bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 uppercase"
|
||||
>
|
||||
{group.name}
|
||||
</span>
|
||||
{/each}
|
||||
{:else}
|
||||
<span class="text-xs text-ink-3 italic">{m.admin_no_groups()}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right whitespace-nowrap">
|
||||
<div class="flex items-center justify-end gap-4">
|
||||
<a
|
||||
href="/admin/users/{user.id}"
|
||||
class="text-sm font-bold tracking-wide text-primary uppercase hover:text-ink-2"
|
||||
>
|
||||
{m.btn_edit()}
|
||||
</a>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/deleteUser"
|
||||
use:enhance={({ cancel }) => {
|
||||
if (!confirm(m.admin_user_delete_confirm({ username: user.username }))) {
|
||||
cancel();
|
||||
}
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
};
|
||||
}}
|
||||
class="flex items-center"
|
||||
>
|
||||
<input type="hidden" name="id" value={user.id} />
|
||||
<button
|
||||
class="p-1 text-ink-3 transition-colors hover:text-red-600"
|
||||
title={m.admin_btn_delete_user_title()}
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
81
frontend/src/routes/admin/entity-nav.svelte.spec.ts
Normal file
81
frontend/src/routes/admin/entity-nav.svelte.spec.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
import { afterEach, describe, it, expect, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import EntityNav from './EntityNav.svelte';
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: { url: { pathname: '/admin/users' } }
|
||||
}));
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const props = {
|
||||
userCount: 5,
|
||||
groupCount: 3,
|
||||
tagCount: 8,
|
||||
canManageUsers: true,
|
||||
canManageTags: true,
|
||||
canManageGroups: true,
|
||||
canRunMaintenance: true
|
||||
};
|
||||
|
||||
describe('EntityNav — flyout', () => {
|
||||
it('flyout dialog is not visible initially', async () => {
|
||||
render(EntityNav, props);
|
||||
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking a flyout trigger opens the dialog', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('flyout dialog has aria-modal="true"', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
|
||||
});
|
||||
|
||||
it('flyout dialog has an aria-label', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
const dialog = document.querySelector('[role="dialog"]')!;
|
||||
expect(dialog.getAttribute('aria-label')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('flyout contains navigation links to each entity', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
const dialog = document.querySelector('[role="dialog"]')!;
|
||||
const links = dialog.querySelectorAll('a[href^="/admin/"]');
|
||||
expect(links.length).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
it('pressing Escape closes the flyout', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
|
||||
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking the backdrop closes the flyout', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
document.querySelector<HTMLElement>('[data-flyout-backdrop]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking a flyout link closes the flyout', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
const dialog = document.querySelector('[role="dialog"]')!;
|
||||
dialog.querySelector<HTMLAnchorElement>('a[href^="/admin/"]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
8
frontend/src/routes/admin/groups/+layout.server.ts
Normal file
8
frontend/src/routes/admin/groups/+layout.server.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
export const load: LayoutServerLoad = async ({ fetch }) => {
|
||||
const api = createApiClient(fetch);
|
||||
const result = await api.GET('/api/groups');
|
||||
return { groups: result.data ?? [] };
|
||||
};
|
||||
17
frontend/src/routes/admin/groups/+layout.svelte
Normal file
17
frontend/src/routes/admin/groups/+layout.svelte
Normal file
@@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import GroupsListPanel from './GroupsListPanel.svelte';
|
||||
|
||||
let { data, children } = $props();
|
||||
|
||||
const autoCollapse = $derived(page.url.pathname === '/admin/groups/new');
|
||||
const isAtListRoot = $derived(page.url.pathname === '/admin/groups');
|
||||
</script>
|
||||
|
||||
<div class="{isAtListRoot ? 'flex' : 'hidden'} flex-shrink-0 md:flex">
|
||||
<GroupsListPanel groups={data.groups} autocollapse={autoCollapse} />
|
||||
</div>
|
||||
|
||||
<div class="{isAtListRoot ? 'hidden' : 'flex'} min-w-0 flex-1 flex-col overflow-hidden md:flex">
|
||||
{@render children()}
|
||||
</div>
|
||||
7
frontend/src/routes/admin/groups/+page.svelte
Normal file
7
frontend/src/routes/admin/groups/+page.svelte
Normal file
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 items-center justify-center p-8">
|
||||
<p class="text-sm text-ink-3">{m.admin_groups_select_prompt()}</p>
|
||||
</div>
|
||||
111
frontend/src/routes/admin/groups/GroupsListPanel.svelte
Normal file
111
frontend/src/routes/admin/groups/GroupsListPanel.svelte
Normal file
@@ -0,0 +1,111 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
type Group = {
|
||||
id: string;
|
||||
name: string;
|
||||
permissions: string[];
|
||||
};
|
||||
|
||||
let {
|
||||
groups,
|
||||
autocollapse = false
|
||||
}: {
|
||||
groups: Group[];
|
||||
autocollapse?: boolean;
|
||||
} = $props();
|
||||
|
||||
let isCollapsed = $state(
|
||||
typeof localStorage !== 'undefined' && localStorage.getItem('admin_list_collapsed') === 'true'
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
if (autocollapse) isCollapsed = true;
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('admin_list_collapsed', String(isCollapsed));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if isCollapsed}
|
||||
<!-- Collapsed handle: 32px -->
|
||||
<button
|
||||
onclick={() => (isCollapsed = false)}
|
||||
aria-label={m.admin_btn_expand_list()}
|
||||
class="flex w-8 flex-shrink-0 flex-col items-center gap-2 border-r border-line bg-surface pt-2 hover:bg-muted"
|
||||
>
|
||||
<span class="text-sm font-bold text-ink-2">›</span>
|
||||
<span
|
||||
class="text-[8px] font-extrabold tracking-widest text-ink-3 uppercase"
|
||||
style="writing-mode: vertical-rl; transform: rotate(180deg);"
|
||||
>
|
||||
{m.admin_tab_groups()}
|
||||
</span>
|
||||
</button>
|
||||
{:else}
|
||||
<div
|
||||
class="flex w-[200px] flex-shrink-0 flex-col overflow-hidden border-r border-line bg-surface"
|
||||
>
|
||||
<!-- Panel header -->
|
||||
<div class="flex items-center justify-between border-b border-line px-3 py-2">
|
||||
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_groups_list_title()}
|
||||
</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<a
|
||||
href="/admin/groups/new"
|
||||
class="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-muted hover:text-ink"
|
||||
title={m.admin_btn_new_group()}
|
||||
aria-label={m.admin_btn_new_group()}
|
||||
>
|
||||
<svg
|
||||
class="h-3.5 w-3.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</a>
|
||||
<button
|
||||
onclick={() => (isCollapsed = true)}
|
||||
aria-label={m.admin_btn_collapse_list()}
|
||||
class="flex h-6 w-6 items-center justify-center rounded-sm text-xs font-bold text-ink-2 transition-colors hover:bg-muted"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable group list -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
{#if groups.length === 0}
|
||||
<p class="px-4 py-6 text-center text-xs text-ink-3">
|
||||
{m.admin_groups_empty()}
|
||||
</p>
|
||||
{:else}
|
||||
{#each groups as group (group.id)}
|
||||
{@const isActive = page.url.pathname.startsWith('/admin/groups/' + group.id)}
|
||||
<a
|
||||
href="/admin/groups/{group.id}"
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
class="block border-l-2 px-3 py-2.5 transition-colors {isActive
|
||||
? 'border-primary bg-primary/10 dark:bg-primary/15'
|
||||
: 'border-transparent hover:bg-muted'}"
|
||||
>
|
||||
<div class="text-sm font-bold text-ink">{group.name}</div>
|
||||
<div class="mt-0.5 text-xs text-ink-3">
|
||||
{m.admin_groups_permission_count({ count: group.permissions.length })}
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
47
frontend/src/routes/admin/groups/[id]/+page.server.ts
Normal file
47
frontend/src/routes/admin/groups/[id]/+page.server.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import { error, fail, redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad, Actions } from './$types';
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
import { getErrorMessage } from '$lib/errors';
|
||||
|
||||
export const load: PageServerLoad = async ({ params, parent }) => {
|
||||
const { groups } = await parent();
|
||||
const group = groups.find((g: { id: string }) => g.id === params.id);
|
||||
if (!group) throw error(404, getErrorMessage('GROUP_NOT_FOUND'));
|
||||
return { group };
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
update: async ({ params, request, fetch }) => {
|
||||
const data = await request.formData();
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const result = await api.PATCH('/api/groups/{id}', {
|
||||
params: { path: { id: params.id } },
|
||||
body: {
|
||||
name: data.get('name') as string,
|
||||
permissions: data.getAll('permissions') as string[]
|
||||
}
|
||||
});
|
||||
|
||||
if (!result.response.ok) {
|
||||
const code = (result.error as unknown as { code?: string })?.code;
|
||||
return fail(result.response.status, { error: getErrorMessage(code) });
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
delete: async ({ params, fetch }) => {
|
||||
const api = createApiClient(fetch);
|
||||
const result = await api.DELETE('/api/groups/{id}', {
|
||||
params: { path: { id: params.id } }
|
||||
});
|
||||
|
||||
if (!result.response.ok) {
|
||||
const code = (result.error as unknown as { code?: string })?.code;
|
||||
return fail(result.response.status, { error: getErrorMessage(code) });
|
||||
}
|
||||
|
||||
throw redirect(303, '/admin/groups');
|
||||
}
|
||||
};
|
||||
193
frontend/src/routes/admin/groups/[id]/+page.svelte
Normal file
193
frontend/src/routes/admin/groups/[id]/+page.svelte
Normal file
@@ -0,0 +1,193 @@
|
||||
<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 = $state<string | null>(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: { value: string; label: string }[] = [
|
||||
{ value: 'READ_ALL', label: 'Nur lesen' },
|
||||
{ value: 'ANNOTATE_ALL', label: 'Lesen & Annotieren' },
|
||||
{ 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 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>
|
||||
149
frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
Normal file
149
frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts
Normal file
@@ -0,0 +1,149 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import Page from './+page.svelte';
|
||||
|
||||
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
|
||||
vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
|
||||
|
||||
import { beforeNavigate, goto } from '$app/navigation';
|
||||
|
||||
const baseGroup = { id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] };
|
||||
const baseData = { group: baseGroup };
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
// ─── Rendering ────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('Admin edit group page – rendering', () => {
|
||||
it('renders the heading with group name', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect.element(page.getByText(/Gruppe: Editoren/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('pre-fills the name input', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const input = document.querySelector<HTMLInputElement>('input[name="name"]');
|
||||
expect(input?.value).toBe('Editoren');
|
||||
});
|
||||
|
||||
it('pre-checks permissions that the group already has', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const checkbox = document.querySelector<HTMLInputElement>(
|
||||
'input[type="checkbox"][name="permissions"][value="WRITE_ALL"]'
|
||||
);
|
||||
expect(checkbox?.checked).toBe(true);
|
||||
});
|
||||
|
||||
it('renders the cancel link pointing to /admin/groups', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /Abbrechen/i }))
|
||||
.toHaveAttribute('href', '/admin/groups');
|
||||
});
|
||||
|
||||
it('renders a READ_ALL checkbox in the standard permissions section', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const cb = document.querySelector<HTMLInputElement>(
|
||||
'input[type="checkbox"][name="permissions"][value="READ_ALL"]'
|
||||
);
|
||||
expect(cb).not.toBeNull();
|
||||
});
|
||||
|
||||
it('renders an ANNOTATE_ALL checkbox in the standard permissions section', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const cb = document.querySelector<HTMLInputElement>(
|
||||
'input[type="checkbox"][name="permissions"][value="ANNOTATE_ALL"]'
|
||||
);
|
||||
expect(cb).not.toBeNull();
|
||||
});
|
||||
|
||||
it('pre-checks READ_ALL when group has it', async () => {
|
||||
const data = { group: { id: 'g2', name: 'Leser', permissions: ['READ_ALL'] } };
|
||||
render(Page, { data, form: null });
|
||||
const cb = document.querySelector<HTMLInputElement>(
|
||||
'input[type="checkbox"][name="permissions"][value="READ_ALL"]'
|
||||
);
|
||||
expect(cb?.checked).toBe(true);
|
||||
});
|
||||
|
||||
it('pre-checks ANNOTATE_ALL when group has it', async () => {
|
||||
const data = {
|
||||
group: { id: 'g3', name: 'Annotatoren', permissions: ['READ_ALL', 'ANNOTATE_ALL'] }
|
||||
};
|
||||
render(Page, { data, form: null });
|
||||
const cb = document.querySelector<HTMLInputElement>(
|
||||
'input[type="checkbox"][name="permissions"][value="ANNOTATE_ALL"]'
|
||||
);
|
||||
expect(cb?.checked).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Unsaved-changes guard ────────────────────────────────────────────────────
|
||||
|
||||
describe('Admin edit group page – unsaved-changes guard', () => {
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
it('does not show unsaved warning initially', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('cancels navigation and shows warning when form is dirty', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
document
|
||||
.querySelector<HTMLInputElement>('input[name="name"]')!
|
||||
.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
|
||||
const cancel = vi.fn();
|
||||
callback({ cancel, to: { url: new URL('http://localhost/admin/groups/g2') } });
|
||||
|
||||
expect(cancel).toHaveBeenCalled();
|
||||
await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not cancel navigation when form is clean', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
const cancel = vi.fn();
|
||||
callback({ cancel, to: { url: new URL('http://localhost/admin/groups/g2') } });
|
||||
|
||||
expect(cancel).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('discard button calls goto with the target URL', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
document
|
||||
.querySelector<HTMLInputElement>('input[name="name"]')!
|
||||
.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
|
||||
callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/groups/g2') } });
|
||||
|
||||
await page.getByRole('button', { name: /verwerfen/i }).click();
|
||||
|
||||
expect(vi.mocked(goto)).toHaveBeenCalledWith('http://localhost/admin/groups/g2');
|
||||
});
|
||||
|
||||
it('clears dirty state when form saves successfully', async () => {
|
||||
const { rerender } = render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
document
|
||||
.querySelector<HTMLInputElement>('input[name="name"]')!
|
||||
.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
|
||||
callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/groups/g2') } });
|
||||
await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
|
||||
|
||||
await rerender({ data: baseData, form: { success: true } });
|
||||
|
||||
const cancel = vi.fn();
|
||||
callback({ cancel, to: { url: new URL('http://localhost/admin/groups/g2') } });
|
||||
expect(cancel).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
41
frontend/src/routes/admin/groups/layout.server.spec.ts
Normal file
41
frontend/src/routes/admin/groups/layout.server.spec.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import { load } from './+layout.server';
|
||||
|
||||
vi.mock('$lib/api.server', () => ({ createApiClient: vi.fn() }));
|
||||
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
|
||||
function mockApi(groups: unknown[]) {
|
||||
vi.mocked(createApiClient).mockReturnValue({
|
||||
GET: vi.fn().mockResolvedValueOnce({ response: { ok: true }, data: groups })
|
||||
} as ReturnType<typeof createApiClient>);
|
||||
}
|
||||
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
describe('admin/groups layout load', () => {
|
||||
it('returns the groups list', async () => {
|
||||
mockApi([
|
||||
{ id: 'g1', name: 'Admins', permissions: ['ADMIN'] },
|
||||
{ id: 'g2', name: 'Editors', permissions: ['WRITE_ALL'] }
|
||||
]);
|
||||
const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
|
||||
expect(result.groups).toHaveLength(2);
|
||||
expect(result.groups[0].name).toBe('Admins');
|
||||
});
|
||||
|
||||
it('returns an empty array when the API returns nothing', async () => {
|
||||
mockApi([]);
|
||||
const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
|
||||
expect(result.groups).toEqual([]);
|
||||
});
|
||||
|
||||
it('calls GET /api/groups', async () => {
|
||||
const mockGet = vi.fn().mockResolvedValue({ response: { ok: true }, data: [] });
|
||||
vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
|
||||
typeof createApiClient
|
||||
>);
|
||||
await load({ fetch: vi.fn() as unknown as typeof fetch });
|
||||
expect(mockGet).toHaveBeenCalledWith('/api/groups');
|
||||
});
|
||||
});
|
||||
110
frontend/src/routes/admin/groups/layout.svelte.spec.ts
Normal file
110
frontend/src/routes/admin/groups/layout.svelte.spec.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import GroupsListPanel from './GroupsListPanel.svelte';
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: { url: { pathname: '/admin/groups/g1' } }
|
||||
}));
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const groups = [
|
||||
{ id: 'g1', name: 'Administrators', permissions: ['ADMIN', 'WRITE_ALL'] },
|
||||
{ id: 'g2', name: 'Editors', permissions: ['WRITE_ALL'] },
|
||||
{ id: 'g3', name: 'Readers', permissions: [] }
|
||||
];
|
||||
|
||||
describe('GroupsListPanel — header', () => {
|
||||
it('renders the panel title', async () => {
|
||||
render(GroupsListPanel, { groups });
|
||||
await expect.element(page.getByText(/Alle Gruppen/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders a new-group link pointing to /admin/groups/new', async () => {
|
||||
render(GroupsListPanel, { groups });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /neue gruppe/i }))
|
||||
.toHaveAttribute('href', '/admin/groups/new');
|
||||
});
|
||||
});
|
||||
|
||||
describe('GroupsListPanel — group items', () => {
|
||||
it('renders each group name', async () => {
|
||||
render(GroupsListPanel, { groups });
|
||||
await expect.element(page.getByRole('link', { name: /administrators/i })).toBeInTheDocument();
|
||||
await expect.element(page.getByRole('link', { name: /editors/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('each group links to /admin/groups/[id]', async () => {
|
||||
const { container } = render(GroupsListPanel, { groups });
|
||||
const links = container.querySelectorAll<HTMLAnchorElement>('a[href^="/admin/groups/g"]');
|
||||
expect(links.length).toBe(3);
|
||||
expect(links[0].getAttribute('href')).toBe('/admin/groups/g1');
|
||||
});
|
||||
|
||||
it('shows permission count as subtitle', async () => {
|
||||
render(GroupsListPanel, { groups });
|
||||
// Administrators has 2 permissions
|
||||
await expect.element(page.getByText(/2 Berechtigungen/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows "no permissions" for a group with zero permissions', async () => {
|
||||
render(GroupsListPanel, { groups });
|
||||
await expect.element(page.getByText(/0 Berechtigungen/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('GroupsListPanel — active state', () => {
|
||||
it('marks the active group link with aria-current=page', async () => {
|
||||
render(GroupsListPanel, { groups });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /administrators/i }))
|
||||
.toHaveAttribute('aria-current', 'page');
|
||||
});
|
||||
|
||||
it('does not mark inactive group links with aria-current', async () => {
|
||||
render(GroupsListPanel, { groups });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /editors/i }))
|
||||
.not.toHaveAttribute('aria-current');
|
||||
});
|
||||
});
|
||||
|
||||
describe('GroupsListPanel — empty state', () => {
|
||||
it('shows empty state when groups array is empty', async () => {
|
||||
render(GroupsListPanel, { groups: [] });
|
||||
await expect.element(page.getByText(/keine gruppen/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Collapse toggle ──────────────────────────────────────────────────────────
|
||||
|
||||
describe('GroupsListPanel — collapse toggle', () => {
|
||||
beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
|
||||
|
||||
it('renders a collapse button with aria-label', async () => {
|
||||
render(GroupsListPanel, { groups });
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste einklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking collapse shows the expand handle', async () => {
|
||||
render(GroupsListPanel, { groups });
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste einklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
document.querySelector<HTMLButtonElement>('[aria-label="Liste einklappen"]')!.click();
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste ausklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('autocollapse prop starts the panel in collapsed state', async () => {
|
||||
render(GroupsListPanel, { groups, autocollapse: true });
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste ausklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
25
frontend/src/routes/admin/groups/new/+page.server.ts
Normal file
25
frontend/src/routes/admin/groups/new/+page.server.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { fail, redirect } from '@sveltejs/kit';
|
||||
import type { Actions } from './$types';
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
import { getErrorMessage } from '$lib/errors';
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async ({ request, fetch }) => {
|
||||
const data = await request.formData();
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const result = await api.POST('/api/groups', {
|
||||
body: {
|
||||
name: data.get('name') as string,
|
||||
permissions: data.getAll('permissions') as string[]
|
||||
}
|
||||
});
|
||||
|
||||
if (!result.response.ok) {
|
||||
const code = (result.error as unknown as { code?: string })?.code;
|
||||
return fail(result.response.status, { error: getErrorMessage(code) });
|
||||
}
|
||||
|
||||
throw redirect(303, '/admin/groups');
|
||||
}
|
||||
};
|
||||
157
frontend/src/routes/admin/groups/new/+page.svelte
Normal file
157
frontend/src/routes/admin/groups/new/+page.svelte
Normal file
@@ -0,0 +1,157 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { beforeNavigate, goto } from '$app/navigation';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
const availableStandard = [{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }];
|
||||
const availableAdmin = [
|
||||
{ value: 'ADMIN', label: 'Vollzugriff (Admin)' },
|
||||
{ value: 'ADMIN_USER', label: 'Benutzer verwalten' },
|
||||
{ value: 'ADMIN_TAG', label: 'Schlagworte verwalten' },
|
||||
{ value: 'ADMIN_PERMISSION', label: 'Berechtigungen verwalten' }
|
||||
];
|
||||
|
||||
let { form } = $props();
|
||||
|
||||
let isDirty = $state(false);
|
||||
let showUnsavedWarning = $state(false);
|
||||
let discardTarget = $state<string | null>(null);
|
||||
|
||||
beforeNavigate(({ cancel, to }) => {
|
||||
if (isDirty) {
|
||||
cancel();
|
||||
showUnsavedWarning = true;
|
||||
discardTarget = to?.url.href ?? null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col overflow-hidden">
|
||||
<!-- Detail panel header -->
|
||||
<div
|
||||
class="flex items-center border-b border-green-200 bg-green-50 px-5 py-3 dark:border-green-900 dark:bg-green-950/30"
|
||||
>
|
||||
<h2 class="flex-1 font-sans text-sm font-bold text-green-800 dark:text-green-300">
|
||||
{m.admin_group_new_heading()}
|
||||
</h2>
|
||||
</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?.error}
|
||||
<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
|
||||
{form.error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
id="new-group-form"
|
||||
method="POST"
|
||||
use:enhance
|
||||
oninput={() => {
|
||||
isDirty = true;
|
||||
showUnsavedWarning = false;
|
||||
}}
|
||||
class="space-y-5"
|
||||
>
|
||||
<!-- Name card -->
|
||||
<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
|
||||
<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_col_name()}
|
||||
</h3>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder={m.admin_group_name_placeholder()}
|
||||
required
|
||||
class="w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink placeholder:text-ink-3 focus:ring-1 focus:ring-primary focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Standard permissions -->
|
||||
<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
|
||||
<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_groups_section_standard()}
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
{#each availableStandard as perm (perm.value)}
|
||||
<label class="flex items-center gap-2 text-sm text-ink">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="permissions"
|
||||
value={perm.value}
|
||||
class="rounded border-line text-primary focus:ring-primary"
|
||||
/>
|
||||
<span class="font-mono text-xs font-bold uppercase">{perm.value}</span>
|
||||
<span class="text-ink-3">— {perm.label}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Administrative permissions -->
|
||||
<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-3 text-xs font-bold tracking-widest text-amber-700 uppercase dark:text-amber-400"
|
||||
>
|
||||
{m.admin_groups_section_administrative()}
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
{#each availableAdmin as perm (perm.value)}
|
||||
<label
|
||||
class="flex items-center gap-2 text-sm {perm.value === 'ADMIN'
|
||||
? 'font-bold text-red-700 dark:text-red-400'
|
||||
: 'text-ink'}"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="permissions"
|
||||
value={perm.value}
|
||||
class="rounded border-line text-primary focus:ring-primary"
|
||||
/>
|
||||
<span class="font-mono text-xs font-bold uppercase">{perm.value}</span>
|
||||
<span class="font-normal text-ink-3">— {perm.label}</span>
|
||||
</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="new-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_create()}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
72
frontend/src/routes/admin/layout.server.spec.ts
Normal file
72
frontend/src/routes/admin/layout.server.spec.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import { load } from './+layout.server';
|
||||
|
||||
vi.mock('$lib/api.server', () => ({ createApiClient: vi.fn() }));
|
||||
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
|
||||
function mockApi(users: unknown[], groups: unknown[], tags: unknown[]) {
|
||||
vi.mocked(createApiClient).mockReturnValue({
|
||||
GET: vi
|
||||
.fn()
|
||||
.mockResolvedValueOnce({ response: { ok: true }, data: users })
|
||||
.mockResolvedValueOnce({ response: { ok: true }, data: groups })
|
||||
.mockResolvedValueOnce({ response: { ok: true }, data: tags })
|
||||
} as ReturnType<typeof createApiClient>);
|
||||
}
|
||||
|
||||
const adminUser = {
|
||||
groups: [{ permissions: ['ADMIN', 'ADMIN_USER', 'ADMIN_TAG', 'ADMIN_PERMISSION'] }]
|
||||
};
|
||||
const tagAdminUser = { groups: [{ permissions: ['ADMIN_TAG'] }] };
|
||||
const noPermUser = { groups: [{ permissions: ['READ_ALL'] }] };
|
||||
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
describe('admin layout load — permission check', () => {
|
||||
it('throws 403 when user has no admin permission', async () => {
|
||||
await expect(
|
||||
load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: noPermUser } })
|
||||
).rejects.toMatchObject({ status: 403 });
|
||||
});
|
||||
|
||||
it('throws 403 when user is undefined', async () => {
|
||||
await expect(
|
||||
load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: undefined } })
|
||||
).rejects.toMatchObject({ status: 403 });
|
||||
});
|
||||
|
||||
it('throws 403 when user has no groups', async () => {
|
||||
await expect(
|
||||
load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: { groups: [] } } })
|
||||
).rejects.toMatchObject({ status: 403 });
|
||||
});
|
||||
|
||||
it('allows access for a user with ADMIN_TAG only', async () => {
|
||||
mockApi([], [], []);
|
||||
await expect(
|
||||
load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: tagAdminUser } })
|
||||
).resolves.toBeDefined();
|
||||
});
|
||||
|
||||
it('returns entity counts and permission flags for a full admin', async () => {
|
||||
mockApi(
|
||||
[{ id: 'u1' }, { id: 'u2' }],
|
||||
[{ id: 'g1' }],
|
||||
[{ id: 't1' }, { id: 't2' }, { id: 't3' }]
|
||||
);
|
||||
|
||||
const result = await load({
|
||||
fetch: vi.fn() as unknown as typeof fetch,
|
||||
locals: { user: adminUser }
|
||||
});
|
||||
|
||||
expect(result.userCount).toBe(2);
|
||||
expect(result.groupCount).toBe(1);
|
||||
expect(result.tagCount).toBe(3);
|
||||
expect(result.canManageUsers).toBe(true);
|
||||
expect(result.canManageTags).toBe(true);
|
||||
expect(result.canManageGroups).toBe(true);
|
||||
expect(result.canRunMaintenance).toBe(true);
|
||||
});
|
||||
});
|
||||
87
frontend/src/routes/admin/layout.svelte.spec.ts
Normal file
87
frontend/src/routes/admin/layout.svelte.spec.ts
Normal file
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* Layout shell tests — we test EntityNav.svelte directly since the layout
|
||||
* itself is a thin shell that just composes EntityNav and renders children.
|
||||
*/
|
||||
import { afterEach, describe, it, expect, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import EntityNav from './EntityNav.svelte';
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: { url: { pathname: '/admin/users' } }
|
||||
}));
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const fullPerms = {
|
||||
userCount: 4,
|
||||
groupCount: 3,
|
||||
tagCount: 7,
|
||||
canManageUsers: true,
|
||||
canManageTags: true,
|
||||
canManageGroups: true,
|
||||
canRunMaintenance: true
|
||||
};
|
||||
|
||||
describe('admin EntityNav — links', () => {
|
||||
it('renders users nav link pointing to /admin/users', async () => {
|
||||
render(EntityNav, fullPerms);
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /benutzer/i }))
|
||||
.toHaveAttribute('href', '/admin/users');
|
||||
});
|
||||
|
||||
it('renders groups nav link pointing to /admin/groups', async () => {
|
||||
render(EntityNav, fullPerms);
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /gruppen/i }))
|
||||
.toHaveAttribute('href', '/admin/groups');
|
||||
});
|
||||
|
||||
it('renders tags nav link pointing to /admin/tags', async () => {
|
||||
render(EntityNav, fullPerms);
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /schlagworte/i }))
|
||||
.toHaveAttribute('href', '/admin/tags');
|
||||
});
|
||||
|
||||
it('renders system nav link pointing to /admin/system', async () => {
|
||||
render(EntityNav, fullPerms);
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /system/i }))
|
||||
.toHaveAttribute('href', '/admin/system');
|
||||
});
|
||||
});
|
||||
|
||||
describe('admin EntityNav — permission-based rendering', () => {
|
||||
it('hides users link when canManageUsers is false', async () => {
|
||||
render(EntityNav, { ...fullPerms, canManageUsers: false });
|
||||
await expect.element(page.getByRole('link', { name: /benutzer/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides tags link when canManageTags is false', async () => {
|
||||
render(EntityNav, { ...fullPerms, canManageTags: false });
|
||||
await expect.element(page.getByRole('link', { name: /schlagworte/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides system link when canRunMaintenance is false', async () => {
|
||||
render(EntityNav, { ...fullPerms, canRunMaintenance: false });
|
||||
await expect.element(page.getByRole('link', { name: /system/i })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('admin EntityNav — active state', () => {
|
||||
it('marks users link as aria-current=page when on /admin/users', async () => {
|
||||
render(EntityNav, fullPerms);
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /benutzer/i }))
|
||||
.toHaveAttribute('aria-current', 'page');
|
||||
});
|
||||
|
||||
it('does not mark groups link as current when on /admin/users', async () => {
|
||||
render(EntityNav, fullPerms);
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /gruppen/i }))
|
||||
.not.toHaveAttribute('aria-current');
|
||||
});
|
||||
});
|
||||
@@ -1,77 +0,0 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import { load } from './+page.server';
|
||||
|
||||
vi.mock('$lib/api.server', () => ({ createApiClient: vi.fn() }));
|
||||
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
|
||||
const adminUser = { groups: [{ permissions: ['ADMIN'] }] };
|
||||
const readOnlyUser = { groups: [{ permissions: ['READ_ALL'] }] };
|
||||
|
||||
function mockApiReturning(users: unknown[], groups: unknown[], tags: unknown[]) {
|
||||
vi.mocked(createApiClient).mockReturnValue({
|
||||
GET: vi
|
||||
.fn()
|
||||
.mockResolvedValueOnce({ response: { ok: true }, data: users })
|
||||
.mockResolvedValueOnce({ response: { ok: true }, data: groups })
|
||||
.mockResolvedValueOnce({ response: { ok: true }, data: tags })
|
||||
} as ReturnType<typeof createApiClient>);
|
||||
}
|
||||
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
// ─── permission check ─────────────────────────────────────────────────────────
|
||||
|
||||
describe('admin load — permission check', () => {
|
||||
it('throws 403 when user has no ADMIN permission', async () => {
|
||||
await expect(
|
||||
load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: readOnlyUser } })
|
||||
).rejects.toMatchObject({ status: 403 });
|
||||
});
|
||||
|
||||
it('throws 403 when user is undefined', async () => {
|
||||
await expect(
|
||||
load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: undefined } })
|
||||
).rejects.toMatchObject({ status: 403 });
|
||||
});
|
||||
|
||||
it('throws 403 when user has no groups', async () => {
|
||||
await expect(
|
||||
load({ fetch: vi.fn() as unknown as typeof fetch, locals: { user: { groups: [] } } })
|
||||
).rejects.toMatchObject({ status: 403 });
|
||||
});
|
||||
});
|
||||
|
||||
// ─── happy path ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe('admin load — happy path', () => {
|
||||
it('returns users, groups, and tags for an admin user', async () => {
|
||||
mockApiReturning(
|
||||
[{ id: 'u1', username: 'alice' }],
|
||||
[{ id: 'g1', name: 'Editors' }],
|
||||
[{ id: 't1', name: 'Familie' }]
|
||||
);
|
||||
|
||||
const result = await load({
|
||||
fetch: vi.fn() as unknown as typeof fetch,
|
||||
locals: { user: adminUser }
|
||||
});
|
||||
|
||||
expect(result.users).toHaveLength(1);
|
||||
expect(result.groups).toHaveLength(1);
|
||||
expect(result.tags).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('returns empty arrays when API returns no data', async () => {
|
||||
mockApiReturning([], [], []);
|
||||
|
||||
const result = await load({
|
||||
fetch: vi.fn() as unknown as typeof fetch,
|
||||
locals: { user: adminUser }
|
||||
});
|
||||
|
||||
expect(result.users).toEqual([]);
|
||||
expect(result.groups).toEqual([]);
|
||||
expect(result.tags).toEqual([]);
|
||||
});
|
||||
});
|
||||
@@ -1,83 +1,73 @@
|
||||
/**
|
||||
* Tests for the admin root page — the mobile entity picker.
|
||||
* On md+ viewports the page immediately redirects to /admin/users (tested
|
||||
* in e2e). Here we verify the mobile-only list of entity links.
|
||||
*/
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import Page from './+page.svelte';
|
||||
|
||||
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
|
||||
vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
|
||||
|
||||
const makeGroup = (overrides = {}) => ({
|
||||
id: 'g1',
|
||||
name: 'Editoren',
|
||||
permissions: ['WRITE_ALL'],
|
||||
...overrides
|
||||
});
|
||||
|
||||
const makeUser = (overrides = {}) => ({
|
||||
id: 'u1',
|
||||
username: 'max',
|
||||
firstName: 'Max',
|
||||
lastName: 'Mustermann',
|
||||
email: 'max@example.com',
|
||||
birthDate: undefined,
|
||||
contact: undefined,
|
||||
enabled: true,
|
||||
groups: [makeGroup()],
|
||||
createdAt: '2024-01-01T00:00:00Z',
|
||||
...overrides
|
||||
});
|
||||
|
||||
const baseData = {
|
||||
user: undefined,
|
||||
canWrite: true,
|
||||
canAnnotate: false,
|
||||
users: [makeUser()],
|
||||
groups: [makeGroup()],
|
||||
tags: []
|
||||
const fullData = {
|
||||
userCount: 4,
|
||||
groupCount: 3,
|
||||
tagCount: 7,
|
||||
canManageUsers: true,
|
||||
canManageTags: true,
|
||||
canManageGroups: true,
|
||||
canRunMaintenance: true
|
||||
};
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
// ─── Users tab ────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('Admin page – users tab', () => {
|
||||
it('shows the username in the table', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect.element(page.getByRole('cell', { name: 'max', exact: true })).toBeInTheDocument();
|
||||
describe('Admin root page – entity picker', () => {
|
||||
it('renders the admin heading', async () => {
|
||||
render(Page, { data: fullData });
|
||||
await expect.element(page.getByRole('heading')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the full name in the table', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect.element(page.getByText(/Max Mustermann/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows a dash when user has no name set', async () => {
|
||||
const data = { ...baseData, users: [makeUser({ firstName: undefined, lastName: undefined })] };
|
||||
render(Page, { data, form: null });
|
||||
await expect.element(page.getByText('–')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows group badges for the user', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect.element(page.getByText('Editoren')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('edit link points to /admin/users/[id]', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
it('renders users link pointing to /admin/users', async () => {
|
||||
render(Page, { data: fullData });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /Bearbeiten/i }))
|
||||
.toHaveAttribute('href', '/admin/users/u1');
|
||||
.element(page.getByRole('link', { name: /benutzer/i }))
|
||||
.toHaveAttribute('href', '/admin/users');
|
||||
});
|
||||
|
||||
it('new user button links to /admin/users/new', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
it('renders groups link pointing to /admin/groups', async () => {
|
||||
render(Page, { data: fullData });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /Neuer Benutzer/i }))
|
||||
.toHaveAttribute('href', '/admin/users/new');
|
||||
.element(page.getByRole('link', { name: /gruppen/i }))
|
||||
.toHaveAttribute('href', '/admin/groups');
|
||||
});
|
||||
|
||||
it('shows "no groups" label when user has no groups', async () => {
|
||||
const data = { ...baseData, users: [makeUser({ groups: [] })] };
|
||||
render(Page, { data, form: null });
|
||||
await expect.element(page.getByText(/Keine Gruppen/i)).toBeInTheDocument();
|
||||
it('renders tags link pointing to /admin/tags', async () => {
|
||||
render(Page, { data: fullData });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /schlagworte/i }))
|
||||
.toHaveAttribute('href', '/admin/tags');
|
||||
});
|
||||
|
||||
it('renders system link pointing to /admin/system', async () => {
|
||||
render(Page, { data: fullData });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /system/i }))
|
||||
.toHaveAttribute('href', '/admin/system');
|
||||
});
|
||||
|
||||
it('hides users link when canManageUsers is false', async () => {
|
||||
render(Page, { data: { ...fullData, canManageUsers: false } });
|
||||
await expect.element(page.getByRole('link', { name: /benutzer/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides system link when canRunMaintenance is false', async () => {
|
||||
render(Page, { data: { ...fullData, canRunMaintenance: false } });
|
||||
await expect.element(page.getByRole('link', { name: /system/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows user count', async () => {
|
||||
render(Page, { data: fullData });
|
||||
await expect.element(page.getByText('4')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
170
frontend/src/routes/admin/system/+page.svelte
Normal file
170
frontend/src/routes/admin/system/+page.svelte
Normal file
@@ -0,0 +1,170 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let backfillResult: number | null = $state(null);
|
||||
let backfillLoading = $state(false);
|
||||
let backfillHashesResult: number | null = $state(null);
|
||||
let backfillHashesLoading = $state(false);
|
||||
|
||||
type ImportStatus = {
|
||||
state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
|
||||
message: string;
|
||||
processed: number;
|
||||
startedAt: string | null;
|
||||
};
|
||||
|
||||
let importStatus: ImportStatus | null = $state(null);
|
||||
let pollInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
function startPolling() {
|
||||
if (pollInterval) return;
|
||||
pollInterval = setInterval(fetchImportStatus, 2000);
|
||||
}
|
||||
|
||||
function stopPolling() {
|
||||
if (pollInterval) {
|
||||
clearInterval(pollInterval);
|
||||
pollInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchImportStatus() {
|
||||
const res = await fetch('/api/admin/import-status');
|
||||
if (res.ok) {
|
||||
importStatus = await res.json();
|
||||
if (importStatus!.state === 'RUNNING') {
|
||||
startPolling();
|
||||
} else {
|
||||
stopPolling();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function triggerImport() {
|
||||
const res = await fetch('/api/admin/trigger-import', { method: 'POST' });
|
||||
if (res.ok) {
|
||||
importStatus = await res.json();
|
||||
if (importStatus!.state === 'RUNNING') {
|
||||
startPolling();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
fetchImportStatus();
|
||||
return () => stopPolling();
|
||||
});
|
||||
|
||||
async function backfillVersions() {
|
||||
backfillLoading = true;
|
||||
backfillResult = null;
|
||||
try {
|
||||
const res = await fetch('/api/admin/backfill-versions', { method: 'POST' });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
backfillResult = data.count;
|
||||
}
|
||||
} finally {
|
||||
backfillLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function backfillFileHashes() {
|
||||
backfillHashesLoading = true;
|
||||
backfillHashesResult = null;
|
||||
try {
|
||||
const res = await fetch('/api/admin/backfill-file-hashes', { method: 'POST' });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
backfillHashesResult = data.count;
|
||||
}
|
||||
} finally {
|
||||
backfillHashesLoading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-6">
|
||||
<div class="mx-auto max-w-2xl space-y-5">
|
||||
<!-- Backfill versions -->
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-1 font-sans text-sm font-bold text-ink">{m.admin_system_backfill_heading()}</h2>
|
||||
<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_description()}</p>
|
||||
<button
|
||||
onclick={backfillVersions}
|
||||
disabled={backfillLoading}
|
||||
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 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{backfillLoading ? '…' : m.admin_system_backfill_btn()}
|
||||
</button>
|
||||
{#if backfillResult !== null}
|
||||
<p class="mt-4 rounded-sm border border-green-200 bg-green-50 p-3 text-sm text-green-700">
|
||||
{m.admin_system_backfill_success({ count: backfillResult })}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Backfill file hashes -->
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-1 font-sans text-sm font-bold text-ink">
|
||||
{m.admin_system_backfill_hashes_heading()}
|
||||
</h2>
|
||||
<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_hashes_description()}</p>
|
||||
<button
|
||||
onclick={backfillFileHashes}
|
||||
disabled={backfillHashesLoading}
|
||||
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 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{backfillHashesLoading ? '…' : m.admin_system_backfill_hashes_btn()}
|
||||
</button>
|
||||
{#if backfillHashesResult !== null}
|
||||
<p class="mt-4 rounded-sm border border-green-200 bg-green-50 p-3 text-sm text-green-700">
|
||||
{m.admin_system_backfill_hashes_success({ count: backfillHashesResult })}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Mass import -->
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-1 font-sans text-sm font-bold text-ink">{m.admin_system_import_heading()}</h2>
|
||||
<p class="mb-4 text-sm text-ink-2">{m.admin_system_import_description()}</p>
|
||||
|
||||
{#if importStatus?.state === 'RUNNING'}
|
||||
<p class="text-sm text-ink-2">{m.admin_system_import_status_running()}</p>
|
||||
{:else if importStatus?.state === 'DONE'}
|
||||
<p class="mb-4 rounded-sm border border-green-200 bg-green-50 p-3 text-sm text-green-700">
|
||||
{m.admin_system_import_status_done({ count: importStatus.processed })}
|
||||
</p>
|
||||
<button
|
||||
data-import-trigger
|
||||
onclick={triggerImport}
|
||||
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.admin_system_import_btn_retry()}
|
||||
</button>
|
||||
{:else if importStatus?.state === 'FAILED'}
|
||||
<p class="mb-4 rounded-sm border border-red-200 bg-red-50 p-3 text-sm text-red-700">
|
||||
{m.admin_system_import_status_failed({ message: importStatus.message })}
|
||||
</p>
|
||||
<button
|
||||
data-import-trigger
|
||||
onclick={triggerImport}
|
||||
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.admin_system_import_btn_retry()}
|
||||
</button>
|
||||
{:else}
|
||||
{#if importStatus !== null}
|
||||
<p class="mb-4 text-sm text-ink-2">{m.admin_system_import_status_idle()}</p>
|
||||
{/if}
|
||||
<button
|
||||
data-import-trigger
|
||||
onclick={triggerImport}
|
||||
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.admin_system_import_btn_start()}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
136
frontend/src/routes/admin/system/page.svelte.spec.ts
Normal file
136
frontend/src/routes/admin/system/page.svelte.spec.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import Page from './+page.svelte';
|
||||
|
||||
afterEach(cleanup);
|
||||
afterEach(() => vi.restoreAllMocks());
|
||||
|
||||
describe('Admin system page', () => {
|
||||
it('renders the backfill versions heading', async () => {
|
||||
render(Page, {});
|
||||
await expect.element(page.getByText(/Verlaufsdaten auffüllen/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the backfill versions button', async () => {
|
||||
render(Page, {});
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /jetzt auffüllen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the backfill file hashes heading', async () => {
|
||||
render(Page, {});
|
||||
await expect
|
||||
.element(page.getByRole('heading', { name: /Datei-Hashes berechnen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the file hashes button', async () => {
|
||||
render(Page, {});
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Datei-Hashes berechnen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Admin system page — mass import card', () => {
|
||||
beforeEach(() => {
|
||||
vi.stubGlobal(
|
||||
'fetch',
|
||||
vi.fn().mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'IDLE',
|
||||
message: 'Kein Import gestartet.',
|
||||
processed: 0,
|
||||
startedAt: null
|
||||
})
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('renders the mass import heading', async () => {
|
||||
render(Page, {});
|
||||
await expect.element(page.getByText(/Massenimport/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the start import button when idle', async () => {
|
||||
render(Page, {});
|
||||
await expect.element(page.getByRole('button', { name: /Import starten/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows idle status text', async () => {
|
||||
render(Page, {});
|
||||
await expect.element(page.getByText(/Kein Import gestartet/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('disables the start button and shows running state after click', async () => {
|
||||
const fetchMock = vi
|
||||
.fn()
|
||||
// initial status fetch → IDLE
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'IDLE',
|
||||
message: 'Kein Import gestartet.',
|
||||
processed: 0,
|
||||
startedAt: null
|
||||
})
|
||||
})
|
||||
// trigger POST → returns RUNNING immediately
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'RUNNING',
|
||||
message: 'Import läuft...',
|
||||
processed: 0,
|
||||
startedAt: '2026-01-01T10:00:00'
|
||||
})
|
||||
});
|
||||
vi.stubGlobal('fetch', fetchMock);
|
||||
|
||||
render(Page, {});
|
||||
await expect.element(page.getByRole('button', { name: /Import starten/i })).toBeInTheDocument();
|
||||
|
||||
document.querySelector<HTMLButtonElement>('[data-import-trigger]')!.click();
|
||||
|
||||
await expect.element(page.getByText(/Import läuft/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows done status and retry button after successful import', async () => {
|
||||
vi.stubGlobal(
|
||||
'fetch',
|
||||
vi.fn().mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'DONE',
|
||||
message: 'Import abgeschlossen.',
|
||||
processed: 42,
|
||||
startedAt: '2026-01-01T10:00:00'
|
||||
})
|
||||
})
|
||||
);
|
||||
render(Page, {});
|
||||
await expect.element(page.getByText(/42 Dokumente/i)).toBeInTheDocument();
|
||||
await expect.element(page.getByRole('button', { name: /Erneut starten/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows failed status and retry button on error', async () => {
|
||||
vi.stubGlobal(
|
||||
'fetch',
|
||||
vi.fn().mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'FAILED',
|
||||
message: 'Datei nicht gefunden.',
|
||||
processed: 0,
|
||||
startedAt: '2026-01-01T10:00:00'
|
||||
})
|
||||
})
|
||||
);
|
||||
render(Page, {});
|
||||
await expect.element(page.getByText(/Datei nicht gefunden/i)).toBeInTheDocument();
|
||||
await expect.element(page.getByRole('button', { name: /Erneut starten/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
8
frontend/src/routes/admin/tags/+layout.server.ts
Normal file
8
frontend/src/routes/admin/tags/+layout.server.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
export const load: LayoutServerLoad = async ({ fetch }) => {
|
||||
const api = createApiClient(fetch);
|
||||
const result = await api.GET('/api/tags');
|
||||
return { tags: result.data ?? [] };
|
||||
};
|
||||
16
frontend/src/routes/admin/tags/+layout.svelte
Normal file
16
frontend/src/routes/admin/tags/+layout.svelte
Normal file
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import TagsListPanel from './TagsListPanel.svelte';
|
||||
|
||||
let { data, children } = $props();
|
||||
|
||||
const isAtListRoot = $derived(page.url.pathname === '/admin/tags');
|
||||
</script>
|
||||
|
||||
<div class="{isAtListRoot ? 'flex' : 'hidden'} flex-shrink-0 md:flex">
|
||||
<TagsListPanel tags={data.tags} />
|
||||
</div>
|
||||
|
||||
<div class="{isAtListRoot ? 'hidden' : 'flex'} min-w-0 flex-1 flex-col overflow-hidden md:flex">
|
||||
{@render children()}
|
||||
</div>
|
||||
7
frontend/src/routes/admin/tags/+page.svelte
Normal file
7
frontend/src/routes/admin/tags/+page.svelte
Normal file
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 items-center justify-center p-8">
|
||||
<p class="text-sm text-ink-3">{m.admin_tags_select_prompt()}</p>
|
||||
</div>
|
||||
88
frontend/src/routes/admin/tags/TagsListPanel.svelte
Normal file
88
frontend/src/routes/admin/tags/TagsListPanel.svelte
Normal file
@@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
type Tag = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
let {
|
||||
tags,
|
||||
autocollapse = false
|
||||
}: {
|
||||
tags: Tag[];
|
||||
autocollapse?: boolean;
|
||||
} = $props();
|
||||
|
||||
let isCollapsed = $state(
|
||||
typeof localStorage !== 'undefined' && localStorage.getItem('admin_list_collapsed') === 'true'
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
if (autocollapse) isCollapsed = true;
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('admin_list_collapsed', String(isCollapsed));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if isCollapsed}
|
||||
<!-- Collapsed handle: 32px -->
|
||||
<button
|
||||
onclick={() => (isCollapsed = false)}
|
||||
aria-label={m.admin_btn_expand_list()}
|
||||
class="flex w-8 flex-shrink-0 flex-col items-center gap-2 border-r border-line bg-surface pt-2 hover:bg-muted"
|
||||
>
|
||||
<span class="text-sm font-bold text-ink-2">›</span>
|
||||
<span
|
||||
class="text-[8px] font-extrabold tracking-widest text-ink-3 uppercase"
|
||||
style="writing-mode: vertical-rl; transform: rotate(180deg);"
|
||||
>
|
||||
{m.admin_tab_tags()}
|
||||
</span>
|
||||
</button>
|
||||
{:else}
|
||||
<div
|
||||
class="flex w-[200px] flex-shrink-0 flex-col overflow-hidden border-r border-line bg-surface"
|
||||
>
|
||||
<!-- Panel header -->
|
||||
<div class="flex items-center justify-between border-b border-line px-3 py-2">
|
||||
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_tags_list_title()}
|
||||
</span>
|
||||
<button
|
||||
onclick={() => (isCollapsed = true)}
|
||||
aria-label={m.admin_btn_collapse_list()}
|
||||
class="flex h-6 w-6 items-center justify-center rounded-sm text-xs font-bold text-ink-2 transition-colors hover:bg-muted"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable tag list -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
{#if tags.length === 0}
|
||||
<p class="px-4 py-6 text-center text-xs text-ink-3">
|
||||
{m.admin_tags_empty()}
|
||||
</p>
|
||||
{:else}
|
||||
{#each tags as tag (tag.id)}
|
||||
{@const isActive = page.url.pathname.startsWith('/admin/tags/' + tag.id)}
|
||||
<a
|
||||
href="/admin/tags/{tag.id}"
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
class="block border-l-2 px-3 py-2.5 transition-colors {isActive
|
||||
? 'border-primary bg-primary/10 dark:bg-primary/15'
|
||||
: 'border-transparent hover:bg-muted'}"
|
||||
>
|
||||
<div class="text-sm font-bold text-ink">{tag.name}</div>
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
44
frontend/src/routes/admin/tags/[id]/+page.server.ts
Normal file
44
frontend/src/routes/admin/tags/[id]/+page.server.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { error, fail, redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad, Actions } from './$types';
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
import { getErrorMessage } from '$lib/errors';
|
||||
|
||||
export const load: PageServerLoad = async ({ params, parent }) => {
|
||||
const { tags } = await parent();
|
||||
const tag = tags.find((t: { id: string }) => t.id === params.id);
|
||||
if (!tag) throw error(404, getErrorMessage('TAG_NOT_FOUND'));
|
||||
return { tag };
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
update: async ({ params, request, fetch }) => {
|
||||
const data = await request.formData();
|
||||
const api = createApiClient(fetch);
|
||||
|
||||
const result = await api.PUT('/api/tags/{id}', {
|
||||
params: { path: { id: params.id } },
|
||||
body: { name: data.get('name') as string }
|
||||
});
|
||||
|
||||
if (!result.response.ok) {
|
||||
const code = (result.error as unknown as { code?: string })?.code;
|
||||
return fail(result.response.status, { error: getErrorMessage(code) });
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
delete: async ({ params, fetch }) => {
|
||||
const api = createApiClient(fetch);
|
||||
const result = await api.DELETE('/api/tags/{id}', {
|
||||
params: { path: { id: params.id } }
|
||||
});
|
||||
|
||||
if (!result.response.ok) {
|
||||
const code = (result.error as unknown as { code?: string })?.code;
|
||||
return fail(result.response.status, { error: getErrorMessage(code) });
|
||||
}
|
||||
|
||||
throw redirect(303, '/admin/tags');
|
||||
}
|
||||
};
|
||||
144
frontend/src/routes/admin/tags/[id]/+page.svelte
Normal file
144
frontend/src/routes/admin/tags/[id]/+page.svelte
Normal file
@@ -0,0 +1,144 @@
|
||||
<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 deleteConfirmName = $state('');
|
||||
const deleteEnabled = $derived(deleteConfirmName === data.tag.name);
|
||||
|
||||
let isDirty = $state(false);
|
||||
let showUnsavedWarning = $state(false);
|
||||
let discardTarget = $state<string | null>(null);
|
||||
|
||||
beforeNavigate(({ cancel, to }) => {
|
||||
if (isDirty) {
|
||||
cancel();
|
||||
showUnsavedWarning = true;
|
||||
discardTarget = to?.url.href ?? null;
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (form?.success) {
|
||||
isDirty = false;
|
||||
showUnsavedWarning = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col overflow-hidden">
|
||||
<!-- Detail panel 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_tag_edit_heading({ name: data.tag.name })}
|
||||
</h2>
|
||||
</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">
|
||||
{m.admin_tag_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">
|
||||
{form.error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Rename form -->
|
||||
<form
|
||||
id="edit-tag-form"
|
||||
method="POST"
|
||||
action="?/update"
|
||||
use:enhance
|
||||
oninput={() => {
|
||||
isDirty = true;
|
||||
showUnsavedWarning = false;
|
||||
}}
|
||||
class="mb-5"
|
||||
>
|
||||
<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
|
||||
<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_col_name()}
|
||||
</h3>
|
||||
<p class="mb-3 text-xs text-amber-700">{m.admin_tags_warning()}</p>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={data.tag.name}
|
||||
required
|
||||
class="w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:ring-1 focus:ring-primary focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Danger zone -->
|
||||
<div
|
||||
class="rounded-sm border border-red-200 bg-red-50 p-5 dark:border-red-900 dark:bg-red-950/30"
|
||||
>
|
||||
<h3 class="mb-3 text-xs font-bold tracking-widest text-red-700 uppercase dark:text-red-400">
|
||||
{m.btn_delete()}
|
||||
</h3>
|
||||
<p class="mb-3 text-xs text-red-700 dark:text-red-400">
|
||||
{m.admin_tag_delete_confirm()}
|
||||
</p>
|
||||
<p class="mb-2 text-xs font-bold text-ink-2">
|
||||
Gib <span class="font-mono">{data.tag.name}</span> zur Bestätigung ein:
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={deleteConfirmName}
|
||||
placeholder={data.tag.name}
|
||||
class="mb-3 w-full rounded-sm border border-red-200 bg-white px-3 py-2 text-sm text-ink focus:ring-1 focus:ring-red-400 focus:outline-none"
|
||||
/>
|
||||
<form method="POST" action="?/delete" use:enhance>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!deleteEnabled}
|
||||
class="rounded-sm bg-red-600 px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
{m.btn_delete()}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Docked footer -->
|
||||
<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
|
||||
<a
|
||||
href="/admin/tags"
|
||||
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-tag-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>
|
||||
93
frontend/src/routes/admin/tags/[id]/page.svelte.spec.ts
Normal file
93
frontend/src/routes/admin/tags/[id]/page.svelte.spec.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import Page from './+page.svelte';
|
||||
|
||||
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
|
||||
vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
|
||||
|
||||
import { beforeNavigate, goto } from '$app/navigation';
|
||||
|
||||
const baseTag = { id: 't1', name: 'Familie' };
|
||||
const baseData = { tag: baseTag };
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
// ─── Rendering ────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('Admin edit tag page – rendering', () => {
|
||||
it('renders the heading with tag name', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect.element(page.getByText(/Schlagwort: Familie/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('pre-fills the name input', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const input = document.querySelector<HTMLInputElement>('input[name="name"]');
|
||||
expect(input?.value).toBe('Familie');
|
||||
});
|
||||
|
||||
it('renders the cancel link pointing to /admin/tags', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /Abbrechen/i }))
|
||||
.toHaveAttribute('href', '/admin/tags');
|
||||
});
|
||||
|
||||
it('delete button is disabled until tag name is typed in confirm field', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const deleteBtn = document.querySelector<HTMLButtonElement>('button[type="submit"]');
|
||||
expect(deleteBtn?.disabled).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Unsaved-changes guard ────────────────────────────────────────────────────
|
||||
|
||||
describe('Admin edit tag page – unsaved-changes guard', () => {
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
it('does not show unsaved warning initially', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('cancels navigation and shows warning when rename form is dirty', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
document
|
||||
.querySelector<HTMLInputElement>('input[name="name"]')!
|
||||
.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
|
||||
const cancel = vi.fn();
|
||||
callback({ cancel, to: { url: new URL('http://localhost/admin/tags/t2') } });
|
||||
|
||||
expect(cancel).toHaveBeenCalled();
|
||||
await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not cancel navigation when form is clean', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
const cancel = vi.fn();
|
||||
callback({ cancel, to: { url: new URL('http://localhost/admin/tags/t2') } });
|
||||
|
||||
expect(cancel).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('discard button calls goto with the target URL', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
document
|
||||
.querySelector<HTMLInputElement>('input[name="name"]')!
|
||||
.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
|
||||
callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/tags/t2') } });
|
||||
|
||||
await page.getByRole('button', { name: /verwerfen/i }).click();
|
||||
|
||||
expect(vi.mocked(goto)).toHaveBeenCalledWith('http://localhost/admin/tags/t2');
|
||||
});
|
||||
});
|
||||
41
frontend/src/routes/admin/tags/layout.server.spec.ts
Normal file
41
frontend/src/routes/admin/tags/layout.server.spec.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import { load } from './+layout.server';
|
||||
|
||||
vi.mock('$lib/api.server', () => ({ createApiClient: vi.fn() }));
|
||||
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
|
||||
function mockApi(tags: unknown[]) {
|
||||
vi.mocked(createApiClient).mockReturnValue({
|
||||
GET: vi.fn().mockResolvedValueOnce({ response: { ok: true }, data: tags })
|
||||
} as ReturnType<typeof createApiClient>);
|
||||
}
|
||||
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
describe('admin/tags layout load', () => {
|
||||
it('returns the tags list', async () => {
|
||||
mockApi([
|
||||
{ id: 't1', name: 'Familie' },
|
||||
{ id: 't2', name: 'Urlaub' }
|
||||
]);
|
||||
const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
|
||||
expect(result.tags).toHaveLength(2);
|
||||
expect(result.tags[0].name).toBe('Familie');
|
||||
});
|
||||
|
||||
it('returns an empty array when the API returns nothing', async () => {
|
||||
mockApi([]);
|
||||
const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
|
||||
expect(result.tags).toEqual([]);
|
||||
});
|
||||
|
||||
it('calls GET /api/tags', async () => {
|
||||
const mockGet = vi.fn().mockResolvedValue({ response: { ok: true }, data: [] });
|
||||
vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
|
||||
typeof createApiClient
|
||||
>);
|
||||
await load({ fetch: vi.fn() as unknown as typeof fetch });
|
||||
expect(mockGet).toHaveBeenCalledWith('/api/tags');
|
||||
});
|
||||
});
|
||||
89
frontend/src/routes/admin/tags/layout.svelte.spec.ts
Normal file
89
frontend/src/routes/admin/tags/layout.svelte.spec.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import TagsListPanel from './TagsListPanel.svelte';
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: { url: { pathname: '/admin/tags/t1' } }
|
||||
}));
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const tags = [
|
||||
{ id: 't1', name: 'Familie' },
|
||||
{ id: 't2', name: 'Urlaub' },
|
||||
{ id: 't3', name: 'Schule' }
|
||||
];
|
||||
|
||||
describe('TagsListPanel — header', () => {
|
||||
it('renders the panel title', async () => {
|
||||
render(TagsListPanel, { tags });
|
||||
await expect.element(page.getByText(/Alle Schlagworte/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('TagsListPanel — tag items', () => {
|
||||
it('renders each tag name', async () => {
|
||||
render(TagsListPanel, { tags });
|
||||
await expect.element(page.getByRole('link', { name: /familie/i })).toBeInTheDocument();
|
||||
await expect.element(page.getByRole('link', { name: /urlaub/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('each tag links to /admin/tags/[id]', async () => {
|
||||
const { container } = render(TagsListPanel, { tags });
|
||||
const links = container.querySelectorAll<HTMLAnchorElement>('a[href^="/admin/tags/t"]');
|
||||
expect(links.length).toBe(3);
|
||||
expect(links[0].getAttribute('href')).toBe('/admin/tags/t1');
|
||||
});
|
||||
});
|
||||
|
||||
describe('TagsListPanel — active state', () => {
|
||||
it('marks the active tag link with aria-current=page', async () => {
|
||||
render(TagsListPanel, { tags });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /familie/i }))
|
||||
.toHaveAttribute('aria-current', 'page');
|
||||
});
|
||||
|
||||
it('does not mark inactive tag links with aria-current', async () => {
|
||||
render(TagsListPanel, { tags });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /urlaub/i }))
|
||||
.not.toHaveAttribute('aria-current');
|
||||
});
|
||||
});
|
||||
|
||||
describe('TagsListPanel — empty state', () => {
|
||||
it('shows empty state when tags array is empty', async () => {
|
||||
render(TagsListPanel, { tags: [] });
|
||||
await expect.element(page.getByText(/keine schlagworte/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Collapse toggle ──────────────────────────────────────────────────────────
|
||||
|
||||
describe('TagsListPanel — collapse toggle', () => {
|
||||
beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
|
||||
|
||||
it('renders a collapse button with aria-label', async () => {
|
||||
render(TagsListPanel, { tags });
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste einklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking collapse shows the expand handle', async () => {
|
||||
render(TagsListPanel, { tags });
|
||||
await page.getByRole('button', { name: /Liste einklappen/i }).click();
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste ausklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('autocollapse prop starts the panel in collapsed state', async () => {
|
||||
render(TagsListPanel, { tags, autocollapse: true });
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste ausklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
8
frontend/src/routes/admin/users/+layout.server.ts
Normal file
8
frontend/src/routes/admin/users/+layout.server.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
export const load: LayoutServerLoad = async ({ fetch }) => {
|
||||
const api = createApiClient(fetch);
|
||||
const result = await api.GET('/api/users');
|
||||
return { users: result.data ?? [] };
|
||||
};
|
||||
22
frontend/src/routes/admin/users/+layout.svelte
Normal file
22
frontend/src/routes/admin/users/+layout.svelte
Normal file
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import UsersListPanel from './UsersListPanel.svelte';
|
||||
|
||||
let { data, children } = $props();
|
||||
|
||||
// Auto-collapse list when user opens the create form (gives max form space on tablet)
|
||||
const autoCollapse = $derived(page.url.pathname === '/admin/users/new');
|
||||
|
||||
// Mobile: show only the relevant panel at a time
|
||||
const isAtListRoot = $derived(page.url.pathname === '/admin/users');
|
||||
</script>
|
||||
|
||||
<!-- List panel: full-screen on mobile at list root; always visible at md+ -->
|
||||
<div class="{isAtListRoot ? 'flex' : 'hidden'} flex-shrink-0 md:flex">
|
||||
<UsersListPanel users={data.users} autocollapse={autoCollapse} />
|
||||
</div>
|
||||
|
||||
<!-- Detail panel: full-screen on mobile when not at list root; always visible at md+ -->
|
||||
<div class="{isAtListRoot ? 'hidden' : 'flex'} min-w-0 flex-1 flex-col overflow-hidden md:flex">
|
||||
{@render children()}
|
||||
</div>
|
||||
7
frontend/src/routes/admin/users/+page.svelte
Normal file
7
frontend/src/routes/admin/users/+page.svelte
Normal file
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 items-center justify-center p-8">
|
||||
<p class="text-sm text-ink-3">{m.admin_users_select_prompt()}</p>
|
||||
</div>
|
||||
151
frontend/src/routes/admin/users/UsersListPanel.svelte
Normal file
151
frontend/src/routes/admin/users/UsersListPanel.svelte
Normal file
@@ -0,0 +1,151 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
type Group = {
|
||||
id: string;
|
||||
name: string;
|
||||
permissions: string[];
|
||||
};
|
||||
|
||||
type User = {
|
||||
id: string;
|
||||
username: string;
|
||||
firstName: string | null;
|
||||
lastName: string | null;
|
||||
groups: Group[];
|
||||
};
|
||||
|
||||
let {
|
||||
users,
|
||||
autocollapse = false
|
||||
}: {
|
||||
users: User[];
|
||||
autocollapse?: boolean;
|
||||
} = $props();
|
||||
|
||||
let searchQuery = $state('');
|
||||
let isCollapsed = $state(
|
||||
typeof localStorage !== 'undefined' && localStorage.getItem('admin_list_collapsed') === 'true'
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
if (autocollapse) isCollapsed = true;
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('admin_list_collapsed', String(isCollapsed));
|
||||
}
|
||||
});
|
||||
|
||||
const filtered = $derived(
|
||||
searchQuery.trim() === ''
|
||||
? users
|
||||
: users.filter((u) =>
|
||||
[u.username, u.firstName, u.lastName]
|
||||
.filter(Boolean)
|
||||
.some((v) => v!.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
)
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if isCollapsed}
|
||||
<!-- Collapsed handle: 32px -->
|
||||
<button
|
||||
onclick={() => (isCollapsed = false)}
|
||||
aria-label={m.admin_btn_expand_list()}
|
||||
class="flex w-8 flex-shrink-0 flex-col items-center gap-2 border-r border-line bg-surface pt-2 hover:bg-muted"
|
||||
>
|
||||
<span class="text-sm font-bold text-ink-2">›</span>
|
||||
<span
|
||||
class="text-[8px] font-extrabold tracking-widest text-ink-3 uppercase"
|
||||
style="writing-mode: vertical-rl; transform: rotate(180deg);"
|
||||
>
|
||||
{m.admin_tab_users()}
|
||||
</span>
|
||||
</button>
|
||||
{:else}
|
||||
<div
|
||||
class="flex w-[200px] flex-shrink-0 flex-col overflow-hidden border-r border-line bg-surface"
|
||||
>
|
||||
<!-- Panel header -->
|
||||
<div class="flex items-center justify-between border-b border-line px-3 py-2">
|
||||
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_users_list_title()}
|
||||
</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<a
|
||||
href="/admin/users/new"
|
||||
class="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-muted hover:text-ink"
|
||||
title={m.admin_btn_new_user()}
|
||||
aria-label={m.admin_btn_new_user()}
|
||||
>
|
||||
<svg
|
||||
class="h-3.5 w-3.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</a>
|
||||
<button
|
||||
onclick={() => (isCollapsed = true)}
|
||||
aria-label={m.admin_btn_collapse_list()}
|
||||
class="flex h-6 w-6 items-center justify-center rounded-sm text-xs font-bold text-ink-2 transition-colors hover:bg-muted"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="border-b border-line px-3 py-2">
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchQuery}
|
||||
placeholder={m.admin_users_search_placeholder()}
|
||||
class="w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink placeholder:text-ink-3 focus:ring-1 focus:ring-primary focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable user list -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
{#if filtered.length === 0}
|
||||
<p class="px-4 py-6 text-center text-xs text-ink-3">
|
||||
{m.admin_users_empty()}
|
||||
</p>
|
||||
{:else}
|
||||
{#each filtered as user (user.id)}
|
||||
{@const isActive = page.url.pathname.startsWith('/admin/users/' + user.id)}
|
||||
{@const fullName =
|
||||
[user.firstName, user.lastName].filter(Boolean).join(' ') || null}
|
||||
<a
|
||||
href="/admin/users/{user.id}"
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
class="block border-l-2 px-3 py-2.5 transition-colors {isActive
|
||||
? 'border-primary bg-primary/10 dark:bg-primary/15'
|
||||
: 'border-transparent hover:bg-muted'}"
|
||||
>
|
||||
<div class="text-sm font-bold text-ink">{user.username}</div>
|
||||
{#if fullName}
|
||||
<div class="mt-0.5 text-xs text-ink-3">{fullName}</div>
|
||||
{/if}
|
||||
{#if user.groups.length > 0}
|
||||
<div class="mt-1 flex flex-wrap gap-1">
|
||||
{#each user.groups as group (group.id)}
|
||||
<span class="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-ink-3">
|
||||
{group.name}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { error, fail } from '@sveltejs/kit';
|
||||
import { error, fail, redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad, Actions } from './$types';
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
import { getErrorMessage } from '$lib/errors';
|
||||
@@ -63,5 +63,19 @@ export const actions: Actions = {
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
delete: async ({ params, fetch }) => {
|
||||
const api = createApiClient(fetch);
|
||||
const result = await api.DELETE('/api/users/{id}', {
|
||||
params: { path: { id: params.id } }
|
||||
});
|
||||
|
||||
if (!result.response.ok) {
|
||||
const code = (result.error as unknown as { code?: string })?.code;
|
||||
return fail(result.response.status, { error: getErrorMessage(code) });
|
||||
}
|
||||
|
||||
throw redirect(303, '/admin/users');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { beforeNavigate, goto } from '$app/navigation';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
|
||||
import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
|
||||
@@ -8,87 +9,141 @@ import UserPasswordSection from '$lib/components/user/UserPasswordSection.svelte
|
||||
let { data, form } = $props();
|
||||
|
||||
const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string }) => g.id) ?? []);
|
||||
|
||||
let isDirty = $state(false);
|
||||
let showUnsavedWarning = $state(false);
|
||||
let discardTarget = $state<string | null>(null);
|
||||
|
||||
beforeNavigate(({ cancel, to }) => {
|
||||
if (isDirty) {
|
||||
cancel();
|
||||
showUnsavedWarning = true;
|
||||
discardTarget = to?.url.href ?? null;
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (form?.success) {
|
||||
isDirty = false;
|
||||
showUnsavedWarning = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<a
|
||||
href="/admin"
|
||||
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
|
||||
>
|
||||
<svg
|
||||
class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
<div class="flex flex-1 flex-col overflow-hidden">
|
||||
<!-- Detail panel 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_user_edit_heading({ username: data.editUser.username })}
|
||||
</h2>
|
||||
<form
|
||||
method="POST"
|
||||
action="?/delete"
|
||||
use:enhance={({ cancel }) => {
|
||||
if (!confirm(m.admin_user_delete_confirm({ username: data.editUser.username }))) {
|
||||
cancel();
|
||||
}
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
};
|
||||
}}
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
{m.btn_back_to_overview()}
|
||||
</a>
|
||||
|
||||
<h1 class="mb-6 font-serif text-3xl font-bold text-ink">
|
||||
{m.admin_user_edit_heading({ username: data.editUser.username })}
|
||||
</h1>
|
||||
|
||||
{#if form?.success}
|
||||
<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
|
||||
{m.admin_user_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">
|
||||
{form.error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form method="POST" use:enhance class="space-y-6">
|
||||
<!-- Profile card -->
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_section_personal()}
|
||||
</h2>
|
||||
<UserProfileSection
|
||||
firstName={data.editUser.firstName ?? ''}
|
||||
lastName={data.editUser.lastName ?? ''}
|
||||
birthDate={data.editUser.birthDate ?? ''}
|
||||
email={data.editUser.email ?? ''}
|
||||
contact={data.editUser.contact ?? ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Groups card -->
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_col_groups()}
|
||||
</h2>
|
||||
<UserGroupsSection groups={data.groups} selectedGroupIds={selectedGroupIds} />
|
||||
</div>
|
||||
|
||||
<!-- Password card -->
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_label_new_password_optional()}
|
||||
</h2>
|
||||
<UserPasswordSection />
|
||||
</div>
|
||||
|
||||
<!-- Save bar -->
|
||||
<div
|
||||
class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
|
||||
>
|
||||
<a
|
||||
href="/admin"
|
||||
class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
|
||||
>
|
||||
{m.btn_cancel()}
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
class="rounded-sm border border-red-200 bg-red-50 px-3 py-1 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400"
|
||||
>
|
||||
{m.btn_save()}
|
||||
{m.btn_delete()}…
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</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">
|
||||
{m.admin_user_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">
|
||||
{form.error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
id="edit-user-form"
|
||||
method="POST"
|
||||
use:enhance
|
||||
oninput={() => {
|
||||
isDirty = true;
|
||||
showUnsavedWarning = false;
|
||||
}}
|
||||
class="space-y-5"
|
||||
>
|
||||
<!-- Profile card -->
|
||||
<div class="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.profile_section_personal()}
|
||||
</h3>
|
||||
<UserProfileSection
|
||||
firstName={data.editUser.firstName ?? ''}
|
||||
lastName={data.editUser.lastName ?? ''}
|
||||
birthDate={data.editUser.birthDate ?? ''}
|
||||
email={data.editUser.email ?? ''}
|
||||
contact={data.editUser.contact ?? ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Groups card -->
|
||||
<div class="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_groups()}
|
||||
</h3>
|
||||
<UserGroupsSection groups={data.groups} selectedGroupIds={selectedGroupIds} />
|
||||
</div>
|
||||
|
||||
<!-- Password card -->
|
||||
<div class="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_label_new_password_optional()}
|
||||
</h3>
|
||||
<UserPasswordSection />
|
||||
</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/users"
|
||||
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-user-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>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import Page from './+page.svelte';
|
||||
|
||||
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
|
||||
vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
|
||||
|
||||
import { beforeNavigate, goto } from '$app/navigation';
|
||||
|
||||
const groups = [
|
||||
{ id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] },
|
||||
@@ -96,7 +99,7 @@ describe('Admin edit user page – rendering', () => {
|
||||
|
||||
it('includes pre-selected group ids in FormData at submit time (guards against groupIds being empty)', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const form = document.querySelector('form')!;
|
||||
const form = document.querySelector<HTMLFormElement>('form#edit-user-form')!;
|
||||
const formData = new FormData(form);
|
||||
expect(formData.getAll('groupIds')).toContain('g1');
|
||||
expect(formData.getAll('groupIds')).not.toContain('g2');
|
||||
@@ -110,11 +113,11 @@ describe('Admin edit user page – rendering', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('cancel link points to /admin', async () => {
|
||||
it('cancel link points to /admin/users', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /Abbrechen/i }))
|
||||
.toHaveAttribute('href', '/admin');
|
||||
.toHaveAttribute('href', '/admin/users');
|
||||
});
|
||||
|
||||
it('renders the save button', async () => {
|
||||
@@ -141,3 +144,72 @@ describe('Admin edit user page – feedback', () => {
|
||||
await expect.element(page.getByText(/Änderungen gespeichert/i)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Unsaved-changes guard ────────────────────────────────────────────────────
|
||||
|
||||
describe('Admin edit user page – unsaved-changes guard', () => {
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
it('does not show unsaved warning initially', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('cancels navigation and shows warning when form is dirty', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
document
|
||||
.querySelector<HTMLInputElement>('input[name="firstName"]')!
|
||||
.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
|
||||
const cancel = vi.fn();
|
||||
callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });
|
||||
|
||||
expect(cancel).toHaveBeenCalled();
|
||||
await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not cancel navigation when form is clean', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
const cancel = vi.fn();
|
||||
callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });
|
||||
|
||||
expect(cancel).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('discard button calls goto with the target URL', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
document
|
||||
.querySelector<HTMLInputElement>('input[name="firstName"]')!
|
||||
.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
|
||||
callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/users/u2') } });
|
||||
|
||||
await page.getByRole('button', { name: /verwerfen/i }).click();
|
||||
|
||||
expect(vi.mocked(goto)).toHaveBeenCalledWith('http://localhost/admin/users/u2');
|
||||
});
|
||||
|
||||
it('clears dirty state when form saves successfully', async () => {
|
||||
const { rerender } = render(Page, { data: baseData, form: null });
|
||||
const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
|
||||
|
||||
document
|
||||
.querySelector<HTMLInputElement>('input[name="firstName"]')!
|
||||
.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
|
||||
callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/users/u2') } });
|
||||
await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
|
||||
|
||||
await rerender({ data: baseData, form: { success: true } });
|
||||
|
||||
const cancel = vi.fn();
|
||||
callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });
|
||||
expect(cancel).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
41
frontend/src/routes/admin/users/layout.server.spec.ts
Normal file
41
frontend/src/routes/admin/users/layout.server.spec.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import { load } from './+layout.server';
|
||||
|
||||
vi.mock('$lib/api.server', () => ({ createApiClient: vi.fn() }));
|
||||
|
||||
import { createApiClient } from '$lib/api.server';
|
||||
|
||||
function mockApi(users: unknown[]) {
|
||||
vi.mocked(createApiClient).mockReturnValue({
|
||||
GET: vi.fn().mockResolvedValueOnce({ response: { ok: true }, data: users })
|
||||
} as ReturnType<typeof createApiClient>);
|
||||
}
|
||||
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
describe('admin/users layout load', () => {
|
||||
it('returns the users list', async () => {
|
||||
mockApi([
|
||||
{ id: 'u1', username: 'alice' },
|
||||
{ id: 'u2', username: 'bob' }
|
||||
]);
|
||||
const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
|
||||
expect(result.users).toHaveLength(2);
|
||||
expect(result.users[0].username).toBe('alice');
|
||||
});
|
||||
|
||||
it('returns an empty array when the API returns nothing', async () => {
|
||||
mockApi([]);
|
||||
const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
|
||||
expect(result.users).toEqual([]);
|
||||
});
|
||||
|
||||
it('calls GET /api/users', async () => {
|
||||
const mockGet = vi.fn().mockResolvedValue({ response: { ok: true }, data: [] });
|
||||
vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
|
||||
typeof createApiClient
|
||||
>);
|
||||
await load({ fetch: vi.fn() as unknown as typeof fetch });
|
||||
expect(mockGet).toHaveBeenCalledWith('/api/users');
|
||||
});
|
||||
});
|
||||
132
frontend/src/routes/admin/users/layout.svelte.spec.ts
Normal file
132
frontend/src/routes/admin/users/layout.svelte.spec.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import UsersListPanel from './UsersListPanel.svelte';
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: { url: { pathname: '/admin/users/u1' } }
|
||||
}));
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const users = [
|
||||
{
|
||||
id: 'u1',
|
||||
username: 'reader',
|
||||
firstName: 'Lea',
|
||||
lastName: 'Leserin',
|
||||
groups: [{ id: 'g1', name: 'Leser', permissions: ['READ_ALL'] }]
|
||||
},
|
||||
{
|
||||
id: 'u2',
|
||||
username: 'admin',
|
||||
firstName: null,
|
||||
lastName: null,
|
||||
groups: [{ id: 'g2', name: 'Admins', permissions: ['ADMIN'] }]
|
||||
}
|
||||
];
|
||||
|
||||
describe('UsersListPanel — header', () => {
|
||||
it('renders the panel title', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await expect.element(page.getByText(/Alle Benutzer/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders a new-user link pointing to /admin/users/new', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /neuer benutzer/i }))
|
||||
.toHaveAttribute('href', '/admin/users/new');
|
||||
});
|
||||
|
||||
it('renders a search input', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await expect.element(page.getByRole('searchbox')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('UsersListPanel — user items', () => {
|
||||
it('renders each username', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await expect.element(page.getByRole('link', { name: /reader/i })).toBeInTheDocument();
|
||||
await expect.element(page.getByRole('link', { name: /admin/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('each user links to /admin/users/[id]', async () => {
|
||||
const { container } = render(UsersListPanel, { users });
|
||||
const links = container.querySelectorAll<HTMLAnchorElement>('a[href^="/admin/users/u"]');
|
||||
expect(links.length).toBe(2);
|
||||
expect(links[0].getAttribute('href')).toBe('/admin/users/u1');
|
||||
expect(links[1].getAttribute('href')).toBe('/admin/users/u2');
|
||||
});
|
||||
|
||||
it('shows full name as subtitle when available', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await expect.element(page.getByText('Lea Leserin')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows group name chip', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await expect.element(page.getByText('Leser', { exact: true })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('UsersListPanel — active state', () => {
|
||||
it('marks the active user link with aria-current=page', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /reader/i }))
|
||||
.toHaveAttribute('aria-current', 'page');
|
||||
});
|
||||
|
||||
it('does not mark the inactive user link with aria-current', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /admin/i }))
|
||||
.not.toHaveAttribute('aria-current');
|
||||
});
|
||||
});
|
||||
|
||||
describe('UsersListPanel — empty state', () => {
|
||||
it('shows empty state message when users array is empty', async () => {
|
||||
render(UsersListPanel, { users: [] });
|
||||
await expect.element(page.getByText(/keine benutzer/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Collapse toggle ──────────────────────────────────────────────────────────
|
||||
|
||||
describe('UsersListPanel — collapse toggle', () => {
|
||||
beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
|
||||
|
||||
it('renders a collapse button with aria-label', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste einklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking collapse shows the expand handle', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await page.getByRole('button', { name: /Liste einklappen/i }).click();
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste ausklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking expand handle restores the full panel', async () => {
|
||||
render(UsersListPanel, { users });
|
||||
await page.getByRole('button', { name: /Liste einklappen/i }).click();
|
||||
await page.getByRole('button', { name: /Liste ausklappen/i }).click();
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste einklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('autocollapse prop starts the panel in collapsed state', async () => {
|
||||
render(UsersListPanel, { users, autocollapse: true });
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /Liste ausklappen/i }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -40,6 +40,6 @@ export const actions: Actions = {
|
||||
return fail(result.response.status, { error: getErrorMessage(code) });
|
||||
}
|
||||
|
||||
throw redirect(303, '/admin');
|
||||
throw redirect(303, '/admin/users');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,71 +1,104 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { beforeNavigate, goto } from '$app/navigation';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
|
||||
import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
|
||||
import AccountSection from './AccountSection.svelte';
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
let isDirty = $state(false);
|
||||
let showUnsavedWarning = $state(false);
|
||||
let discardTarget = $state<string | null>(null);
|
||||
|
||||
beforeNavigate(({ cancel, to }) => {
|
||||
if (isDirty) {
|
||||
cancel();
|
||||
showUnsavedWarning = true;
|
||||
discardTarget = to?.url.href ?? null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<a
|
||||
href="/admin"
|
||||
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
|
||||
>
|
||||
<svg
|
||||
class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
<div class="flex flex-1 flex-col overflow-hidden">
|
||||
<!-- Detail panel 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_user_new_heading()}</h2>
|
||||
</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?.error}
|
||||
<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
|
||||
{form.error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
id="new-user-form"
|
||||
method="POST"
|
||||
use:enhance
|
||||
oninput={() => {
|
||||
isDirty = true;
|
||||
showUnsavedWarning = false;
|
||||
}}
|
||||
class="space-y-5"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
{m.btn_back_to_overview()}
|
||||
</a>
|
||||
|
||||
<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.admin_user_new_heading()}</h1>
|
||||
|
||||
{#if form?.error}
|
||||
<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
|
||||
{form.error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<form method="POST" use:enhance class="space-y-5">
|
||||
<AccountSection />
|
||||
<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
|
||||
<AccountSection />
|
||||
</div>
|
||||
|
||||
<!-- Profile -->
|
||||
<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_section_personal()}
|
||||
</h2>
|
||||
<UserProfileSection />
|
||||
<div class="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.profile_section_personal()}
|
||||
</h3>
|
||||
<UserProfileSection />
|
||||
</div>
|
||||
|
||||
<!-- Groups -->
|
||||
<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_col_groups()}
|
||||
</h2>
|
||||
<UserGroupsSection groups={data.groups} />
|
||||
|
||||
<!-- Save bar -->
|
||||
<div
|
||||
class="mt-4 flex items-center justify-between rounded-sm border border-line bg-surface px-6 py-4 shadow-sm"
|
||||
>
|
||||
<a
|
||||
href="/admin"
|
||||
class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
|
||||
>
|
||||
{m.btn_cancel()}
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
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_create()}
|
||||
</button>
|
||||
<div class="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_groups()}
|
||||
</h3>
|
||||
<UserGroupsSection groups={data.groups} />
|
||||
</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/users"
|
||||
class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
|
||||
>
|
||||
{m.btn_cancel()}
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
form="new-user-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_create()}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,18 +33,11 @@ describe('Admin new user page – rendering', () => {
|
||||
await expect.element(page.getByText('Admins')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('cancel link points to /admin', async () => {
|
||||
it('cancel link points to /admin/users', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /Abbrechen/i }))
|
||||
.toHaveAttribute('href', '/admin');
|
||||
});
|
||||
|
||||
it('back link points to /admin', async () => {
|
||||
render(Page, { data: baseData, form: null });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /Zurück/i }))
|
||||
.toHaveAttribute('href', '/admin');
|
||||
.toHaveAttribute('href', '/admin/users');
|
||||
});
|
||||
|
||||
it('renders the create button', async () => {
|
||||
|
||||
Reference in New Issue
Block a user