@olenbetong/appframe-ds 1.2.0 → 1.3.0

package/src/grid/useAfRowEditModel.ts

@@ -1,145 +1,145 @@
-import {
-	type DataGridPremiumProps as DataGridProps,
-	type GridApi,
-	type GridEventListener,
-	type GridRowId,
-	GridRowModes,
-	gridFocusCellSelector,
-	gridVisibleColumnFieldsSelector,
-} from "@mui/x-data-grid-premium";
-import { type DataObject, uid } from "@olenbetong/appframe-data";
-import { setDataObjectField } from "@olenbetong/appframe-react";
-
-import type React from "react";
-import { useCallback, useEffect } from "react";
-
-import { type AfNewItemRow, isNewItemRow } from "./useAfNewItemRow.js";
-
-function localDateAsUtcDate(date: Date) {
-	const utcDate = new Date(date);
-	console.log("year", utcDate, utcDate.getUTCFullYear(), date.getFullYear());
-	utcDate.setUTCFullYear(date.getFullYear());
-	console.log("month", utcDate, utcDate.getUTCMonth(), date.getMonth());
-	utcDate.setUTCMonth(date.getMonth());
-	console.log("date", utcDate, utcDate.getUTCDate(), date.getDate());
-	utcDate.setUTCDate(date.getDate());
-	console.log("hours", utcDate, utcDate.getUTCHours(), date.getHours());
-	utcDate.setUTCHours(date.getHours());
-	console.log("done", utcDate);
-
-	return utcDate;
-}
-
-export type AfRowEditModelProps<T extends Record<string, unknown> = Record<string, unknown>> = {
-	apiRef: React.RefObject<GridApi | null>;
-	dataObject: DataObject<T>;
-	idField: string;
-	disableEdit: boolean;
-	/** The new item row, when the grid renders one. Commits on that row are saved through it. */
-	newItemRow?: AfNewItemRow;
-};
-
-/**
- * Binds a MUI DataGridPremium row editing model to a data object. Editing will not affect the
- * data object until a save event is triggered. If saving fails, will attempt to go back
- * into edit mode with the unsaved changes.
- */
-export function useAfRowEditModel<T extends Record<string, unknown> = Record<string, unknown>>({
-	apiRef,
-	dataObject,
-	idField,
-	disableEdit,
-	newItemRow,
-}: AfRowEditModelProps<T>): Partial<DataGridProps> {
-	let processRowUpdate = useCallback(
-		async (newRow: any, oldRow: any) => {
-			let { id, isNew, ...record } = newRow;
-			id = (record as any)[uid] ?? (record as any)[idField] ?? id;
-
-			if (isNewItemRow(id) && newItemRow) {
-				return newItemRow.save(record);
-			}
-
-			if (isNew) {
-				let savedRow = await dataObject.addRow(newRow);
-				if (savedRow) {
-					Object.assign(savedRow, { isNew: false });
-					return savedRow;
-				} else {
-					return oldRow;
-				}
-			}
-
-			let index = dataObject.findIndex((row) => (row as any)[uid] === id || (row as any)[idField] === id);
-			if (index < 0) {
-				throw Error(`Failed to find the row to save in the data object (${idField}=${id})`);
-			}
-
-			dataObject.setCurrentIndex(index);
-			for (let field in record as Partial<T>) {
-				if (dataObject.getFields(field)) {
-					let value = record[field];
-					if (value === undefined) continue;
-					if (value instanceof Date && value.getTime() !== (dataObject.currentRow(field) as Date | null)?.getTime()) {
-						value = localDateAsUtcDate(value);
-					}
-					setDataObjectField<T, keyof T>(dataObject, field, value);
-				}
-			}
-
-			let result = await dataObject.endEdit();
-			let savedNewRow = { id, isNew: false };
-			if (result === false) {
-				Object.assign(savedNewRow, dataObject.getData(index));
-			} else {
-				Object.assign(savedNewRow, result);
-			}
-
-			return savedNewRow;
-		},
-		[dataObject, idField, newItemRow],
-	);
-
-	useEffect(() => {
-		// The row added with addRow is not managed by data objects, but by the grid, so we need
-		// to remove it manually if editing is cancelled
-		const handleRowModesModelChange: GridEventListener<"rowModesModelChange"> = (model) => {
-			for (let id of Object.keys(model)) {
-				// The new item row is not in the data object; `useAfNewItemRow` handles it
-				if (isNewItemRow(id)) continue;
-
-				if (model[id].mode === GridRowModes.View && (model[id] as any)?.ignoreModifications === true) {
-					let row = apiRef.current?.getRow(id);
-					if (row?.isNew) {
-						let focusBefore = gridFocusCellSelector(apiRef);
-
-						apiRef.current?.updateRows([{ [uid]: id, id, _action: "delete" } as any]);
-
-						setTimeout(() => {
-							if (focusBefore && dataObject.getDataLength()) {
-								let lastRow = dataObject.getData(dataObject.getDataLength() - 1);
-								apiRef.current?.setCellFocus(lastRow[uid] as GridRowId, focusBefore.field);
-							} else {
-								apiRef.current?.setColumnHeaderFocus(gridVisibleColumnFieldsSelector(apiRef)[0]);
-							}
-						}, 1);
-					} else {
-						// MUI grid only reverts changes on editable fields, while for example lookups can have edited
-						// values that are not editable, so we need to manually revert those changes
-						let index = dataObject.findIndex((r) => (r as any)[uid] === id || (r as any)[idField] === id);
-						apiRef.current?.updateRows([{ [uid]: id, id, ...(dataObject.getData(index) as any) } as any]);
-					}
-				}
-			}
-		};
-
-		return apiRef.current?.subscribeEvent("rowModesModelChange", handleRowModesModelChange);
-	}, [dataObject, apiRef, idField]);
-
-	return disableEdit
-		? {}
-		: {
-				editMode: "row",
-				processRowUpdate,
-			};
-}
+import {
+	type DataGridPremiumProps as DataGridProps,
+	type GridApi,
+	type GridEventListener,
+	type GridRowId,
+	GridRowModes,
+	gridFocusCellSelector,
+	gridVisibleColumnFieldsSelector,
+} from "@mui/x-data-grid-premium";
+import { type DataObject, uid } from "@olenbetong/appframe-data";
+import { setDataObjectField } from "@olenbetong/appframe-react";
+
+import type React from "react";
+import { useCallback, useEffect } from "react";
+
+import { type AfNewItemRow, isNewItemRow } from "./useAfNewItemRow.js";
+
+function localDateAsUtcDate(date: Date) {
+	const utcDate = new Date(date);
+	console.log("year", utcDate, utcDate.getUTCFullYear(), date.getFullYear());
+	utcDate.setUTCFullYear(date.getFullYear());
+	console.log("month", utcDate, utcDate.getUTCMonth(), date.getMonth());
+	utcDate.setUTCMonth(date.getMonth());
+	console.log("date", utcDate, utcDate.getUTCDate(), date.getDate());
+	utcDate.setUTCDate(date.getDate());
+	console.log("hours", utcDate, utcDate.getUTCHours(), date.getHours());
+	utcDate.setUTCHours(date.getHours());
+	console.log("done", utcDate);
+
+	return utcDate;
+}
+
+export type AfRowEditModelProps<T extends Record<string, unknown> = Record<string, unknown>> = {
+	apiRef: React.RefObject<GridApi | null>;
+	dataObject: DataObject<T>;
+	idField: string;
+	disableEdit: boolean;
+	/** The new item row, when the grid renders one. Commits on that row are saved through it. */
+	newItemRow?: AfNewItemRow;
+};
+
+/**
+ * Binds a MUI DataGridPremium row editing model to a data object. Editing will not affect the
+ * data object until a save event is triggered. If saving fails, will attempt to go back
+ * into edit mode with the unsaved changes.
+ */
+export function useAfRowEditModel<T extends Record<string, unknown> = Record<string, unknown>>({
+	apiRef,
+	dataObject,
+	idField,
+	disableEdit,
+	newItemRow,
+}: AfRowEditModelProps<T>): Partial<DataGridProps> {
+	let processRowUpdate = useCallback(
+		async (newRow: any, oldRow: any) => {
+			let { id, isNew, ...record } = newRow;
+			id = (record as any)[uid] ?? (record as any)[idField] ?? id;
+
+			if (isNewItemRow(id) && newItemRow) {
+				return newItemRow.save(record);
+			}
+
+			if (isNew) {
+				let savedRow = await dataObject.addRow(newRow);
+				if (savedRow) {
+					Object.assign(savedRow, { isNew: false });
+					return savedRow;
+				} else {
+					return oldRow;
+				}
+			}
+
+			let index = dataObject.findIndex((row) => (row as any)[uid] === id || (row as any)[idField] === id);
+			if (index < 0) {
+				throw Error(`Failed to find the row to save in the data object (${idField}=${id})`);
+			}
+
+			dataObject.setCurrentIndex(index);
+			for (let field in record as Partial<T>) {
+				if (dataObject.getFields(field)) {
+					let value = record[field];
+					if (value === undefined) continue;
+					if (value instanceof Date && value.getTime() !== (dataObject.currentRow(field) as Date | null)?.getTime()) {
+						value = localDateAsUtcDate(value);
+					}
+					setDataObjectField<T, keyof T>(dataObject, field, value);
+				}
+			}
+
+			let result = await dataObject.endEdit();
+			let savedNewRow = { id, isNew: false };
+			if (result === false) {
+				Object.assign(savedNewRow, dataObject.getData(index));
+			} else {
+				Object.assign(savedNewRow, result);
+			}
+
+			return savedNewRow;
+		},
+		[dataObject, idField, newItemRow],
+	);
+
+	useEffect(() => {
+		// The row added with addRow is not managed by data objects, but by the grid, so we need
+		// to remove it manually if editing is cancelled
+		const handleRowModesModelChange: GridEventListener<"rowModesModelChange"> = (model) => {
+			for (let id of Object.keys(model)) {
+				// The new item row is not in the data object; `useAfNewItemRow` handles it
+				if (isNewItemRow(id)) continue;
+
+				if (model[id].mode === GridRowModes.View && (model[id] as any)?.ignoreModifications === true) {
+					let row = apiRef.current?.getRow(id);
+					if (row?.isNew) {
+						let focusBefore = gridFocusCellSelector(apiRef);
+
+						apiRef.current?.updateRows([{ [uid]: id, id, _action: "delete" } as any]);
+
+						setTimeout(() => {
+							if (focusBefore && dataObject.getDataLength()) {
+								let lastRow = dataObject.getData(dataObject.getDataLength() - 1);
+								apiRef.current?.setCellFocus(lastRow[uid] as GridRowId, focusBefore.field);
+							} else {
+								apiRef.current?.setColumnHeaderFocus(gridVisibleColumnFieldsSelector(apiRef)[0]);
+							}
+						}, 1);
+					} else {
+						// MUI grid only reverts changes on editable fields, while for example lookups can have edited
+						// values that are not editable, so we need to manually revert those changes
+						let index = dataObject.findIndex((r) => (r as any)[uid] === id || (r as any)[idField] === id);
+						apiRef.current?.updateRows([{ [uid]: id, id, ...(dataObject.getData(index) as any) } as any]);
+					}
+				}
+			}
+		};
+
+		return apiRef.current?.subscribeEvent("rowModesModelChange", handleRowModesModelChange);
+	}, [dataObject, apiRef, idField]);
+
+	return disableEdit
+		? {}
+		: {
+				editMode: "row",
+				processRowUpdate,
+			};
+}

