@olenbetong/appframe-ds 0.7.0 → 0.9.0

package/src/filter/FilterRow.tsx

@@ -0,0 +1,117 @@
+import { Select } from "@digdir/designsystemet-react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import {
+	changeOperator,
+	createExpression,
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterOperator,
+	getLocalizedString,
+	getOperatorLabel,
+	getOperatorsForField,
+	normalizeOperator,
+} from "@olenbetong/appframe-core";
+import { Combobox } from "../autocomplete/index.js";
+
+import { FilterValueEditor } from "./FilterValueEditor.js";
+import type { FilterEditorSize, GetFieldOptions } from "./types.js";
+
+export function getFieldLabel(field: FieldMetadata) {
+	return field.caption || field.name;
+}
+
+export type FilterRowProps = {
+	expression: FilterExpression;
+	fields: FieldMetadata[];
+	onChange: (expression: FilterExpression) => void;
+	onRemove: () => void;
+	getFieldOptions?: GetFieldOptions;
+	readOnly?: boolean;
+	"data-size"?: FilterEditorSize;
+};
+
+/** A single `field operator value` row. */
+export function FilterRow({
+	expression,
+	fields,
+	onChange,
+	onRemove,
+	getFieldOptions,
+	readOnly,
+	"data-size": size = "sm",
+}: FilterRowProps) {
+	let field = fields.find((item) => item.name === expression.column);
+	let operator = normalizeOperator(expression.operator);
+	// A filter can reference a field that is no longer in the view. Keep the row
+	// editable by falling back to a string field rather than dropping it.
+	let effectiveField: FieldMetadata = field ?? { name: expression.column, type: "string" };
+	let operators = getOperatorsForField(effectiveField);
+
+	if (!operators.includes(operator)) {
+		operators = [...operators, operator];
+	}
+
+	function handleFieldChange(next: FieldMetadata | null) {
+		if (!next) return;
+
+		// Keep the operator when the new field supports it, so switching between
+		// two fields of the same type does not reset the row.
+		let operators = getOperatorsForField(next);
+		let keep = operators.includes(operator) ? operator : undefined;
+		let created = createExpression(next, keep);
+
+		onChange(keep ? { ...created, value: expression.value, valueType: expression.valueType } : created);
+	}
+
+	return (
+		<div className="ObFilterEditor-row">
+			<Combobox
+				className="ObFilterEditor-field"
+				data-size={size}
+				readOnly={readOnly}
+				disableClearable
+				aria-label={getLocalizedString("Field")}
+				placeholder={getLocalizedString("Select field")}
+				options={fields}
+				getOptionLabel={getFieldLabel}
+				getOptionKey={(option) => option.name}
+				isOptionEqualToValue={(a, b) => a.name === b.name}
+				value={effectiveField}
+				onChange={(_event, next) => handleFieldChange(next)}
+			/>
+			<Select
+				className="ObFilterEditor-operator"
+				data-size={size}
+				disabled={readOnly}
+				aria-label={getLocalizedString("Operator")}
+				value={operator}
+				onChange={(event) => onChange(changeOperator(expression, event.target.value as FilterOperator, effectiveField))}
+			>
+				{operators.map((item) => (
+					<Select.Option key={item} value={item}>
+						{getOperatorLabel(item, effectiveField.type)}
+					</Select.Option>
+				))}
+			</Select>
+			<FilterValueEditor
+				expression={expression}
+				field={effectiveField}
+				options={field ? getFieldOptions?.(field) : undefined}
+				onChange={onChange}
+				readOnly={readOnly}
+				data-size={size}
+			/>
+			{!readOnly && (
+				<button
+					type="button"
+					className="ObFilterEditor-iconButton"
+					title={getLocalizedString("Remove condition")}
+					aria-label={getLocalizedString("Remove condition")}
+					onClick={onRemove}
+				>
+					<XMarkIcon aria-hidden />
+				</button>
+			)}
+		</div>
+	);
+}

package/src/filter/FilterShareDialog.css

@@ -0,0 +1,28 @@
+/*
+ * Colours use the contextual `--ds-color-*` aliases so the dialog follows the
+ * active colour scheme. Never add hex fallbacks.
+ */
+
+.ObFilterShareDialog-root {
+	inline-size: min(40rem, 100%);
+}
+
+.ObFilterShareDialog-candidate {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2);
+}
+
+.ObFilterShareDialog-candidateLogin {
+	margin-inline-start: auto;
+	color: var(--ds-color-text-subtle);
+}
+
+.ObFilterShareDialog-table {
+	inline-size: 100%;
+}
+
+.ObFilterShareDialog-error {
+	margin: 0 0 var(--ds-size-2);
+	color: var(--ds-color-danger-text-default);
+}

