822 lines
29 KiB
Svelte
822 lines
29 KiB
Svelte
<script lang="ts">
|
|
import type { Unit, Group, UnitsData } from '$lib/types';
|
|
|
|
// ── State ────────────────────────────────────────────────────────────────────
|
|
let unitsData = $state<UnitsData>({ units: [], groups: [] });
|
|
let selectedItem = $state<{ type: 'unit' | 'group'; id: string } | null>(null);
|
|
let checkedUnitIds = $state<Set<string>>(new Set());
|
|
let bulkAction = $state<string>(''); // '' | 'move'
|
|
let bulkMoveTargetGroupId = $state<string>('');
|
|
let expandedGroups = $state<Set<string>>(new Set());
|
|
let deleteGroupTarget = $state<Group | null>(null);
|
|
let deleteGroupAction = $state<'reassign' | 'orphan'>('reassign');
|
|
let deleteGroupTargetId = $state<string>('');
|
|
let deleteGroupToBaseAction = $state<'recalculate' | 'reset' | 'keep'>('keep');
|
|
let formError = $state<string | null>(null);
|
|
let formSuccess = $state<string | null>(null);
|
|
|
|
// Unit form state
|
|
let unitForm = $state<Partial<Unit>>({});
|
|
let unitFormNew = $state(false);
|
|
|
|
// Group form state
|
|
let groupForm = $state<Partial<Group>>({});
|
|
let groupFormNew = $state(false);
|
|
|
|
// ── Load data ────────────────────────────────────────────────────────────────
|
|
async function loadData() {
|
|
const [res, gres] = await Promise.all([
|
|
fetch('/admin/api/units'),
|
|
fetch('/admin/api/groups')
|
|
]);
|
|
if (!res.ok) return;
|
|
const units: Unit[] = await res.json();
|
|
const groups: Group[] = gres.ok ? await gres.json() : [];
|
|
unitsData = { units, groups };
|
|
expandedGroups = new Set([...expandedGroups, ...groups.map((g) => g.id)]);
|
|
}
|
|
|
|
$effect(() => { loadData(); });
|
|
|
|
async function extractError(res: Response, fallback: string): Promise<string> {
|
|
const body = await res.json().catch(() => ({}));
|
|
return (body as Record<string, string>).error ?? fallback;
|
|
}
|
|
|
|
// ── Derived ──────────────────────────────────────────────────────────────────
|
|
let unitsByGroup = $derived.by(() => {
|
|
const map = new Map<string | null, Unit[]>();
|
|
for (const u of unitsData.units) {
|
|
const key = u.group ?? null;
|
|
if (!map.has(key)) map.set(key, []);
|
|
map.get(key)!.push(u);
|
|
}
|
|
return map;
|
|
});
|
|
|
|
// ── Selection ────────────────────────────────────────────────────────────────
|
|
function selectUnit(unit: Unit) {
|
|
selectedItem = { type: 'unit', id: unit.id };
|
|
unitForm = { ...unit };
|
|
unitFormNew = false;
|
|
groupFormNew = false;
|
|
formError = null;
|
|
formSuccess = null;
|
|
}
|
|
|
|
function selectGroup(group: Group) {
|
|
selectedItem = { type: 'group', id: group.id };
|
|
groupForm = { ...group };
|
|
groupFormNew = false;
|
|
unitFormNew = false;
|
|
formError = null;
|
|
formSuccess = null;
|
|
}
|
|
|
|
function startNewUnit(groupId?: string) {
|
|
selectedItem = null;
|
|
unitForm = { group: groupId ?? null, toBase: 1, symbol: '', label: '', labelPlural: '', id: '' };
|
|
unitFormNew = true;
|
|
groupFormNew = false;
|
|
formError = null;
|
|
formSuccess = null;
|
|
}
|
|
|
|
function startNewGroup() {
|
|
selectedItem = null;
|
|
groupForm = { id: '', label: '', baseUnitId: '', toUniversal: 1 };
|
|
groupFormNew = true;
|
|
unitFormNew = false;
|
|
formError = null;
|
|
formSuccess = null;
|
|
}
|
|
|
|
// ── Checkbox helpers ─────────────────────────────────────────────────────────
|
|
function toggleCheck(unitId: string) {
|
|
const next = new Set(checkedUnitIds);
|
|
if (next.has(unitId)) next.delete(unitId);
|
|
else next.add(unitId);
|
|
checkedUnitIds = next;
|
|
}
|
|
|
|
function toggleGroupCheck(groupId: string | null) {
|
|
const groupUnits = unitsByGroup.get(groupId) ?? [];
|
|
const allChecked = groupUnits.every((u) => checkedUnitIds.has(u.id));
|
|
const next = new Set(checkedUnitIds);
|
|
for (const u of groupUnits) {
|
|
if (allChecked) next.delete(u.id);
|
|
else next.add(u.id);
|
|
}
|
|
checkedUnitIds = next;
|
|
}
|
|
|
|
function groupAllChecked(groupId: string | null): boolean {
|
|
const units = unitsByGroup.get(groupId) ?? [];
|
|
return units.length > 0 && units.every((u) => checkedUnitIds.has(u.id));
|
|
}
|
|
|
|
function groupSomeChecked(groupId: string | null): boolean {
|
|
const units = unitsByGroup.get(groupId) ?? [];
|
|
return units.some((u) => checkedUnitIds.has(u.id)) && !groupAllChecked(groupId);
|
|
}
|
|
|
|
// ── Bulk move ────────────────────────────────────────────────────────────────
|
|
async function executeBulkAction() {
|
|
if (bulkAction === 'move') {
|
|
if (!bulkMoveTargetGroupId || checkedUnitIds.size === 0) return;
|
|
formError = null;
|
|
const results = await Promise.all(
|
|
[...checkedUnitIds].map((unitId) =>
|
|
fetch(`/admin/api/units/${unitId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ group: bulkMoveTargetGroupId })
|
|
})
|
|
)
|
|
);
|
|
const failed = results.filter((r) => !r.ok);
|
|
if (failed.length) formError = `${failed.length} unit(s) failed to move`;
|
|
checkedUnitIds = new Set();
|
|
bulkAction = '';
|
|
bulkMoveTargetGroupId = '';
|
|
await loadData();
|
|
}
|
|
}
|
|
|
|
// ── Unit save/delete ─────────────────────────────────────────────────────────
|
|
async function saveUnit() {
|
|
formError = null;
|
|
formSuccess = null;
|
|
try {
|
|
const res = unitFormNew
|
|
? await fetch('/admin/api/units', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(unitForm)
|
|
})
|
|
: await fetch(`/admin/api/units/${selectedItem?.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(unitForm)
|
|
});
|
|
if (!res.ok) { formError = await extractError(res, 'Save failed'); return; }
|
|
formSuccess = unitFormNew ? 'Unit created.' : 'Unit saved.';
|
|
if (unitFormNew) {
|
|
const created = (await res.json()) as Unit;
|
|
unitFormNew = false;
|
|
selectedItem = { type: 'unit', id: created.id ?? '' };
|
|
}
|
|
await loadData();
|
|
} catch { formError = 'Network error'; }
|
|
}
|
|
|
|
async function deleteUnit() {
|
|
if (!selectedItem || selectedItem.type !== 'unit') return;
|
|
if (!confirm(`Delete unit "${unitForm.label}"?`)) return;
|
|
try {
|
|
const res = await fetch(`/admin/api/units/${selectedItem.id}`, { method: 'DELETE' });
|
|
if (!res.ok) { formError = await extractError(res, 'Delete failed'); return; }
|
|
selectedItem = null;
|
|
unitForm = {};
|
|
await loadData();
|
|
} catch { formError = 'Network error'; }
|
|
}
|
|
|
|
// ── Group save/delete ─────────────────────────────────────────────────────────
|
|
async function saveGroup() {
|
|
formError = null;
|
|
formSuccess = null;
|
|
try {
|
|
const res = groupFormNew
|
|
? await fetch('/admin/api/groups', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(groupForm)
|
|
})
|
|
: await fetch(`/admin/api/groups/${selectedItem?.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(groupForm)
|
|
});
|
|
if (!res.ok) { formError = await extractError(res, 'Save failed'); return; }
|
|
formSuccess = groupFormNew ? 'Group created.' : 'Group saved.';
|
|
if (groupFormNew) {
|
|
const created = (await res.json()) as Group;
|
|
groupFormNew = false;
|
|
selectedItem = { type: 'group', id: created.id ?? '' };
|
|
}
|
|
await loadData();
|
|
} catch { formError = 'Network error'; }
|
|
}
|
|
|
|
function openDeleteGroup(group: Group) {
|
|
deleteGroupTarget = group;
|
|
deleteGroupAction = 'reassign';
|
|
deleteGroupTargetId = '';
|
|
deleteGroupToBaseAction = 'keep';
|
|
formError = null;
|
|
}
|
|
|
|
function closeDeleteGroup() { deleteGroupTarget = null; }
|
|
|
|
async function confirmDeleteGroup() {
|
|
if (!deleteGroupTarget) return;
|
|
const unitsCount = (unitsByGroup.get(deleteGroupTarget.id) ?? []).length;
|
|
const body: Record<string, unknown> = unitsCount === 0 || deleteGroupAction === 'orphan'
|
|
? { action: 'orphan' }
|
|
: { action: 'reassign', targetGroupId: deleteGroupTargetId, toBaseAction: deleteGroupToBaseAction };
|
|
try {
|
|
const res = await fetch(`/admin/api/groups/${deleteGroupTarget.id}`, {
|
|
method: 'DELETE',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body)
|
|
});
|
|
if (!res.ok) { formError = await extractError(res, 'Delete failed'); return; }
|
|
deleteGroupTarget = null;
|
|
selectedItem = null;
|
|
groupForm = {};
|
|
await loadData();
|
|
} catch { formError = 'Network error'; }
|
|
}
|
|
|
|
// ── toBase hint ──────────────────────────────────────────────────────────────
|
|
let toBaseHint = $derived.by(() => {
|
|
const g = unitsData.groups.find((gr) => gr.id === unitForm.group);
|
|
if (!g) return null;
|
|
const base = unitsData.units.find((u) => u.id === g.baseUnitId);
|
|
const sym = unitForm.symbol || '?';
|
|
const tb = unitForm.toBase ?? 1;
|
|
const baseSymbol = base?.symbol ?? 'base';
|
|
return `1 ${sym} = ${tb} ${baseSymbol}`;
|
|
});
|
|
|
|
async function logout() {
|
|
await fetch('/admin/api/auth/logout', { method: 'POST' });
|
|
window.location.href = '/admin/login';
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Humor Units — Admin</title>
|
|
</svelte:head>
|
|
|
|
<div class="admin-header">
|
|
<h2>Admin</h2>
|
|
<button class="outline secondary logout-btn" onclick={logout}>Log out</button>
|
|
</div>
|
|
|
|
<div class="admin-panels">
|
|
<!-- ── Left panel ─────────────────────────────────────────────────────────── -->
|
|
<aside class="admin-tree">
|
|
|
|
<!-- Persistent bulk-action bar -->
|
|
<div class="bulk-bar">
|
|
<!-- Row 1: count + action dropdown + apply/clear -->
|
|
<div class="bulk-row">
|
|
<span class="bulk-count">
|
|
{#if checkedUnitIds.size > 0}
|
|
<strong>{checkedUnitIds.size}</strong> selected
|
|
{:else}
|
|
0 selected
|
|
{/if}
|
|
</span>
|
|
<select
|
|
class="bulk-select"
|
|
bind:value={bulkAction}
|
|
disabled={checkedUnitIds.size === 0}
|
|
aria-label="Bulk action"
|
|
>
|
|
<option value="">Action…</option>
|
|
<option value="move">Move to group</option>
|
|
</select>
|
|
<button
|
|
class="bulk-go"
|
|
disabled={checkedUnitIds.size === 0 || !bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
|
|
onclick={executeBulkAction}
|
|
>Apply</button>
|
|
<button
|
|
class="bulk-clear plain"
|
|
disabled={checkedUnitIds.size === 0}
|
|
onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; }}
|
|
>Clear</button>
|
|
</div>
|
|
<!-- Row 2: group target dropdown (only rendered when move is selected) -->
|
|
{#if bulkAction === 'move'}
|
|
<div class="bulk-row bulk-row--sub">
|
|
<span class="bulk-sub-label">→ Group:</span>
|
|
<select class="bulk-select" bind:value={bulkMoveTargetGroupId} aria-label="Target group">
|
|
<option value="">Choose group…</option>
|
|
{#each unitsData.groups as g}
|
|
<option value={g.id}>{g.label}</option>
|
|
{/each}
|
|
<option value="__orphan__">Ungrouped</option>
|
|
</select>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Group tree -->
|
|
{#each unitsData.groups as group (group.id)}
|
|
{@const groupUnits = unitsByGroup.get(group.id) ?? []}
|
|
<div class="tree-group">
|
|
<div class="tree-group-header">
|
|
<!-- Expand toggle -->
|
|
<button
|
|
class="plain expand-btn"
|
|
onclick={() => {
|
|
const next = new Set(expandedGroups);
|
|
if (next.has(group.id)) next.delete(group.id);
|
|
else next.add(group.id);
|
|
expandedGroups = next;
|
|
}}
|
|
aria-label={expandedGroups.has(group.id) ? 'Collapse' : 'Expand'}
|
|
>{expandedGroups.has(group.id) ? '▾' : '▸'}</button>
|
|
|
|
<!-- Select-all checkbox -->
|
|
<input
|
|
class="group-check"
|
|
type="checkbox"
|
|
checked={groupAllChecked(group.id)}
|
|
indeterminate={groupSomeChecked(group.id)}
|
|
onchange={() => toggleGroupCheck(group.id)}
|
|
title="Select all units in this group"
|
|
/>
|
|
|
|
<!-- Group name (click to edit) -->
|
|
<button class="plain tree-group-name" onclick={() => selectGroup(group)}>
|
|
<strong>{group.label}</strong>
|
|
<small class="muted"> · {groupUnits.length} unit{groupUnits.length === 1 ? '' : 's'}</small>
|
|
</button>
|
|
|
|
<!-- Delete only — edit is via click on name -->
|
|
<button class="plain icon-btn" title="Delete group" onclick={() => openDeleteGroup(group)}>🗑</button>
|
|
</div>
|
|
|
|
{#if expandedGroups.has(group.id)}
|
|
<div class="tree-units">
|
|
{#each groupUnits as unit (unit.id)}
|
|
<div
|
|
class="tree-unit-row"
|
|
class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={checkedUnitIds.has(unit.id)}
|
|
onchange={() => toggleCheck(unit.id)}
|
|
/>
|
|
<button class="plain tree-unit-btn" onclick={() => selectUnit(unit)}>
|
|
{unit.label}
|
|
<span class="muted">({unit.symbol})</span>
|
|
{#if unit.id === group.baseUnitId}
|
|
<span class="base-badge" title="Base unit">★</span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
<button class="plain add-unit-btn" onclick={() => startNewUnit(group.id)}>
|
|
+ Add unit
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
|
|
<!-- Ungrouped -->
|
|
{#if (unitsByGroup.get(null) ?? []).length > 0}
|
|
{@const orphaned = unitsByGroup.get(null) ?? []}
|
|
<div class="tree-group">
|
|
<div class="tree-group-header">
|
|
<input
|
|
class="group-check"
|
|
type="checkbox"
|
|
checked={groupAllChecked(null)}
|
|
indeterminate={groupSomeChecked(null)}
|
|
onchange={() => toggleGroupCheck(null)}
|
|
title="Select all ungrouped units"
|
|
/>
|
|
<span class="tree-group-name"><strong>Ungrouped</strong> <small class="muted">· {orphaned.length}</small></span>
|
|
</div>
|
|
<div class="tree-units">
|
|
{#each orphaned as unit (unit.id)}
|
|
<div class="tree-unit-row" class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'}>
|
|
<input
|
|
type="checkbox"
|
|
checked={checkedUnitIds.has(unit.id)}
|
|
onchange={() => toggleCheck(unit.id)}
|
|
/>
|
|
<button class="plain tree-unit-btn" onclick={() => selectUnit(unit)}>
|
|
{unit.label} <span class="muted">({unit.symbol})</span>
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="tree-footer">
|
|
<button onclick={() => startNewUnit()}>+ Add Unit</button>
|
|
<button class="outline" onclick={startNewGroup}>+ Add Group</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ── Right panel ────────────────────────────────────────────────────────── -->
|
|
<section class="admin-form-panel">
|
|
{#if formError}
|
|
<p class="form-msg form-error" role="alert">{formError}</p>
|
|
{/if}
|
|
{#if formSuccess}
|
|
<p class="form-msg form-success" role="status">{formSuccess}</p>
|
|
{/if}
|
|
|
|
{#if selectedItem?.type === 'unit' || unitFormNew}
|
|
<h3>{unitFormNew ? 'New Unit' : 'Edit Unit'}</h3>
|
|
<label>
|
|
ID {#if !unitFormNew}<small class="muted">(readonly)</small>{/if}
|
|
<input type="text" bind:value={unitForm.id} readonly={!unitFormNew} placeholder="e.g. my-unit" />
|
|
</label>
|
|
<label>
|
|
Label
|
|
<input type="text" bind:value={unitForm.label} placeholder="e.g. My Unit" />
|
|
</label>
|
|
<label>
|
|
Label (plural)
|
|
<input type="text" bind:value={unitForm.labelPlural} placeholder="e.g. My Units" />
|
|
</label>
|
|
<label>
|
|
Symbol
|
|
<input type="text" bind:value={unitForm.symbol} placeholder="e.g. mu" />
|
|
</label>
|
|
<label>
|
|
Group
|
|
<select bind:value={unitForm.group}>
|
|
<option value={null}>Ungrouped</option>
|
|
{#each unitsData.groups as g}
|
|
<option value={g.id}>{g.label}</option>
|
|
{/each}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
To Base
|
|
<input type="number" bind:value={unitForm.toBase} min="0.000001" step="any" />
|
|
{#if toBaseHint}
|
|
<small class="tobase-hint">{toBaseHint}</small>
|
|
{/if}
|
|
</label>
|
|
<div class="form-actions">
|
|
<button onclick={saveUnit}>{unitFormNew ? 'Create' : 'Save'}</button>
|
|
{#if !unitFormNew}
|
|
<button class="outline secondary" onclick={deleteUnit}>Delete</button>
|
|
{/if}
|
|
</div>
|
|
|
|
{:else if selectedItem?.type === 'group' || groupFormNew}
|
|
<h3>{groupFormNew ? 'New Group' : 'Edit Group'}</h3>
|
|
<label>
|
|
ID {#if !groupFormNew}<small class="muted">(readonly)</small>{/if}
|
|
<input type="text" bind:value={groupForm.id} readonly={!groupFormNew} placeholder="e.g. my-group" />
|
|
</label>
|
|
<label>
|
|
Label
|
|
<input type="text" bind:value={groupForm.label} placeholder="e.g. My Group" />
|
|
</label>
|
|
<label>
|
|
Base Unit
|
|
<small class="muted">Changing this auto-recalculates all toBase values in the group.</small>
|
|
<select bind:value={groupForm.baseUnitId}>
|
|
<option value="">None</option>
|
|
{#each unitsData.units.filter((u) => u.group === groupForm.id) as u}
|
|
<option value={u.id}>{u.label} ({u.symbol})</option>
|
|
{/each}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
To Universal
|
|
<small class="muted">Relative scale for cross-group (YOLO) conversions. Arbitrary.</small>
|
|
<input type="number" bind:value={groupForm.toUniversal} min="0.000001" step="any" />
|
|
</label>
|
|
<div class="form-actions">
|
|
<button onclick={saveGroup}>{groupFormNew ? 'Create' : 'Save'}</button>
|
|
{#if !groupFormNew}
|
|
<button
|
|
class="outline secondary"
|
|
onclick={() => {
|
|
const g = unitsData.groups.find((gr) => gr.id === selectedItem?.id);
|
|
if (g) openDeleteGroup(g);
|
|
}}
|
|
>Delete</button>
|
|
{/if}
|
|
</div>
|
|
|
|
{:else}
|
|
<p class="select-hint">Select a unit or group to edit, or add a new one.</p>
|
|
{/if}
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Delete group modal -->
|
|
{#if deleteGroupTarget}
|
|
{@const unitsCount = (unitsByGroup.get(deleteGroupTarget.id) ?? []).length}
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="modal-backdrop" onclick={closeDeleteGroup}>
|
|
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
|
<article class="modal-card" onclick={(e) => e.stopPropagation()}>
|
|
<h3>Delete "{deleteGroupTarget.label}"</h3>
|
|
{#if unitsCount === 0}
|
|
<p>This group has no units. Delete it?</p>
|
|
<div class="form-actions">
|
|
<button onclick={confirmDeleteGroup}>Delete Group</button>
|
|
<button class="outline secondary" onclick={closeDeleteGroup}>Cancel</button>
|
|
</div>
|
|
{:else}
|
|
<p>This group contains <strong>{unitsCount}</strong> unit{unitsCount === 1 ? '' : 's'}.</p>
|
|
<fieldset>
|
|
<legend>What to do with these units?</legend>
|
|
<label>
|
|
<input type="radio" bind:group={deleteGroupAction} value="reassign" />
|
|
Reassign to another group
|
|
</label>
|
|
{#if deleteGroupAction === 'reassign'}
|
|
<div class="reassign-options">
|
|
<select bind:value={deleteGroupTargetId}>
|
|
<option value="">Select target group…</option>
|
|
{#each unitsData.groups.filter((g) => g.id !== deleteGroupTarget?.id) as g}
|
|
<option value={g.id}>{g.label}</option>
|
|
{/each}
|
|
</select>
|
|
<div class="radio-stack">
|
|
<label><input type="radio" bind:group={deleteGroupToBaseAction} value="keep" /> Keep toBase values unchanged</label>
|
|
<label><input type="radio" bind:group={deleteGroupToBaseAction} value="recalculate" /> Recalculate via toUniversal ratio</label>
|
|
<label><input type="radio" bind:group={deleteGroupToBaseAction} value="reset" /> Reset all toBase to 1.0</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<label>
|
|
<input type="radio" bind:group={deleteGroupAction} value="orphan" />
|
|
Delete group only — keep units as Ungrouped
|
|
</label>
|
|
</fieldset>
|
|
<div class="form-actions">
|
|
<button
|
|
onclick={confirmDeleteGroup}
|
|
disabled={deleteGroupAction === 'reassign' && !deleteGroupTargetId}
|
|
>
|
|
{deleteGroupAction === 'reassign' ? 'Reassign & Delete Group' : 'Delete Group, Keep Units'}
|
|
</button>
|
|
<button class="outline secondary" onclick={closeDeleteGroup}>Cancel</button>
|
|
</div>
|
|
{/if}
|
|
</article>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.admin-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.admin-header h2 { margin: 0; }
|
|
|
|
.admin-panels {
|
|
display: grid;
|
|
grid-template-columns: 340px 1fr;
|
|
gap: 1.5rem;
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 800px) {
|
|
.admin-panels { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ── Left panel ────────────────────────────────────────────────────────────── */
|
|
.admin-tree {
|
|
background: var(--pico-card-background-color);
|
|
border: 1px solid var(--pico-card-border-color);
|
|
border-radius: var(--pico-border-radius);
|
|
overflow: hidden; /* clean edges */
|
|
}
|
|
|
|
/* Persistent bulk-action bar */
|
|
.bulk-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 2px solid var(--pico-primary-border, #4a6fa5);
|
|
background: var(--pico-card-background-color);
|
|
}
|
|
.bulk-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
.bulk-row--sub {
|
|
padding-left: 0.25rem;
|
|
}
|
|
.bulk-count {
|
|
font-size: 0.8rem;
|
|
color: var(--pico-color);
|
|
white-space: nowrap;
|
|
min-width: 4.5rem;
|
|
}
|
|
.bulk-select {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 0.15rem 0.3rem;
|
|
font-size: 0.8rem;
|
|
margin: 0;
|
|
height: 1.9rem;
|
|
}
|
|
.bulk-go {
|
|
padding: 0.15rem 0.5rem;
|
|
font-size: 0.8rem;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
height: 1.9rem;
|
|
}
|
|
.bulk-clear {
|
|
padding: 0.15rem 0.4rem;
|
|
font-size: 0.8rem;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
height: 1.9rem;
|
|
color: var(--pico-muted-color);
|
|
border: 1px solid var(--pico-muted-border-color);
|
|
border-radius: var(--pico-border-radius);
|
|
background: transparent;
|
|
}
|
|
.bulk-clear:not(:disabled):hover {
|
|
/* Force explicit dark color — prevents Pico's [role=button] hover from
|
|
overriding to --pico-primary-inverse (#fff) in light/Dan mode */
|
|
color: var(--pico-color) !important;
|
|
border-color: var(--pico-color);
|
|
background: transparent;
|
|
}
|
|
.bulk-clear:disabled,
|
|
.bulk-go:disabled,
|
|
.bulk-select:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
.bulk-sub-label {
|
|
font-size: 0.78rem;
|
|
color: var(--pico-muted-color);
|
|
white-space: nowrap;
|
|
min-width: 4.5rem;
|
|
}
|
|
|
|
/* Tree groups */
|
|
.tree-group {
|
|
border-bottom: 1px solid var(--pico-card-border-color);
|
|
}
|
|
.tree-group:last-of-type { border-bottom: none; }
|
|
|
|
.tree-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
.expand-btn {
|
|
color: var(--pico-muted-color);
|
|
font-size: 0.75rem;
|
|
flex-shrink: 0;
|
|
width: 1.2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.group-check {
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tree-group-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Tree units */
|
|
.tree-units {
|
|
padding: 0.25rem 0.75rem 0.5rem 2.8rem;
|
|
}
|
|
|
|
.tree-unit-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.2rem 0.3rem;
|
|
border-radius: calc(var(--pico-border-radius) / 2);
|
|
}
|
|
.tree-unit-row.selected {
|
|
background: var(--pico-primary-background);
|
|
}
|
|
.tree-unit-row input[type=checkbox] {
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.tree-unit-btn {
|
|
flex: 1;
|
|
text-align: left;
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.add-unit-btn {
|
|
font-size: 0.8rem;
|
|
color: var(--pico-primary);
|
|
margin-top: 0.25rem;
|
|
padding: 0.15rem 0;
|
|
}
|
|
|
|
.tree-footer {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem;
|
|
border-top: 1px solid var(--pico-card-border-color);
|
|
}
|
|
.tree-footer button {
|
|
flex: 1;
|
|
font-size: 0.85rem;
|
|
margin: 0;
|
|
padding: 0.4rem 0.5rem;
|
|
}
|
|
|
|
/* ── Right panel ───────────────────────────────────────────────────────────── */
|
|
.admin-form-panel {
|
|
background: var(--pico-card-background-color);
|
|
border: 1px solid var(--pico-card-border-color);
|
|
border-radius: var(--pico-border-radius);
|
|
padding: 1.25rem;
|
|
}
|
|
.select-hint {
|
|
color: var(--pico-muted-color);
|
|
font-style: italic;
|
|
margin: 2rem 0;
|
|
text-align: center;
|
|
}
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
.form-msg {
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: var(--pico-border-radius);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.form-error { color: var(--pico-del-color, #e74c3c); background: rgba(231,76,60,0.1); }
|
|
.form-success { color: var(--pico-ins-color, #2ecc71); background: rgba(46,204,113,0.1); }
|
|
.tobase-hint {
|
|
display: block;
|
|
color: var(--pico-muted-color);
|
|
margin-top: 0.25rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── Shared ────────────────────────────────────────────────────────────────── */
|
|
.plain {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.15rem 0.25rem;
|
|
margin: 0;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
.icon-btn { opacity: 0.5; font-size: 0.85rem; }
|
|
.icon-btn:hover { opacity: 1; }
|
|
.base-badge { color: var(--pico-primary); font-size: 0.75rem; margin-left: 0.2rem; }
|
|
.muted { color: var(--pico-muted-color); font-size: 0.85rem; }
|
|
.logout-btn { width: auto; padding: 0.3rem 0.75rem; margin-bottom: 0; font-size: 0.9rem; }
|
|
|
|
/* ── Modal ─────────────────────────────────────────────────────────────────── */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
}
|
|
.modal-card { width: 100%; max-width: 480px; margin: 0 1rem; }
|
|
.reassign-options { margin: 0.5rem 0 0.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.radio-stack { display: flex; flex-direction: column; gap: 0.25rem; }
|
|
</style>
|