package/src/grid/useAfRowGrouping.ts

@@ -1,47 +1,47 @@
-import type { GridAggregationModel, GridInitialState, GridRowGroupingModel } from "@mui/x-data-grid-premium";
-
-import { useState } from "react";
-
-export type AfGridGroupingProps = {
-	aggregationModel: GridAggregationModel;
-	onAggregationModelChange: (model: GridAggregationModel) => void;
-	rowGroupingModel: GridRowGroupingModel;
-	onRowGroupingModelChange: (model: GridRowGroupingModel) => void;
-};
-
-export type AfGridGrouping = {
-	/**
-	 * True while at least one column is grouped. The grid uses this to fall back
-	 * to client side sorting, which row grouping requires.
-	 */
-	isGrouping: boolean;
-	gridProps: AfGridGroupingProps;
-};
-
-/**
- * Holds the row grouping and aggregation models in component state so the grid
- * knows when a grouping is active, and seeds them from the restored layout.
- *
- * Both features are computed on the client, over the rows the grid has been
- * given. With a dynamically loading data object that is the current page only,
- * so a grouped grid usually wants `maxRecords` high enough to hold the whole
- * result, or `dynamicLoading` turned off.
- */
-export function useAfRowGrouping(initialState: GridInitialState): AfGridGrouping {
-	let [rowGroupingModel, setRowGroupingModel] = useState<GridRowGroupingModel>(
-		() => initialState.rowGrouping?.model ?? [],
-	);
-	let [aggregationModel, setAggregationModel] = useState<GridAggregationModel>(
-		() => initialState.aggregation?.model ?? {},
-	);
-
-	return {
-		isGrouping: rowGroupingModel.length > 0,
-		gridProps: {
-			aggregationModel,
-			onAggregationModelChange: setAggregationModel,
-			rowGroupingModel,
-			onRowGroupingModelChange: setRowGroupingModel,
-		},
-	};
-}
+import type { GridAggregationModel, GridInitialState, GridRowGroupingModel } from "@mui/x-data-grid-premium";
+
+import { useState } from "react";
+
+export type AfGridGroupingProps = {
+	aggregationModel: GridAggregationModel;
+	onAggregationModelChange: (model: GridAggregationModel) => void;
+	rowGroupingModel: GridRowGroupingModel;
+	onRowGroupingModelChange: (model: GridRowGroupingModel) => void;
+};
+
+export type AfGridGrouping = {
+	/**
+	 * True while at least one column is grouped. The grid uses this to fall back
+	 * to client side sorting, which row grouping requires.
+	 */
+	isGrouping: boolean;
+	gridProps: AfGridGroupingProps;
+};
+
+/**
+ * Holds the row grouping and aggregation models in component state so the grid
+ * knows when a grouping is active, and seeds them from the restored layout.
+ *
+ * Both features are computed on the client, over the rows the grid has been
+ * given. With a dynamically loading data object that is the current page only,
+ * so a grouped grid usually wants `maxRecords` high enough to hold the whole
+ * result, or `dynamicLoading` turned off.
+ */
+export function useAfRowGrouping(initialState: GridInitialState): AfGridGrouping {
+	let [rowGroupingModel, setRowGroupingModel] = useState<GridRowGroupingModel>(
+		() => initialState.rowGrouping?.model ?? [],
+	);
+	let [aggregationModel, setAggregationModel] = useState<GridAggregationModel>(
+		() => initialState.aggregation?.model ?? {},
+	);
+
+	return {
+		isGrouping: rowGroupingModel.length > 0,
+		gridProps: {
+			aggregationModel,
+			onAggregationModelChange: setAggregationModel,
+			rowGroupingModel,
+			onRowGroupingModelChange: setRowGroupingModel,
+		},
+	};
+}

