@questpie/admin 1.1.1 → 3.0.0

package/dist/client/hooks/use-view-state.mjs

@@ -0,0 +1,479 @@
+import { useAdminStore } from "../runtime/provider.mjs";
+import { getAdminPreferenceQueryKey, useSetAdminPreference } from "./use-admin-preferences.mjs";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef } from "react";
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+
+//#region src/client/hooks/use-view-state.ts
+const EMPTY_CONFIG = {
+	filters: [],
+	sortConfig: null,
+	visibleColumns: [],
+	realtime: void 0,
+	includeDeleted: false,
+	pagination: {
+		page: 1,
+		pageSize: 25
+	}
+};
+/**
+* Get the preference key for a collection's view state
+*/
+function getPreferenceKey(collectionName) {
+	return `viewState:${collectionName}`;
+}
+/**
+* Merge stored visible columns with default columns to include new fields
+*
+* When a new field is added to the collection, it should appear in the column picker
+* but not automatically become visible (preserving user's existing preference).
+*
+* The merge logic:
+* 1. Start with stored visible columns (in user's preferred order)
+* 2. New columns that weren't in the previous default set are NOT auto-added to visible
+*    (they appear in column picker but hidden by default)
+*/
+function mergeVisibleColumns(storedColumns, defaultColumns) {
+	if (!storedColumns?.length) return defaultColumns;
+	return storedColumns;
+}
+/**
+* Hook to manage view configuration state with database persistence.
+*
+* Uses Suspense for loading and queryClient for optimistic updates.
+* Must be used within a Suspense boundary.
+*
+* Architecture:
+* - Query data is the single source of truth
+* - Config is derived (useMemo) from query data + defaults
+* - Updates use optimistic mutations via queryClient.setQueryData
+* - Changes are debounced and persisted to DB
+*
+* @param defaultColumns - Default columns to show when no config is set
+* @param initialConfig - Optional initial configuration to start with
+* @param collectionName - Collection name for preference key
+* @param userId - User ID (required - must be available, use inside Suspense after auth)
+*
+* @example
+* ```tsx
+* // Inside Suspense boundary, after user is loaded
+* function TableViewInner({ collection, userId }) {
+*   const viewState = useViewState(
+*     ["_title", "status", "createdAt"],
+*     undefined,
+*     collection,
+*     userId
+*   );
+*
+*   // config is guaranteed to be ready
+*   const { config, setVisibleColumns, toggleSort } = viewState;
+* }
+* ```
+*/
+function useViewState(defaultColumns, initialConfig, collectionName, userId) {
+	const $ = c(97);
+	const queryClient = useQueryClient();
+	const client = useAdminStore(_temp);
+	let preferenceKey;
+	let t0;
+	if ($[0] !== collectionName || $[1] !== userId) {
+		preferenceKey = collectionName ? getPreferenceKey(collectionName) : null;
+		t0 = getAdminPreferenceQueryKey(userId, preferenceKey ?? "");
+		$[0] = collectionName;
+		$[1] = userId;
+		$[2] = preferenceKey;
+		$[3] = t0;
+	} else {
+		preferenceKey = $[2];
+		t0 = $[3];
+	}
+	const queryKey = t0;
+	let t1;
+	if ($[4] !== client || $[5] !== preferenceKey || $[6] !== userId) {
+		t1 = async () => {
+			if (!userId || !preferenceKey) return null;
+			return (await client.collections.admin_preferences.findOne({ where: {
+				userId,
+				key: preferenceKey
+			} }))?.value ?? null;
+		};
+		$[4] = client;
+		$[5] = preferenceKey;
+		$[6] = userId;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== queryKey || $[9] !== t1) {
+		t2 = {
+			queryKey,
+			queryFn: t1
+		};
+		$[8] = queryKey;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	const { data: storedConfig } = useSuspenseQuery(t2);
+	const { mutate: savePreference } = useSetAdminPreference(preferenceKey ?? "");
+	let t3;
+	bb0: {
+		if (storedConfig) {
+			let t4$2;
+			if ($[11] !== storedConfig.filters) {
+				t4$2 = storedConfig.filters ?? [];
+				$[11] = storedConfig.filters;
+				$[12] = t4$2;
+			} else t4$2 = $[12];
+			const t5$2 = storedConfig.sortConfig ?? null;
+			let t6$2;
+			if ($[13] !== defaultColumns || $[14] !== storedConfig.visibleColumns) {
+				t6$2 = mergeVisibleColumns(storedConfig.visibleColumns, defaultColumns);
+				$[13] = defaultColumns;
+				$[14] = storedConfig.visibleColumns;
+				$[15] = t6$2;
+			} else t6$2 = $[15];
+			const t7$2 = storedConfig.realtime !== void 0 ? storedConfig.realtime : initialConfig?.realtime;
+			const t8$2 = storedConfig.includeDeleted !== void 0 ? storedConfig.includeDeleted : initialConfig?.includeDeleted ?? false;
+			let t9$2;
+			if ($[16] !== storedConfig.pagination) {
+				t9$2 = storedConfig.pagination ?? {
+					page: 1,
+					pageSize: 25
+				};
+				$[16] = storedConfig.pagination;
+				$[17] = t9$2;
+			} else t9$2 = $[17];
+			let t10$1;
+			if ($[18] !== t4$2 || $[19] !== t5$2 || $[20] !== t6$2 || $[21] !== t7$2 || $[22] !== t8$2 || $[23] !== t9$2) {
+				t10$1 = {
+					filters: t4$2,
+					sortConfig: t5$2,
+					visibleColumns: t6$2,
+					realtime: t7$2,
+					includeDeleted: t8$2,
+					pagination: t9$2
+				};
+				$[18] = t4$2;
+				$[19] = t5$2;
+				$[20] = t6$2;
+				$[21] = t7$2;
+				$[22] = t8$2;
+				$[23] = t9$2;
+				$[24] = t10$1;
+			} else t10$1 = $[24];
+			t3 = t10$1;
+			break bb0;
+		}
+		let t4$1;
+		if ($[25] !== initialConfig?.filters) {
+			t4$1 = initialConfig?.filters ?? [];
+			$[25] = initialConfig?.filters;
+			$[26] = t4$1;
+		} else t4$1 = $[26];
+		const t5$1 = initialConfig?.sortConfig ?? null;
+		const t6$1 = initialConfig?.realtime;
+		const t7$1 = initialConfig?.includeDeleted ?? false;
+		let t8$1;
+		if ($[27] !== initialConfig?.pagination) {
+			t8$1 = initialConfig?.pagination ?? {
+				page: 1,
+				pageSize: 25
+			};
+			$[27] = initialConfig?.pagination;
+			$[28] = t8$1;
+		} else t8$1 = $[28];
+		let t9$1;
+		if ($[29] !== defaultColumns || $[30] !== t4$1 || $[31] !== t5$1 || $[32] !== t6$1 || $[33] !== t7$1 || $[34] !== t8$1) {
+			t9$1 = {
+				filters: t4$1,
+				sortConfig: t5$1,
+				visibleColumns: defaultColumns,
+				realtime: t6$1,
+				includeDeleted: t7$1,
+				pagination: t8$1
+			};
+			$[29] = defaultColumns;
+			$[30] = t4$1;
+			$[31] = t5$1;
+			$[32] = t6$1;
+			$[33] = t7$1;
+			$[34] = t8$1;
+			$[35] = t9$1;
+		} else t9$1 = $[35];
+		t3 = t9$1;
+	}
+	const config = t3;
+	const saveTimeoutRef = useRef(null);
+	let t4;
+	let t5;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => () => {
+			if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
+		};
+		t5 = [];
+		$[36] = t4;
+		$[37] = t5;
+	} else {
+		t4 = $[36];
+		t5 = $[37];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[38] !== config || $[39] !== preferenceKey || $[40] !== queryClient || $[41] !== queryKey || $[42] !== savePreference || $[43] !== userId) {
+		t6 = (newConfig) => {
+			const next = typeof newConfig === "function" ? newConfig(config) : newConfig;
+			if (preferenceKey && userId) queryClient.setQueryData(queryKey, next);
+			if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
+			saveTimeoutRef.current = setTimeout(() => {
+				if (preferenceKey) savePreference(next);
+			}, 500);
+		};
+		$[38] = config;
+		$[39] = preferenceKey;
+		$[40] = queryClient;
+		$[41] = queryKey;
+		$[42] = savePreference;
+		$[43] = userId;
+		$[44] = t6;
+	} else t6 = $[44];
+	const setConfig = t6;
+	let t7;
+	if ($[45] !== setConfig) {
+		t7 = (filter) => {
+			setConfig((prev) => ({
+				...prev,
+				filters: [...prev.filters, filter]
+			}));
+		};
+		$[45] = setConfig;
+		$[46] = t7;
+	} else t7 = $[46];
+	const addFilter = t7;
+	let t8;
+	if ($[47] !== setConfig) {
+		t8 = (filterId) => {
+			setConfig((prev_0) => ({
+				...prev_0,
+				filters: prev_0.filters.filter((f) => f.id !== filterId)
+			}));
+		};
+		$[47] = setConfig;
+		$[48] = t8;
+	} else t8 = $[48];
+	const removeFilter = t8;
+	let t9;
+	if ($[49] !== setConfig) {
+		t9 = (filterId_0, updates) => {
+			setConfig((prev_1) => ({
+				...prev_1,
+				filters: prev_1.filters.map((f_0) => f_0.id === filterId_0 ? {
+					...f_0,
+					...updates
+				} : f_0)
+			}));
+		};
+		$[49] = setConfig;
+		$[50] = t9;
+	} else t9 = $[50];
+	const updateFilter = t9;
+	let t10;
+	if ($[51] !== setConfig) {
+		t10 = () => {
+			setConfig(_temp2);
+		};
+		$[51] = setConfig;
+		$[52] = t10;
+	} else t10 = $[52];
+	const clearFilters = t10;
+	let t11;
+	if ($[53] !== setConfig) {
+		t11 = (sortConfig) => {
+			setConfig((prev_3) => ({
+				...prev_3,
+				sortConfig
+			}));
+		};
+		$[53] = setConfig;
+		$[54] = t11;
+	} else t11 = $[54];
+	const setSort = t11;
+	let t12;
+	if ($[55] !== setConfig) {
+		t12 = (field) => {
+			setConfig((prev_4) => {
+				if (prev_4.sortConfig?.field === field) {
+					if (prev_4.sortConfig.direction === "asc") return {
+						...prev_4,
+						sortConfig: {
+							field,
+							direction: "desc"
+						}
+					};
+					return {
+						...prev_4,
+						sortConfig: null
+					};
+				}
+				return {
+					...prev_4,
+					sortConfig: {
+						field,
+						direction: "asc"
+					}
+				};
+			});
+		};
+		$[55] = setConfig;
+		$[56] = t12;
+	} else t12 = $[56];
+	const toggleSort = t12;
+	let t13;
+	if ($[57] !== setConfig) {
+		t13 = (columns) => {
+			setConfig((prev_5) => ({
+				...prev_5,
+				visibleColumns: columns
+			}));
+		};
+		$[57] = setConfig;
+		$[58] = t13;
+	} else t13 = $[58];
+	const setVisibleColumns = t13;
+	let t14;
+	if ($[59] !== setConfig) {
+		t14 = (page) => {
+			setConfig((prev_6) => ({
+				...prev_6,
+				pagination: {
+					...prev_6.pagination,
+					page
+				}
+			}));
+		};
+		$[59] = setConfig;
+		$[60] = t14;
+	} else t14 = $[60];
+	const setPage = t14;
+	let t15;
+	if ($[61] !== setConfig) {
+		t15 = (pageSize) => {
+			setConfig((prev_7) => ({
+				...prev_7,
+				pagination: {
+					page: 1,
+					pageSize
+				}
+			}));
+		};
+		$[61] = setConfig;
+		$[62] = t15;
+	} else t15 = $[62];
+	const setPageSize = t15;
+	let t16;
+	if ($[63] !== setConfig) {
+		t16 = (column) => {
+			setConfig((prev_8) => {
+				if (prev_8.visibleColumns.includes(column)) return {
+					...prev_8,
+					visibleColumns: prev_8.visibleColumns.filter((c$1) => c$1 !== column)
+				};
+				return {
+					...prev_8,
+					visibleColumns: [...prev_8.visibleColumns, column]
+				};
+			});
+		};
+		$[63] = setConfig;
+		$[64] = t16;
+	} else t16 = $[64];
+	const toggleColumn = t16;
+	let t17;
+	if ($[65] !== setConfig) {
+		t17 = (newConfig_0) => {
+			setConfig(newConfig_0);
+		};
+		$[65] = setConfig;
+		$[66] = t17;
+	} else t17 = $[66];
+	const loadConfig = t17;
+	let t18;
+	if ($[67] !== defaultColumns || $[68] !== setConfig) {
+		t18 = () => {
+			setConfig({
+				...EMPTY_CONFIG,
+				visibleColumns: defaultColumns
+			});
+		};
+		$[67] = defaultColumns;
+		$[68] = setConfig;
+		$[69] = t18;
+	} else t18 = $[69];
+	const resetConfig = t18;
+	let t19;
+	if ($[70] !== config.filters.length || $[71] !== config.includeDeleted || $[72] !== config.pagination?.page || $[73] !== config.pagination?.pageSize || $[74] !== config.realtime || $[75] !== config.sortConfig || $[76] !== config.visibleColumns || $[77] !== defaultColumns || $[78] !== initialConfig?.includeDeleted || $[79] !== initialConfig?.realtime) {
+		t19 = () => config.filters.length > 0 || config.sortConfig !== null || config.realtime !== initialConfig?.realtime || (config.includeDeleted ?? false) !== (initialConfig?.includeDeleted ?? false) || config.pagination?.page !== 1 || config.pagination?.pageSize !== 25 || JSON.stringify([...config.visibleColumns].sort()) !== JSON.stringify([...defaultColumns].sort());
+		$[70] = config.filters.length;
+		$[71] = config.includeDeleted;
+		$[72] = config.pagination?.page;
+		$[73] = config.pagination?.pageSize;
+		$[74] = config.realtime;
+		$[75] = config.sortConfig;
+		$[76] = config.visibleColumns;
+		$[77] = defaultColumns;
+		$[78] = initialConfig?.includeDeleted;
+		$[79] = initialConfig?.realtime;
+		$[80] = t19;
+	} else t19 = $[80];
+	initialConfig?.includeDeleted;
+	initialConfig?.realtime;
+	const hasChanges = t19();
+	let t20;
+	if ($[81] !== addFilter || $[82] !== clearFilters || $[83] !== config || $[84] !== hasChanges || $[85] !== loadConfig || $[86] !== removeFilter || $[87] !== resetConfig || $[88] !== setConfig || $[89] !== setPage || $[90] !== setPageSize || $[91] !== setSort || $[92] !== setVisibleColumns || $[93] !== toggleColumn || $[94] !== toggleSort || $[95] !== updateFilter) {
+		t20 = {
+			config,
+			setConfig,
+			addFilter,
+			removeFilter,
+			updateFilter,
+			clearFilters,
+			setSort,
+			toggleSort,
+			setVisibleColumns,
+			toggleColumn,
+			setPage,
+			setPageSize,
+			loadConfig,
+			resetConfig,
+			hasChanges,
+			isLoading: false
+		};
+		$[81] = addFilter;
+		$[82] = clearFilters;
+		$[83] = config;
+		$[84] = hasChanges;
+		$[85] = loadConfig;
+		$[86] = removeFilter;
+		$[87] = resetConfig;
+		$[88] = setConfig;
+		$[89] = setPage;
+		$[90] = setPageSize;
+		$[91] = setSort;
+		$[92] = setVisibleColumns;
+		$[93] = toggleColumn;
+		$[94] = toggleSort;
+		$[95] = updateFilter;
+		$[96] = t20;
+	} else t20 = $[96];
+	return t20;
+}
+function _temp2(prev_2) {
+	return {
+		...prev_2,
+		filters: []
+	};
+}
+function _temp(s) {
+	return s.client;
+}
+
+//#endregion
+export { useViewState };