@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/binding/SaveButton.tsx

@@ -1,37 +1,37 @@
-import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { FloppydiskIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useSaveButton } from "@olenbetong/appframe-react";
-import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
-
-export const SaveButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
-	HTMLButtonElement,
-	ButtonProps
->(function SaveButton({ onClick, children, loading, ...props }, ref) {
-	let { dirty, saving, save } = useSaveButton();
-	let isLoading = saving || loading;
-
-	return (
-		<Button
-			loading={isLoading}
-			onClick={(evt) => {
-				onClick?.(evt);
-				if (!evt.defaultPrevented) {
-					save();
-				}
-			}}
-			{...props}
-			ref={ref}
-		>
-			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
-			{!isLoading && (
-				<BadgePosition placement="top-right" overlap="circle">
-					<FloppydiskIcon aria-hidden="true" />
-					{/* Indicates unsaved changes on the current record */}
-					{dirty && <Badge data-color="warning" aria-hidden="true" />}
-				</BadgePosition>
-			)}
-			{children ?? getLocalizedString("Save")}
-		</Button>
-	);
-});
+import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { FloppydiskIcon } from "@navikt/aksel-icons";
+import { useSaveButton } from "@olenbetong/appframe-react";
+import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export const SaveButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
+	HTMLButtonElement,
+	ButtonProps
+>(function SaveButton({ onClick, children, loading, ...props }, ref) {
+	let { dirty, saving, save } = useSaveButton();
+	let isLoading = saving || loading;
+
+	return (
+		<Button
+			loading={isLoading}
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					save();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
+			{!isLoading && (
+				<BadgePosition placement="top-right" overlap="circle">
+					<FloppydiskIcon aria-hidden="true" />
+					{/* Indicates unsaved changes on the current record */}
+					{dirty && <Badge data-color="warning" aria-hidden="true" />}
+				</BadgePosition>
+			)}
+			{children ?? getLocalizedString("Save")}
+		</Button>
+	);
+});

package/src/binding/SaveIconButton.tsx

@@ -1,38 +1,38 @@
-import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { FloppydiskIcon } from "@navikt/aksel-icons";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useSaveButton } from "@olenbetong/appframe-react";
-import { forwardRef } from "react";
-
-export const SaveIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function SaveIconButton(
-	{ onClick, children, loading, ...props },
-	ref,
-) {
-	let { dirty, saving, save } = useSaveButton();
-	let isLoading = saving || loading;
-
-	return (
-		<Button
-			icon
-			loading={isLoading}
-			aria-label={getLocalizedString("Save")}
-			variant="tertiary"
-			onClick={(evt) => {
-				onClick?.(evt);
-				if (!evt.defaultPrevented) {
-					save();
-				}
-			}}
-			{...props}
-			ref={ref}
-		>
-			{children ?? (
-				<BadgePosition placement="top-right" overlap="circle">
-					<FloppydiskIcon />
-					{/* Indicates unsaved changes on the current record */}
-					{dirty && <Badge data-color="warning" aria-hidden="true" />}
-				</BadgePosition>
-			)}
-		</Button>
-	);
-});
+import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { FloppydiskIcon } from "@navikt/aksel-icons";
+import { useSaveButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export const SaveIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function SaveIconButton(
+	{ onClick, children, loading, ...props },
+	ref,
+) {
+	let { dirty, saving, save } = useSaveButton();
+	let isLoading = saving || loading;
+
+	return (
+		<Button
+			icon
+			loading={isLoading}
+			aria-label={getLocalizedString("Save")}
+			variant="tertiary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					save();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? (
+				<BadgePosition placement="top-right" overlap="circle">
+					<FloppydiskIcon />
+					{/* Indicates unsaved changes on the current record */}
+					{dirty && <Badge data-color="warning" aria-hidden="true" />}
+				</BadgePosition>
+			)}
+		</Button>
+	);
+});

package/src/container/Container.tsx

