@riducms/admin 0.2.2 → 0.3.0

package/src/features/collections/collection-list-preferences-controller.svelte.ts

@@ -1,4 +1,4 @@
-import type { SchemaField } from "@riducms/protocol";
+import type { SchemaField, AdminCollectionListPreferencesV1 } from "@riducms/protocol";
 import { RiduError } from "@riducms/sdk";
 import type { AdminI18n } from "@riducms/translations";
 
@@ -9,34 +9,20 @@ import {
 	normalizeWorkspacePreference,
 	parseListFilters,
 	parseListPageSize,
-	type ListFilter,
-	type ListPageSize,
+	type ListColumnSelection,
+	type ListViewState,
 	type ListWorkspacePreference,
 } from "@admin/features/collections/list-workspace";
 
-export interface CollectionListPreset {
+export interface CollectionListPreset extends ListViewState {
 	name: string;
-	q: string;
-	status: string;
-	folder: string;
-	view: "list" | "hierarchy";
-	filters: ListFilter[];
-	sort: string;
-	columns: string[];
-	limit: ListPageSize;
-	showStatus: boolean;
-	showID: boolean;
-	showCreated: boolean;
-	showUpdated: boolean;
 }
 
-export type CollectionListPresetInput = Omit<CollectionListPreset, "name">;
-
 interface CollectionListPreferenceRoute {
 	slug: string;
 	sessionID: string;
 	preferenceOwnerID: string;
-	columnFields: readonly SchemaField[];
+	columnFields: readonly Pick<SchemaField, "path">[];
 	filterFields: readonly SchemaField[];
 	defaultColumns: readonly string[];
 }
@@ -56,11 +42,7 @@ interface ActivePreferenceRoute extends CollectionListPreferenceRoute {
 
 const initialWorkspace: ListWorkspacePreference = {
 	columns: [],
-	showStatus: true,
-	showID: false,
-	showCreated: false,
-	showUpdated: true,
-	limit: 25,
+	limit: 10,
 };
 
 export class CollectionListPreferencesController {
@@ -70,7 +52,7 @@ export class CollectionListPreferencesController {
 	#active?: ActivePreferenceRoute;
 	#generation = 0;
 	#presetLoad?: AbortController;
-	#workspaceLoad?: AbortController;
+	#workspaceLoad = $state.raw<AbortController>();
 	#workspaceWrites = getPreferenceWriteQueue();
 	#workspaceSaveVersions = new Map<string, number>();
 	#unsubscribeWorkspace?: () => void;
@@ -83,7 +65,11 @@ export class CollectionListPreferencesController {
 		private readonly i18n: AdminI18n
 	) {}
 
-	enter = (route: CollectionListPreferenceRoute) => {
+	get workspacePending() {
+		return this.#workspaceLoad !== undefined;
+	}
+
+	enter = (route: CollectionListPreferenceRoute, initial?: AdminCollectionListPreferencesV1) => {
 		const key = routeKey(route);
 		if (this.#active?.key === key) return;
 		this.#abortLoads();
@@ -104,8 +90,36 @@ export class CollectionListPreferencesController {
 		this.presets = [];
 		this.#subscribeWrites(this.#active);
 		if (route.sessionID === "" || route.slug === "") return;
-		this.#loadWorkspace(this.#active, fallback);
-		this.#loadPresets(this.#active);
+		const workspace = initial?.workspace;
+		if (workspace !== undefined) {
+			if (workspace.error === undefined) {
+				this.workspace = normalizeWorkspacePreference(
+					workspace.value,
+					route.columnFields,
+					fallback
+				);
+			} else if (workspace.error.code !== "not_found") {
+				this.notifications.error({
+					title: this.i18n.t("collections:listPreferencesUnavailable"),
+					message: workspace.error.message,
+				});
+			}
+		} else {
+			this.#loadWorkspace(this.#active, fallback);
+		}
+		const presets = initial?.presets;
+		if (presets !== undefined) {
+			if (presets.error === undefined) {
+				this.presets = validPresets(presets.value, route.filterFields, route.defaultColumns);
+			} else if (presets.error.code !== "not_found") {
+				this.notifications.error({
+					title: this.i18n.t("collections:savedViewsUnavailable"),
+					message: presets.error.message,
+				});
+			}
+		} else {
+			this.#loadPresets(this.#active);
+		}
 	};
 
 	persistWorkspace = async (next: ListWorkspacePreference) => {
@@ -140,7 +154,7 @@ export class CollectionListPreferencesController {
 		}
 	};
 
-	savePreset = async (name: string, input: CollectionListPresetInput) => {
+	savePreset = async (name: string, input: ListViewState) => {
 		const active = this.#active;
 		const normalizedName = name.trim();
 		if (
@@ -341,7 +355,7 @@ function ownerKey(route: CollectionListPreferenceRoute) {
 }
 
 function fallbackWorkspace(defaultColumns: readonly string[]): ListWorkspacePreference {
-	return { ...initialWorkspace, columns: [...defaultColumns] };
+	return { ...initialWorkspace, columns: defaultColumns.map((path) => ({ path, active: true })) };
 }
 
 function validPresets(
@@ -358,9 +372,7 @@ function validPresets(
 			typeof record.q !== "string" ||
 			typeof record.status !== "string" ||
 			typeof record.folder !== "string" ||
-			(record.view !== "list" && record.view !== "hierarchy") ||
-			typeof record.showStatus !== "boolean" ||
-			typeof record.showUpdated !== "boolean"
+			(record.view !== "list" && record.view !== "hierarchy")
 		) {
 			return [];
 		}
@@ -377,16 +389,18 @@ function validPresets(
 				),
 				sort: typeof record.sort === "string" ? record.sort : "",
 				columns: Array.isArray(record.columns)
-					? record.columns.filter((name): name is string => typeof name === "string")
-					: [...defaultColumns],
+					? record.columns.filter(
+							(column): column is ListColumnSelection =>
+								typeof column === "object" &&
+								column !== null &&
+								typeof column.path === "string" &&
+								typeof column.active === "boolean"
+						)
+					: defaultColumns.map((path) => ({ path, active: true })),
 				limit: parseListPageSize(
 					typeof record.limit === "number" ? String(record.limit) : null,
-					25
+					10
 				),
-				showStatus: record.showStatus,
-				showID: record.showID === true,
-				showCreated: record.showCreated === true,
-				showUpdated: record.showUpdated,
 			},
 		];
 	});

package/src/features/collections/collection-list-query.ts

@@ -0,0 +1,223 @@
+import type { CollectionListPreset } from "@admin/features/collections/collection-list-preferences-controller.svelte";
+import type { SchemaField } from "@riducms/protocol";
+import {
+	parseListFilters,
+	parseListPageSize,
+	sortableField,
+	normalizeColumnSelection,
+	encodeColumnSelection,
+	type ListColumnSelection,
+	type ListFilterGroup,
+	type ListPageSize,
+} from "@admin/features/collections/list-workspace";
+
+/** Reads and updates the collection URL. The router remains the source of truth. */
+export class CollectionListQuery {
+	constructor(
+		private readonly params: { readonly current: URLSearchParams },
+		private readonly setParams: (
+			next: URLSearchParams,
+			options: { replace: boolean; preventScrollReset: boolean }
+		) => void | Promise<void>,
+		private readonly pendingSearch: () => string | undefined
+	) {}
+
+	get locale() {
+		return this.params.current.get("locale");
+	}
+
+	readQuery(options: {
+		limit: ListPageSize;
+		columns: string[];
+		locale: string | undefined;
+		trash: boolean;
+	}) {
+		const query = new URLSearchParams(this.params.current);
+		query.set("limit", String(options.limit));
+		query.set("columns", options.columns.join(","));
+		if (options.locale === undefined) query.delete("locale");
+		else query.set("locale", options.locale);
+		query.set("trash", String(options.trash));
+		query.sort();
+		return query.toString();
+	}
+
+	get search() {
+		return this.params.current.get("q") ?? "";
+	}
+
+	get page() {
+		return parsePage(this.params.current.get("page"));
+	}
+
+	get status() {
+		return this.params.current.get("status") ?? "";
+	}
+
+	get folder() {
+		return this.params.current.get("folder") ?? "";
+	}
+
+	get hierarchy() {
+		return this.params.current.get("view") === "hierarchy";
+	}
+
+	get sort() {
+		return this.params.current.get("sort") ?? "";
+	}
+
+	get sortField() {
+		return this.sort.replace(/^-/, "");
+	}
+
+	get sortDescending() {
+		return this.sort.startsWith("-");
+	}
+
+	sortFor(fields: readonly SchemaField[]) {
+		if (["id", "createdAt", "updatedAt"].includes(this.sortField)) return this.sort;
+		const field = fields.find((candidate) => candidate.path === this.sortField);
+		return field !== undefined && sortableField(field) ? this.sort : "";
+	}
+
+	filters(fields: readonly SchemaField[]) {
+		return parseListFilters(this.params.current.get("filters"), fields);
+	}
+
+	pageSize(fallback: ListPageSize) {
+		return parseListPageSize(this.params.current.get("limit"), fallback);
+	}
+
+	columnSelection(fields: readonly { path: string }[], fallback: readonly ListColumnSelection[]) {
+		return parseColumns(this.params.current.get("columns"), fields, fallback);
+	}
+
+	columnsForPicker(fields: readonly { path: string }[], fallback: readonly ListColumnSelection[]) {
+		return parseColumns(this.#nextParams().get("columns"), fields, fallback);
+	}
+
+	handleSearch = (value: string) => {
+		const next = this.#nextParams();
+		if (value.trim().length > 0) next.set("q", value);
+		else next.delete("q");
+		next.delete("page");
+		this.#updateSearch(next, true);
+	};
+
+	clearSearch = () => this.handleSearch("");
+
+	clearFilters = () => {
+		const next = this.#nextParams();
+		next.delete("q");
+		next.delete("status");
+		next.delete("page");
+		next.delete("folder");
+		next.delete("filters");
+		return this.#updateSearch(next, true);
+	};
+
+	updateListFilters = (filters: readonly ListFilterGroup[]) => {
+		const next = this.#nextParams();
+		if (filters.length === 0) next.delete("filters");
+		else next.set("filters", JSON.stringify(filters));
+		next.delete("page");
+		return this.#updateSearch(next, false);
+	};
+
+	setSort = (name: string, descending: boolean) => {
+		const next = this.#nextParams();
+		next.set("sort", descending ? `-${name}` : name);
+		next.delete("page");
+		return this.#updateSearch(next, false);
+	};
+
+	selectFolder = (folder: string) => {
+		const next = this.#nextParams();
+		if (folder === "") next.delete("folder");
+		else next.set("folder", folder);
+		next.delete("page");
+		this.#updateSearch(next, false);
+	};
+
+	selectView = (view: "list" | "hierarchy") => {
+		const next = this.#nextParams();
+		if (view === "list") next.delete("view");
+		else next.set("view", view);
+		next.delete("page");
+		this.#updateSearch(next, false);
+	};
+
+	selectStatus = (status: string) => {
+		const next = this.#nextParams();
+		if (status === "") next.delete("status");
+		else next.set("status", status);
+		next.delete("page");
+		this.#updateSearch(next, false);
+	};
+
+	selectPage = (page: number) => {
+		const next = this.#nextParams();
+		if (page <= 1) next.delete("page");
+		else next.set("page", String(page));
+		this.#updateSearch(next, false);
+	};
+
+	selectPageSize = (limit: ListPageSize) => {
+		const next = this.#nextParams();
+		next.set("limit", String(limit));
+		next.delete("page");
+		this.#updateSearch(next, false);
+	};
+
+	setColumns = (columns: readonly ListColumnSelection[]) => {
+		const next = this.#nextParams();
+		next.set("columns", encodeColumnSelection(columns));
+		this.#updateSearch(next, true);
+	};
+
+	applyPreset = (preset: CollectionListPreset, locale: string | undefined) => {
+		const next = new URLSearchParams();
+		if (locale !== undefined) next.set("locale", locale);
+		if (preset.q !== "") next.set("q", preset.q);
+		if (preset.status !== "") next.set("status", preset.status);
+		if (preset.folder !== "") next.set("folder", preset.folder);
+		if (preset.view === "hierarchy") next.set("view", "hierarchy");
+		if (preset.filters.length > 0) next.set("filters", JSON.stringify(preset.filters));
+		if (preset.sort !== "") next.set("sort", preset.sort);
+		next.set("columns", encodeColumnSelection(preset.columns));
+		next.set("limit", String(preset.limit));
+		this.#updateSearch(next, false);
+	};
+
+	#updateSearch(next: URLSearchParams, replace: boolean) {
+		return this.setParams(next, { replace, preventScrollReset: replace });
+	}
+
+	#nextParams() {
+		// Compose rapid edits with the router's pending destination until it commits.
+		return new URLSearchParams(this.pendingSearch() ?? this.params.current);
+	}
+}
+
+function parsePage(value: string | null) {
+	const page = Number(value);
+	return Number.isInteger(page) && page > 0 ? page : 1;
+}
+
+function parseColumns(
+	encoded: string | null,
+	fields: readonly { path: string }[],
+	fallback: readonly ListColumnSelection[]
+) {
+	const value =
+		encoded === null
+			? fallback
+			: encoded
+					.split(",")
+					.filter(Boolean)
+					.map((name) => ({
+						path: name.replace(/^-/, ""),
+						active: !name.startsWith("-"),
+					}));
+	return normalizeColumnSelection(value, fields, fallback);
+}