add categories admin page

2026-05-04 09:40:34 -05:00
parent 1615f07974
commit 218a3a3cb0
13 changed files with 59 additions and 1020 deletions
@@ -1,156 +0,0 @@
-<script lang="ts">
-	import { fieldNameToLabel, resolveFieldValue } from '$lib/svelte-admin/introspect';
-
-	type Props = {
-		records: Record<string, unknown>[];
-		listFields: string[];
-		searchFields: string[];
-		modelSlug: string;
-		listOnly?: boolean;
-	};
-
-	let { records, listFields, searchFields, modelSlug, listOnly = false }: Props = $props();
-
-	let search = $state('');
-	let defaultSortKey = $derived(listFields[0] ?? '');
-	let sortKey = $state('');
-	let sortDirection = $state<'asc' | 'desc'>('asc');
-	let effectiveSortKey = $derived(sortKey || defaultSortKey);
-
-	function formatCell(value: unknown): string {
-		if (value == null) return '—';
-		if (typeof value === 'boolean') return value ? 'Yes' : 'No';
-		if (value instanceof Date) return value.toLocaleString();
-		if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
-			return new Date(value).toLocaleString();
-		}
-		if (typeof value === 'number' && !Number.isInteger(value)) return value.toFixed(2);
-		return String(value);
-	}
-
-	const filteredAndSorted = $derived(() => {
-		let result = records;
-
-		if (search) {
-			const searchLower = search.toLowerCase();
-			result = result.filter((r) =>
-				searchFields.some((field) => {
-					const val = resolveFieldValue(r, field);
-					return val != null && String(val).toLowerCase().includes(searchLower);
-				})
-			);
-		}
-
-		result = [...result].sort((a, b) => {
-			const aVal = resolveFieldValue(a, effectiveSortKey);
-			const bVal = resolveFieldValue(b, effectiveSortKey);
-			const aStr = aVal == null ? '' : String(aVal).toLowerCase();
-			const bStr = bVal == null ? '' : String(bVal).toLowerCase();
-			const aNum = Number(aVal);
-			const bNum = Number(bVal);
-
-			if (!isNaN(aNum) && !isNaN(bNum)) {
-				return sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
-			}
-			if (aStr < bStr) return sortDirection === 'asc' ? -1 : 1;
-			if (aStr > bStr) return sortDirection === 'asc' ? 1 : -1;
-			return 0;
-		});
-
-		return result;
-	});
-
-	function toggleSort(key: string) {
-		if (effectiveSortKey === key) {
-			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
-		} else {
-			sortKey = key;
-			sortDirection = 'asc';
-		}
-	}
-
-	function getSortIndicator(key: string) {
-		if (effectiveSortKey !== key) return '↕';
-		return sortDirection === 'asc' ? '↑' : '↓';
-	}
-</script>
-
-<div class="flex flex-col gap-4">
-	<div class="flex flex-wrap items-center gap-3">
-		<input
-			type="text"
-			placeholder="Search..."
-			bind:value={search}
-			class="rounded-lg border border-gray-300 px-3 py-2 text-sm transition-shadow outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
-		/>
-
-		{#if search}
-			<button
-				type="button"
-				onclick={() => (search = '')}
-				class="rounded-lg px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-			>
-				Clear
-			</button>
-		{/if}
-
-		<span class="ml-auto text-sm text-gray-500">
-			{filteredAndSorted().length} of {records.length}
-		</span>
-	</div>
-
-	<div class="overflow-x-auto">
-		<table class="w-full border-collapse text-left text-sm">
-			<thead>
-				<tr class="border-b border-gray-200 bg-gray-50">
-					{#each listFields as field}
-						<th class="px-4 py-3 font-medium text-gray-700">
-							<button
-								type="button"
-								class="flex items-center gap-1 hover:text-gray-900"
-								onclick={() => toggleSort(field)}
-							>
-								{fieldNameToLabel(field.includes('.') ? field.split('.')[0] : field)}
-								<span class="text-xs text-gray-400">{getSortIndicator(field)}</span>
-							</button>
-						</th>
-					{/each}
-					{#if !listOnly}
-						<th class="px-4 py-3 font-medium text-gray-700"></th>
-					{/if}
-				</tr>
-			</thead>
-			<tbody>
-				{#each filteredAndSorted() as record}
-					<tr class="border-b border-gray-100 hover:bg-gray-50">
-						{#each listFields as field}
-							<td class="px-4 py-3 text-gray-600">
-								{formatCell(resolveFieldValue(record, field))}
-							</td>
-						{/each}
-						{#if !listOnly}
-							<td class="px-4 py-3 text-right">
-								<a
-									href="/admin/{modelSlug}/{record.id}"
-									class="text-blue-600 hover:text-blue-800 hover:underline"
-								>
-									Edit
-								</a>
-							</td>
-						{/if}
-					</tr>
-				{:else}
-					<tr>
-						<td colspan={listFields.length + (listOnly ? 0 : 1)} class="px-4 py-8 text-center text-gray-500">
-							{#if search}
-								No records match your search
-							{:else}
-								No records yet
-							{/if}
-						</td>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	</div>
-</div>