package/src/grid/useAfServerAggregation.test.ts

@@ -0,0 +1,68 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+
+import { useAfServerAggregation } from "./useAfServerAggregation.js";
+
+/**
+ * Just enough of a data object for the hook: fields to aggregate, parameters to copy, a data
+ * handler to count retrieves, and events fired the way the real one fires them.
+ */
+function createDataObject() {
+	let target = new EventTarget();
+	let retrieve = vi.fn(async () => [{ Amount: 100 }]);
+
+	let dataObject = {
+		getFields: (name: string) => (name === "Amount" ? { name } : undefined),
+		getParameter: () => undefined,
+		dataHandler: { retrieve },
+		attachEvent: (name: string, handler: (event: Event) => void, options?: AddEventListenerOptions) =>
+			target.addEventListener(name, handler, options),
+		fire: (name: string, detail?: unknown) => target.dispatchEvent(new CustomEvent(name, { detail })),
+	};
+
+	return { dataObject, retrieve };
+}
+
+const model = { Amount: "sum" };
+
+describe("useAfServerAggregation", () => {
+	test("reloads the totals when a paged load starts over", async () => {
+		let { dataObject, retrieve } = createDataObject();
+		renderHook(() => useAfServerAggregation(dataObject as any, model, true));
+
+		await waitFor(() => expect(retrieve).toHaveBeenCalledTimes(1));
+
+		act(() => {
+			dataObject.fire("onPartialDataLoaded", { skip: 0, count: 50, total: 120 });
+		});
+
+		await waitFor(() => expect(retrieve).toHaveBeenCalledTimes(2));
+	});
+
+	test("leaves the totals alone while later pages of the same load arrive", async () => {
+		let { dataObject, retrieve } = createDataObject();
+		renderHook(() => useAfServerAggregation(dataObject as any, model, true));
+
+		await waitFor(() => expect(retrieve).toHaveBeenCalledTimes(1));
+
+		act(() => {
+			dataObject.fire("onPartialDataLoaded", { skip: 50, count: 50, total: 120 });
+		});
+
+		await new Promise((resolve) => setTimeout(resolve, 20));
+		expect(retrieve).toHaveBeenCalledTimes(1);
+	});
+
+	test("reloads the totals after a full load", async () => {
+		let { dataObject, retrieve } = createDataObject();
+		renderHook(() => useAfServerAggregation(dataObject as any, model, true));
+
+		await waitFor(() => expect(retrieve).toHaveBeenCalledTimes(1));
+
+		act(() => {
+			dataObject.fire("onDataLoaded", 10);
+		});
+
+		await waitFor(() => expect(retrieve).toHaveBeenCalledTimes(2));
+	});
+});