@plumile/backoffice-react 0.1.107 → 0.1.109

package/lib/esm/pages/BackofficeEntityListPage.js

@@ -1,35 +1,34 @@
 import { useBackofficeReactTranslation as e } from "../i18n/useBackofficeReactTranslation.js";
-import { useBackofficeConfig as t } from "../provider/BackofficeConfigContext.js";
-import { LazyBackofficeEntityActionFormDialog as n } from "../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js";
-import { buildDataTableColumns as r } from "../components/backoffice/columns/buildDataTableColumns.js";
-import { useBackofficeLoadMore as i } from "../hooks/useBackofficeLoadMore.js";
-import { useBackofficeListRefetch as a } from "../hooks/useBackofficeListRefetch.js";
-import { BackofficeEntityListScaffold as o } from "../components/backoffice/scaffolds/BackofficeEntityListScaffold.js";
-import { BackofficeRightPageLayout as s } from "../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js";
-import { buildEntityListBreadcrumb as c } from "../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js";
-import { rowFlagsColumnCell as l } from "../components/backoffice/list/RowFlagsCell.css.js";
-import { RowFlagsCell as u } from "../components/backoffice/list/RowFlagsCell.js";
-import { useBackofficeListUrlState as d } from "../hooks/useBackofficeListUrlState.js";
-import { buildActionsColumn as f, computeActionsColumnWidthPx as p, computeRowFlagsColumnWidthPx as m, isConnectionListConfig as h, isFormMutationAction as g, isRecordListConfig as _, isRouteAction as ee, resolveActionVariant as te, resolveLabel as v, resolveTrackBySize as y } from "./BackofficeEntityListPage.helpers.js";
+import { LazyBackofficeEntityActionFormDialog as t } from "../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js";
+import { buildDataTableColumns as n } from "../components/backoffice/columns/buildDataTableColumns.js";
+import { useBackofficeLoadMore as r } from "../hooks/useBackofficeLoadMore.js";
+import { useBackofficeListRefetch as i } from "../hooks/useBackofficeListRefetch.js";
+import { BackofficeEntityListScaffold as a } from "../components/backoffice/scaffolds/BackofficeEntityListScaffold.js";
+import { BackofficeRightPageLayout as o } from "../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js";
+import { buildEntityListBreadcrumb as s } from "../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js";
+import { rowFlagsColumnCell as c } from "../components/backoffice/list/RowFlagsCell.css.js";
+import { RowFlagsCell as l } from "../components/backoffice/list/RowFlagsCell.js";
+import { useBackofficeListUrlState as u } from "../hooks/useBackofficeListUrlState.js";
+import { buildActionsColumn as d, computeActionsColumnWidthPx as f, computeRowFlagsColumnWidthPx as p, isConnectionListConfig as m, isFormMutationAction as h, isRecordListConfig as g, isRouteAction as ee, resolveActionVariant as te, resolveLabel as _, resolveTrackBySize as v } from "./BackofficeEntityListPage.helpers.js";
 import { actionTrigger as ne, actionsColumnCell as re, headerActions as ie } from "./backofficeEntityListPage.css.js";
-import { useCallback as b, useEffect as x, useMemo as S, useRef as C, useState as w } from "react";
-import { Button as T, EyeSvg as ae, InlineBanner as oe, LinkButton as E, TableCell as se } from "@plumile/ui";
-import { Fragment as ce, jsx as D, jsxs as le } from "react/jsx-runtime";
+import { useCallback as y, useEffect as b, useMemo as x, useRef as S, useState as C } from "react";
+import { Button as w, EyeSvg as ae, InlineBanner as oe, LinkButton as T, TableCell as se } from "@plumile/ui";
+import { Fragment as E, jsx as D, jsxs as ce } from "react/jsx-runtime";
 import { useTranslation as O } from "react-i18next";
 import { fetchQuery as k } from "relay-runtime";