package/src/filter/FilterShareDialog.tsx

@@ -0,0 +1,201 @@
+import { Button, Dialog, Heading, Select, Table } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { type FilterPermission, useDebounce, useFilterPermissions } from "@olenbetong/appframe-react";
+import { Combobox } from "../autocomplete/index.js";
+import { PersonGroupIcon, PersonIcon, TrashIcon } from "@navikt/aksel-icons";
+import { useEffect, useState } from "react";
+
+import "./FilterShareDialog.css";
+
+type PermissionCandidate = {
+	primKey: string;
+	name: string;
+	login: string;
+	type: string;
+};
+
+export type FilterShareDialogProps = {
+	open: boolean;
+	onClose: () => void;
+	/** `FilterID` of the filter to manage sharing for. */
+	filterId: number | null;
+	/** Shown in the dialog heading. */
+	filterName?: string;
+	"data-size"?: "sm" | "md" | "lg";
+};
+
+/**
+ * Manages who a saved filter is shared with.
+ *
+ * Only a manager of the filter can load or change the grants — for anyone else
+ * `sstp_WebSiteCMS_FilterBuilder_GetPermissions` returns nothing, so the list
+ * simply stays empty.
+ *
+ * @example
+ * ```jsx
+ * <FilterShareDialog open={sharing} filterId={selected} filterName={name} onClose={() => setSharing(false)} />
+ * ```
+ */
+export function FilterShareDialog({
+	open,
+	onClose,
+	filterId,
+	filterName,
+	"data-size": size = "sm",
+}: FilterShareDialogProps) {
+	let { permissions, loading, error, setPermission, removePermission, search } = useFilterPermissions(
+		open ? filterId : null,
+	);
+	let [candidates, setCandidates] = useState<PermissionCandidate[]>([]);
+	let [searchText, setSearchText] = useState("");
+	let query = useDebounce(searchText, 300);
+
+	useEffect(() => {
+		if (!open || query.length < 2) {
+			setCandidates([]);
+
+			return;
+		}
+
+		let isCancelled = false;
+		search(query)
+			.then((results) => {
+				if (isCancelled) return;
+				// Anyone who already has a grant is not a candidate for a new one.
+				let granted = new Set(permissions.map((permission) => permission.groupRef));
+				setCandidates(results.filter((result) => !granted.has(result.primKey)));
+			})
+			.catch(() => {
+				if (!isCancelled) setCandidates([]);
+			});
+
+		return () => {
+			isCancelled = true;
+		};
+	}, [open, query, search, permissions]);
+
+	function handleAdd(candidate: PermissionCandidate | null) {
+		if (!candidate) return;
+
+		setSearchText("");
+		void setPermission(candidate.primKey, "Reader");
+	}
+
+	return (
+		<Dialog open={open} closedby="any" data-size={size} onClose={onClose} className="ObFilterShareDialog-root">
+			<Dialog.Block>
+				<Heading level={2} data-size="xs">
+					{filterName ? getLocalizedString("Sharing - {0}").replace("{0}", filterName) : getLocalizedString("Sharing")}
+				</Heading>
+			</Dialog.Block>
+			<Dialog.Block>
+				<Combobox<PermissionCandidate>
+					options={candidates}
+					value={null}
+					inputValue={searchText}
+					loading={loading}
+					data-size={size}
+					label={getLocalizedString("Add user or group")}
+					placeholder={getLocalizedString("Search...")}
+					getOptionLabel={(option) => option.name}
+					getOptionKey={(option) => option.primKey}
+					// The procedure searches both name and login, so filtering again on
+					// the label would drop everything matched by login.
+					filterOptions={(options) => [...options]}
+					noOptionsText={query.length < 2 ? getLocalizedString("Type to search") : getLocalizedString("No matches")}
+					renderOption={(option) => (
+						<span className="ObFilterShareDialog-candidate">
+							{option.type === "User" ? <PersonIcon aria-hidden /> : <PersonGroupIcon aria-hidden />}
+							<span>{option.name}</span>
+							<span className="ObFilterShareDialog-candidateLogin">{option.login}</span>
+						</span>
+					)}
+					// The picker never keeps a selection; picking an option adds a grant.
+					onInputChange={(_event, value) => setSearchText(value)}
+					onChange={(_event, value) => handleAdd(value)}
+				/>
+			</Dialog.Block>
+			<Dialog.Block>
+				{error && <p className="ObFilterShareDialog-error">{String(error.message ?? error)}</p>}
+				<Table data-size={size} className="ObFilterShareDialog-table">
+					<Table.Head>
+						<Table.Row>
+							<Table.HeaderCell>{getLocalizedString("Name")}</Table.HeaderCell>
+							<Table.HeaderCell>{getLocalizedString("Login")}</Table.HeaderCell>
+							<Table.HeaderCell>{getLocalizedString("Access")}</Table.HeaderCell>
+							<Table.HeaderCell />
+						</Table.Row>
+					</Table.Head>
+					<Table.Body>
+						{permissions.length === 0 && (
+							<Table.Row>
+								<Table.Cell colSpan={4}>
+									{loading ? getLocalizedString("Loading...") : getLocalizedString("Not shared with anyone")}
+								</Table.Cell>
+							</Table.Row>
+						)}
+						{permissions.map((permission) => (
+							<PermissionRow
+								key={permission.primKey}
+								permission={permission}
+								size={size}
+								onChangeAccess={(accessLevel) => void setPermission(permission.groupRef, accessLevel)}
+								onRemove={() => void removePermission(permission.groupRef)}
+							/>
+						))}
+					</Table.Body>
+				</Table>
+			</Dialog.Block>
+			<Dialog.Block>
+				<Button type="button" variant="secondary" data-size={size} onClick={onClose}>
+					{getLocalizedString("Close")}
+				</Button>
+			</Dialog.Block>
+		</Dialog>
+	);
+}
+
+type PermissionRowProps = {
+	permission: FilterPermission;
+	size: "sm" | "md" | "lg";
+	onChangeAccess: (accessLevel: "Reader" | "Manager") => void;
+	onRemove: () => void;
+};
+
+function PermissionRow({ permission, size, onChangeAccess, onRemove }: PermissionRowProps) {
+	return (
+		<Table.Row>
+			<Table.Cell>
+				<span className="ObFilterShareDialog-candidate">
+					{permission.type === "User" ? <PersonIcon aria-hidden /> : <PersonGroupIcon aria-hidden />}
+					{permission.name}
+				</span>
+			</Table.Cell>
+			<Table.Cell>{permission.login}</Table.Cell>
+			<Table.Cell>
+				<Select
+					data-size={size}
+					value={permission.accessLevel}
+					aria-label={getLocalizedString("Access for {0}").replace("{0}", permission.name)}
+					onChange={(event) => onChangeAccess(event.currentTarget.value as "Reader" | "Manager")}
+				>
+					<Select.Option value="Reader">{getLocalizedString("Reader")}</Select.Option>
+					<Select.Option value="Manager">{getLocalizedString("Manager")}</Select.Option>
+				</Select>
+			</Table.Cell>
+			<Table.Cell>
+				<Button
+					type="button"
+					variant="tertiary"
+					data-color="danger"
+					data-size={size}
+					icon
+					aria-label={getLocalizedString("Remove access for {0}").replace("{0}", permission.name)}
+					onClick={onRemove}
+				>
+					<TrashIcon aria-hidden />
+				</Button>
+			</Table.Cell>
+		</Table.Row>
+	);
+}

