@olenbetong/appframe-ds 0.8.0 → 0.9.0

package/src/grid/useAfRowEditModel.ts

@@ -0,0 +1,137 @@
+import {
+	type DataGridProProps as DataGridProps,
+	type GridApi,
+	type GridEventListener,
+	type GridRowId,
+	GridRowModes,
+	gridFocusCellSelector,
+	gridVisibleColumnFieldsSelector,
+} from "@mui/x-data-grid-pro";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { setDataObjectField } from "@olenbetong/appframe-react";
+
+import type React from "react";
+import { useCallback, useEffect } from "react";
+
+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;
+};
+
+const uid: any = globalThis.af?.data?.uid ?? Symbol();
+
+/**
+ * Binds a MUI DataGridPro 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,
+}: AfRowEditModelProps<T>): Partial<DataGridProps> {
+	let processRowUpdate = useCallback(
+		async (newRow: any, oldRow: any) => {
+			let { id, isNew, ...record } = newRow;
+			id = (record as any)[(af as any).data.uid] ?? (record as any)[idField] ?? id;
+
+			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],
+	);
+
+	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)) {
+				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([{ [(af as any).data.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([
+							{ [(af as any).data.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/useAfSortModel.ts

@@ -0,0 +1,72 @@
+import type { DataGridProProps, GridCallbackDetails, GridSortModel } from "@mui/x-data-grid-pro";
+import type { DataObject, RetrieveParameters, SortOrder } from "@olenbetong/appframe-data";
+import { useParameter } from "@olenbetong/appframe-react";
+import { useCallback, useMemo } from "react";
+import type { AfGridColDef, AfGridColumn } from "./useAfColumns";
+
+const convertMap: Record<SortOrder, "asc" | "desc"> = {
+	asc: "asc",
+	desc: "desc",
+	ascnullslast: "asc",
+	descnullsfirst: "desc",
+};
+
+export function afSortOrderToMuiSortModel(
+	dataObject: DataObject<any>,
+	sortOrder?: RetrieveParameters<any>["sortOrder"],
+): GridSortModel {
+	return (
+		sortOrder?.flatMap((x) => {
+			let itemFields = Object.keys(x);
+			let items: GridSortModel = itemFields
+				.filter((field) => dataObject.getFields(field))
+				.map((field) => ({ field, sort: convertMap[x[field]] }));
+
+			return items;
+		}) ?? []
+	);
+}
+
+/**
+ * Converts between DataObject sort parameter and DataGrid sort model.
+ * Updates the data when the sort model changes.
+ *
+ * @param dataObject Data object grid is used with
+ */
+export function useAfSortModel({
+	dataObject,
+	columns,
+	disableServerSorting = false,
+}: {
+	dataObject: DataObject<any>;
+	columns: AfGridColumn[];
+	disableServerSorting?: boolean;
+}): Partial<DataGridProProps> {
+	let sortOrder = useParameter(dataObject, "sortOrder");
+	let sortModel = useMemo(() => {
+		let sortModel = afSortOrderToMuiSortModel(dataObject, sortOrder);
+		sortModel = sortModel.filter((s) => columns.find((c) => (typeof c === "string" ? c : c.field) === s.field));
+
+		return sortModel;
+	}, [dataObject, sortOrder, columns]);
+
+	let onSortModelChange = useCallback(
+		(sortModel: GridSortModel, details: GridCallbackDetails) => {
+			let sortOrder: Record<string, SortOrder>[] = [];
+			for (let item of sortModel) {
+				let colDef = columns.find((c) => typeof c !== "string" && c.field === item.field) as AfGridColDef | undefined;
+				if (item.sort) {
+					sortOrder.push({
+						[colDef?.sortColumn ?? item.field]: item.sort as SortOrder,
+					});
+				}
+			}
+
+			dataObject.setParameter("sortOrder", sortOrder);
+			dataObject.refreshDataSource();
+		},
+		[dataObject, columns],
+	);
+
+	return disableServerSorting ? {} : { sortingMode: "server", sortModel, onSortModelChange };
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export * from "./AfLookup/index.js";
 export * from "./autocomplete/index.js";
 export * from "./binding/index.js";
 export * from "./container/index.js";
+export * from "./filter/index.js";
 export * from "./input/index.js";
 export * from "./layout/index.js";
 export * from "./list/index.js";

package/src/input/InputAdornments.tsx

@@ -2,7 +2,7 @@ import "./InputAdornments.css";
 
 import { Input, type InputProps } from "@digdir/designsystemet-react";
 import clsx from "clsx";
-import { Children, isValidElement, type ReactElement, type ReactNode } from "react";
+import { Children, isValidElement, type ReactElement, type ReactNode, type Ref } from "react";
 
 export type InputSlotProps = {
 	/**
@@ -44,6 +44,11 @@ export type InputAdornmentsProps = Omit<InputProps, "children"> & {
 	 * Classes for the bare input element itself
 	 */
 	inputClassName?: string;
+	/**
+	 * Ref to the input element. The wrapper is an implementation detail, so the
+	 * ref points at the input rather than at the element carrying the styling.
+	 */
+	ref?: Ref<HTMLInputElement>;
 };
 
 /**

package/src/report-downloader/ReportDownloader.css

@@ -0,0 +1,67 @@
+.ObReportDownloader-root {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 1060;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	padding: var(--ds-size-2);
+	pointer-events: none;
+}
+
+.ObReportDownloader-list {
+	width: 100%;
+	max-width: 60rem;
+	padding: var(--ds-size-2);
+	background: var(--ds-color-neutral-background-default);
+	border: 1px solid var(--ds-color-neutral-border-subtle);
+	border-radius: var(--ds-border-radius-md);
+	box-shadow: var(--ds-shadow-md);
+	opacity: 1;
+	transform: translateY(0);
+	transition:
+		opacity 150ms ease,
+		transform 150ms ease;
+	pointer-events: auto;
+}
+
+.ObReportDownloader-list.closed {
+	padding: 0;
+	border: none;
+	box-shadow: none;
+	opacity: 0;
+	transform: translateY(100%);
+}
+
+.ObReportDownloader-item {
+	display: grid;
+	grid-template-columns: 3rem 1fr auto;
+	gap: var(--ds-size-3);
+	align-items: center;
+	justify-items: center;
+	padding: var(--ds-size-2);
+}
+
+.ObReportDownloader-itemText {
+	justify-self: start;
+}
+
+.ObReportDownloader-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5rem;
+}
+
+.ObReportDownloader-icon.cancelled {
+	color: var(--ds-color-warning-base-default);
+}
+
+.ObReportDownloader-icon.error {
+	color: var(--ds-color-danger-base-default);
+}
+
+.ObReportDownloader-icon.completed {
+	color: var(--ds-color-success-base-default);
+}

package/src/report-downloader/components/StatusItem.tsx

@@ -0,0 +1,86 @@
+import { Button, Paragraph, Spinner } from "@digdir/designsystemet-react";
+import { CheckmarkCircleFillIcon, ExclamationmarkTriangleFillIcon, XMarkOctagonFillIcon } from "@navikt/aksel-icons";
+import { type DownloadItem, getLocalizedString } from "@olenbetong/appframe-core";
+
+import clsx from "clsx";
+
+const statuses: Record<string, { icon: React.ReactNode; text: string }> = {
+	cancelled: {
+		icon: <ExclamationmarkTriangleFillIcon aria-hidden />,
+		text: "Report cancelled",
+	},
+	error: {
+		icon: <XMarkOctagonFillIcon aria-hidden />,
+		text: "An error occurred",
+	},
+	requested: {
+		icon: <Spinner aria-hidden data-size="sm" />,
+		text: "Report request sent. Please wait while our server generates the report",
+	},
+	downloading: {
+		icon: <Spinner aria-hidden data-size="sm" />,
+		text: "Downloading report",
+	},
+	downloaded: {
+		icon: <Spinner aria-hidden data-size="sm" />,
+		text: "Sending report to browser",
+	},
+	completed: {
+		icon: <CheckmarkCircleFillIcon aria-hidden />,
+		text: "The report was successfully generated and downloaded",
+	},
+};
+
+function formatBytes(bytes: number, decimals: number) {
+	if (bytes === 0) return "0 Bytes";
+
+	let k = 1024;
+	let dm = decimals || 2;
+	let sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+	let i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+}
+
+export type StatusItemProps = {
+	item: DownloadItem;
+	onCancelItem: () => void;
+	onCloseItem: () => void;
+};
+
+export function StatusItem({ onCancelItem, onCloseItem, item }: StatusItemProps) {
+	let { bytesReceived = 0, error, status = "requested" } = item;
+
+	let icon = statuses[status]?.icon;
+	let text = statuses[status] ? getLocalizedString(statuses[status].text) : "";
+	let working = ["requested", "downloading"].includes(status);
+	let stopped = ["cancelled", "completed", "error"].includes(status);
+
+	if (working) {
+		text += "...";
+	}
+
+	if (status === "error" && error) {
+		text = error;
+	} else if (status === "downloading" && bytesReceived) {
+		text += ` (${formatBytes(bytesReceived, 2)})`;
+	}
+
+	return (
+		<div className="ObReportDownloader-item">
+			<div className={clsx("ObReportDownloader-icon", status)}>{icon}</div>
+			<Paragraph className="ObReportDownloader-itemText">{text}</Paragraph>
+			<div>
+				{stopped ? (
+					<Button variant="secondary" data-size="sm" onClick={onCloseItem}>
+						{getLocalizedString("Close")}
+					</Button>
+				) : (
+					<Button variant="secondary" data-size="sm" onClick={onCancelItem}>
+						{getLocalizedString("Cancel")}
+					</Button>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/report-downloader/components/StatusList.tsx

@@ -0,0 +1,28 @@
+import type { DownloadItem } from "@olenbetong/appframe-core";
+
+import clsx from "clsx";
+
+import { StatusItem } from "./StatusItem.js";
+
+export type StatusListProps = {
+	onCloseItem: (id: number) => void;
+	onCancelItem: (id: number) => void;
+	items: (DownloadItem & { id: number })[];
+};
+
+export function StatusList({ items, onCancelItem, onCloseItem }: StatusListProps) {
+	return (
+		<div className="ObReportDownloader-root">
+			<div className={clsx("ObReportDownloader-list", items.length === 0 && "closed")}>
+				{items.map((item) => (
+					<StatusItem
+						key={item.id}
+						onCancelItem={() => onCancelItem(item.id)}
+						onCloseItem={() => onCloseItem(item.id)}
+						item={item}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}

package/src/report-downloader/index.ts

@@ -0,0 +1,41 @@
+import { downloadRequest } from "@olenbetong/appframe-core";
+import type { DataObjectReportParams } from "@olenbetong/appframe-data";
+import { exportOptionsFromDataObject, getDataObjectReportRequest } from "@olenbetong/appframe-data";
+
+import downloader, { mountStatusDisplay } from "./status.js";
+
+export function openDataObjectReportWithProgress(params: DataObjectReportParams) {
+	let { dataObject, fileName, format } = params;
+	let { controller, request } = getDataObjectReportRequest(params);
+
+	return downloadRequestWithProgress(request, {
+		controller,
+		fileName: `${fileName ?? dataObject}.${format}`,
+	});
+}
+
+export type DownloadParameters = {
+	controller?: AbortController;
+	fileName: string;
+};
+
+export function downloadRequestWithProgress(request: Request, { controller, fileName }: DownloadParameters) {
+	let abortController = controller ?? new AbortController();
+
+	mountStatusDisplay();
+
+	let id = downloader.start({}, controller);
+
+	function updateProgress(progress: any) {
+		downloader.update(id, progress);
+
+		if (["cancelled", "completed"].includes(progress.status)) {
+			setTimeout(() => downloader.remove(id), 1500);
+		}
+	}
+
+	downloadRequest(request, { onProgress: updateProgress, fileName, signal: abortController.signal });
+}
+
+export type { DataObjectReportParams };
+export { exportOptionsFromDataObject, getDataObjectReportRequest };

package/src/report-downloader/status.tsx

@@ -0,0 +1,92 @@
+import "./ReportDownloader.css";
+
+import type { DownloadItem } from "@olenbetong/appframe-core";
+
+import mitt from "mitt";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { StatusList } from "./components/StatusList.js";
+
+class Downloader {
+	eventHandler = mitt<{ update: undefined }>();
+	#items: (DownloadItem & { id: number })[] = [];
+	#id = 1;
+	#controllers: Record<number, AbortController> = {};
+
+	start(item: Partial<DownloadItem>, controller?: AbortController) {
+		this.eventHandler.emit("update");
+
+		let id = this.#id++;
+		this.#items.push({ id, status: "requested", ...item });
+		this.#controllers[id] = controller ?? new AbortController();
+
+		return id;
+	}
+
+	cancel(id: number) {
+		this.#controllers[id]?.abort();
+	}
+
+	update(id: number, item: DownloadItem) {
+		this.#items = this.#items.map((i) => (i.id === id ? { ...i, ...item } : i));
+		this.eventHandler.emit("update");
+	}
+
+	remove(id: number) {
+		this.#items = this.#items.filter((i) => i.id !== id);
+		this.eventHandler.emit("update");
+	}
+
+	get items() {
+		return this.#items;
+	}
+}
+
+const downloader = new Downloader();
+
+function StatusDisplay() {
+	let [items, setItems] = useState<(DownloadItem & { id: number })[]>([]);
+
+	useEffect(() => {
+		function handleUpdate() {
+			setItems([...downloader.items]);
+		}
+
+		handleUpdate();
+
+		downloader.eventHandler.on("update", handleUpdate);
+
+		return () => {
+			downloader.eventHandler.off("update", handleUpdate);
+		};
+	}, []);
+
+	return (
+		<StatusList
+			items={items}
+			onCloseItem={(id: number) => downloader.remove(id)}
+			onCancelItem={(id: number) => downloader.cancel(id)}
+		/>
+	);
+}
+
+let mounted = false;
+
+/**
+ * Mounts the download status list into its own root at the end of `<body>`.
+ * Called the first time a download is started, so importing the module doesn't
+ * touch the DOM (which would break server rendering and tests).
+ */
+function mountStatusDisplay() {
+	if (mounted || typeof document === "undefined") return;
+
+	mounted = true;
+
+	let element = document.createElement("div");
+	document.body.append(element);
+	createRoot(element).render(<StatusDisplay />);
+}
+
+export { mountStatusDisplay };
+export default downloader;

package/src/test/setup.ts

@@ -0,0 +1,8 @@
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(() => {
+	cleanup();
+});

package/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {
+		include: ["src/**/*.test.tsx", "src/**/*.test.ts"],
+		environment: "happy-dom",
+		setupFiles: ["src/test/setup.ts"],
+		env: { NODE_ENV: "test" },
+	},
+});