includio-cms 0.5.3 → 0.5.7

package/dist/admin/client/collection/collection-entries.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getRawCollectionEntryLabel } from '../../utils/entryLabel.js';
 	import { getEntryThumbnail } from '../../utils/entryThumbnail.js';
+	import { arrayMove } from '../../utils/arrayMove.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import type { CollectionConfigWithType } from '../../../types/collections.js';
 	import DataTable from './data-table.svelte';
@@ -11,6 +12,7 @@
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getEntryStatus } from '../entry/utils.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
 	import { toast } from 'svelte-sonner';
 	import StatusBadge from './status-badge.svelte';
@@ -26,11 +28,13 @@
 	import EmptyState from './empty-state.svelte';
 	import { createCollectionViewState } from './collection-view.svelte.js';
 	import type { EntryStatus as EntryStatusType, RawEntry } from '../../../types/entries.js';
+	import type { RelationField } from '../../../types/fields.js';
 	import {
 		validateA11y,
 		a11yLangPl,
 		a11yLangEn
 	} from '../entry/header/a11y-validator.js';
+	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 
 	const remotes = getRemotes();
 	const contentLanguage = getContentLanguage();
@@ -110,6 +114,7 @@
 		thumbnail: string | null;
 		searchText: string;
 		a11yWarnings: number;
+		customData: Record<string, unknown>;
 	}
 
 	type Props = {
@@ -128,6 +133,17 @@
 	let deleteDialogOpen = $state(false);
 	let pendingDeleteId = $state<string | null>(null);
 
+	// Relation fields in listColumns: detect and build lookup
+	const relationListFields = $derived(
+		(collection.listColumns ?? [])
+			.map((slug) => {
+				const field = collection.fields.find((f) => f.slug === slug);
+				return field?.type === 'relation' ? (field as RelationField) : null;
+			})
+			.filter((f): f is RelationField => f !== null)
+	);
+
+
 	// Find seo field for slug extraction
 	const seoField = $derived(collection.fields.find((f) => f.type === 'seo'));
 
@@ -140,8 +156,14 @@
 	// Is the current filter for archived entries?
 	const isArchivedFilter = $derived(viewState.statusFilter === 'archived');
 
+	const isOrderable = $derived(!!collection.orderable);
+
 	// Build orderBy from sorting state for server-side mode
 	const serverOrderBy = $derived.by(() => {
+		// When orderable, always sort by sortOrder
+		if (isOrderable) {
+			return { column: 'sortOrder' as const, direction: 'asc' as const };
+		}
 		if (!viewState.sorting.length) return undefined;
 		const { id, desc } = viewState.sorting[0];
 		if (id === 'createdAt' || id === 'updatedAt') {
@@ -169,6 +191,20 @@
 				}
 	);
 
+	// Reactive query
+	const entriesQuery = $derived(remotes.getRawEntries(queryParams));
+
+	// Track relation labels
+	let labelLookup = $state<Record<string, string>>({});
+
+	$effect(() => {
+		if (entriesQuery.current) {
+			fetchRelationLabels(entriesQuery.current.entries).then((l) => {
+				labelLookup = l;
+			});
+		}
+	});
+
 	const columns: ColumnDef<CollectionDataTableRow>[] = $derived([
 		{
 			id: 'select',
@@ -240,6 +276,23 @@
 				}),
 			size: 140
 		},
+		// Custom list columns from collection config
+		...(collection.listColumns ?? []).map((fieldSlug) => {
+			const fieldConfig = collection.fields.find((f) => f.slug === fieldSlug);
+			const headerLabel = fieldConfig?.label
+				? getLocalizedLabel(fieldConfig.label, interfaceLanguage.current)
+				: fieldSlug;
+			return {
+				id: `custom_${fieldSlug}`,
+				header: headerLabel,
+				cell: (info: { row: { original: CollectionDataTableRow } }) => {
+					const value = info.row.original.customData[fieldSlug];
+					return String(value ?? '');
+				},
+				enableSorting: false,
+				size: 120
+			} satisfies ColumnDef<CollectionDataTableRow>;
+		}),
 		{
 			id: 'actions',
 			header: '',
@@ -248,28 +301,35 @@
 					entryUrl: info.row.original.url,
 					entryName: info.row.original.name,
 					onArchive: () => handleArchiveSingle(info.row.original.id),
-					onDelete: () => handleDelete(info.row.original.id),
-					...(isArchivedFilter ? { onRestore: () => handleRestoreSingle(info.row.original.id) } : {})
+					...(isArchivedFilter ? { onDelete: () => handleDelete(info.row.original.id), onRestore: () => handleRestoreSingle(info.row.original.id) } : {})
 				}),
 			enableSorting: false,
 			size: 50
 		}
 	]);
 