package/src/filter/FilterStringField.tsx

@@ -0,0 +1,77 @@
+import { Textfield, ValidationMessage } from "@digdir/designsystemet-react";
+import { type FilterTree, getLocalizedString, toFilterTree } from "@olenbetong/appframe-core";
+import { useFilterConversion } from "@olenbetong/appframe-react";
+import { useEffect, useState } from "react";
+
+import type { FilterEditorSize } from "./types.js";
+
+export type FilterStringFieldProps = {
+	filter: FilterTree;
+	onChange: (filter: FilterTree) => void;
+	viewName?: string;
+	readOnly?: boolean;
+	"data-size"?: FilterEditorSize;
+};
+
+/**
+ * Two-way filter string editor. The tree is the source of truth: it is
+ * converted to a string whenever it changes. Editing the string and leaving the
+ * field parses it back into a tree.
+ */
+export function FilterStringField({
+	filter,
+	onChange,
+	viewName,
+	readOnly,
+	"data-size": size = "sm",
+}: FilterStringFieldProps) {
+	let { filterString, isConverting, error, warning, parseFilterString } = useFilterConversion(filter, { viewName });
+	let [draft, setDraft] = useState<string | null>(null);
+	let [parseError, setParseError] = useState<string | null>(null);
+
+	// The tree changed underneath us, so any half-typed string is stale.
+	useEffect(() => {
+		setDraft(null);
+		setParseError(null);
+	}, [filter]);
+
+	async function commit() {
+		if (draft === null || draft === filterString) {
+			setDraft(null);
+			return;
+		}
+
+		let parsed = await parseFilterString(draft);
+
+		if (parsed) {
+			setDraft(null);
+			setParseError(null);
+			onChange(toFilterTree(parsed));
+		} else {
+			setParseError(getLocalizedString("The filter could not be parsed"));
+		}
+	}
+
+	let message = parseError ?? error?.message ?? warning;
+
+	return (
+		<div className="ObFilterEditor-filterString">
+			<Textfield
+				multiline
+				rows={3}
+				data-size={size}
+				readOnly={readOnly}
+				label={
+					<span className="ObFilterEditor-filterStringLabel">
+						{getLocalizedString("Filter string")}
+						{isConverting && <span className="ObFilterEditor-hint">{getLocalizedString("Converting…")}</span>}
+					</span>
+				}
+				value={draft ?? filterString}
+				onChange={(event) => setDraft(event.target.value)}
+				onBlur={commit}
+			/>
+			{message && <ValidationMessage data-color={parseError ? "danger" : "warning"}>{message}</ValidationMessage>}
+		</div>
+	);
+}