@@ -1,49 +1,49 @@
-import { PageBlock, type PageBlockProps, type PageBlockWidth } from "../page/PageBlock.js";
-
-export const containerMaxWidths = ["xs", "sm", "md", "lg", "xl"] as const;
-
-export type ContainerMaxWidth = (typeof containerMaxWidths)[number];
-
-const maxWidthToBlockWidth: Record<ContainerMaxWidth, PageBlockWidth> = {
-	xs: "text",
-	sm: "text",
-	md: "md",
-	lg: "lg",
-	xl: "xl",
-};
-
-export type ContainerProps = Omit<PageBlockProps, "width"> & {
-	/**
-	 * Predefined max-width, using the same scale as MUI `Container`. Content is
-	 * horizontally centered.
-	 *
-	 * - `xs`/`sm`: 36rem (576px) — recommended line-length for running text
-	 * - `md`: 48rem (768px)
-	 * - `lg`: 64rem (1024px)
-	 * - `xl`: 80rem (1280px)
-	 * - `false`: no max-width
-	 *
-	 * @default "lg"
-	 */
-	maxWidth?: ContainerMaxWidth | false;
-};
-
-/**
- * Centered, max-width content wrapper — the MUI `Container` equivalent.
- *
- * A thin alias over `Page.Block` with gutters enabled by default, for the very
- * common case of "center this content and give it sensible side padding"
- * without having to reach for the full `Page` composition.
- *
- * @example
- * ```jsx
- * <Container maxWidth="sm">
- *   <Heading>Expenses</Heading>
- * </Container>
- * ```
- */
-export function Container({ gutters = true, maxWidth = "lg", ...props }: ContainerProps) {
-	let width = maxWidth === false ? undefined : maxWidthToBlockWidth[maxWidth];
-
-	return <PageBlock gutters={gutters} width={width} {...props} />;
-}
+import { PageBlock, type PageBlockProps, type PageBlockWidth } from "../page/PageBlock.js";
+
+export const containerMaxWidths = ["xs", "sm", "md", "lg", "xl"] as const;
+
+export type ContainerMaxWidth = (typeof containerMaxWidths)[number];
+
+const maxWidthToBlockWidth: Record<ContainerMaxWidth, PageBlockWidth> = {
+	xs: "text",
+	sm: "text",
+	md: "md",
+	lg: "lg",
+	xl: "xl",
+};
+
+export type ContainerProps = Omit<PageBlockProps, "width"> & {
+	/**
+	 * Predefined max-width, using the same scale as MUI `Container`. Content is
+	 * horizontally centered.
+	 *
+	 * - `xs`/`sm`: 36rem (576px) — recommended line-length for running text
+	 * - `md`: 48rem (768px)
+	 * - `lg`: 64rem (1024px)
+	 * - `xl`: 80rem (1280px)
+	 * - `false`: no max-width
+	 *
+	 * @default "lg"
+	 */
+	maxWidth?: ContainerMaxWidth | false;
+};
+
+/**
+ * Centered, max-width content wrapper — the MUI `Container` equivalent.
+ *
+ * A thin alias over `Page.Block` with gutters enabled by default, for the very
+ * common case of "center this content and give it sensible side padding"
+ * without having to reach for the full `Page` composition.
+ *
+ * @example
+ * ```jsx
+ * <Container maxWidth="sm">
+ *   <Heading>Expenses</Heading>
+ * </Container>
+ * ```
+ */
+export function Container({ gutters = true, maxWidth = "lg", ...props }: ContainerProps) {
+	let width = maxWidth === false ? undefined : maxWidthToBlockWidth[maxWidth];
+
+	return <PageBlock gutters={gutters} width={width} {...props} />;
+}

package/src/container/index.ts

@@ -1 +1 @@
-export * from "./Container.js";
+export * from "./Container.js";

package/src/cutoff/CutOffPicker.css

@@ -0,0 +1,12 @@
+@layer ds {
+	.ObCutOffPicker-root {
+		display: flex;
+		align-items: center;
+		gap: var(--ds-size-2);
+	}
+
+	.ObCutOffPicker-root > .ds-select,
+	.ObCutOffPicker-root > .ds-field {
+		flex: 0 1 auto;
+	}
+}

package/src/cutoff/CutOffPicker.tsx

