@olenbetong/appframe-ds 0.8.0 → 0.9.0

package/src/filter/FieldFilterPanel.tsx

@@ -0,0 +1,309 @@
+import "./FieldFilterPanel.css";
+
+import { Button, Checkbox, Search, Spinner } from "@digdir/designsystemet-react";
+import { BarChartIcon, PlusIcon, SortUpIcon } from "@navikt/aksel-icons";
+import {
+	changeOperator,
+	createExpression,
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterOperator,
+	type FilterTree,
+	getLocalizedString,
+	getOperatorLabel,
+	getOperatorsForField,
+	normalizeOperator,
+} from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import clsx from "clsx";
+import { type ReactNode, useMemo, useState } from "react";
+
+import { getInListValues, setInListValues } from "./fieldFilter.js";
+import { FilterValueEditor } from "./FilterValueEditor.js";
+import { supportsDistinctValues, useDistinctValues } from "./useDistinctValues.js";
+
+export type FieldFilterPanelProps = {
+	/** The field being filtered. Decides the operators and the value editor. */
+	field: FieldMetadata;
+	/** Data object the distinct value list is loaded from. */
+	dataObject: DataObject<any>;
+	/** The field's criteria. Controlled — the panel never stages edits itself. */
+	value: FilterExpression[];
+	onChange: (expressions: FilterExpression[]) => void;
+	/**
+	 * Heading above the criteria. Defaults to the field's caption; pass `null`
+	 * to leave it out, e.g. when the surrounding dialog already has a title.
+	 */
+	heading?: ReactNode;
+	/**
+	 * The filter the field lives in, used to scope the distinct value list to
+	 * the rows the other criteria leave. The field's own criteria are ignored,
+	 * so unchecking a value does not make the remaining values disappear.
+	 */
+	filter?: FilterTree | null;
+	/** Set to false to leave out the distinct value list. */
+	showDistinctValues?: boolean;
+	/** Rendered at the bottom, for actions such as Clear and Apply. */
+	children?: ReactNode;
+	className?: string;
+};
+
+type DistinctSort = "value" | "count";
+
+/**
+ * Filter criteria for a single field: a row per criterion, a button to add
+ * another, and a checkable list of the field's distinct values.
+ *
+ * The list of values is loaded straight from the data object's data handler,
+ * so the data object's own data and parameters are untouched. It is only shown
+ * for the types where it makes sense (string, number, uniqueidentifier) and
+ * only ever loads a bounded number of values — it is a picker, not a report.
+ *
+ * The checkboxes own the field's single `inlist` criterion, which is why that
+ * criterion is not also shown as a criterion row.
+ *
+ * The component is fully controlled. To let the user cancel, keep a draft in
+ * the caller and only commit it on apply — that is what `AfGrid`'s header
+ * filter panel does.
+ *
+ * @example
+ * ```jsx
+ * let [criteria, setCriteria] = useState([]);
+ *
+ * <FieldFilterPanel field={field} dataObject={dsProjects} value={criteria} onChange={setCriteria}>
+ *   <Button onClick={() => setCriteria([])}>Clear</Button>
+ * </FieldFilterPanel>
+ * ```
+ */
+export function FieldFilterPanel({
+	field,
+	dataObject,
+	value,
+	onChange,
+	heading,
+	filter = null,
+	showDistinctValues = true,
+	children,
+	className,
+}: FieldFilterPanelProps) {
+	let [search, setSearch] = useState("");
+	let [sort, setSort] = useState<DistinctSort>("value");
+
+	let showDistinct = showDistinctValues && supportsDistinctValues(field);
+	let { values, loading, error, truncated } = useDistinctValues(dataObject, field, {
+		filter,
+		search: search.trim() || undefined,
+		enabled: showDistinct,
+	});
+
+	let operators = useMemo(() => getOperatorsForField(field), [field]);
+	let criteria = value.filter((expression) => normalizeOperator(expression.operator) !== "inlist");
+	let selected = useMemo(() => new Set(getInListValues(value)), [value]);
+
+	let sortedValues = useMemo(() => {
+		let list = [...values];
+
+		if (sort === "count") {
+			list.sort((a, b) => (b.count ?? 0) - (a.count ?? 0) || a.value.localeCompare(b.value));
+		} else {
+			list.sort((a, b) => a.value.localeCompare(b.value));
+		}
+
+		return list;
+	}, [values, sort]);
+
+	let allSelected = sortedValues.length > 0 && sortedValues.every((item) => selected.has(item.value));
+
+	function setCriteria(next: FilterExpression[]) {
+		onChange([...next, ...value.filter((expression) => normalizeOperator(expression.operator) === "inlist")]);
+	}
+
+	function updateCriterion(index: number, expression: FilterExpression | null) {
+		let next = [...criteria];
+
+		if (expression === null) {
+			next.splice(index, 1);
+		} else {
+			next[index] = expression;
+		}
+
+		setCriteria(next);
+	}
+
+	function toggleValues(changed: string[], checked: boolean) {
+		let next = new Set(selected);
+
+		for (let item of changed) {
+			if (checked) {
+				next.add(item);
+			} else {
+				next.delete(item);
+			}
+		}
+
+		onChange(setInListValues(value, [...next], field));
+	}
+
+	let headingContent = heading === undefined ? (field.caption ?? field.name) : heading;
+
+	return (
+		<div className={clsx("ObFieldFilterPanel-root", className)}>
+			{headingContent != null && <div className="ObFieldFilterPanel-heading">{headingContent}</div>}
+
+			<div className="ObFieldFilterPanel-criteria">
+				{criteria.map((expression, index) => (
+					// Criteria have no stable identity and cannot be reordered here,
+					// so the index is a safe key.
+					// oxlint-disable-next-line no-array-index-key -- see above
+					<div className="ObFieldFilterPanel-criterion" key={index}>
+						<Field
+							expression={expression}
+							field={field}
+							operators={operators}
+							onChange={(next) => updateCriterion(index, next)}
+							onRemove={criteria.length > 1 ? () => updateCriterion(index, null) : undefined}
+						/>
+					</div>
+				))}
+				<Button
+					type="button"
+					variant="tertiary"
+					data-size="sm"
+					className="ObFieldFilterPanel-addCriterion"
+					onClick={() => setCriteria([...criteria, createExpression(field)])}
+				>
+					<PlusIcon aria-hidden />
+					{getLocalizedString("Criteria")}
+				</Button>
+			</div>
+
+			{showDistinct && (
+				<div className="ObFieldFilterPanel-distinct">
+					<div className="ObFieldFilterPanel-distinctToolbar">
+						<Search data-size="sm">
+							<Search.Input
+								aria-label={getLocalizedString("Search in distinct list")}
+								placeholder={getLocalizedString("Search in distinct list")}
+								value={search}
+								onChange={(event) => setSearch(event.currentTarget.value)}
+							/>
+							<Search.Clear onClick={() => setSearch("")} />
+						</Search>
+						<Button
+							type="button"
+							icon
+							variant="tertiary"
+							data-size="sm"
+							aria-pressed={sort === "value"}
+							aria-label={getLocalizedString("Sort by value")}
+							title={getLocalizedString("Sort by value")}
+							onClick={() => setSort("value")}
+						>
+							<SortUpIcon aria-hidden />
+						</Button>
+						<Button
+							type="button"
+							icon
+							variant="tertiary"
+							data-size="sm"
+							aria-pressed={sort === "count"}
+							aria-label={getLocalizedString("Sort by count")}
+							title={getLocalizedString("Sort by count")}
+							onClick={() => setSort("count")}
+						>
+							<BarChartIcon aria-hidden />
+						</Button>
+					</div>
+
+					{error && (
+						<p className="ObFieldFilterPanel-error" role="alert">
+							{error}
+						</p>
+					)}
+
+					{loading ? (
+						<div className="ObFieldFilterPanel-valuesBox ObFieldFilterPanel-loading">
+							<Spinner data-size="xs" aria-label={getLocalizedString("Loading...")} />
+						</div>
+					) : (
+						<ul className="ObFieldFilterPanel-valuesBox ObFieldFilterPanel-values">
+							<li className="ObFieldFilterPanel-value">
+								<Checkbox
+									data-size="sm"
+									label={getLocalizedString("Select all")}
+									checked={allSelected}
+									disabled={sortedValues.length === 0}
+									onChange={(event) =>
+										toggleValues(
+											sortedValues.map((item) => item.value),
+											event.currentTarget.checked,
+										)
+									}
+								/>
+							</li>
+							{sortedValues.map((item) => (
+								<li className="ObFieldFilterPanel-value" key={item.value}>
+									<Checkbox
+										data-size="sm"
+										label={item.count === null ? item.value : `${item.value} (${item.count})`}
+										checked={selected.has(item.value)}
+										onChange={(event) => toggleValues([item.value], event.currentTarget.checked)}
+									/>
+								</li>
+							))}
+						</ul>
+					)}
+
+					{truncated && (
+						<p className="ObFieldFilterPanel-hint">
+							{getLocalizedString("Only the first values are shown. Search to narrow the list.")}
+						</p>
+					)}
+				</div>
+			)}
+
+			{children}
+		</div>
+	);
+}
+
+/** One criterion: an operator picker, a value editor and an optional remove button. */
+function Field({
+	expression,
+	field,
+	operators,
+	onChange,
+	onRemove,
+}: {
+	expression: FilterExpression;
+	field: FieldMetadata;
+	operators: FilterOperator[];
+	onChange: (expression: FilterExpression) => void;
+	onRemove?: () => void;
+}) {
+	return (
+		<>
+			{/* A DS `Select` renders its own field wrapper, which would add a
+			    second row of spacing inside an already dense panel. */}
+			<select
+				className="ds-input ObFieldFilterPanel-operator"
+				data-size="sm"
+				aria-label={getLocalizedString("Operator")}
+				value={normalizeOperator(expression.operator)}
+				onChange={(event) => onChange(changeOperator(expression, event.target.value as FilterOperator, field))}
+			>
+				{operators.map((operator) => (
+					<option key={operator} value={operator}>
+						{getOperatorLabel(operator, field.type)}
+					</option>
+				))}
+			</select>
+			<FilterValueEditor expression={expression} field={field} data-size="sm" onChange={onChange} />
+			{onRemove && (
+				<Button type="button" variant="tertiary" data-size="sm" onClick={onRemove}>
+					{getLocalizedString("Remove")}
+				</Button>
+			)}
+		</>
+	);
+}