-import { useFragment as A, usePaginationFragment as j, usePreloadedQuery as ue, useRelayEnvironment as de } from "react-relay";
-import { BACKOFFICE_LIST_DEFAULTS as fe, BACKOFFICE_LIST_REFETCH_POLICY as M } from "@plumile/backoffice-core/constants.js";
+import { useFragment as le, usePaginationFragment as A, usePreloadedQuery as ue, useRelayEnvironment as j } from "react-relay";
+import { BACKOFFICE_LIST_DEFAULTS as de, BACKOFFICE_LIST_REFETCH_POLICY as M } from "@plumile/backoffice-core/constants.js";
 import { stableListVariablesKey as N } from "@plumile/backoffice-core/state/stableKey.js";
 //#region src/pages/BackofficeEntityListPage.tsx
-var pe = "store-or-network", me = (e, t, n, r) => {
+var fe = "store-or-network", pe = (e, t, n, r) => {
 	let i = t != null && t.length > 0, a = e;
 	if (i) {
 		let n = [{
 			id: "__rowFlags",
 			header: "",
-			className: l,
+			className: c,
 			mobileRole: "badge",
-			cell: (e) => /* @__PURE__ */ D(u, {
+			cell: (e) => /* @__PURE__ */ D(l, {
 				row: e,
 				flags: t,
 				tApp: r
@@ -42,38 +41,34 @@ var pe = "store-or-network", me = (e, t, n, r) => {
 	}
 	let o = 0;
 	i && (o = t.length);
-	let s = m(o), c = p(n), d = 0;
+	let s = p(o), u = f(n), d = 0;
 	i && (d = 1);
-	let f = a.length - d - 1, h = a.slice(d, d + Math.max(0, f)).map((e) => y(e, "1fr")).join(" "), g = "";
-	return g = i ? `${s}px ${h} ${c}px` : `${h} ${c}px`, {
+	let m = a.length - d - 1, h = a.slice(d, d + Math.max(0, m)).map((e) => v(e, "1fr")).join(" "), g = "";
+	return g = i ? `${s}px ${h} ${u}px` : `${h} ${u}px`, {
 		columns: a,
 		gridTemplateColumns: g
 	};
-}, P = ({ config: a, prepared: s }) => {
-	let { t: c } = O(), { t: l } = e(), { entities: u } = t(), [p, m] = w(null), h = de(), _ = a.list, y = a.listDefaults ?? _.defaultState ?? {
+}, P = ({ config: i, prepared: o }) => {
+	let { t: s } = O(), { t: c } = e(), [l, f] = C(null), p = j(), m = i.list, g = i.listDefaults ?? m.defaultState ?? {
 		where: null,
 		sort: null
-	}, j = ue(_.query, s.query), M = A(_.fragment, j), P = S(() => _.getRows(M).map((e) => _.toRow(e)), [M, _]), F = S(() => _.getNextCursor?.(j) ?? null, [_, j]), [I, L] = w(P), [R, z] = w(F), [B, V] = w(!1), [H, U] = w(!1), [he, W] = w(!1);
-	x(() => {
-		L(P), z(F);
-	}, [F, P]);
-	let { columns: G, gridTemplateColumns: ge } = S(() => {
-		let e = r(_.columns, {
-			tApp: c,
-			t: l,
-			resolveEntityHref: (e, t) => {
-				let n = u[e];
-				return n == null ? null : n.routes.detail(t);
-			}
-		}), t = f({
-			ariaLabel: l("actions.view"),
-			fallback: l("common.notAvailable"),
+	}, v = ue(m.query, o.query), A = le(m.fragment, v), M = x(() => m.getRows(A).map((e) => m.toRow(e)), [A, m]), P = x(() => m.getNextCursor?.(v) ?? null, [m, v]), [F, I] = C(M), [L, R] = C(P), [z, B] = C(!1), [V, H] = C(!1), [me, U] = C(!1);
+	b(() => {
+		I(M), R(P);
+	}, [P, M]);
+	let { columns: W, gridTemplateColumns: he } = x(() => {
+		let e = n(m.columns, {
+			tApp: s,
+			t: c
+		}), t = d({
+			ariaLabel: c("actions.view"),
+			fallback: c("common.notAvailable"),
 			className: re,
-			resolveDetailHref: (e) => a.routes.detail(e),
+			resolveDetailHref: (e) => i.routes.detail(e),
 			renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ D(se.Actions, { children: /* @__PURE__ */ D("span", {
 				className: ne,
 				title: t,
-				children: /* @__PURE__ */ D(E, {
+				children: /* @__PURE__ */ D(T, {
 					to: e,
 					variant: "icon",
 					size: "small",
@@ -85,178 +80,173 @@ var pe = "store-or-network", me = (e, t, n, r) => {
 				})
 			}) })
 		});
-		return me([...e, t], _.rowFlags, 1, c);
+		return pe([...e, t], m.rowFlags, 1, s);
 	}, [
-		a.routes,
-		_.columns,
-		_.rowFlags,
-		u,
-		l,
-		c
-	]), K = b((e) => _.getRowId(e), [_]), { state: q, pushState: _e } = d(a), J = q.sort ?? y.sort, { pageSize: Y } = fe, ve = b((e) => _.buildQueryVariables(e), [_]), X = C(0), ye = C(N({
-		where: y.where,
-		sort: y.sort,
-		count: Y
-	})), Z = b(async (e) => {
-		let t = X.current + 1;
-		X.current = t, e.mode === "append" ? V(!0) : U(!0), W(!1);
+		i.routes,
+		m.columns,
+		m.rowFlags,
+		c,
+		s
+	]), G = y((e) => m.getRowId(e), [m]), { state: K, pushState: ge } = u(i), q = K.sort ?? g.sort, { pageSize: J } = de, _e = y((e) => m.buildQueryVariables(e), [m]), Y = S(0), ve = S(N({
+		where: g.where,
+		sort: g.sort,
+		count: J
+	})), X = y(async (e) => {
+		let t = Y.current + 1;
+		Y.current = t, e.mode === "append" ? B(!0) : H(!0), U(!1);
 		try {
-			let n = ve({
+			let n = _e({
 				where: e.where,
 				sort: e.sort,
 				count: e.count,
 				cursor: e.cursor
-			}), r = await k(h, _.query, n, { fetchPolicy: pe }).toPromise();
-			if (r == null || X.current !== t) return;
-			let i = _.getRows(r).map((e) => _.toRow(e));
-			L((t) => e.mode === "append" ? [...t, ...i] : i), z(_.getNextCursor?.(r) ?? null);
+			}), r = await k(p, m.query, n, { fetchPolicy: fe }).toPromise();
+			if (r == null || Y.current !== t) return;
+			let i = m.getRows(r).map((e) => m.toRow(e));
+			I((t) => e.mode === "append" ? [...t, ...i] : i), R(m.getNextCursor?.(r) ?? null);
 		} catch {
-			X.current === t && W(!0);
+			Y.current === t && U(!0);
 		} finally {
-			e.mode === "append" ? V(!1) : U(!1);
+			e.mode === "append" ? B(!1) : H(!1);
 		}
 	}, [
-		ve,
-		h,
-		_
+		_e,
+		p,
+		m
 	]);
-	x(() => {
+	b(() => {
 		let e = N({
-			where: q.where,
-			sort: J,
-			count: Y
+			where: K.where,
+			sort: q,
+			count: J
 		});
-		ye.current !== e && (ye.current = e, Z({
-			where: q.where,
-			sort: J,
-			count: Y,
+		ve.current !== e && (ve.current = e, X({
+			where: K.where,
+			sort: q,
+			count: J,
 			cursor: null,
 			mode: "reset"
 		}).catch(() => {
-			W(!0);
+			U(!0);
 		}));
 	}, [
-		Y,
 		J,
-		Z,
-		q.where
+		q,
+		X,
+		K.where
 	]);
-	let Q = b(() => {
-		H || Z({
-			where: q.where,
-			sort: J,
-			count: Y,
+	let Z = y(() => {
+		V || X({
+			where: K.where,
+			sort: q,
+			count: J,
 			cursor: null,
 			mode: "reset"
 		}).catch(() => {
-			W(!0);
+			U(!0);
 		});
 	}, [
-		H,
-		Y,
+		V,
 		J,
-		Z,
-		q.where
-	]), be = i({
-		hasNext: R != null,
-		isLoadingNext: B,
+		q,
+		X,
+		K.where
+	]), ye = r({
+		hasNext: L != null,
+		isLoadingNext: z,
 		loadNext: (e) => {
-			R != null && Z({
-				where: q.where,
-				sort: J,
+			L != null && X({
+				where: K.where,
+				sort: q,
 				count: e,
-				cursor: R,
+				cursor: L,
 				mode: "append"
 			}).catch(() => {
-				W(!0);
+				U(!0);
 			});
 		},
-		count: Y
-	}), $ = S(() => a.listActions ?? [], [a.listActions]), xe = S(() => $.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [$]), Se = S(() => {
-		if (xe.length !== 0) return /* @__PURE__ */ D("div", {
+		count: J
+	}), Q = x(() => i.listActions ?? [], [i.listActions]), be = x(() => Q.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [Q]), xe = x(() => {
+		if (be.length !== 0) return /* @__PURE__ */ D("div", {
 			className: ie,
-			children: xe.map((e, t) => {
-				let { variant: n } = e, r = v(e.label, c), i = r;
-				e.ariaLabel != null && (i = v(e.ariaLabel, c));
-				let a = te(n, t), o = e.size ?? "small", s = e.isDisabled?.(null) === !0;
-				return ee(e) ? /* @__PURE__ */ D(E, {
+			children: be.map((e, t) => {
+				let { variant: n } = e, r = _(e.label, s), i = r;
+				e.ariaLabel != null && (i = _(e.ariaLabel, s));
+				let a = te(n, t), o = e.size ?? "small", c = e.isDisabled?.(null) === !0;
+				return ee(e) ? /* @__PURE__ */ D(T, {
 					to: e.to(null),
 					variant: a,
 					size: o,
-					isDisabled: s,
+					isDisabled: c,
 					"aria-label": i,
 					children: r
-				}, e.id) : g(e) ? /* @__PURE__ */ D(T, {
+				}, e.id) : h(e) ? /* @__PURE__ */ D(w, {
 					type: "button",
 					variant: a,
 					size: o,
-					disabled: s,
+					disabled: c,
 					onClick: () => {
-						m(e.id);
+						f(e.id);
 					},
 					"aria-label": i,
 					children: r
 				}, e.id) : null;
 			})
 		});
-	}, [c, xe]), Ce = $.find((e) => e.id === p), we = null;
-	return he && (we = /* @__PURE__ */ D(oe, {
+	}, [s, be]), $ = Q.find((e) => e.id === l), Se = null;
+	return me && (Se = /* @__PURE__ */ D(oe, {
 		tone: "danger",
-		title: l("list.errors.title"),
-		actions: /* @__PURE__ */ D(T, {
+		title: c("list.errors.title"),
+		actions: /* @__PURE__ */ D(w, {
 			type: "button",
 			variant: "secondary",
 			size: "small",
-			onClick: Q,
-			children: l("list.actions.retry")
+			onClick: Z,
+			children: c("list.actions.retry")
 		}),
 		onDismiss: () => {
-			W(!1);
+			U(!1);
 		},
-		children: l("list.errors.fetchFailed")
-	})), /* @__PURE__ */ le(ce, { children: [/* @__PURE__ */ D(o, {
-		config: a,
-		state: q,
-		pushState: _e,
-		headerActions: Se,
-		rows: I,
-		columns: G,
-		gridTemplateColumns: ge,
-		getRowId: K,
-		hasNextPage: R != null,
-		isLoadingMore: B,
-		isRefreshing: H,
-		onLoadMore: be,
-		onRefresh: Q,
+		children: c("list.errors.fetchFailed")
+	})), /* @__PURE__ */ ce(E, { children: [/* @__PURE__ */ D(a, {
+		config: i,
+		state: K,
+		pushState: ge,
+		headerActions: xe,
+		rows: F,
+		columns: W,
+		gridTemplateColumns: he,
+		getRowId: G,
+		hasNextPage: L != null,
+		isLoadingMore: z,
+		isRefreshing: V,
+		onLoadMore: ye,
+		onRefresh: Z,
 		totalCount: null,
-		statusBanner: we
-	}), Ce != null && g(Ce) && /* @__PURE__ */ D(n, {
+		statusBanner: Se
+	}), $ != null && h($) && /* @__PURE__ */ D(t, {
 		isOpen: !0,
-		action: Ce,
+		action: $,
 		node: null,
 		onClose: () => {
-			m(null);
+			f(null);
 		},
-		onSuccess: Q
+		onSuccess: Z
 	})] });
-}, F = ({ config: c, prepared: l, breadcrumb: u }) => {
-	let p = c.list, { t: m } = O(), { t: h } = e(), { entities: _ } = t(), [y, x] = w(null), C = ue(p.query, l.query), { data: oe, loadNext: ce, hasNext: k, isLoadingNext: A, refetch: de } = j(p.fragment, C), N = p.getConnection(oe), pe = S(() => N.edges.map((e) => p.toRow(e.node)), [N.edges, p]), { columns: P, gridTemplateColumns: F } = S(() => {
-		let e = r(p.columns, {
-			tApp: m,
-			t: h,
-			resolveEntityHref: (e, t) => {
-				let n = _[e];
-				return n == null ? null : n.routes.detail(t);
-			}
-		}), t = f({
-			ariaLabel: h("actions.view"),
-			fallback: h("common.notAvailable"),
+}, F = ({ config: s, prepared: c, breadcrumb: l }) => {
+	let f = s.list, { t: p } = O(), { t: m } = e(), [g, v] = C(null), b = ue(f.query, c.query), { data: S, loadNext: oe, hasNext: E, isLoadingNext: k, refetch: le } = A(f.fragment, b), j = f.getConnection(S), N = x(() => j.edges.map((e) => f.toRow(e.node)), [j.edges, f]), { columns: fe, gridTemplateColumns: P } = x(() => {
+		let e = n(f.columns, {
+			tApp: p,
+			t: m
+		}), t = d({
+			ariaLabel: m("actions.view"),
+			fallback: m("common.notAvailable"),
 			className: re,
-			resolveDetailHref: (e) => c.routes.detail(e),
+			resolveDetailHref: (e) => s.routes.detail(e),
 			renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ D(se.Actions, { children: /* @__PURE__ */ D("span", {
 				className: ne,
 				title: t,
-				children: /* @__PURE__ */ D(E, {
+				children: /* @__PURE__ */ D(T, {
 					to: e,
 					variant: "icon",
 					size: "small",
@@ -268,107 +258,106 @@ var pe = "store-or-network", me = (e, t, n, r) => {
 				})
 			}) })
 		});
-		return me([...e, t], p.rowFlags, 1, m);
+		return pe([...e, t], f.rowFlags, 1, p);
 	}, [
-		c.routes,
-		p.columns,
-		p.rowFlags,
-		_,
-		h,
-		m
-	]), I = b((e) => p.getRowId(e), [p]), { state: L, pushState: R } = d(c), z = c.listDefaults ?? p.defaultState ?? {
+		s.routes,
+		f.columns,
+		f.rowFlags,
+		m,
+		p
+	]), F = y((e) => f.getRowId(e), [f]), { state: I, pushState: L } = u(s), R = s.listDefaults ?? f.defaultState ?? {
 		where: null,
 		sort: null
-	}, B = L.sort ?? z.sort, { pageSize: V } = fe, { isRefreshing: H, onRefresh: U } = a({
-		refetch: de,
-		variables: S(() => ({
-			where: L.where,
-			sort: B,
-			count: V,
+	}, z = I.sort ?? R.sort, { pageSize: B } = de, { isRefreshing: V, onRefresh: H } = i({
+		refetch: le,
+		variables: x(() => ({
+			where: I.where,
+			sort: z,
+			count: B,
 			cursor: null
 		}), [
-			V,
 			B,
-			L.where
+			z,
+			I.where
 		]),
 		defaults: {
-			where: z.where,
-			sort: z.sort,
-			count: V,
+			where: R.where,
+			sort: R.sort,
+			count: B,
 			cursor: null
 		},
 		fetchPolicy: M,
-		buildQueryVariables: p.buildQueryVariables
-	}), he = i({
-		hasNext: k,
-		isLoadingNext: A,
-		loadNext: ce,
-		count: V
-	}), W = S(() => c.listActions ?? [], [c.listActions]), G = S(() => W.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [W]), ge = S(() => {
-		if (G.length !== 0) return /* @__PURE__ */ D("div", {
+		buildQueryVariables: f.buildQueryVariables
+	}), me = r({
+		hasNext: E,
+		isLoadingNext: k,
+		loadNext: oe,
+		count: B
+	}), U = x(() => s.listActions ?? [], [s.listActions]), W = x(() => U.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [U]), he = x(() => {
+		if (W.length !== 0) return /* @__PURE__ */ D("div", {
 			className: ie,
-			children: G.map((e, t) => {
-				let { variant: n } = e, r = v(e.label, m), i = r;
-				e.ariaLabel != null && (i = v(e.ariaLabel, m));
+			children: W.map((e, t) => {
+				let { variant: n } = e, r = _(e.label, p), i = r;
+				e.ariaLabel != null && (i = _(e.ariaLabel, p));
 				let a = te(n, t), o = e.size ?? "small", s = e.isDisabled?.(null) === !0;
-				return ee(e) ? /* @__PURE__ */ D(E, {
+				return ee(e) ? /* @__PURE__ */ D(T, {
 					to: e.to(null),
 					variant: a,
 					size: o,
 					isDisabled: s,
 					"aria-label": i,
 					children: r
-				}, e.id) : g(e) ? /* @__PURE__ */ D(T, {
+				}, e.id) : h(e) ? /* @__PURE__ */ D(w, {
 					type: "button",
 					variant: a,
 					size: o,
 					disabled: s,
 					onClick: () => {
-						x(e.id);
+						v(e.id);
 					},
 					"aria-label": i,
 					children: r
 				}, e.id) : null;
 			})
 		});
-	}, [m, G]), K = W.find((e) => e.id === y);
-	return /* @__PURE__ */ le(s, {
-		breadcrumb: u,
-		children: [/* @__PURE__ */ D(o, {
-			config: c,
-			state: L,
-			pushState: R,
-			headerActions: ge,
-			rows: pe,
-			columns: P,
-			gridTemplateColumns: F,
-			getRowId: I,
-			hasNextPage: k,
-			isLoadingMore: A,
-			isRefreshing: H,
-			onLoadMore: he,
-			onRefresh: U,
-			totalCount: N.totalCount ?? null
-		}), K != null && g(K) && /* @__PURE__ */ D(n, {
+	}, [p, W]), G = U.find((e) => e.id === g);
+	return /* @__PURE__ */ ce(o, {
+		breadcrumb: l,
+		children: [/* @__PURE__ */ D(a, {
+			config: s,
+			state: I,
+			pushState: L,
+			headerActions: he,
+			rows: N,
+			columns: fe,
+			gridTemplateColumns: P,
+			getRowId: F,
+			hasNextPage: E,
+			isLoadingMore: k,
+			isRefreshing: V,
+			onLoadMore: me,
+			onRefresh: H,
+			totalCount: j.totalCount ?? null
+		}), G != null && h(G) && /* @__PURE__ */ D(t, {
 			isOpen: !0,
-			action: K,
+			action: G,
 			node: null,
 			onClose: () => {
-				x(null);
+				v(null);
 			},
-			onSuccess: U
+			onSuccess: H
 		})]
 	});
 }, I = ({ entityManifest: e, config: t, prepared: n }) => {
-	let { t: r } = O(), i = c(t, r);
-	return _(t) ? /* @__PURE__ */ D(s, {
+	let { t: r } = O(), i = s(t, r);
+	return g(t) ? /* @__PURE__ */ D(o, {
 		breadcrumb: i,
 		children: /* @__PURE__ */ D(P, {
 			entityManifest: e,
 			config: t,
 			prepared: n
 		})
-	}) : h(t) ? /* @__PURE__ */ D(F, {
+	}) : m(t) ? /* @__PURE__ */ D(F, {
 		entityManifest: e,
 		config: t,
 		prepared: n,