@olenbetong/appframe-ds 0.7.0 → 0.9.0

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%'" }),
+			),
+		);
+	});
+});