06a489567a
Add beforeNavigate + isDirty tracking to users/[id], users/new, groups/[id], groups/new, and tags/[id] edit panels. When a user navigates away with unsaved changes, the navigation is cancelled and an inline amber warning banner appears with a Discard button that resumes navigation. Saving successfully clears the dirty flag. Add i18n key admin_unsaved_warning (de/en/es). Add spec files for groups/[id] and tags/[id] panels. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
105 lines
3.0 KiB
Svelte
105 lines
3.0 KiB
Svelte
<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="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"
|
|
>
|
|
<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
|
|
<AccountSection />
|
|
</div>
|
|
|
|
<!-- Profile -->
|
|
<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 -->
|
|
<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>
|