package/src/filter/FilterValueEditor.tsx

@@ -0,0 +1,220 @@
+import { Select, Textfield } from "@digdir/designsystemet-react";
+import { PencilIcon } from "@navikt/aksel-icons";
+import {
+	type DynamicValue,
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterOperator,
+	getDynamicValueLabel,
+	getDynamicValuesForField,
+	getLocalizedString,
+	getOperatorArity,
+	getValueType,
+	normalizeOperator,
+} from "@olenbetong/appframe-core";
+import { Combobox } from "../autocomplete/index.js";
+
+import { ChipListInput } from "./ChipListInput.js";
+import type { FilterEditorSize, FilterValueOption } from "./types.js";
+
+export type FilterValueEditorProps = {
+	expression: FilterExpression;
+	field?: FieldMetadata;
+	options?: FilterValueOption[];
+	onChange: (expression: FilterExpression) => void;
+	readOnly?: boolean;
+	"data-size"?: FilterEditorSize;
+};
+
+/** The `input` type used for a field's scalar editor. */
+function getInputType(field: FieldMetadata | undefined): "text" | "number" | "date" | "datetime-local" {
+	switch (field?.type) {
+		case "number":
+			return "number";
+		case "date":
+			return "date";
+		case "datetime":
+			return "datetime-local";
+		default:
+			return "text";
+	}
+}
+
+function toStringValue(value: FilterExpression["value"]): string {
+	if (value === null || value === undefined) return "";
+	if (value instanceof Date) return value.toISOString();
+
+	return String(value);
+}
+
+function toArrayValue(value: FilterExpression["value"], length?: number): string[] {
+	let array = Array.isArray(value) ? value.map(toStringValue) : [];
+	if (length === undefined) return array;
+
+	// Pair editors always render two inputs, even before both are filled in.
+	return Array.from({ length }, (_, index) => array[index] ?? "");
+}
+
+/**
+ * The value part of a filter row. Which editor is rendered depends on the
+ * operator's arity, the field's type, and whether the value is a dynamic
+ * ("special") value such as `Today` or `CurrentUser`.
+ */
+export function FilterValueEditor({
+	expression,
+	field,
+	options,
+	onChange,
+	readOnly,
+	"data-size": size = "sm",
+}: FilterValueEditorProps) {
+	let operator = normalizeOperator(expression.operator);
+	let arity = getOperatorArity(operator);
+	let isDynamic = expression.valueType === "special";
+	let dynamicValues = field ? getDynamicValuesForField(field) : [];
+	let inputType = getInputType(field);
+
+	function setValue(value: FilterExpression["value"]) {
+		onChange({ ...expression, value });
+	}
+
+	function setDynamic(enabled: boolean) {
+		if (enabled) {
+			onChange({ ...expression, value: dynamicValues[0] ?? null, valueType: "special" });
+		} else {
+			onChange({
+				...expression,
+				value: arity === "pair" ? ["", ""] : arity === "list" ? [] : "",
+				valueType: field ? getValueType(field, operator as FilterOperator) : "string",
+			});
+		}
+	}
+
+	if (arity === "none") return null;
+
+	let editor: React.ReactNode;
+
+	if (isDynamic) {
+		editor = (
+			<Select
+				className="ObFilterEditor-value"
+				aria-label={getLocalizedString("Value")}
+				data-size={size}
+				disabled={readOnly}
+				value={toStringValue(expression.value)}
+				onChange={(event) => setValue(event.target.value)}
+			>
+				{dynamicValues.map((dynamicValue) => (
+					<Select.Option key={dynamicValue} value={dynamicValue}>
+						{getDynamicValueLabel(dynamicValue as DynamicValue)}
+					</Select.Option>
+				))}
+			</Select>
+		);
+	} else if (arity === "list") {
+		editor = options ? (
+			<Combobox
+				className="ObFilterEditor-value"
+				multiple
+				data-size={size}
+				readOnly={readOnly}
+				placeholder={getLocalizedString("Select values")}
+				aria-label={getLocalizedString("Value")}
+				options={options}
+				getOptionLabel={(option) => option.label ?? option.value}
+				isOptionEqualToValue={(a, b) => a.value === b.value}
+				value={toArrayValue(expression.value).map(
+					(item) => options.find((option) => option.value === item) ?? { value: item },
+				)}
+				onChange={(_event, selected) => setValue(selected.map((option) => option.value))}
+			/>
+		) : (
+			<ChipListInput
+				aria-label={getLocalizedString("Value")}
+				data-size={size}
+				readOnly={readOnly}
+				type={inputType}
+				value={toArrayValue(expression.value)}
+				onChange={setValue}
+			/>
+		);
+	} else if (arity === "pair") {
+		let [from, to] = toArrayValue(expression.value, 2);
+
+		editor = (
+			<div className="ObFilterEditor-pair">
+				<Textfield
+					className="ObFilterEditor-value"
+					aria-label={getLocalizedString("From")}
+					data-size={size}
+					readOnly={readOnly}
+					type={inputType}
+					value={from}
+					onChange={(event) => setValue([event.target.value, to])}
+				/>
+				<span className="ObFilterEditor-pairSeparator">{getLocalizedString("and")}</span>
+				<Textfield
+					className="ObFilterEditor-value"
+					aria-label={getLocalizedString("To")}
+					data-size={size}
+					readOnly={readOnly}
+					type={inputType}
+					value={to}
+					onChange={(event) => setValue([from, event.target.value])}
+				/>
+			</div>
+		);
+	} else if (options) {
+		let current = toStringValue(expression.value);
+
+		editor = (
+			<Combobox
+				className="ObFilterEditor-value"
+				data-size={size}
+				readOnly={readOnly}
+				placeholder={getLocalizedString("Select value")}
+				aria-label={getLocalizedString("Value")}
+				options={options}
+				getOptionLabel={(option) => option.label ?? option.value}
+				isOptionEqualToValue={(a, b) => a.value === b.value}
+				value={current ? (options.find((option) => option.value === current) ?? { value: current }) : null}
+				onChange={(_event, selected) => setValue(selected?.value ?? "")}
+			/>
+		);
+	} else {
+		editor = (
+			<Textfield
+				className="ObFilterEditor-value"
+				aria-label={getLocalizedString("Value")}
+				data-size={size}
+				readOnly={readOnly}
+				type={inputType}
+				value={toStringValue(expression.value)}
+				onChange={(event) => setValue(event.target.value)}
+			/>
+		);
+	}
+
+	// Dynamic values are resolved server side, so they can only replace the whole
+	// value. Pairs would need one toggle per side, which the Windows editor does
+	// not offer either.
+	let canToggleDynamic = !readOnly && dynamicValues.length > 0 && arity === "single";
+
+	return (
+		<div className="ObFilterEditor-valueCell">
+			{editor}
+			{canToggleDynamic && (
+				<button
+					type="button"
+					className="ObFilterEditor-iconButton"
+					aria-pressed={isDynamic}
+					title={getLocalizedString("Use a relative value")}
+					aria-label={getLocalizedString("Use a relative value")}
+					onClick={() => setDynamic(!isDynamic)}
+				>
+					<PencilIcon aria-hidden />
+				</button>
+			)}
+		</div>
+	);
+}