@@ -0,0 +1,165 @@
+import "./CutOffPicker.css";
+
+import { Select, Textfield } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+import type { Temporal } from "temporal-polyfill";
+
+import { getLocalizedString } from "../i18n.js";
+import { useCutOff } from "./context.js";
+import { type PeriodType, plainDateToCutOff } from "./utils.js";
+
+export type CutOffPickerProps = {
+	className?: string;
+	disabled?: boolean;
+	/** Period types left out of the type select. */
+	disabledTypes?: PeriodType[];
+	max?: Temporal.PlainDate | string;
+	min?: Temporal.PlainDate | string;
+	/** Designsystemet size of both fields. */
+	"data-size"?: "sm" | "md" | "lg";
+	/**
+	 * Do not sync the `co` and `period` search parameters with the selection - for a form that
+	 * submits the period itself.
+	 */
+	disableSearchParams?: boolean;
+};
+
+function cutOffTypes(): [PeriodType, string][] {
+	return [
+		["AllDates", getLocalizedString("Day")],
+		["WS", getLocalizedString("Week")],
+		["MLD", getLocalizedString("Month")],
+		["MLS", `${getLocalizedString("Month")} (${getLocalizedString("Last sunday")})`],
+		["QLD", getLocalizedString("Quarter")],
+		["QLS", `${getLocalizedString("Quarter")} (${getLocalizedString("Last sunday")})`],
+		["YLD", getLocalizedString("Year")],
+	];
+}
+
+export function getCutOffTypes(disabledTypes: PeriodType[]): [PeriodType, string][] {
+	return cutOffTypes().filter((co) => !disabledTypes.includes(co[0]));
+}
+
+/**
+ * Picks the app's cut-off period: a select for the period type (day, week, month, quarter,
+ * year) and a field for the period itself, native date/week/month inputs where the browser
+ * has them and a select for quarters and years. Reads and writes the period through
+ * {@link useCutOff}, so it needs a `CutOffProvider` above it.
+ */
+export function CutOffPicker({
+	className,
+	max,
+	min,
+	disabled,
+	disabledTypes,
+	"data-size": size,
+	disableSearchParams = false,
+}: CutOffPickerProps) {
+	let { cutOffType, periods, setPeriod, setCutOffType } = useCutOff({ disableSearchParams });
+
+	function handlePeriodChanged(evt: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
+		if (evt.target.value) {
+			setPeriod(cutOffType, evt.target.value);
+		}
+	}
+
+	let thisYear = new Date().getFullYear();
+	let quarters = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+		.flatMap((dy) => [4, 3, 2, 1].map((q) => `${thisYear - dy}-Q${q}`))
+		.filter((period) => {
+			if (max && period > plainDateToCutOff(max, "QLD")) return false;
+			if (min && period < plainDateToCutOff(min, "QLD")) return false;
+			return true;
+		});
+	let years = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+		.map((dy) => thisYear - dy)
+		.filter((year) => {
+			if (max && year > Number(plainDateToCutOff(max, "YLD"))) return false;
+			if (min && year < Number(plainDateToCutOff(min, "YLD"))) return false;
+			return true;
+		});
+
+	return (
+		<div className={clsx("ObCutOffPicker-root", className)} data-size={size}>
+			<Select
+				name="co"
+				aria-label={getLocalizedString("Period type")}
+				value={cutOffType}
+				onChange={(evt) => setCutOffType(evt.target.value as PeriodType)}
+				disabled={disabled}
+			>
+				{getCutOffTypes(disabledTypes ?? []).map(([type, label]) => (
+					<Select.Option value={type} key={type}>
+						{label}
+					</Select.Option>
+				))}
+			</Select>
+			{cutOffType === "AllDates" && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Day")}
+					type="date"
+					value={periods.AllDates}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "AllDates") : undefined}
+					min={min ? plainDateToCutOff(min, "AllDates") : undefined}
+				/>
+			)}
+			{cutOffType === "WS" && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Week")}
+					type="week"
+					value={periods.WS.indexOf("W") === -1 ? periods.WS.replace("-", "-W") : periods.WS}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "WS") : undefined}
+					min={min ? plainDateToCutOff(min, "WS") : undefined}
+				/>
+			)}
+			{(cutOffType === "MLD" || cutOffType === "MLS") && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Month")}
+					type="month"
+					value={periods.MLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "MLD") : undefined}
+					min={min ? plainDateToCutOff(min, "MLD") : undefined}
+				/>
+			)}
+			{(cutOffType === "QLD" || cutOffType === "QLS") && (
+				<Select
+					name="period"
+					aria-label={getLocalizedString("Quarter")}
+					value={periods.QLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+				>
+					{quarters.map((quarter) => (
+						<Select.Option key={quarter} value={quarter}>
+							{quarter}
+						</Select.Option>
+					))}
+				</Select>
+			)}
+			{cutOffType === "YLD" && (
+				<Select
+					name="period"
+					aria-label={getLocalizedString("Year")}
+					value={periods.YLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+				>
+					{years.map((year) => (
+						<Select.Option key={year} value={String(year)}>
+							{year}
+						</Select.Option>
+					))}
+				</Select>
+			)}
+		</div>
+	);
+}