package/src/filter/FilterBuilder.css

@@ -0,0 +1,152 @@
+/*
+ * Colours use the contextual `--ds-color-*` aliases so the builder follows the
+ * active colour scheme. Never add hex fallbacks.
+ */
+
+.ObFilterBuilder-root {
+	display: grid;
+	gap: var(--ds-size-4);
+	/*
+	 * The saved-filter list sits beside the editor. The buttons acting on the
+	 * selected filter share the bottom row with OK/Cancel rather than being
+	 * confined to the list's column, so they have room to stay on one line.
+	 * On narrow viewports everything stacks.
+	 */
+	grid-template:
+		"sidebar main" 1fr
+		"error error" auto
+		"footer footer" auto
+		/ minmax(14rem, 22rem) minmax(0, 1fr);
+	block-size: 100%;
+	min-block-size: 0;
+}
+
+.ObFilterBuilder-sidebar {
+	grid-area: sidebar;
+	overflow: auto;
+	padding: var(--ds-size-2);
+	border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
+	border-radius: var(--ds-border-radius-md);
+}
+
+/*
+ * The editor manages its own scrolling — the conditions scroll, the filter
+ * string stays put — so this only has to hand it the available height. A caller
+ * that replaces the editor through `renderMain` gets the same treatment.
+ */
+.ObFilterBuilder-main {
+	grid-area: main;
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-3);
+	min-inline-size: 0;
+	min-block-size: 0;
+}
+
+.ObFilterBuilder-main > * {
+	flex: 1 1 auto;
+	min-inline-size: 0;
+	min-block-size: 0;
+}
+
+.ObFilterBuilder-error {
+	grid-area: error;
+	margin: 0;
+	color: var(--ds-color-danger-text-default);
+}
+
+.ObFilterBuilder-footer {
+	grid-area: footer;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--ds-size-4);
+}
+
+.ObFilterBuilder-toolbar,
+.ObFilterBuilder-actions {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--ds-size-2);
+}
+
+.ObFilterBuilder-actions {
+	margin-inline-start: auto;
+}
+
+/*
+ * Without the saved-filter list there are no buttons acting on one either, so
+ * the editor takes the full width.
+ */
+.ObFilterBuilder-root--noSavedFilters {
+	grid-template:
+		"main" 1fr
+		"error" auto
+		"footer" auto
+		/ minmax(0, 1fr);
+}
+
+/*
+ * `Dialog` caps itself at `--dsc-dialog-max-width` (40rem), so setting a width
+ * here would have no effect — the variable has to be raised instead. It needs
+ * to be wide enough that a condition — field, operator, value and the group
+ * buttons — fits on one line next to the saved-filter column.
+ */
+.ObFilterBuilder-dialog {
+	--dsc-dialog-max-width: 84rem;
+	--dsc-dialog-max-height: 90dvh;
+}
+
+/*
+ * A fixed height keeps the dialog from resizing as conditions are added and
+ * removed, and gives the saved-filter column and the editor a height to fill.
+ * The dialog itself must not scroll — the body does — or the heading would
+ * scroll away and the OK/Cancel row would not stay at the bottom.
+ */
+.ObFilterBuilder-dialog[open] {
+	display: flex;
+	flex-direction: column;
+	block-size: 48rem;
+	overflow: hidden;
+}
+
+/*
+ * The heading and the close button share the header row.
+ */
+.ObFilterBuilder-dialogHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--ds-size-2);
+}
+
+.ObFilterBuilder-dialogBody {
+	flex: 1 1 auto;
+	min-block-size: 0;
+	overflow: hidden;
+}
+
+@media (width < 48rem) {
+	.ObFilterBuilder-root:not(.ObFilterBuilder-root--noSavedFilters) {
+		grid-template:
+			"sidebar" auto
+			"main" 1fr
+			"error" auto
+			"footer" auto
+			/ minmax(0, 1fr);
+	}
+
+	/*
+	 * Stacked, the dialog body is the scroll container: the editor cannot give
+	 * both the list and the conditions a useful height in the space left over.
+	 */
+	.ObFilterBuilder-dialogBody {
+		overflow: auto;
+	}
+
+	.ObFilterBuilder-sidebar {
+		max-block-size: 12rem;
+	}
+}