-	function refreshQueries() {
-		remotes.getRawEntries(queryParams).refresh();
-	}
-
 	async function handleArchiveSingle(id: string) {
+		const override = entriesQuery.withOverride((old) => ({
+			...old,
+			entries: old.entries.filter((e: RawEntry) => e.id !== id),
+			total: old.total - 1
+		}));
 		await remotes.archiveEntryCommand(id);
 		toast.success(lang[interfaceLanguage.current].entriesArchived);
-		refreshQueries();
+		await entriesQuery.refresh();
+		override.release();
 	}
 
 	async function handleRestoreSingle(id: string) {
+		const override = entriesQuery.withOverride((old) => ({
+			...old,
+			entries: old.entries.filter((e: RawEntry) => e.id !== id),
+			total: old.total - 1
+		}));
 		await remotes.unarchiveEntryCommand(id);
 		toast.success(lang[interfaceLanguage.current].entryRestored);
-		refreshQueries();
+		await entriesQuery.refresh();
+		override.release();
 	}
 
 	function handleDelete(id: string) {
@@ -279,9 +339,16 @@
 
 	async function confirmDelete() {
 		if (!pendingDeleteId) return;
-		await remotes.deleteEntryCommand(pendingDeleteId);
+		const id = pendingDeleteId;
+		const override = entriesQuery.withOverride((old) => ({
+			...old,
+			entries: old.entries.filter((e: RawEntry) => e.id !== id),
+			total: old.total - 1
+		}));
+		await remotes.deleteEntryCommand(id);
 		toast.success(lang[interfaceLanguage.current].entryDeleted);
-		refreshQueries();
+		await entriesQuery.refresh();
+		override.release();
 		deleteDialogOpen = false;
 		pendingDeleteId = null;
 	}
@@ -329,8 +396,68 @@
 		return issues.filter((i) => i.type === 'warning').length;
 	}
 