package/src/cutoff/context.tsx

@@ -0,0 +1,194 @@
+import type React from "react";
+import { createContext, useContext, useEffect, useReducer } from "react";
+import { useSearchParams } from "react-router";
+
+import { type CutOffDatesRecord, dsCutOffDates } from "./dsCutOffDates.js";
+import {
+	defaultCutOffType,
+	defaultPeriod,
+	defaultPeriods,
+	getCutOffFromSearchParams,
+	getHistoryRangeStart,
+	getPeriodLabel,
+	type PeriodType,
+	type PeriodTypeValueMap,
+} from "./utils.js";
+
+export type PeriodState = {
+	/** The selected period of every type, so switching type and back keeps the choice. */
+	periods: PeriodTypeValueMap;
+	/** The selected period as Appframe stores it (weeks without the W). */
+	period: string;
+	/** The selected period in ISO form (weeks as `2026-W38`). */
+	isoPeriod: string;
+	cutOffType: PeriodType;
+	/** Start of a history range ending at the period; see `getHistoryRangeStart`. */
+	historyStart: string;
+	label: string;
+	/** The period's dates from the database, once fetched (`CutOffProvider fetchPeriod`). */
+	data?: CutOffDatesRecord;
+};
+
+export type PeriodActions = {
+	setPeriod: (type: PeriodType, period: string) => void;
+	setCutOffType: (type: PeriodType) => void;
+};
+
+export const CutOffContext = createContext<PeriodState & PeriodActions>({
+	historyStart: getHistoryRangeStart(defaultCutOffType, defaultPeriod),
+	label: getPeriodLabel(defaultCutOffType, defaultPeriod),
+	periods: defaultPeriods,
+	period: defaultPeriod,
+	isoPeriod: defaultPeriod,
+	cutOffType: defaultCutOffType,
+	setPeriod: () => null,
+	setCutOffType: () => null,
+});
+
+type CutOffAction =
+	| { type: "setCutOffType"; payload: PeriodType }
+	| { type: "setPeriod"; payload: { type: PeriodType; period: string } }
+	| { type: "cutOffLoaded"; payload: CutOffDatesRecord };
+
+const periodCache = new Map<string, CutOffDatesRecord>();
+
+function cutOffReducer(state: PeriodState, action: CutOffAction): PeriodState {
+	switch (action.type) {
+		case "setPeriod": {
+			let { period, type } = action.payload;
+			let isActivePeriod = type === state.cutOffType;
+			let key = `${type}-${period}`;
+
+			return {
+				...state,
+				data: periodCache.get(key),
+				period: (isActivePeriod ? action.payload.period : state.period).replace("W", ""),
+				isoPeriod: isActivePeriod ? action.payload.period : state.period,
+				periods: {
+					...state.periods,
+					[state.cutOffType]: action.payload.period,
+				},
+				historyStart: isActivePeriod ? getHistoryRangeStart(type, period) : state.historyStart,
+				label: isActivePeriod ? getPeriodLabel(type, period) : state.label,
+			};
+		}
+		case "setCutOffType": {
+			let { payload: coType } = action;
+			let key = `${coType}-${state.periods[coType]}`;
+
+			return {
+				...state,
+				data: periodCache.get(key),
+				period: state.periods[coType].replace("W", ""),
+				isoPeriod: state.periods[coType],
+				historyStart: getHistoryRangeStart(coType, state.periods[coType]),
+				label: getPeriodLabel(coType, state.periods[coType]),
+				cutOffType: coType,
+			};
+		}
+		case "cutOffLoaded":
+			return { ...state, data: action.payload };
+		default:
+			return state;
+	}
+}
+
+function initialState(): PeriodState {
+	let { coType, period } = getCutOffFromSearchParams(new URLSearchParams(globalThis.location?.search ?? ""));
+
+	return {
+		periods: { ...defaultPeriods, [coType]: period },
+		historyStart: getHistoryRangeStart(coType, period),
+		label: getPeriodLabel(coType, period),
+		period,
+		isoPeriod: period,
+		cutOffType: coType,
+	};
+}
+
+async function getCutOffPeriod(cutOffType: PeriodType, period: string): Promise<CutOffDatesRecord | undefined> {
+	let key = `${cutOffType}-${period}`;
+	let cached = periodCache.get(key);
+	if (cached) return cached;
+	if (!dsCutOffDates) return undefined;
+
+	let result = await dsCutOffDates.retrieve({
+		maxRecords: 1,
+		filterString: `[COType] = '${cutOffType}' AND [Period] = '${period}'`,
+	});
+
+	if (result.length > 0) {
+		periodCache.set(key, result[0]);
+	}
+
+	return result[0];
+}
+
+export type CutOffProviderProps = React.PropsWithChildren<{
+	/**
+	 * Fetch the period's dates from the database when it changes. Without it `data` stays
+	 * undefined.
+	 */
+	fetchPeriod?: boolean;
+}>;
+
+/**
+ * Holds the selected cut-off period for the app, initialised from the `co` and `period`
+ * search parameters. Read and change it with {@link useCutOff}; let the user pick it with
+ * `CutOffPicker`.
+ */
+export function CutOffProvider({ children, fetchPeriod }: CutOffProviderProps) {
+	let [state, dispatch] = useReducer(cutOffReducer, undefined, initialState);
+
+	useEffect(() => {
+		if (fetchPeriod && !state.data) {
+			getCutOffPeriod(state.cutOffType, state.period)
+				.then((payload) => {
+					if (payload) dispatch({ type: "cutOffLoaded", payload });
+				})
+				.catch((error) => console.warn(String(error)));
+		}
+	}, [fetchPeriod, state.cutOffType, state.period, state.data]);
+
+	return (
+		<CutOffContext.Provider
+			value={{
+				...state,
+				setPeriod: (type, period) => dispatch({ type: "setPeriod", payload: { type, period } }),
+				setCutOffType: (type) => dispatch({ type: "setCutOffType", payload: type }),
+			}}
+		>
+			{children}
+		</CutOffContext.Provider>
+	);
+}
+
+/**
+ * The selected cut-off period and the actions that change it. Keeps the `co` and `period`
+ * search parameters in step with the selection unless `disableSearchParams` is set (a form
+ * that submits the period itself, say).
+ */
+export function useCutOff({ disableSearchParams = false }: { disableSearchParams?: boolean } = {}) {
+	let cutOff = useContext(CutOffContext);
+	let [, setSearchParams] = useSearchParams();
+
+	useEffect(() => {
+		if (!disableSearchParams) {
+			let searchParams = new URLSearchParams(window.location.search);
+			if (cutOff.period === defaultPeriods[cutOff.cutOffType]) {
+				searchParams.delete("period");
+			} else {
+				searchParams.set("period", cutOff.period);
+			}
+			if (cutOff.cutOffType === "MLD") {
+				searchParams.delete("co");
+			} else {
+				searchParams.set("co", cutOff.cutOffType);
+			}
+
+			setSearchParams(searchParams, { replace: true });
+		}
+	}, [disableSearchParams, cutOff.period, cutOff.cutOffType, setSearchParams]);
+
+	return cutOff;
+}

package/src/cutoff/dsCutOffDates.ts

@@ -0,0 +1,21 @@
+import type { AfData } from "@olenbetong/appframe-data";
+
+export type CutOffDatesRecord = {
+	COType: string;
+	PeriodStart: Date;
+	PeriodEnd: Date;
+	Period: string;
+};
+
+/** `aviw_System_CutOffDates`: the start and end dates the database assigns to a period. */
+export const dsCutOffDates = (
+	(globalThis as { af?: { data?: AfData } }).af?.data as AfData | undefined
+)?.generateApiDataHandler?.<CutOffDatesRecord>({
+	resource: "aviw_System_CutOffDates",
+	fields: [
+		{ name: "COType", type: "string", nullable: false },
+		{ name: "PeriodStart", type: "datetime", nullable: true },
+		{ name: "PeriodEnd", type: "datetime", nullable: true },
+		{ name: "Period", type: "string", nullable: true },
+	],
+});

package/src/cutoff/index.ts

@@ -0,0 +1,4 @@
+export * from "./context.js";
+export * from "./CutOffPicker.js";
+export * from "./dsCutOffDates.js";
+export * from "./utils.js";