package/src/filter/FilterBuilder.test.tsx

@@ -0,0 +1,153 @@
+import type { FieldMetadata, SavedFilter } from "@olenbetong/appframe-core";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const save = vi.fn(async () => undefined);
+const remove = vi.fn(async () => undefined);
+const rename = vi.fn(async () => undefined);
+const setCrossDomain = vi.fn(async () => undefined);
+const setNamedFilter = vi.fn();
+const parseFilterString = vi.fn(async () => null);
+let savedFilters: SavedFilter[] = [];
+
+vi.mock("@olenbetong/appframe-react", async (importOriginal) => ({
+	...(await importOriginal<Record<string, unknown>>()),
+	setNamedFilter: (...args: unknown[]) => setNamedFilter(...args),
+	useSavedFilters: () => ({
+		filters: savedFilters,
+		mine: savedFilters.filter((filter) => filter.createdByUser),
+		shared: savedFilters.filter((filter) => !filter.createdByUser),
+		loading: false,
+		error: null,
+		refresh: vi.fn(),
+		save,
+		rename,
+		remove,
+		setCrossDomain,
+	}),
+	useFilterConversion: () => ({
+		filterString: "[PersonID] Like '%a%'",
+		isConverting: false,
+		error: null,
+		parseFilterString,
+	}),
+}));
+
+const { FilterBuilder } = await import("./FilterBuilder.js");
+
+const FIELDS: FieldMetadata[] = [
+	{ name: "PersonID", caption: "Person ID", type: "string", nullable: true },
+	{ name: "Age", caption: "Age", type: "number" },
+];
+
+function savedFilter(overrides: Partial<SavedFilter> & Pick<SavedFilter, "filterId" | "name">): SavedFilter {
+	return {
+		primKey: `pk-${overrides.filterId}`,
+		criteria: "[PersonID] Like '%a%'",
+		dbObjectId: "aviw_Test_View",
+		accessLevel: "Manager",
+		createdByUser: true,
+		createdBy: "bvh",
+		domain: "OB",
+		crossDomain: false,
+		isPersonallyShared: false,
+		hideCriteria: false,
+		headerText: null,
+		comment: null,
+		parameters: null,
+		reportTitle: null,
+		created: null,
+		updated: null,
+		...overrides,
+	};
+}
+
+function renderBuilder(props: Record<string, unknown> = {}) {
+	return render(<FilterBuilder fields={FIELDS} viewName="aviw_Test_View" variant="inline" {...props} />);
+}
+
+describe("FilterBuilder", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		savedFilters = [savedFilter({ filterId: 1, name: "Agder" })];
+	});
+
+	it("renders the saved filters beside the editor", () => {
+		renderBuilder();
+
+		expect(screen.getByRole("button", { name: "New Filter" })).toBeTruthy();
+		expect(screen.getByRole("button", { name: "Agder" })).toBeTruthy();
+		expect(screen.getByLabelText("Add condition")).toBeTruthy();
+	});
+
+	it("disables save and share until a filter is selected", () => {
+		renderBuilder();
+
+		expect(screen.getByRole("button", { name: "Sharing..." }).hasAttribute("disabled")).toBe(true);
+		expect(screen.getByRole("button", { name: "Save" }).hasAttribute("disabled")).toBe(true);
+	});
+
+	it("disables save as while the filter is empty", () => {
+		renderBuilder();
+
+		expect(screen.getByRole("button", { name: "Save as" }).hasAttribute("disabled")).toBe(true);
+	});
+
+	it("parses the criteria of a selected filter back into the tree", async () => {
+		renderBuilder();
+		await userEvent.click(screen.getByRole("button", { name: "Agder" }));
+
+		expect(parseFilterString).toHaveBeenCalledWith("[PersonID] Like '%a%'");
+	});
+
+	it("applies the pruned filter to the data object", async () => {
+		let dataObject = {} as never;
+		renderBuilder({
+			dataObject,
+			defaultValue: {
+				type: "group",
+				mode: "and",
+				items: [{ type: "expression", column: "PersonID", operator: "like", value: "a", valueType: "string" }],
+			},
+		});
+
+		await userEvent.click(screen.getByRole("button", { name: "OK" }));
+
+		expect(setNamedFilter).toHaveBeenCalledWith(
+			dataObject,
+			"filterBuilder",
+			expect.objectContaining({ type: "group" }),
+			{ type: "filterObject" },
+		);
+	});
+
+	it("reports an empty filter as null", async () => {
+		let onApply = vi.fn();
+		renderBuilder({ onApply });
+
+		await userEvent.click(screen.getByRole("button", { name: "OK" }));
+
+		expect(onApply).toHaveBeenCalledWith(null, "[PersonID] Like '%a%'");
+	});
+
+	it("saves under a new name and replaces a filter that already uses it", async () => {
+		renderBuilder({
+			defaultValue: {
+				type: "group",
+				mode: "and",
+				items: [{ type: "expression", column: "PersonID", operator: "like", value: "a", valueType: "string" }],
+			},
+		});
+
+		await userEvent.click(screen.getByRole("button", { name: "Save as" }));
+		await userEvent.type(screen.getByRole("textbox", { name: "Filter name" }), "Agder");
+		await userEvent.click(screen.getByRole("button", { name: "Replace" }));
+
+		await waitFor(() =>
+			expect(save).toHaveBeenCalledWith(
+				expect.objectContaining({ filterId: 1, name: "Agder", criteria: "[PersonID] Like '%a%'" }),
+			),
+		);
+	});
+});