@olenbetong/appframe-ds 1.2.0 → 1.3.0

package/src/grid/useAfPersistedState.ts

@@ -1,230 +1,230 @@
-import type { GridApi, GridInitialState, GridPaginationModel } from "@mui/x-data-grid-premium";
-
-import localforage from "localforage";
-import { useEffect, useState } from "react";
-
-import type { AfGridProps } from "./index.js";
-import { getColumnVisibilityModel } from "./useAfColumns.js";
-
-const settingsStore = localforage.createInstance({
-	name: `AfGridLayouts.${globalThis.af?.userSession?.login ?? "anonymous"}`,
-});
-
-type GridSettings = {
-	layoutVersion: string | number;
-	state: GridInitialState;
-};
-
-const settingsCache: Record<string, GridSettings> = {};
-
-async function persistState(
-	key: string,
-	layoutVersion: string | number,
-	state: GridInitialState | null | undefined,
-	config?: StatePersistenceConfig,
-) {
-	if (state) {
-		state = structuredClone(state);
-
-		let settings: GridSettings = {
-			layoutVersion,
-			state: removeNonPersistedState(state, config),
-		};
-
-		if (state.pagination?.paginationModel?.page !== undefined) {
-			delete state.pagination.paginationModel.page;
-		}
-
-		settingsCache[key] = settings;
-		await settingsStore.setItem<GridSettings>(key, settings);
-	}
-}
-
-function removeNonPersistedState(state: GridInitialState, config?: StatePersistenceConfig): GridInitialState {
-	const newState: GridInitialState = {};
-	let columns: GridInitialState["columns"] = {};
-	let filter: GridInitialState["filter"] = {};
-	let pagination: GridInitialState["pagination"] = { paginationModel: {} };
-	let sorting: GridInitialState["sorting"] = {};
-
-	// Persist the relevant state unless explicitly disabled in the config
-	if (config?.density !== false) {
-		newState.density = state.density;
-	}
-	if (config?.pinnedColumns !== false) {
-		newState.pinnedColumns = state.pinnedColumns;
-	}
-	if (config?.rowGrouping !== false) {
-		newState.rowGrouping = state.rowGrouping;
-	}
-	if (config?.aggregation !== false) {
-		newState.aggregation = state.aggregation;
-	}
-	if (config?.columns?.columnVisibilityModel !== false) {
-		columns.columnVisibilityModel = state.columns?.columnVisibilityModel;
-	}
-	if (config?.columns?.dimensions !== false) {
-		columns.dimensions = state.columns?.dimensions;
-	}
-	if (config?.columns?.orderedFields !== false) {
-		columns.orderedFields = state.columns?.orderedFields;
-	}
-	if (config?.pagination?.paginationModel.pageSize !== false) {
-		(pagination.paginationModel as Partial<GridPaginationModel>).pageSize = state.pagination?.paginationModel?.pageSize;
-	}
-	if (config?.preferencePanel === true) {
-		newState.preferencePanel = state.preferencePanel;
-	}
-
-	// Sort model, current page and filter model are not persisted by default
-	if (config?.sorting?.sortModel === true) {
-		sorting.sortModel = state.sorting?.sortModel;
-	}
-	if (config?.pagination?.paginationModel.page === true) {
-		(pagination.paginationModel as Partial<GridPaginationModel>).page = state.pagination?.paginationModel?.page;
-	}
-	if (config?.filter?.filterModel === true) {
-		filter.filterModel = state.filter?.filterModel;
-	}
-
-	return {
-		...newState,
-		columns,
-		filter,
-		pagination,
-		sorting,
-	};
-}
-
-let isLoaded = false;
-export const isPersistedStateLoaded = () => isLoaded;
-
-type GetInitialStateProps = Pick<AfGridProps, "id" | "layoutVersion" | "columns" | "initialState" | "persistenceModel">;
-
-function getInitialState({ columns, persistenceModel, id, initialState, layoutVersion }: GetInitialStateProps) {
-	let key = `${af.article.id}.${id}`;
-	let persistedState = settingsCache[key];
-
-	let state: GridInitialState =
-		persistedState?.layoutVersion === layoutVersion
-			? removeNonPersistedState(persistedState.state, persistenceModel)
-			: {
-					density: "compact",
-					...initialState,
-				};
-
-	if (!state.columns) {
-		state.columns = {};
-	}
-
-	if (!state.columns.columnVisibilityModel) {
-		state.columns.columnVisibilityModel = getColumnVisibilityModel(columns);
-	}
-
-	if (!state.columns.orderedFields) {
-		state.columns.orderedFields = columns
-			.filter((c) => typeof c === "string" || !c.hide)
-			.map((c) => (typeof c === "string" ? c : c.field));
-	} else {
-		// Append any columns added since the layout was saved that aren't already present
-		let known = new Set(state.columns.orderedFields);
-		for (let c of columns) {
-			let field = typeof c === "string" ? c : c.field;
-			let hidden = typeof c !== "string" && c.hide;
-			if (!hidden && !known.has(field)) {
-				state.columns.orderedFields.push(field);
-			}
-		}
-	}
-
-	return state;
-}
-
-// Load all article grid layouts even if the grid is not mounted yet.
-// This ways the persisted state can be restored faster after the initial
-// page load.
-export const settingsLoaded = settingsStore
-	.keys()
-	.then((keys) =>
-		Promise.allSettled(
-			keys
-				.filter((key) => key.startsWith(af.article.id))
-				.map((key) =>
-					settingsStore.getItem<GridSettings>(key).then((settings) => {
-						if (settings && !settingsCache[key]) {
-							settingsCache[key] = settings;
-						}
-					}),
-				),
-		),
-	)
-	.then(() => {
-		isLoaded = true;
-	});
-
-// Clean legacy state from local storage
-setTimeout(() => {
-	for (let key of Object.keys(localStorage)) {
-		if (key.includes("AfGrid")) {
-			localStorage.removeItem(key);
-		}
-	}
-}, 2000);
-
-export type StatePersistenceConfig = {
-	aggregation?: boolean;
-	density?: boolean;
-	pinnedColumns?: boolean;
-	rowGrouping?: boolean;
-	columns?: {
-		columnVisibilityModel?: boolean;
-		dimensions?: boolean;
-		orderedFields?: boolean;
-	};
-	filter?: {
-		filterModel?: boolean;
-	};
-	pagination?: {
-		paginationModel: {
-			page?: boolean;
-			pageSize?: boolean;
-		};
-	};
-	preferencePanel?: boolean;
-	sorting?: {
-		sortModel: boolean;
-	};
-};
-
-/**
- * On mount, load the persisted state from Indexed DB, and if the persisted
- * layout version matches, restore the layout. Then listen to changes to the
- * state, and store the latest version in Indexed DB.
- */
-export function useAfPersistedState(
-	props: { apiRef: React.RefObject<GridApi | null> } & Pick<
-		AfGridProps,
-		"id" | "layoutVersion" | "columns" | "initialState" | "persistenceModel"
-	>,
-): GridInitialState {
-	let { apiRef, columns, id, initialState, layoutVersion = 0, persistenceModel } = props;
-	let [initialState_] = useState(() => getInitialState({ columns, persistenceModel, id, initialState, layoutVersion }));
-
-	useEffect(() => {
-		let key = `${af.article.id}.${id}`;
-		let persistTimeout: any;
-
-		return apiRef.current?.subscribeEvent("stateChange", () => {
-			// Debounce the save, as state changes can be very frequent.
-			clearTimeout(persistTimeout);
-			persistTimeout = setTimeout(() => {
-				// Use optional chaining, as the component may unmount before the timeout
-				// fires.
-				let state = apiRef.current?.exportState();
-				persistState(key, layoutVersion, state, persistenceModel);
-			}, 300);
-		});
-	}, [apiRef, id, layoutVersion, persistenceModel]);
-
-	return initialState_;
-}
+import type { GridApi, GridInitialState, GridPaginationModel } from "@mui/x-data-grid-premium";
+
+import localforage from "localforage";
+import { useEffect, useState } from "react";
+
+import type { AfGridProps } from "./index.js";
+import { getColumnVisibilityModel } from "./useAfColumns.js";
+
+const settingsStore = localforage.createInstance({
+	name: `AfGridLayouts.${globalThis.af?.userSession?.login ?? "anonymous"}`,
+});
+
+type GridSettings = {
+	layoutVersion: string | number;
+	state: GridInitialState;
+};
+
+const settingsCache: Record<string, GridSettings> = {};
+
+async function persistState(
+	key: string,
+	layoutVersion: string | number,
+	state: GridInitialState | null | undefined,
+	config?: StatePersistenceConfig,
+) {
+	if (state) {
+		state = structuredClone(state);
+
+		let settings: GridSettings = {
+			layoutVersion,
+			state: removeNonPersistedState(state, config),
+		};
+
+		if (state.pagination?.paginationModel?.page !== undefined) {
+			delete state.pagination.paginationModel.page;
+		}
+
+		settingsCache[key] = settings;
+		await settingsStore.setItem<GridSettings>(key, settings);
+	}
+}
+
+function removeNonPersistedState(state: GridInitialState, config?: StatePersistenceConfig): GridInitialState {
+	const newState: GridInitialState = {};
+	let columns: GridInitialState["columns"] = {};
+	let filter: GridInitialState["filter"] = {};
+	let pagination: GridInitialState["pagination"] = { paginationModel: {} };
+	let sorting: GridInitialState["sorting"] = {};
+
+	// Persist the relevant state unless explicitly disabled in the config
+	if (config?.density !== false) {
+		newState.density = state.density;
+	}
+	if (config?.pinnedColumns !== false) {
+		newState.pinnedColumns = state.pinnedColumns;
+	}
+	if (config?.rowGrouping !== false) {
+		newState.rowGrouping = state.rowGrouping;
+	}
+	if (config?.aggregation !== false) {
+		newState.aggregation = state.aggregation;
+	}
+	if (config?.columns?.columnVisibilityModel !== false) {
+		columns.columnVisibilityModel = state.columns?.columnVisibilityModel;
+	}
+	if (config?.columns?.dimensions !== false) {
+		columns.dimensions = state.columns?.dimensions;
+	}
+	if (config?.columns?.orderedFields !== false) {
+		columns.orderedFields = state.columns?.orderedFields;
+	}
+	if (config?.pagination?.paginationModel.pageSize !== false) {
+		(pagination.paginationModel as Partial<GridPaginationModel>).pageSize = state.pagination?.paginationModel?.pageSize;
+	}
+	if (config?.preferencePanel === true) {
+		newState.preferencePanel = state.preferencePanel;
+	}
+
+	// Sort model, current page and filter model are not persisted by default
+	if (config?.sorting?.sortModel === true) {
+		sorting.sortModel = state.sorting?.sortModel;
+	}
+	if (config?.pagination?.paginationModel.page === true) {
+		(pagination.paginationModel as Partial<GridPaginationModel>).page = state.pagination?.paginationModel?.page;
+	}
+	if (config?.filter?.filterModel === true) {
+		filter.filterModel = state.filter?.filterModel;
+	}
+
+	return {
+		...newState,
+		columns,
+		filter,
+		pagination,
+		sorting,
+	};
+}
+
+let isLoaded = false;
+export const isPersistedStateLoaded = () => isLoaded;
+
+type GetInitialStateProps = Pick<AfGridProps, "id" | "layoutVersion" | "columns" | "initialState" | "persistenceModel">;
+
+function getInitialState({ columns, persistenceModel, id, initialState, layoutVersion }: GetInitialStateProps) {
+	let key = `${af.article.id}.${id}`;
+	let persistedState = settingsCache[key];
+
+	let state: GridInitialState =
+		persistedState?.layoutVersion === layoutVersion
+			? removeNonPersistedState(persistedState.state, persistenceModel)
+			: {
+					density: "compact",
+					...initialState,
+				};
+
+	if (!state.columns) {
+		state.columns = {};
+	}
+
+	if (!state.columns.columnVisibilityModel) {
+		state.columns.columnVisibilityModel = getColumnVisibilityModel(columns);
+	}
+
+	if (!state.columns.orderedFields) {
+		state.columns.orderedFields = columns
+			.filter((c) => typeof c === "string" || !c.hide)
+			.map((c) => (typeof c === "string" ? c : c.field));
+	} else {
+		// Append any columns added since the layout was saved that aren't already present
+		let known = new Set(state.columns.orderedFields);
+		for (let c of columns) {
+			let field = typeof c === "string" ? c : c.field;
+			let hidden = typeof c !== "string" && c.hide;
+			if (!hidden && !known.has(field)) {
+				state.columns.orderedFields.push(field);
+			}
+		}
+	}
+
+	return state;
+}
+
+// Load all article grid layouts even if the grid is not mounted yet.
+// This ways the persisted state can be restored faster after the initial
+// page load.
+export const settingsLoaded = settingsStore
+	.keys()
+	.then((keys) =>
+		Promise.allSettled(
+			keys
+				.filter((key) => key.startsWith(af.article.id))
+				.map((key) =>
+					settingsStore.getItem<GridSettings>(key).then((settings) => {
+						if (settings && !settingsCache[key]) {
+							settingsCache[key] = settings;
+						}
+					}),
+				),
+		),
+	)
+	.then(() => {
+		isLoaded = true;
+	});
+
+// Clean legacy state from local storage
+setTimeout(() => {
+	for (let key of Object.keys(localStorage)) {
+		if (key.includes("AfGrid")) {
+			localStorage.removeItem(key);
+		}
+	}
+}, 2000);
+
+export type StatePersistenceConfig = {
+	aggregation?: boolean;
+	density?: boolean;
+	pinnedColumns?: boolean;
+	rowGrouping?: boolean;
+	columns?: {
+		columnVisibilityModel?: boolean;
+		dimensions?: boolean;
+		orderedFields?: boolean;
+	};
+	filter?: {
+		filterModel?: boolean;
+	};
+	pagination?: {
+		paginationModel: {
+			page?: boolean;
+			pageSize?: boolean;
+		};
+	};
+	preferencePanel?: boolean;
+	sorting?: {
+		sortModel: boolean;
+	};
+};
+
+/**
+ * On mount, load the persisted state from Indexed DB, and if the persisted
+ * layout version matches, restore the layout. Then listen to changes to the
+ * state, and store the latest version in Indexed DB.
+ */
+export function useAfPersistedState(
+	props: { apiRef: React.RefObject<GridApi | null> } & Pick<
+		AfGridProps,
+		"id" | "layoutVersion" | "columns" | "initialState" | "persistenceModel"
+	>,
+): GridInitialState {
+	let { apiRef, columns, id, initialState, layoutVersion = 0, persistenceModel } = props;
+	let [initialState_] = useState(() => getInitialState({ columns, persistenceModel, id, initialState, layoutVersion }));
+
+	useEffect(() => {
+		let key = `${af.article.id}.${id}`;
+		let persistTimeout: any;
+
+		return apiRef.current?.subscribeEvent("stateChange", () => {
+			// Debounce the save, as state changes can be very frequent.
+			clearTimeout(persistTimeout);
+			persistTimeout = setTimeout(() => {
+				// Use optional chaining, as the component may unmount before the timeout
+				// fires.
+				let state = apiRef.current?.exportState();
+				persistState(key, layoutVersion, state, persistenceModel);
+			}, 300);
+		});
+	}, [apiRef, id, layoutVersion, persistenceModel]);
+
+	return initialState_;
+}