familienarchiv/frontend/src/routes/admin/GroupsTab.svelte

<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>