-	function mapEntryToRow(entry: RawEntry): CollectionDataTableRow {
+	async function fetchRelationLabels(entries: RawEntry[]): Promise<Record<string, string>> {
+		if (relationListFields.length === 0) return {};
+
+		const uuidsByCollection = new Map<string, Set<string>>();
+		for (const field of relationListFields) {
+			uuidsByCollection.set(field.collection, new Set());
+		}
+		for (const entry of entries) {
+			const data = entry.publishedVersion?.data || entry.draftVersion?.data;
+			if (!data) continue;
+			for (const field of relationListFields) {
+				const raw = (data as Record<string, unknown>)[field.slug];
+				if (!raw) continue;
+				const set = uuidsByCollection.get(field.collection)!;
+				if (typeof raw === 'string') set.add(raw);
+				if (Array.isArray(raw)) raw.forEach((v) => typeof v === 'string' && set.add(v));
+			}
+		}
+
+		const lookup: Record<string, string> = {};
+		await Promise.all(
+			Array.from(uuidsByCollection.entries()).map(async ([slug, ids]) => {
+				if (ids.size === 0) return;
+				const labels = await remotes.getEntryLabels({ slug, ids: Array.from(ids) });
+				for (const { id, label } of labels) {
+					lookup[id] = label;
+				}
+			})
+		);
+		return lookup;
+	}
+
+	function mapEntryToRow(entry: RawEntry, lookup: Record<string, string> = {}): CollectionDataTableRow {
 		const data = entry.draftVersion?.data || entry.publishedVersion?.data || {};
+		// For custom columns, prefer published data (complete) over draft (may be partial)
+		const columnData = entry.publishedVersion?.data || entry.draftVersion?.data || {};
+		const customData: Record<string, unknown> = {};
+		if (collection.listColumns) {
+			for (const fieldSlug of collection.listColumns) {
+				const fieldData = (columnData as Record<string, unknown>)[fieldSlug];
+				const isRelation = relationListFields.some((f) => f.slug === fieldSlug);
+				if (isRelation) {
+					// Resolve relation UUID(s) to labels
+					if (typeof fieldData === 'string') {
+						customData[fieldSlug] = lookup[fieldData] ?? '';
+					} else if (Array.isArray(fieldData)) {
+						customData[fieldSlug] = fieldData
+							.map((id) => (typeof id === 'string' ? lookup[id] ?? '' : ''))
+							.filter(Boolean)
+							.join(', ');
+					} else {
+						customData[fieldSlug] = '';
+					}
+				} else if (fieldData && typeof fieldData === 'object' && !Array.isArray(fieldData)) {
+					// For localized fields, extract current content language value
+					const localized = fieldData as Record<string, unknown>;
+					customData[fieldSlug] = localized[contentLanguage.current] ?? Object.values(localized)[0] ?? '';
+				} else {
+					customData[fieldSlug] = fieldData ?? '';
+				}
+			}
+		}
 		return {
 			id: entry.id,
 			name: getRawCollectionEntryLabel(entry, collection, contentLanguage.current),
@@ -341,7 +468,8 @@
 			updatedAt: new Date(entry.updatedAt),
 			thumbnail: getEntryThumbnail(data as Record<string, unknown>, collection),
 			searchText: getSearchText(entry),
-			a11yWarnings: countA11yWarnings(entry)
+			a11yWarnings: countA11yWarnings(entry),
+			customData
 		};
 	}
 
@@ -386,190 +514,230 @@
 
 	async function handleBulkArchive(items: CollectionDataTableRow[]) {
 		const idsToArchive = selectedIndices.map((idx) => items[idx]?.id).filter(Boolean);
+		const override = entriesQuery.withOverride((old) => ({
+			...old,
+			entries: old.entries.filter((e: RawEntry) => !idsToArchive.includes(e.id)),
+			total: old.total - idsToArchive.length
+		}));
 		for (const id of idsToArchive) {
 			await remotes.archiveEntryCommand(id);
 		}
 		toast.success(lang[interfaceLanguage.current].entriesArchived);
 		rowSelection = {};
-		refreshQueries();
+		await entriesQuery.refresh();
+		override.release();
 	}
 
 	async function handleBulkRestore(items: CollectionDataTableRow[]) {
 		const idsToRestore = selectedIndices.map((idx) => items[idx]?.id).filter(Boolean);
+		const override = entriesQuery.withOverride((old) => ({
+			...old,
+			entries: old.entries.filter((e: RawEntry) => !idsToRestore.includes(e.id)),
+			total: old.total - idsToRestore.length
+		}));
 		for (const id of idsToRestore) {
 			await remotes.unarchiveEntryCommand(id);
 		}
 		toast.success(lang[interfaceLanguage.current].entriesRestored);
 		rowSelection = {};
-		refreshQueries();
+		await entriesQuery.refresh();
+		override.release();
+	}
+
+	async function handleReorder(items: CollectionDataTableRow[], fromIndex: number, toIndex: number) {
+		if (!isOrderable || items.length === 0) return;
+		const reordered = arrayMove(items, fromIndex, toIndex);
+		const orderedIds = reordered.map((item) => item.id);
+		const override = entriesQuery.withOverride((old) => ({
+			...old,
+			entries: orderedIds.map((id) => old.entries.find((e: RawEntry) => e.id === id)).filter(Boolean)
+		}));
+		await remotes.reorderEntriesCommand({ orderedIds });
+		await entriesQuery.refresh();
+		override.release();
 	}
 
 	async function handleBulkDelete(items: CollectionDataTableRow[]) {
 		const idsToDelete = selectedIndices.map((idx) => items[idx]?.id).filter(Boolean);
+		const override = entriesQuery.withOverride((old) => ({
+			...old,
+			entries: old.entries.filter((e: RawEntry) => !idsToDelete.includes(e.id)),
+			total: old.total - idsToDelete.length
+		}));
 		for (const id of idsToDelete) {
 			await remotes.deleteEntryCommand(id);
 		}
 		toast.success(lang[interfaceLanguage.current].entryDeleted);
 		rowSelection = {};
-		refreshQueries();
+		await entriesQuery.refresh();
+		override.release();
 	}
 </script>
 
-{#key JSON.stringify(queryParams)}
-	{#await remotes.getRawEntries(queryParams) then result}
-		{@const allRows = result.entries.map(mapEntryToRow)}
-		{@const filteredRows = (() => {
-			let rows = allRows;
-			// Client-side status filter (non-archived statuses)
-			if (!isArchivedFilter) {
-				rows = filterByStatus(rows);
-			}
-			// Client-side search
-			if (searchQuery) {
-				rows = rows.filter((item) => item.searchText.includes(searchQuery.toLowerCase()));
-			}
-			// Client-side sort (if sorting by name)
-			if (!useServerPagination) {
-				rows = sortItems(rows, viewState.sorting);
-			}
-			return rows;
-		})()}
-		{@const totalItems =
-			useServerPagination && !viewState.statusFilter && viewState.statusFilter !== 'archived'
-				? result.total
-				: filteredRows.length}
-		{@const pageCount = Math.ceil(totalItems / viewState.pageSize)}
-		{@const displayItems =
-			useServerPagination && !viewState.statusFilter
-				? filteredRows
-				: filteredRows.slice(
-						viewState.pageIndex * viewState.pageSize,
-						(viewState.pageIndex + 1) * viewState.pageSize
-					)}
-
-		<TableToolbar
-			{searchQuery}
-			onSearchChange={(q) => {
-				searchQuery = q;
-				viewState.pageIndex = 0;
+{#if !entriesQuery.ready}
+	<div class="space-y-4 p-4">
+		<Skeleton class="h-10 w-full" />
+		<Skeleton class="h-64 w-full" />
+	</div>
+{:else if entriesQuery.current}
+	{@const result = entriesQuery.current}
+	{@const allRows = result.entries.map((e) => mapEntryToRow(e, labelLookup))}
+	{@const filteredRows = (() => {
+		let rows = allRows;
+		// Client-side status filter (non-archived statuses)
+		if (!isArchivedFilter) {
+			rows = filterByStatus(rows);
+		}
+		// Client-side search
+		if (searchQuery) {
+			rows = rows.filter((item) => item.searchText.includes(searchQuery.toLowerCase()));
+		}
+		// Client-side sort (if sorting by name)
+		if (!useServerPagination) {
+			rows = sortItems(rows, viewState.sorting);
+		}
+		return rows;
+	})()}
+	{@const totalItems =
+		useServerPagination && !viewState.statusFilter && viewState.statusFilter !== 'archived'
+			? result.total
+			: filteredRows.length}
+	{@const pageCount = Math.ceil(totalItems / viewState.pageSize)}
+	{@const displayItems = useServerPagination && !viewState.statusFilter
+			? filteredRows
+			: filteredRows.slice(
+					viewState.pageIndex * viewState.pageSize,
+					(viewState.pageIndex + 1) * viewState.pageSize
+				)}
+
+	<div class:opacity-60={entriesQuery.loading} class="transition-opacity duration-200">
+	<TableToolbar
+		{searchQuery}
+		onSearchChange={(q) => {
+			searchQuery = q;
+			viewState.pageIndex = 0;
+		}}
+		statusFilter={viewState.statusFilter}
+		onStatusFilterChange={(f) => (viewState.statusFilter = f)}
+		viewMode={viewState.viewMode}
+		onViewModeChange={(m) => (viewState.viewMode = m)}
+		{onCreateEntry}
+		createLabel={addLabel}
+	/>
+
+	{#if totalItems === 0 && !searchQuery}
+		<EmptyState
+			title={lang[interfaceLanguage.current].emptyTitle}
+			description={lang[interfaceLanguage.current].emptyDescription}
+			ctaLabel={addLabel}
+			onCta={onCreateEntry}
+		/>
+	{:else if viewState.viewMode === 'list'}
+		<div class="bg-card overflow-hidden rounded-xl border shadow-sm">
+			{#if useServerPagination && !viewState.statusFilter}
+				<DataTable
+					data={displayItems}
+					{columns}
+					enableSorting={!isOrderable}
+					enableFiltering
+					enableSelection
+					enablePagination
+					manualPagination={true}
+					{pageCount}
+					rowCount={totalItems}
+					sorting={viewState.sorting}
+					onSortingChange={(s) => (viewState.sorting = s)}
+					{rowSelection}
+					onRowSelectionChange={(s) => (rowSelection = s)}
+					pagination={{ pageIndex: viewState.pageIndex, pageSize: viewState.pageSize }}
+					onPaginationChange={(p) => {
+						viewState.pageIndex = p.pageIndex;
+					}}
+					tableRef={(t) => (tableInstance = t)}
+					orderable={isOrderable}
+					onReorder={(from, to) => handleReorder(displayItems, from, to)}
+				/>
+			{:else}
+				<DataTable
+					data={displayItems}
+					{columns}
+					enableSorting={!isOrderable}
+					enableFiltering
+					enableSelection
+					enablePagination
+					sorting={viewState.sorting}
+					onSortingChange={(s) => (viewState.sorting = s)}
+					{rowSelection}
+					onRowSelectionChange={(s) => (rowSelection = s)}
+					pagination={{ pageIndex: viewState.pageIndex, pageSize: viewState.pageSize }}
+					onPaginationChange={(p) => {
+						viewState.pageIndex = p.pageIndex;
+					}}
+					tableRef={(t) => (tableInstance = t)}
+					orderable={isOrderable}
+					onReorder={(from, to) => handleReorder(displayItems, from, to)}
+				/>
+			{/if}
+		</div>
+
+		<TablePagination
+			pageIndex={viewState.pageIndex}
+			pageSize={viewState.pageSize}
+			{pageCount}
+			{totalItems}
+			onPageChange={(p) => (viewState.pageIndex = p)}
+			onPageSizeChange={(s) => {
+				viewState.pageSize = s;
 			}}
-			statusFilter={viewState.statusFilter}
-			onStatusFilterChange={(f) => (viewState.statusFilter = f)}
-			viewMode={viewState.viewMode}
-			onViewModeChange={(m) => (viewState.viewMode = m)}
-			{onCreateEntry}
-			createLabel={addLabel}
 		/>
-
-		{#if totalItems === 0 && !searchQuery}
-			<EmptyState
-				title={lang[interfaceLanguage.current].emptyTitle}
-				description={lang[interfaceLanguage.current].emptyDescription}
-				ctaLabel={addLabel}
-				onCta={onCreateEntry}
-			/>
-		{:else if viewState.viewMode === 'list'}
-			<div class="bg-card overflow-hidden rounded-xl border shadow-sm">
-				{#if useServerPagination && !viewState.statusFilter}
-					<DataTable
-						data={displayItems}
-						{columns}
-						enableSorting
-						enableFiltering
-						enableSelection
-						enablePagination
-						manualPagination={true}
-						{pageCount}
-						rowCount={totalItems}
-						sorting={viewState.sorting}
-						onSortingChange={(s) => (viewState.sorting = s)}
-						{rowSelection}
-						onRowSelectionChange={(s) => (rowSelection = s)}
-						pagination={{ pageIndex: viewState.pageIndex, pageSize: viewState.pageSize }}
-						onPaginationChange={(p) => {
-							viewState.pageIndex = p.pageIndex;
-						}}
-						tableRef={(t) => (tableInstance = t)}
-					/>
-				{:else}
-					<DataTable
-						data={displayItems}
-						{columns}
-						enableSorting
-						enableFiltering
-						enableSelection
-						enablePagination
-						sorting={viewState.sorting}
-						onSortingChange={(s) => (viewState.sorting = s)}
-						{rowSelection}
-						onRowSelectionChange={(s) => (rowSelection = s)}
-						pagination={{ pageIndex: viewState.pageIndex, pageSize: viewState.pageSize }}
-						onPaginationChange={(p) => {
-							viewState.pageIndex = p.pageIndex;
-						}}
-						tableRef={(t) => (tableInstance = t)}
-					/>
-				{/if}
-			</div>
-
-			<TablePagination
-				pageIndex={viewState.pageIndex}
-				pageSize={viewState.pageSize}
-				{pageCount}
-				{totalItems}
-				onPageChange={(p) => (viewState.pageIndex = p)}
-				onPageSizeChange={(s) => {
-					viewState.pageSize = s;
-				}}
-			/>
-		{:else}
-			{@const gridItems = displayItems.map((item) => ({
-				id: item.id,
-				name: item.name,
-				slug: item.slug,
-				status: item.status,
-				url: item.url,
-				thumbnail: item.thumbnail,
-				updatedAt: item.updatedAt
-			}))}
-
-			<GridView
-				items={gridItems}
-				enableSelection
-				selectedIds={new Set(selectedIndices.map((idx) => displayItems[idx]?.id).filter(Boolean))}
-				onSelectionChange={(ids) => {
-					const newSelection: RowSelectionState = {};
-					for (const id of ids) {
-						const idx = displayItems.findIndex((i) => i.id === id);
-						if (idx !== -1) {
-							newSelection[idx] = true;
-						}
+	{:else}
+		{@const gridItems = displayItems.map((item) => ({
+			id: item.id,
+			name: item.name,
+			slug: item.slug,
+			status: item.status,
+			url: item.url,
+			thumbnail: item.thumbnail,
+			updatedAt: item.updatedAt
+		}))}
+
+		<GridView
+			items={gridItems}
+			enableSelection
+			selectedIds={new Set(selectedIndices.map((idx) => displayItems[idx]?.id).filter(Boolean))}
+			onSelectionChange={(ids) => {
+				const newSelection: RowSelectionState = {};
+				for (const id of ids) {
+					const idx = displayItems.findIndex((i) => i.id === id);
+					if (idx !== -1) {
+						newSelection[idx] = true;
 					}
-					rowSelection = newSelection;
-				}}
-			/>
-
-			<TablePagination
-				pageIndex={viewState.pageIndex}
-				pageSize={viewState.pageSize}
-				{pageCount}
-				{totalItems}
-				onPageChange={(p) => (viewState.pageIndex = p)}
-				onPageSizeChange={(s) => {
-					viewState.pageSize = s;
-				}}
-			/>
-		{/if}
-
-		<BulkActionsBar
-			{selectedCount}
-			onArchive={() => handleBulkArchive(displayItems)}
-			onDelete={() => handleBulkDelete(displayItems)}
-			onClear={() => (rowSelection = {})}
-			onRestore={isArchivedFilter ? () => handleBulkRestore(displayItems) : undefined}
+				}
+				rowSelection = newSelection;
+			}}
+		/>
+
+		<TablePagination
+			pageIndex={viewState.pageIndex}
+			pageSize={viewState.pageSize}
+			{pageCount}
+			{totalItems}
+			onPageChange={(p) => (viewState.pageIndex = p)}
+			onPageSizeChange={(s) => {
+				viewState.pageSize = s;
+			}}
 		/>
-	{/await}
-{/key}
+	{/if}
+
+	<BulkActionsBar
+		{selectedCount}
+		onArchive={() => handleBulkArchive(displayItems)}
+		onDelete={isArchivedFilter ? () => handleBulkDelete(displayItems) : undefined}
+		onClear={() => (rowSelection = {})}
+		onRestore={isArchivedFilter ? () => handleBulkRestore(displayItems) : undefined}
+	/>
+	</div>
+{/if}
 
 <AlertDialog.Root bind:open={deleteDialogOpen}>
 	<AlertDialog.Content>

package/dist/admin/client/collection/collection-page.svelte

@@ -9,8 +9,11 @@
 	let { data }: Props = $props();
 
 	const collectionSlug = $derived(data?.collectionSlug || page.params.collection || '');
+	const query = $derived(remotes.getCollection(collectionSlug));
 </script>
 
-{#await remotes.getCollection(collectionSlug) then collection}
-	<Collection {collection} />
-{/await}
+{#if query.ready && query.current}
+	<div class:opacity-60={query.loading} class="transition-opacity duration-200">
+		<Collection collection={query.current} />
+	</div>
+{/if}