npm - @plumile/backoffice-react - Versions diffs - 0.1.189 → 0.1.190 - Mend

@plumile/backoffice-react 0.1.189 → 0.1.190

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/lib/esm/pages/BackofficeEntityListDataPage.js CHANGED Viewed

@@ -13,80 +13,86 @@ import { jsx as h } from "react/jsx-runtime";
 import { Button as g } from "@plumile/ui/atomic/atoms/button/Button.js";
 import { loadQuery as _, usePreloadedQuery as v } from "react-relay";
 import { BACKOFFICE_LIST_DEFAULTS as y, BACKOFFICE_LIST_REFETCH_POLICY as b } from "@plumile/backoffice-core/constants.js";
+import { stableListVariablesKey as x } from "@plumile/backoffice-core/state/stableKey.js";
 //#region src/pages/BackofficeEntityListDataPage.tsx
-function x({ queryRef: t }) {
-	let { config: a, state: f, pushState: p, headerActions: m, columns: g, gridTemplateColumns: _, getRowId: x, countFetchKey: S, bumpCountFetchKey: C, registerRefresh: w } = c(), T = a.list, { t: E } = e(), D = v(T.query, t), { data: O, loadNext: k, hasNext: A, isLoadingNext: j, refetch: M } = n(T.fragment, D), N = T.getConnection(O), P = d(() => N.edges.map((e) => T.toRow(e.node)), [N.edges, T]), F = a.listDefaults ?? T.defaultState ?? {
+function S({ queryRef: t }) {
+	let { config: a, state: p, pushState: m, headerActions: g, columns: _, gridTemplateColumns: S, getRowId: C, countFetchKey: w, bumpCountFetchKey: T, filterDrawerState: E, registerRefresh: D } = c(), O = a.list, { t: k } = e(), A = v(O.query, t), { data: j, loadNext: M, hasNext: N, isLoadingNext: P, refetch: F } = n(O.fragment, A), I = O.getConnection(j), L = d(() => I.edges.map((e) => O.toRow(e.node)), [I.edges, O]), R = a.listDefaults ?? O.defaultState ?? {
 		where: null,
 		sort: null
-	}, I = f.sort ?? F.sort, { pageSize: L } = y, { isRefreshing: R, onRefresh: z } = o({
-		refetch: M,
-		variables: d(() => ({
-			where: f.where,
-			sort: I,
-			count: L,
-			cursor: null
-		}), [
-			L,
-			I,
-			f.where
-		]),
+	}, z = p.sort ?? R.sort, { pageSize: B } = y, V = d(() => ({
+		where: p.where,
+		sort: z,
+		count: B,
+		cursor: null
+	}), [
+		B,
+		z,
+		p.where
+	]), H = d(() => x(V), [V]), U = f(H), { isRefreshing: W, onRefresh: G } = o({
+		refetch: F,
+		variables: V,
 		defaults: {
-			where: F.where,
-			sort: F.sort,
-			count: L,
+			where: R.where,
+			sort: R.sort,
+			count: B,
 			cursor: null
 		},
 		fetchPolicy: b,
-		buildQueryVariables: T.buildQueryVariables
-	}), B = l(() => {
-		C(), z();
-	}, [C, z]);
-	u(() => (w(B), () => {
-		w(null);
-	}), [B, w]);
-	let V = s({
-		hasNext: A,
-		isLoadingNext: j,
-		loadNext: k,
-		count: L
-	}), H = /* @__PURE__ */ h("span", { children: E("common.loading") });
-	return P.length > 0 && (H = /* @__PURE__ */ h("span", { children: E("list.loaded", { count: P.length }) })), /* @__PURE__ */ h(i, {
+		buildQueryVariables: O.buildQueryVariables
+	});
+	u(() => {
+		U.current !== H && (U.current = H, T());
+	}, [T, H]);
+	let K = l(() => {
+		T(), G();
+	}, [T, G]);
+	u(() => (D(K), () => {
+		D(null);
+	}), [K, D]);
+	let q = s({
+		hasNext: N,
+		isLoadingNext: P,
+		loadNext: M,
+		count: B
+	}), J = /* @__PURE__ */ h("span", { children: k("common.loading") });
+	return L.length > 0 && (J = /* @__PURE__ */ h("span", { children: k("list.loaded", { count: L.length }) })), /* @__PURE__ */ h(i, {
 		config: a,
-		state: f,
-		pushState: p,
-		headerActions: m,
-		rows: P,
-		columns: g,
-		gridTemplateColumns: _,
-		getRowId: x,
-		hasNextPage: A,
-		isLoadingMore: j,
-		isRefreshing: R,
-		onLoadMore: V,
-		onRefresh: B,
+		state: p,
+		pushState: m,
+		headerActions: g,
+		rows: L,
+		columns: _,
+		gridTemplateColumns: S,
+		getRowId: C,
+		hasNextPage: N,
+		isLoadingMore: P,
+		isRefreshing: W,
+		onLoadMore: q,
+		onRefresh: K,
 		totalCount: null,
 		loadedCountLabel: /* @__PURE__ */ h(r, {
-			count: T.count,
-			where: f.where,
-			fetchKey: S,
-			loadingFallback: H,
-			children: (e) => /* @__PURE__ */ h("span", { children: E("list.showing", {
-				shown: P.length,
+			count: O.count,
+			where: p.where,
+			fetchKey: w,
+			loadingFallback: J,
+			children: (e) => /* @__PURE__ */ h("span", { children: k("list.showing", {
+				shown: L.length,
 				total: e
 			}) })
-		})
+		}),
+		filterDrawerState: E
 	});
 }
-var S = ({ prepared: n }) => {
-	let { config: r, state: o, pushState: s, headerActions: d, columns: v, gridTemplateColumns: b, getRowId: S } = c(), C = a(), { t: w } = e(), [T, E] = p(() => n.query), D = f(null), O = l(() => {
-		D.current?.dispose(), D.current = null;
+var C = ({ prepared: n }) => {
+	let { config: r, state: o, pushState: s, headerActions: d, columns: v, gridTemplateColumns: b, getRowId: x, filterDrawerState: C } = c(), w = a(), { t: T } = e(), [E, D] = p(() => n.query), O = f(null), k = l(() => {
+		O.current?.dispose(), O.current = null;
 	}, []);
 	u(() => {
-		O(), E(n.query);
-	}, [O, n.query]), u(() => () => {
-		O();
-	}, [O]);
-	let k = l(() => {
+		k(), D(n.query);
+	}, [k, n.query]), u(() => () => {
+		k();
+	}, [k]);
+	let A = l(() => {
 		let e = r.list, t = r.listDefaults ?? e.defaultState ?? {
 			where: null,
 			sort: null
@@ -95,12 +101,12 @@ var S = ({ prepared: n }) => {
 			sort: o.sort ?? t.sort,
 			count: n,
 			cursor: null
-		}, a = e.buildQueryVariables(i), s = _(C, e.query, a, { fetchPolicy: "network-only" });
-		O(), D.current = s, E(s);
+		}, a = e.buildQueryVariables(i), s = _(w, e.query, a, { fetchPolicy: "network-only" });
+		k(), O.current = s, D(s);
 	}, [
 		r,
-		O,
-		C,
+		k,
+		w,
 		o.sort,
 		o.where
 	]);
@@ -113,34 +119,35 @@ var S = ({ prepared: n }) => {
 			rows: [],
 			columns: v,
 			gridTemplateColumns: b,
-			getRowId: S,
+			getRowId: x,
 			hasNextPage: !1,
 			isLoadingMore: !1,
 			isRefreshing: !1,
 			onLoadMore: () => {},
 			onRefresh: () => {
-				e(), k();
+				e(), A();
 			},
 			totalCount: null,
+			filterDrawerState: C,
 			emptyState: /* @__PURE__ */ h(m, {
 				tone: "danger",
-				title: w("list.errors.title"),
+				title: T("list.errors.title"),
 				actions: /* @__PURE__ */ h(g, {
 					type: "button",
 					variant: "secondary",
 					size: "small",
 					onClick: () => {
-						e(), k();
+						e(), A();
 					},
-					children: w("list.actions.retry")
+					children: T("list.actions.retry")
 				}),
-				children: w("list.errors.tableFailed")
+				children: T("list.errors.tableFailed")
 			})
 		}),
-		children: /* @__PURE__ */ h(x, { queryRef: T })
+		children: /* @__PURE__ */ h(S, { queryRef: E })
 	});
 };
 //#endregion
-export { S as BackofficeEntityListDataPage, S as default };
+export { C as BackofficeEntityListDataPage, C as default };
 //# sourceMappingURL=BackofficeEntityListDataPage.js.map

package/lib/esm/pages/BackofficeEntityListDataPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BackofficeEntityListDataPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListDataPage.tsx"],"sourcesContent":["import {\n type JSX,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { loadQuery, usePreloadedQuery } from 'react-relay';\nimport type { OperationType } from 'relay-runtime';\nimport {\n BACKOFFICE_LIST_DEFAULTS,\n BACKOFFICE_LIST_REFETCH_POLICY,\n} from '@plumile/backoffice-core/constants.js';\nimport type { BackofficePreparedListDataRoute } from '@plumile/backoffice-core/types.js';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { InlineBanner } from '@plumile/ui/components/feedback/InlineBanner.js';\n\nimport { BackofficeErrorBoundary } from '../components/backoffice/errors/BackofficeErrorBoundary.js';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { BackofficeLazyEntityCountLabel } from '../components/backoffice/refs/BackofficeLazyEntityCount.js';\nimport { useBackofficeLoadMore } from '../hooks/useBackofficeLoadMore.js';\nimport { useBackofficeListRefetch } from '../hooks/useBackofficeListRefetch.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePaginationFragment } from '../relay/typedRelayHooks.js';\nimport { useRelayEnvironment } from '../relay/useRelayEnvironment.js';\nimport { useBackofficeEntityListRouteContext } from './BackofficeEntityListRouteContext.js';\n\nexport type BackofficeEntityListDataPageProps = {\n prepared: BackofficePreparedListDataRoute;\n};\n\ntype BackofficeEntityConnectionListDataProps = {\n queryRef: BackofficePreparedListDataRoute['query'];\n};\n\n/*\n Renders the Relay-backed row data under the list layout route boundary.\n */\nfunction BackofficeEntityConnectionListData({\n queryRef,\n}: BackofficeEntityConnectionListDataProps): JSX.Element \| null {\n const {\n config,\n state,\n pushState,\n headerActions,\n columns,\n gridTemplateColumns,\n getRowId,\n countFetchKey,\n bumpCountFetchKey,\n registerRefresh,\n } = useBackofficeEntityListRouteContext();\n const listConfig = config.list;\n const { t } = useBackofficeReactTranslation();\n\n const queryData = usePreloadedQuery(listConfig.query, queryRef);\n const {\n data: fragmentData,\n loadNext,\n hasNext,\n isLoadingNext,\n refetch,\n } = useBackofficePaginationFragment<OperationType, unknown, unknown>(\n listConfig.fragment,\n queryData,\n );\n\n const connection = listConfig.getConnection(fragmentData);\n\n const rows = useMemo(() => {\n return connection.edges.map((edge) => {\n return listConfig.toRow(edge.node);\n });\n }, [connection.edges, listConfig]);\n\n const listDefaults = config.listDefaults ??\n listConfig.defaultState ?? { where: null, sort: null };\n const resolvedSort = state.sort ?? listDefaults.sort;\n const { pageSize } = BACKOFFICE_LIST_DEFAULTS;\n\n const baseVariables = useMemo(() => {\n return {\n where: state.where,\n sort: resolvedSort,\n count: pageSize,\n cursor: null,\n };\n }, [pageSize, resolvedSort, state.where]);\n\n const { isRefreshing, onRefresh } = useBackofficeListRefetch({\n refetch,\n variables: baseVariables,\n defaults: {\n where: listDefaults.where,\n sort: listDefaults.sort,\n count: pageSize,\n cursor: null,\n },\n fetchPolicy: BACKOFFICE_LIST_REFETCH_POLICY,\n buildQueryVariables: listConfig.buildQueryVariables,\n });\n\n const handleRefresh = useCallback(() => {\n bumpCountFetchKey();\n onRefresh();\n }, [bumpCountFetchKey, onRefresh]);\n\n useEffect(() => {\n registerRefresh(handleRefresh);\n return () => {\n registerRefresh(null);\n };\n }, [handleRefresh, registerRefresh]);\n\n const handleLoadMore = useBackofficeLoadMore({\n hasNext,\n isLoadingNext,\n loadNext,\n count: pageSize,\n });\n\n let loadedCountFallback: JSX.Element = <span>{t('common.loading')}</span>;\n if (rows.length > 0) {\n loadedCountFallback = (\n <span>\n {t('list.loaded', {\n count: rows.length,\n })}\n </span>\n );\n }\n const loadedCountLabel = (\n <BackofficeLazyEntityCountLabel\n count={listConfig.count}\n where={state.where}\n fetchKey={countFetchKey}\n loadingFallback={loadedCountFallback}\n >\n {(totalCount) => {\n return (\n <span>\n {t('list.showing', {\n shown: rows.length,\n total: totalCount,\n })}\n </span>\n );\n }}\n </BackofficeLazyEntityCountLabel>\n );\n\n return (\n <BackofficeEntityListScaffold\n config={config}\n state={state}\n pushState={pushState}\n headerActions={headerActions}\n rows={rows}\n columns={columns}\n gridTemplateColumns={gridTemplateColumns}\n getRowId={getRowId}\n hasNextPage={hasNext}\n isLoadingMore={isLoadingNext}\n isRefreshing={isRefreshing}\n onLoadMore={handleLoadMore}\n onRefresh={handleRefresh}\n totalCount={null}\n loadedCountLabel={loadedCountLabel}\n />\n );\n}\n\nexport const BackofficeEntityListDataPage = ({\n prepared,\n}: BackofficeEntityListDataPageProps): JSX.Element \| null => {\n const {\n config,\n state,\n pushState,\n headerActions,\n columns,\n gridTemplateColumns,\n getRowId,\n } = useBackofficeEntityListRouteContext();\n const relayEnvironment = useRelayEnvironment();\n const { t } = useBackofficeReactTranslation();\n const [queryRef, setQueryRef] = useState(() => {\n return prepared.query;\n });\n const ownedQueryRef = useRef<BackofficePreparedListDataRoute['query'] \| null>(\n null,\n );\n\n const disposeOwnedQueryRef = useCallback(() => {\n ownedQueryRef.current?.dispose();\n ownedQueryRef.current = null;\n }, []);\n\n useEffect(() => {\n disposeOwnedQueryRef();\n setQueryRef(prepared.query);\n }, [disposeOwnedQueryRef, prepared.query]);\n\n useEffect(() => {\n return () => {\n disposeOwnedQueryRef();\n };\n }, [disposeOwnedQueryRef]);\n\n const reloadInitialQuery = useCallback(() => {\n const listConfig = config.list;\n const listDefaults = config.listDefaults ??\n listConfig.defaultState ?? { where: null, sort: null };\n const { pageSize } = BACKOFFICE_LIST_DEFAULTS;\n const variablesBase = {\n where: state.where,\n sort: state.sort ?? listDefaults.sort,\n count: pageSize,\n cursor: null,\n };\n const variables = listConfig.buildQueryVariables(variablesBase);\n const nextQueryRef = loadQuery<OperationType>(\n relayEnvironment,\n listConfig.query,\n variables,\n {\n fetchPolicy: 'network-only',\n },\n );\n disposeOwnedQueryRef();\n ownedQueryRef.current = nextQueryRef;\n setQueryRef(nextQueryRef);\n }, [config, disposeOwnedQueryRef, relayEnvironment, state.sort, state.where]);\n\n return (\n <BackofficeErrorBoundary\n fallback={({ reset }) => {\n return (\n <BackofficeEntityListScaffold\n config={config}\n state={state}\n pushState={pushState}\n headerActions={headerActions}\n rows={[]}\n columns={columns}\n gridTemplateColumns={gridTemplateColumns}\n getRowId={getRowId}\n hasNextPage={false}\n isLoadingMore={false}\n isRefreshing={false}\n onLoadMore={() => {}}\n onRefresh={() => {\n reset();\n reloadInitialQuery();\n }}\n totalCount={null}\n emptyState={\n <InlineBanner\n tone=\"danger\"\n title={t('list.errors.title')}\n actions={\n <Button\n type=\"button\"\n variant=\"secondary\"\n size=\"small\"\n onClick={() => {\n reset();\n reloadInitialQuery();\n }}\n >\n {t('list.actions.retry')}\n </Button>\n }\n >\n {t('list.errors.tableFailed')}\n </InlineBanner>\n }\n />\n );\n }}\n >\n <BackofficeEntityConnectionListData queryRef={queryRef} />\n </BackofficeErrorBoundary>\n );\n};\n\nexport default BackofficeEntityListDataPage;\n"],"mappings":";;;;;;;;;;;;;;;;AAuCA,SAAS,EAAmC,EAC1C,eAC8D;CAC9D,IAAM,EACJ,WACA,UACA,cACA,kBACA,YACA,wBACA,aACA,kBACA,sBACA,uBACE,EAAoC,GAClC,IAAa,EAAO,MACpB,EAAE,SAAM,EAA8B,GAEtC,IAAY,EAAkB,EAAW,OAAO,CAAQ,GACxD,EACJ,MAAM,GACN,aACA,YACA,kBACA,eACE,EACF,EAAW,UACX,CACF,GAEM,IAAa,EAAW,cAAc,CAAY,GAElD,IAAO,QACJ,EAAW,MAAM,KAAK,MACpB,EAAW,MAAM,EAAK,IAAI,CAClC,GACA,CAAC,EAAW,OAAO,CAAU,CAAC,GAE3B,IAAe,EAAO,gBAC1B,EAAW,gBAAgB;EAAE,OAAO;EAAM,MAAM;CAAK,GACjD,IAAe,EAAM,QAAQ,EAAa,MAC1C,EAAE,gBAAa,GAWf,EAAE,iBAAc,iBAAc,EAAyB;EAC3D;EACA,WAXoB,SACb;GACL,OAAO,EAAM;GACb,MAAM;GACN,OAAO;GACP,QAAQ;EACV,IACC;GAAC;GAAU;GAAc,EAAM;EAAK,CAI1B;EACX,UAAU;GACR,OAAO,EAAa;GACpB,MAAM,EAAa;GACnB,OAAO;GACP,QAAQ;EACV;EACA,aAAa;EACb,qBAAqB,EAAW;CAClC,CAAC,GAEK,IAAgB,QAAkB;EAEtC,AADA,EAAkB,GAClB,EAAU;CACZ,GAAG,CAAC,GAAmB,CAAS,CAAC;CAEjC,SACE,EAAgB,CAAa,SAChB;EACX,EAAgB,IAAI;CACtB,IACC,CAAC,GAAe,CAAe,CAAC;CAEnC,IAAM,IAAiB,EAAsB;EAC3C;EACA;EACA;EACA,OAAO;CACT,CAAC,GAEG,IAAmC,kBAAC,QAAD,EAAA,UAAO,EAAE,gBAAgB,EAAQ,CAAA;CA8BxE,OA7BI,EAAK,SAAS,MAChB,IACE,kBAAC,QAAD,EAAA,UACG,EAAE,eAAe,EAChB,OAAO,EAAK,OACd,CAAC,EACG,CAAA,IAwBR,kBAAC,GAAD;EACU;EACD;EACI;EACI;EACT;EACG;EACY;EACX;EACV,aAAa;EACb,eAAe;EACD;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACM,kBAnCpB,kBAAC,GAAD;GACE,OAAO,EAAW;GAClB,OAAO,EAAM;GACb,UAAU;GACV,iBAAiB;cAEf,MAEE,kBAAC,QAAD,EAAA,UACG,EAAE,gBAAgB;IACjB,OAAO,EAAK;IACZ,OAAO;GACT,CAAC,EACG,CAAA;EAGoB,CAmBZ;CACnB,CAAA;AAEL;AAEA,IAAa,KAAgC,EAC3C,kBAC2D;CAC3D,IAAM,EACJ,WACA,UACA,cACA,kBACA,YACA,wBACA,gBACE,EAAoC,GAClC,IAAmB,EAAoB,GACvC,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAU,KAAe,QACvB,EAAS,KACjB,GACK,IAAgB,EACpB,IACF,GAEM,IAAuB,QAAkB;EAE7C,AADA,EAAc,SAAS,QAAQ,GAC/B,EAAc,UAAU;CAC1B,GAAG,CAAC,CAAC;CAOL,AALA,QAAgB;EAEd,AADA,EAAqB,GACrB,EAAY,EAAS,KAAK;CAC5B,GAAG,CAAC,GAAsB,EAAS,KAAK,CAAC,GAEzC,cACe;EACX,EAAqB;CACvB,GACC,CAAC,CAAoB,CAAC;CAEzB,IAAM,IAAqB,QAAkB;EAC3C,IAAM,IAAa,EAAO,MACpB,IAAe,EAAO,gBAC1B,EAAW,gBAAgB;GAAE,OAAO;GAAM,MAAM;EAAK,GACjD,EAAE,gBAAa,GACf,IAAgB;GACpB,OAAO,EAAM;GACb,MAAM,EAAM,QAAQ,EAAa;GACjC,OAAO;GACP,QAAQ;EACV,GACM,IAAY,EAAW,oBAAoB,CAAa,GACxD,IAAe,EACnB,GACA,EAAW,OACX,GACA,EACE,aAAa,eACf,CACF;EAGA,AAFA,EAAqB,GACrB,EAAc,UAAU,GACxB,EAAY,CAAY;CAC1B,GAAG;EAAC;EAAQ;EAAsB;EAAkB,EAAM;EAAM,EAAM;CAAK,CAAC;CAE5E,OACE,kBAAC,GAAD;EACE,WAAW,EAAE,eAET,kBAAC,GAAD;GACU;GACD;GACI;GACI;GACf,MAAM,CAAC;GACE;GACY;GACX;GACV,aAAa;GACb,eAAe;GACf,cAAc;GACd,kBAAkB,CAAC;GACnB,iBAAiB;IAEf,AADA,EAAM,GACN,EAAmB;GACrB;GACA,YAAY;GACZ,YACE,kBAAC,GAAD;IACE,MAAK;IACL,OAAO,EAAE,mBAAmB;IAC5B,SACE,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,eAAe;MAEb,AADA,EAAM,GACN,EAAmB;KACrB;eAEC,EAAE,oBAAoB;IACjB,CAAA;cAGT,EAAE,yBAAyB;GAChB,CAAA;EAEjB,CAAA;YAIL,kBAAC,GAAD,EAA8C,YAAW,CAAA;CAClC,CAAA;AAE7B"}
1	+ {"version":3,"file":"BackofficeEntityListDataPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListDataPage.tsx"],"sourcesContent":["import {\n type JSX,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { loadQuery, usePreloadedQuery } from 'react-relay';\nimport type { OperationType } from 'relay-runtime';\nimport {\n BACKOFFICE_LIST_DEFAULTS,\n BACKOFFICE_LIST_REFETCH_POLICY,\n} from '@plumile/backoffice-core/constants.js';\nimport { stableListVariablesKey } from '@plumile/backoffice-core/state/stableKey.js';\nimport type { BackofficePreparedListDataRoute } from '@plumile/backoffice-core/types.js';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { InlineBanner } from '@plumile/ui/components/feedback/InlineBanner.js';\n\nimport { BackofficeErrorBoundary } from '../components/backoffice/errors/BackofficeErrorBoundary.js';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { BackofficeLazyEntityCountLabel } from '../components/backoffice/refs/BackofficeLazyEntityCount.js';\nimport { useBackofficeLoadMore } from '../hooks/useBackofficeLoadMore.js';\nimport { useBackofficeListRefetch } from '../hooks/useBackofficeListRefetch.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePaginationFragment } from '../relay/typedRelayHooks.js';\nimport { useRelayEnvironment } from '../relay/useRelayEnvironment.js';\nimport { useBackofficeEntityListRouteContext } from './BackofficeEntityListRouteContext.js';\n\nexport type BackofficeEntityListDataPageProps = {\n prepared: BackofficePreparedListDataRoute;\n};\n\ntype BackofficeEntityConnectionListDataProps = {\n queryRef: BackofficePreparedListDataRoute['query'];\n};\n\n/*\n Renders the Relay-backed row data under the list layout route boundary.\n */\nfunction BackofficeEntityConnectionListData({\n queryRef,\n}: BackofficeEntityConnectionListDataProps): JSX.Element \| null {\n const {\n config,\n state,\n pushState,\n headerActions,\n columns,\n gridTemplateColumns,\n getRowId,\n countFetchKey,\n bumpCountFetchKey,\n filterDrawerState,\n registerRefresh,\n } = useBackofficeEntityListRouteContext();\n const listConfig = config.list;\n const { t } = useBackofficeReactTranslation();\n\n const queryData = usePreloadedQuery(listConfig.query, queryRef);\n const {\n data: fragmentData,\n loadNext,\n hasNext,\n isLoadingNext,\n refetch,\n } = useBackofficePaginationFragment<OperationType, unknown, unknown>(\n listConfig.fragment,\n queryData,\n );\n\n const connection = listConfig.getConnection(fragmentData);\n\n const rows = useMemo(() => {\n return connection.edges.map((edge) => {\n return listConfig.toRow(edge.node);\n });\n }, [connection.edges, listConfig]);\n\n const listDefaults = config.listDefaults ??\n listConfig.defaultState ?? { where: null, sort: null };\n const resolvedSort = state.sort ?? listDefaults.sort;\n const { pageSize } = BACKOFFICE_LIST_DEFAULTS;\n\n const baseVariables = useMemo(() => {\n return {\n where: state.where,\n sort: resolvedSort,\n count: pageSize,\n cursor: null,\n };\n }, [pageSize, resolvedSort, state.where]);\n const countVariablesKey = useMemo(() => {\n return stableListVariablesKey(baseVariables);\n }, [baseVariables]);\n const previousCountVariablesKeyRef = useRef(countVariablesKey);\n\n const { isRefreshing, onRefresh } = useBackofficeListRefetch({\n refetch,\n variables: baseVariables,\n defaults: {\n where: listDefaults.where,\n sort: listDefaults.sort,\n count: pageSize,\n cursor: null,\n },\n fetchPolicy: BACKOFFICE_LIST_REFETCH_POLICY,\n buildQueryVariables: listConfig.buildQueryVariables,\n });\n\n useEffect(() => {\n if (previousCountVariablesKeyRef.current === countVariablesKey) {\n return;\n }\n previousCountVariablesKeyRef.current = countVariablesKey;\n bumpCountFetchKey();\n }, [bumpCountFetchKey, countVariablesKey]);\n\n const handleRefresh = useCallback(() => {\n bumpCountFetchKey();\n onRefresh();\n }, [bumpCountFetchKey, onRefresh]);\n\n useEffect(() => {\n registerRefresh(handleRefresh);\n return () => {\n registerRefresh(null);\n };\n }, [handleRefresh, registerRefresh]);\n\n const handleLoadMore = useBackofficeLoadMore({\n hasNext,\n isLoadingNext,\n loadNext,\n count: pageSize,\n });\n\n let loadedCountFallback: JSX.Element = <span>{t('common.loading')}</span>;\n if (rows.length > 0) {\n loadedCountFallback = (\n <span>\n {t('list.loaded', {\n count: rows.length,\n })}\n </span>\n );\n }\n const loadedCountLabel = (\n <BackofficeLazyEntityCountLabel\n count={listConfig.count}\n where={state.where}\n fetchKey={countFetchKey}\n loadingFallback={loadedCountFallback}\n >\n {(totalCount) => {\n return (\n <span>\n {t('list.showing', {\n shown: rows.length,\n total: totalCount,\n })}\n </span>\n );\n }}\n </BackofficeLazyEntityCountLabel>\n );\n\n return (\n <BackofficeEntityListScaffold\n config={config}\n state={state}\n pushState={pushState}\n headerActions={headerActions}\n rows={rows}\n columns={columns}\n gridTemplateColumns={gridTemplateColumns}\n getRowId={getRowId}\n hasNextPage={hasNext}\n isLoadingMore={isLoadingNext}\n isRefreshing={isRefreshing}\n onLoadMore={handleLoadMore}\n onRefresh={handleRefresh}\n totalCount={null}\n loadedCountLabel={loadedCountLabel}\n filterDrawerState={filterDrawerState}\n />\n );\n}\n\nexport const BackofficeEntityListDataPage = ({\n prepared,\n}: BackofficeEntityListDataPageProps): JSX.Element \| null => {\n const {\n config,\n state,\n pushState,\n headerActions,\n columns,\n gridTemplateColumns,\n getRowId,\n filterDrawerState,\n } = useBackofficeEntityListRouteContext();\n const relayEnvironment = useRelayEnvironment();\n const { t } = useBackofficeReactTranslation();\n const [queryRef, setQueryRef] = useState(() => {\n return prepared.query;\n });\n const ownedQueryRef = useRef<BackofficePreparedListDataRoute['query'] \| null>(\n null,\n );\n\n const disposeOwnedQueryRef = useCallback(() => {\n ownedQueryRef.current?.dispose();\n ownedQueryRef.current = null;\n }, []);\n\n useEffect(() => {\n disposeOwnedQueryRef();\n setQueryRef(prepared.query);\n }, [disposeOwnedQueryRef, prepared.query]);\n\n useEffect(() => {\n return () => {\n disposeOwnedQueryRef();\n };\n }, [disposeOwnedQueryRef]);\n\n const reloadInitialQuery = useCallback(() => {\n const listConfig = config.list;\n const listDefaults = config.listDefaults ??\n listConfig.defaultState ?? { where: null, sort: null };\n const { pageSize } = BACKOFFICE_LIST_DEFAULTS;\n const variablesBase = {\n where: state.where,\n sort: state.sort ?? listDefaults.sort,\n count: pageSize,\n cursor: null,\n };\n const variables = listConfig.buildQueryVariables(variablesBase);\n const nextQueryRef = loadQuery<OperationType>(\n relayEnvironment,\n listConfig.query,\n variables,\n {\n fetchPolicy: 'network-only',\n },\n );\n disposeOwnedQueryRef();\n ownedQueryRef.current = nextQueryRef;\n setQueryRef(nextQueryRef);\n }, [config, disposeOwnedQueryRef, relayEnvironment, state.sort, state.where]);\n\n return (\n <BackofficeErrorBoundary\n fallback={({ reset }) => {\n return (\n <BackofficeEntityListScaffold\n config={config}\n state={state}\n pushState={pushState}\n headerActions={headerActions}\n rows={[]}\n columns={columns}\n gridTemplateColumns={gridTemplateColumns}\n getRowId={getRowId}\n hasNextPage={false}\n isLoadingMore={false}\n isRefreshing={false}\n onLoadMore={() => {}}\n onRefresh={() => {\n reset();\n reloadInitialQuery();\n }}\n totalCount={null}\n filterDrawerState={filterDrawerState}\n emptyState={\n <InlineBanner\n tone=\"danger\"\n title={t('list.errors.title')}\n actions={\n <Button\n type=\"button\"\n variant=\"secondary\"\n size=\"small\"\n onClick={() => {\n reset();\n reloadInitialQuery();\n }}\n >\n {t('list.actions.retry')}\n </Button>\n }\n >\n {t('list.errors.tableFailed')}\n </InlineBanner>\n }\n />\n );\n }}\n >\n <BackofficeEntityConnectionListData queryRef={queryRef} />\n </BackofficeErrorBoundary>\n );\n};\n\nexport default BackofficeEntityListDataPage;\n"],"mappings":"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"}

package/lib/esm/pages/BackofficeEntityListPage.js CHANGED Viewed

@@ -7,19 +7,20 @@ import { rowFlagsColumnCell as a } from "../components/backoffice/list/RowFlagsC
 import { RowFlagsCell as o } from "../components/backoffice/list/RowFlagsCell.js";
 import { BackofficeEntityListScaffold as s } from "../components/backoffice/scaffolds/BackofficeEntityListScaffold.js";
 import { useBackofficeListUrlState as c } from "../hooks/useBackofficeListUrlState.js";
-import { BackofficeEntityListRouteProvider as l } from "./BackofficeEntityListRouteContext.js";
-import { buildActionsColumn as u, computeActionsColumnWidthPx as d, computeRowFlagsColumnWidthPx as f, isFormMutationAction as p, isRouteAction as m, resolveActionVariant as h, resolveLabel as g, resolveTrackBySize as _ } from "./BackofficeEntityListPage.helpers.js";
-import { actionTrigger as v, actionsColumnCell as y, headerActions as b } from "./backofficeEntityListPage.css.js";
-import { Suspense as x, useCallback as S, useMemo as C, useRef as w, useState as T } from "react";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { useTranslation as O } from "react-i18next";
-import { Button as k } from "@plumile/ui/atomic/atoms/button/Button.js";
-import A from "@plumile/router/routing/Link.js";
-import { LinkButton as j } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
-import { TableCell as M } from "@plumile/ui/components/data-table/TableCell.js";
-import { EyeSvg as N } from "@plumile/ui/icons/EyeSvg.js";
+import { createBackofficeEntityListUiStateKey as l, useBackofficeListFilterDrawerState as u } from "../provider/BackofficeListUiStateContext.js";
+import { BackofficeEntityListRouteProvider as d } from "./BackofficeEntityListRouteContext.js";
+import { buildActionsColumn as f, computeActionsColumnWidthPx as p, computeRowFlagsColumnWidthPx as m, isFormMutationAction as h, isRouteAction as g, resolveActionVariant as _, resolveLabel as v, resolveTrackBySize as y } from "./BackofficeEntityListPage.helpers.js";
+import { actionTrigger as b, actionsColumnCell as x, headerActions as S } from "./backofficeEntityListPage.css.js";
+import { Suspense as C, useCallback as w, useMemo as T, useRef as E, useState as D } from "react";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { useTranslation as A } from "react-i18next";
+import { Button as j } from "@plumile/ui/atomic/atoms/button/Button.js";
+import M from "@plumile/router/routing/Link.js";
+import { LinkButton as N } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
+import { TableCell as P } from "@plumile/ui/components/data-table/TableCell.js";
+import { EyeSvg as F } from "@plumile/ui/icons/EyeSvg.js";
 //#region src/pages/BackofficeEntityListPage.tsx
-var P = (e, t, n, r) => {
+var I = (e, t, n, r) => {
 	let i = t != null && t.length > 0, s = e;
 	if (i) {
 		let n = [{
@@ -27,7 +28,7 @@ var P = (e, t, n, r) => {
 			header: "",
 			className: a,
 			mobileRole: "badge",
-			cell: (e) => /* @__PURE__ */ E(o, {
+			cell: (e) => /* @__PURE__ */ O(o, {
 				row: e,
 				flags: t,
 				tApp: r
@@ -40,54 +41,54 @@ var P = (e, t, n, r) => {
 	}
 	let c = 0;
 	i && (c = t.length);
-	let l = f(c), u = d(n), p = 0;
-	i && (p = 1);
-	let m = s.length - p - 1, h = s.slice(p, p + Math.max(0, m)).map((e) => _(e, "1fr")).join(" "), g = "";
+	let l = m(c), u = p(n), d = 0;
+	i && (d = 1);
+	let f = s.length - d - 1, h = s.slice(d, d + Math.max(0, f)).map((e) => y(e, "1fr")).join(" "), g = "";
 	return g = i ? `${l}px ${h} ${u}px` : `${h} ${u}px`, {
 		columns: s,
 		gridTemplateColumns: g
 	};
-}, F = ({ children: i, config: a, breadcrumb: o }) => {
-	let d = a.list, { t: f } = O(), { t: _ } = e(), [F, I] = T(null), [L, R] = T(0), z = w(null), B = S((e) => {
-		z.current = e;
-	}, []), { columns: V, gridTemplateColumns: H } = C(() => {
-		let e = n(d.columns, {
-			tApp: f,
-			t: _
-		}), t = u({
-			ariaLabel: _("actions.view"),
-			fallback: _("common.notAvailable"),
-			className: y,
+}, L = ({ children: i, config: a, breadcrumb: o }) => {
+	let p = a.list, { t: m } = A(), { t: y } = e(), [L, R] = D(null), [z, B] = D(0), V = E(null), H = w((e) => {
+		V.current = e;
+	}, []), { columns: U, gridTemplateColumns: W } = T(() => {
+		let e = n(p.columns, {
+			tApp: m,
+			t: y
+		}), t = f({
+			ariaLabel: y("actions.view"),
+			fallback: y("common.notAvailable"),
+			className: x,
 			resolveDetailHref: (e) => a.routes.detail(e),
-			renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ E(M.Actions, { children: /* @__PURE__ */ E(A, {
+			renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ O(P.Actions, { children: /* @__PURE__ */ O(M, {
 				to: e,
-				className: v,
+				className: b,
 				"aria-label": t,
 				title: t,
 				preloadOnHover: "code",
-				children: /* @__PURE__ */ E(N, {
+				children: /* @__PURE__ */ O(F, {
 					width: 16,
 					height: 16
 				})
 			}) })
 		});
-		return P([...e, t], d.rowFlags, 1, f);
+		return I([...e, t], p.rowFlags, 1, m);
 	}, [
 		a.routes,
-		d.columns,
-		d.rowFlags,
-		_,
-		f
-	]), U = S((e) => d.getRowId(e), [d]), { state: W, pushState: G } = c(a), K = S(() => {
-		R((e) => e + 1), z.current?.();
-	}, []), q = C(() => a.listActions ?? [], [a.listActions]), J = C(() => q.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [q]), Y = C(() => {
-		if (J.length !== 0) return /* @__PURE__ */ E("div", {
-			className: b,
-			children: J.map((e, t) => {
-				let { variant: n } = e, r = g(e.label, f), i = r;
-				e.ariaLabel != null && (i = g(e.ariaLabel, f));
-				let a = h(n, t), o = e.size ?? "small", s = e.isDisabled?.(null) === !0;
-				return m(e) ? /* @__PURE__ */ E(j, {
+		p.columns,
+		p.rowFlags,
+		y,
+		m
+	]), G = w((e) => p.getRowId(e), [p]), { state: K, pushState: q } = c(a), J = u(T(() => l(a.id), [a.id])), Y = w(() => {
+		B((e) => e + 1), V.current?.();
+	}, []), X = T(() => a.listActions ?? [], [a.listActions]), Z = T(() => X.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [X]), Q = T(() => {
+		if (Z.length !== 0) return /* @__PURE__ */ O("div", {
+			className: S,
+			children: Z.map((e, t) => {
+				let { variant: n } = e, r = v(e.label, m), i = r;
+				e.ariaLabel != null && (i = v(e.ariaLabel, m));
+				let a = _(n, t), o = e.size ?? "small", s = e.isDisabled?.(null) === !0;
+				return g(e) ? /* @__PURE__ */ O(N, {
 					to: e.to(null),
 					variant: a,
 					size: o,
@@ -95,80 +96,83 @@ var P = (e, t, n, r) => {
 					"aria-label": i,
 					preloadOnHover: "code-and-data",
 					children: r
-				}, e.id) : p(e) ? /* @__PURE__ */ E(k, {
+				}, e.id) : h(e) ? /* @__PURE__ */ O(j, {
 					type: "button",
 					variant: a,
 					size: o,
 					disabled: s,
 					onClick: () => {
-						I(e.id);
+						R(e.id);
 					},
 					"aria-label": i,
 					children: r
 				}, e.id) : null;
 			})
 		});
-	}, [f, J]), X = q.find((e) => e.id === F);
-	return /* @__PURE__ */ D(r, {
+	}, [m, Z]), $ = X.find((e) => e.id === L);
+	return /* @__PURE__ */ k(r, {
 		breadcrumb: o,
-		children: [/* @__PURE__ */ E(l, {
-			value: C(() => ({
+		children: [/* @__PURE__ */ O(d, {
+			value: T(() => ({
 				config: a,
-				state: W,
-				pushState: G,
-				headerActions: Y,
-				columns: V,
-				gridTemplateColumns: H,
-				getRowId: U,
-				countFetchKey: L,
+				state: K,
+				pushState: q,
+				headerActions: Q,
+				columns: U,
+				gridTemplateColumns: W,
+				getRowId: G,
+				countFetchKey: z,
+				filterDrawerState: J,
 				bumpCountFetchKey: () => {
-					R((e) => e + 1);
+					B((e) => e + 1);
 				},
-				registerRefresh: B
+				registerRefresh: H
 			}), [
-				V,
-				a,
-				L,
 				U,
-				H,
-				Y,
+				a,
+				z,
+				J,
 				G,
-				B,
-				W
+				W,
+				Q,
+				q,
+				H,
+				K
 			]),
-			children: /* @__PURE__ */ E(x, {
-				fallback: /* @__PURE__ */ E(s, {
+			children: /* @__PURE__ */ O(C, {
+				fallback: /* @__PURE__ */ O(s, {
 					config: a,
-					state: W,
-					pushState: G,
-					headerActions: Y,
+					state: K,
+					pushState: q,
+					headerActions: Q,
 					rows: [],
-					columns: V,
-					gridTemplateColumns: H,
-					getRowId: U,
+					columns: U,
+					gridTemplateColumns: W,
+					getRowId: G,
 					hasNextPage: !1,
 					isLoadingMore: !1,
 					isRefreshing: !1,
 					onLoadMore: () => {},
-					onRefresh: K,
+					onRefresh: Y,
 					totalCount: null,
-					isLoadingInitial: !0
+					isLoadingInitial: !0,
+					filterDrawerState: J
 				}),
 				children: i
 			})
-		}), X != null && p(X) && /* @__PURE__ */ E(t, {
+		}), $ != null && h($) && /* @__PURE__ */ O(t, {
 			isOpen: !0,
-			action: X,
+			action: $,
 			node: null,
 			onClose: () => {
-				I(null);
+				R(null);
 			},
-			onSuccess: K
+			onSuccess: Y
 		})]
 	});
-}, I = ({ children: e, entityManifest: t, config: n }) => {
-	let { t: r } = O();
-	return /* @__PURE__ */ E(F, {
+}, R = ({ children: e, entityManifest: t, config: n }) => {
+	let { t: r } = A();
+	return /* @__PURE__ */ O(L, {
 		children: e,
 		entityManifest: t,
 		config: n,
@@ -176,6 +180,6 @@ var P = (e, t, n, r) => {
 	});
 };
 //#endregion
-export { I as BackofficeEntityListPage, I as default };
+export { R as BackofficeEntityListPage, R as default };
 //# sourceMappingURL=BackofficeEntityListPage.js.map

package/lib/esm/pages/BackofficeEntityListPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BackofficeEntityListPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.tsx"],"sourcesContent":["import {\n Suspense,\n type JSX,\n type ReactNode,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport Link from '@plumile/router/routing/Link.js';\nimport type {\n BackofficeEntityManifestItem,\n BackofficePreparedListLayoutRoute,\n BackofficeRuntimeResolvedListFacetConfig,\n BackofficeRowFlagSpec,\n} from '@plumile/backoffice-core/types.js';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { LinkButton } from '@plumile/ui/atomic/atoms/button/LinkButton.js';\nimport {\n type DataTableColumn,\n type GetRowId,\n} from '@plumile/ui/components/data-table/DataTable.js';\nimport { TableCell } from '@plumile/ui/components/data-table/TableCell.js';\nimport { EyeSvg } from '@plumile/ui/icons/EyeSvg.js';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { LazyBackofficeEntityActionFormDialog } from '../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js';\nimport { buildDataTableColumns } from '../components/backoffice/columns/buildDataTableColumns.js';\nimport { RowFlagsCell } from '../components/backoffice/list/RowFlagsCell.js';\nimport { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport * as pageStyles from './backofficeEntityListPage.css.js';\nimport { rowFlagsColumnCell } from '../components/backoffice/list/RowFlagsCell.css.js';\nimport { BackofficeRightPageLayout } from '../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js';\nimport { buildEntityListBreadcrumb } from '../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js';\nimport { BackofficeEntityListRouteProvider } from './BackofficeEntityListRouteContext.js';\nimport {\n buildActionsColumn,\n computeActionsColumnWidthPx,\n computeRowFlagsColumnWidthPx,\n isFormMutationAction,\n isRouteAction,\n resolveLabel,\n resolveActionVariant,\n resolveTrackBySize,\n type ConnectionListConfig,\n} from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListPageProps = {\n children?: ReactNode;\n entityManifest: BackofficeEntityManifestItem;\n config: BackofficeRuntimeResolvedListFacetConfig;\n prepared: BackofficePreparedListLayoutRoute;\n};\n\nconst applyListEdgeColumns = <Row,>(\n inputColumns: readonly DataTableColumn<Row>[],\n rowFlags: readonly BackofficeRowFlagSpec<Row>[] \| undefined,\n actionCount: number,\n tApp: TFunction,\n): {\n columns: readonly DataTableColumn<Row>[];\n gridTemplateColumns?: string;\n} => {\n const hasFlags = rowFlags != null && rowFlags.length > 0;\n\n let columns = inputColumns;\n if (hasFlags) {\n const flagsColumn: DataTableColumn<Row> = {\n id: '__rowFlags',\n header: '',\n className: rowFlagsColumnCell,\n mobileRole: 'badge',\n cell: (row) => {\n return <RowFlagsCell row={row} flags={rowFlags} tApp={tApp} />;\n },\n };\n\n // Ensure we never pick the flags column as \"primary\".\n const withFlags = [flagsColumn, ...inputColumns];\n const hasPrimary = withFlags.some((col) => {\n return col.isPrimary === true;\n });\n\n columns = withFlags;\n if (!hasPrimary) {\n columns = withFlags.map((col, index) => {\n if (index === 1) {\n return { ...col, isPrimary: true };\n }\n return col;\n });\n }\n }\n\n let flagCount = 0;\n if (hasFlags) {\n flagCount = rowFlags.length;\n }\n const flagsWidthPx = computeRowFlagsColumnWidthPx(flagCount);\n const actionsWidthPx = computeActionsColumnWidthPx(actionCount);\n\n // We always include the right-side \"actions\" column in list pages.\n let leftColumnCount = 0;\n if (hasFlags) {\n leftColumnCount = 1;\n }\n const middleCount = columns.length - leftColumnCount - 1;\n\n const middleTracks = columns\n .slice(leftColumnCount, leftColumnCount + Math.max(0, middleCount))\n .map((column) => {\n return resolveTrackBySize(column as DataTableColumn<unknown>, '1fr');\n })\n .join(' ');\n\n let gridTemplateColumns = '';\n if (hasFlags) {\n gridTemplateColumns = `${flagsWidthPx}px ${middleTracks} ${actionsWidthPx}px`;\n } else {\n gridTemplateColumns = `${middleTracks} ${actionsWidthPx}px`;\n }\n\n return { columns, gridTemplateColumns };\n};\n\nconst BackofficeEntityConnectionListPage = ({\n children,\n config,\n breadcrumb,\n}: Omit<BackofficeEntityListPageProps, 'config' \| 'prepared'> & {\n config: ConnectionListConfig;\n breadcrumb: ReturnType<typeof buildEntityListBreadcrumb>;\n}): JSX.Element \| null => {\n const listConfig = config.list;\n\n const { t: tApp } = useTranslation();\n const { t } = useBackofficeReactTranslation();\n const [activeFormActionId, setActiveFormActionId] = useState<string \| null>(\n null,\n );\n const [countFetchKey, setCountFetchKey] = useState(0);\n const refreshRef = useRef<(() => void) \| null>(null);\n\n const registerRefresh = useCallback((refresh: (() => void) \| null) => {\n refreshRef.current = refresh;\n }, []);\n\n const { columns, gridTemplateColumns } = useMemo((): {\n columns: readonly DataTableColumn<unknown>[];\n gridTemplateColumns?: string;\n } => {\n const baseColumns = buildDataTableColumns(listConfig.columns, {\n tApp,\n t,\n });\n const actionsColumn = buildActionsColumn({\n ariaLabel: t('actions.view'),\n fallback: t('common.notAvailable'),\n className: pageStyles.actionsColumnCell,\n resolveDetailHref: (id) => {\n return config.routes.detail(id);\n },\n renderAction: ({ href, ariaLabel }) => {\n return (\n <TableCell.Actions>\n <Link\n to={href}\n className={pageStyles.actionTrigger}\n aria-label={ariaLabel}\n title={ariaLabel}\n preloadOnHover=\"code\"\n >\n <EyeSvg width={16} height={16} />\n </Link>\n </TableCell.Actions>\n );\n },\n });\n const allColumns = [...baseColumns, actionsColumn];\n return applyListEdgeColumns(allColumns, listConfig.rowFlags, 1, tApp);\n }, [config.routes, listConfig.columns, listConfig.rowFlags, t, tApp]);\n\n const getRowId = useCallback<GetRowId<unknown>>(\n (row) => {\n return listConfig.getRowId(row);\n },\n [listConfig],\n );\n\n const { state, pushState } = useBackofficeListUrlState(config);\n\n const handleRefreshRequest = useCallback(() => {\n setCountFetchKey((current) => {\n return current + 1;\n });\n refreshRef.current?.();\n }, []);\n\n const listActions = useMemo(() => {\n return config.listActions ?? [];\n }, [config.listActions]);\n const visibleActions = useMemo(() => {\n return listActions.filter((action) => {\n if (action.isVisible == null) {\n return true;\n }\n return action.isVisible(null);\n });\n }, [listActions]);\n\n const headerActions = useMemo(() => {\n if (visibleActions.length === 0) {\n return undefined;\n }\n return (\n <div className={pageStyles.headerActions}>\n {visibleActions.map((action, index) => {\n const { variant: actionVariant } = action;\n const label = resolveLabel(action.label, tApp);\n let ariaLabel = label;\n if (action.ariaLabel != null) {\n ariaLabel = resolveLabel(action.ariaLabel, tApp);\n }\n const variant = resolveActionVariant(actionVariant, index);\n const size = action.size ?? 'small';\n const isDisabled = action.isDisabled?.(null) === true;\n\n if (isRouteAction(action)) {\n const href = action.to(null);\n return (\n <LinkButton\n key={action.id}\n to={href}\n variant={variant}\n size={size}\n isDisabled={isDisabled}\n aria-label={ariaLabel}\n preloadOnHover=\"code-and-data\"\n >\n {label}\n </LinkButton>\n );\n }\n\n if (isFormMutationAction(action)) {\n return (\n <Button\n key={action.id}\n type=\"button\"\n variant={variant}\n size={size}\n disabled={isDisabled}\n onClick={() => {\n setActiveFormActionId(action.id);\n }}\n aria-label={ariaLabel}\n >\n {label}\n </Button>\n );\n }\n\n return null;\n })}\n </div>\n );\n }, [tApp, visibleActions]);\n\n const activeFormAction = listActions.find((action) => {\n return action.id === activeFormActionId;\n });\n\n const renderLoadingScaffold = () => {\n return (\n <BackofficeEntityListScaffold\n config={config}\n state={state}\n pushState={pushState}\n headerActions={headerActions}\n rows={[]}\n columns={columns}\n gridTemplateColumns={gridTemplateColumns}\n getRowId={getRowId}\n hasNextPage={false}\n isLoadingMore={false}\n isRefreshing={false}\n onLoadMore={() => {}}\n onRefresh={handleRefreshRequest}\n totalCount={null}\n isLoadingInitial\n />\n );\n };\n\n const contextValue = useMemo(() => {\n return {\n config,\n state,\n pushState,\n headerActions,\n columns,\n gridTemplateColumns,\n getRowId,\n countFetchKey,\n bumpCountFetchKey: () => {\n setCountFetchKey((current) => {\n return current + 1;\n });\n },\n registerRefresh,\n };\n }, [\n columns,\n config,\n countFetchKey,\n getRowId,\n gridTemplateColumns,\n headerActions,\n pushState,\n registerRefresh,\n state,\n ]);\n\n return (\n <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n <BackofficeEntityListRouteProvider value={contextValue}>\n <Suspense fallback={renderLoadingScaffold()}>{children}</Suspense>\n </BackofficeEntityListRouteProvider>\n {activeFormAction != null && isFormMutationAction(activeFormAction) && (\n <LazyBackofficeEntityActionFormDialog\n isOpen\n action={activeFormAction}\n node={null}\n onClose={() => {\n setActiveFormActionId(null);\n }}\n onSuccess={handleRefreshRequest}\n />\n )}\n </BackofficeRightPageLayout>\n );\n};\n\nexport const BackofficeEntityListPage = ({\n children,\n entityManifest,\n config,\n}: BackofficeEntityListPageProps): JSX.Element \| null => {\n const { t: tApp } = useTranslation();\n const breadcrumb = buildEntityListBreadcrumb(config, tApp);\n\n return (\n <BackofficeEntityConnectionListPage\n children={children}\n entityManifest={entityManifest}\n config={config}\n breadcrumb={breadcrumb}\n />\n );\n};\n\nexport default BackofficeEntityListPage;\n"],"mappings":"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"}
1	+ {"version":3,"file":"BackofficeEntityListPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.tsx"],"sourcesContent":["import {\n Suspense,\n type JSX,\n type ReactNode,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport Link from '@plumile/router/routing/Link.js';\nimport type {\n BackofficeEntityManifestItem,\n BackofficePreparedListLayoutRoute,\n BackofficeRuntimeResolvedListFacetConfig,\n BackofficeRowFlagSpec,\n} from '@plumile/backoffice-core/types.js';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { LinkButton } from '@plumile/ui/atomic/atoms/button/LinkButton.js';\nimport {\n type DataTableColumn,\n type GetRowId,\n} from '@plumile/ui/components/data-table/DataTable.js';\nimport { TableCell } from '@plumile/ui/components/data-table/TableCell.js';\nimport { EyeSvg } from '@plumile/ui/icons/EyeSvg.js';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { LazyBackofficeEntityActionFormDialog } from '../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js';\nimport { buildDataTableColumns } from '../components/backoffice/columns/buildDataTableColumns.js';\nimport { RowFlagsCell } from '../components/backoffice/list/RowFlagsCell.js';\nimport { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport {\n createBackofficeEntityListUiStateKey,\n useBackofficeListFilterDrawerState,\n} from '../provider/BackofficeListUiStateContext.js';\nimport * as pageStyles from './backofficeEntityListPage.css.js';\nimport { rowFlagsColumnCell } from '../components/backoffice/list/RowFlagsCell.css.js';\nimport { BackofficeRightPageLayout } from '../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js';\nimport { buildEntityListBreadcrumb } from '../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js';\nimport { BackofficeEntityListRouteProvider } from './BackofficeEntityListRouteContext.js';\nimport {\n buildActionsColumn,\n computeActionsColumnWidthPx,\n computeRowFlagsColumnWidthPx,\n isFormMutationAction,\n isRouteAction,\n resolveLabel,\n resolveActionVariant,\n resolveTrackBySize,\n type ConnectionListConfig,\n} from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListPageProps = {\n children?: ReactNode;\n entityManifest: BackofficeEntityManifestItem;\n config: BackofficeRuntimeResolvedListFacetConfig;\n prepared: BackofficePreparedListLayoutRoute;\n};\n\nconst applyListEdgeColumns = <Row,>(\n inputColumns: readonly DataTableColumn<Row>[],\n rowFlags: readonly BackofficeRowFlagSpec<Row>[] \| undefined,\n actionCount: number,\n tApp: TFunction,\n): {\n columns: readonly DataTableColumn<Row>[];\n gridTemplateColumns?: string;\n} => {\n const hasFlags = rowFlags != null && rowFlags.length > 0;\n\n let columns = inputColumns;\n if (hasFlags) {\n const flagsColumn: DataTableColumn<Row> = {\n id: '__rowFlags',\n header: '',\n className: rowFlagsColumnCell,\n mobileRole: 'badge',\n cell: (row) => {\n return <RowFlagsCell row={row} flags={rowFlags} tApp={tApp} />;\n },\n };\n\n // Ensure we never pick the flags column as \"primary\".\n const withFlags = [flagsColumn, ...inputColumns];\n const hasPrimary = withFlags.some((col) => {\n return col.isPrimary === true;\n });\n\n columns = withFlags;\n if (!hasPrimary) {\n columns = withFlags.map((col, index) => {\n if (index === 1) {\n return { ...col, isPrimary: true };\n }\n return col;\n });\n }\n }\n\n let flagCount = 0;\n if (hasFlags) {\n flagCount = rowFlags.length;\n }\n const flagsWidthPx = computeRowFlagsColumnWidthPx(flagCount);\n const actionsWidthPx = computeActionsColumnWidthPx(actionCount);\n\n // We always include the right-side \"actions\" column in list pages.\n let leftColumnCount = 0;\n if (hasFlags) {\n leftColumnCount = 1;\n }\n const middleCount = columns.length - leftColumnCount - 1;\n\n const middleTracks = columns\n .slice(leftColumnCount, leftColumnCount + Math.max(0, middleCount))\n .map((column) => {\n return resolveTrackBySize(column as DataTableColumn<unknown>, '1fr');\n })\n .join(' ');\n\n let gridTemplateColumns = '';\n if (hasFlags) {\n gridTemplateColumns = `${flagsWidthPx}px ${middleTracks} ${actionsWidthPx}px`;\n } else {\n gridTemplateColumns = `${middleTracks} ${actionsWidthPx}px`;\n }\n\n return { columns, gridTemplateColumns };\n};\n\nconst BackofficeEntityConnectionListPage = ({\n children,\n config,\n breadcrumb,\n}: Omit<BackofficeEntityListPageProps, 'config' \| 'prepared'> & {\n config: ConnectionListConfig;\n breadcrumb: ReturnType<typeof buildEntityListBreadcrumb>;\n}): JSX.Element \| null => {\n const listConfig = config.list;\n\n const { t: tApp } = useTranslation();\n const { t } = useBackofficeReactTranslation();\n const [activeFormActionId, setActiveFormActionId] = useState<string \| null>(\n null,\n );\n const [countFetchKey, setCountFetchKey] = useState(0);\n const refreshRef = useRef<(() => void) \| null>(null);\n\n const registerRefresh = useCallback((refresh: (() => void) \| null) => {\n refreshRef.current = refresh;\n }, []);\n\n const { columns, gridTemplateColumns } = useMemo((): {\n columns: readonly DataTableColumn<unknown>[];\n gridTemplateColumns?: string;\n } => {\n const baseColumns = buildDataTableColumns(listConfig.columns, {\n tApp,\n t,\n });\n const actionsColumn = buildActionsColumn({\n ariaLabel: t('actions.view'),\n fallback: t('common.notAvailable'),\n className: pageStyles.actionsColumnCell,\n resolveDetailHref: (id) => {\n return config.routes.detail(id);\n },\n renderAction: ({ href, ariaLabel }) => {\n return (\n <TableCell.Actions>\n <Link\n to={href}\n className={pageStyles.actionTrigger}\n aria-label={ariaLabel}\n title={ariaLabel}\n preloadOnHover=\"code\"\n >\n <EyeSvg width={16} height={16} />\n </Link>\n </TableCell.Actions>\n );\n },\n });\n const allColumns = [...baseColumns, actionsColumn];\n return applyListEdgeColumns(allColumns, listConfig.rowFlags, 1, tApp);\n }, [config.routes, listConfig.columns, listConfig.rowFlags, t, tApp]);\n\n const getRowId = useCallback<GetRowId<unknown>>(\n (row) => {\n return listConfig.getRowId(row);\n },\n [listConfig],\n );\n\n const { state, pushState } = useBackofficeListUrlState(config);\n const listUiStateKey = useMemo(() => {\n return createBackofficeEntityListUiStateKey(config.id);\n }, [config.id]);\n const filterDrawerState = useBackofficeListFilterDrawerState(listUiStateKey);\n\n const handleRefreshRequest = useCallback(() => {\n setCountFetchKey((current) => {\n return current + 1;\n });\n refreshRef.current?.();\n }, []);\n\n const listActions = useMemo(() => {\n return config.listActions ?? [];\n }, [config.listActions]);\n const visibleActions = useMemo(() => {\n return listActions.filter((action) => {\n if (action.isVisible == null) {\n return true;\n }\n return action.isVisible(null);\n });\n }, [listActions]);\n\n const headerActions = useMemo(() => {\n if (visibleActions.length === 0) {\n return undefined;\n }\n return (\n <div className={pageStyles.headerActions}>\n {visibleActions.map((action, index) => {\n const { variant: actionVariant } = action;\n const label = resolveLabel(action.label, tApp);\n let ariaLabel = label;\n if (action.ariaLabel != null) {\n ariaLabel = resolveLabel(action.ariaLabel, tApp);\n }\n const variant = resolveActionVariant(actionVariant, index);\n const size = action.size ?? 'small';\n const isDisabled = action.isDisabled?.(null) === true;\n\n if (isRouteAction(action)) {\n const href = action.to(null);\n return (\n <LinkButton\n key={action.id}\n to={href}\n variant={variant}\n size={size}\n isDisabled={isDisabled}\n aria-label={ariaLabel}\n preloadOnHover=\"code-and-data\"\n >\n {label}\n </LinkButton>\n );\n }\n\n if (isFormMutationAction(action)) {\n return (\n <Button\n key={action.id}\n type=\"button\"\n variant={variant}\n size={size}\n disabled={isDisabled}\n onClick={() => {\n setActiveFormActionId(action.id);\n }}\n aria-label={ariaLabel}\n >\n {label}\n </Button>\n );\n }\n\n return null;\n })}\n </div>\n );\n }, [tApp, visibleActions]);\n\n const activeFormAction = listActions.find((action) => {\n return action.id === activeFormActionId;\n });\n\n const renderLoadingScaffold = () => {\n return (\n <BackofficeEntityListScaffold\n config={config}\n state={state}\n pushState={pushState}\n headerActions={headerActions}\n rows={[]}\n columns={columns}\n gridTemplateColumns={gridTemplateColumns}\n getRowId={getRowId}\n hasNextPage={false}\n isLoadingMore={false}\n isRefreshing={false}\n onLoadMore={() => {}}\n onRefresh={handleRefreshRequest}\n totalCount={null}\n isLoadingInitial\n filterDrawerState={filterDrawerState}\n />\n );\n };\n\n const contextValue = useMemo(() => {\n return {\n config,\n state,\n pushState,\n headerActions,\n columns,\n gridTemplateColumns,\n getRowId,\n countFetchKey,\n filterDrawerState,\n bumpCountFetchKey: () => {\n setCountFetchKey((current) => {\n return current + 1;\n });\n },\n registerRefresh,\n };\n }, [\n columns,\n config,\n countFetchKey,\n filterDrawerState,\n getRowId,\n gridTemplateColumns,\n headerActions,\n pushState,\n registerRefresh,\n state,\n ]);\n\n return (\n <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n <BackofficeEntityListRouteProvider value={contextValue}>\n <Suspense fallback={renderLoadingScaffold()}>{children}</Suspense>\n </BackofficeEntityListRouteProvider>\n {activeFormAction != null && isFormMutationAction(activeFormAction) && (\n <LazyBackofficeEntityActionFormDialog\n isOpen\n action={activeFormAction}\n node={null}\n onClose={() => {\n setActiveFormActionId(null);\n }}\n onSuccess={handleRefreshRequest}\n />\n )}\n </BackofficeRightPageLayout>\n );\n};\n\nexport const BackofficeEntityListPage = ({\n children,\n entityManifest,\n config,\n}: BackofficeEntityListPageProps): JSX.Element \| null => {\n const { t: tApp } = useTranslation();\n const breadcrumb = buildEntityListBreadcrumb(config, tApp);\n\n return (\n <BackofficeEntityConnectionListPage\n children={children}\n entityManifest={entityManifest}\n config={config}\n breadcrumb={breadcrumb}\n />\n );\n};\n\nexport default BackofficeEntityListPage;\n"],"mappings":"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"}

package/lib/esm/pages/BackofficeEntityListRouteContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BackofficeEntityListRouteContext.js","names":[],"sources":["../../../src/pages/BackofficeEntityListRouteContext.tsx"],"sourcesContent":["import { createContext, useContext, type JSX } from 'react';\nimport {\n type DataTableColumn,\n type GetRowId,\n} from '@plumile/ui/components/data-table/DataTable.js';\n\nimport type { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport type { ConnectionListConfig } from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListRouteContextValue = {\n config: ConnectionListConfig;\n state: ReturnType<typeof useBackofficeListUrlState>['state'];\n pushState: ReturnType<typeof useBackofficeListUrlState>['pushState'];\n headerActions: JSX.Element \| undefined;\n columns: readonly DataTableColumn<unknown>[];\n gridTemplateColumns?: string;\n getRowId: GetRowId<unknown>;\n countFetchKey: number;\n bumpCountFetchKey: () => void;\n registerRefresh: (refresh: (() => void) \| null) => void;\n};\n\nconst BackofficeEntityListRouteContext =\n createContext<BackofficeEntityListRouteContextValue \| null>(null);\n\nexport const BackofficeEntityListRouteProvider = ({\n children,\n value,\n}: {\n children: JSX.Element;\n value: BackofficeEntityListRouteContextValue;\n}): JSX.Element => {\n return (\n <BackofficeEntityListRouteContext.Provider value={value}>\n {children}\n </BackofficeEntityListRouteContext.Provider>\n );\n};\n\nexport const useBackofficeEntityListRouteContext =\n (): BackofficeEntityListRouteContextValue => {\n const value = useContext(BackofficeEntityListRouteContext);\n if (value == null) {\n throw new Error('BackofficeEntityListRouteContext is missing.');\n }\n return value;\n };\n"],"mappings":";;;~~AAsBA~~,IAAM,IACJ,EAA4D,IAAI,GAErD,KAAqC,EAChD,aACA,eAME,kBAAC,EAAiC,UAAlC;CAAkD;CAC/C;AACwC,CAAA,GAIlC,UACkC;CAC3C,IAAM,IAAQ,EAAW,CAAgC;CACzD,IAAI,KAAS,MACX,MAAU,MAAM,8CAA8C;CAEhE,OAAO;AACT"}
1	+ {"version":3,"file":"BackofficeEntityListRouteContext.js","names":[],"sources":["../../../src/pages/BackofficeEntityListRouteContext.tsx"],"sourcesContent":["import { createContext, useContext, type JSX } from 'react';\nimport {\n type DataTableColumn,\n type GetRowId,\n} from '@plumile/ui/components/data-table/DataTable.js';\n\nimport type { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport type { BackofficeFilterDrawerState } from '../provider/BackofficeListUiStateContext.js';\nimport type { ConnectionListConfig } from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListRouteContextValue = {\n config: ConnectionListConfig;\n state: ReturnType<typeof useBackofficeListUrlState>['state'];\n pushState: ReturnType<typeof useBackofficeListUrlState>['pushState'];\n headerActions: JSX.Element \| undefined;\n columns: readonly DataTableColumn<unknown>[];\n gridTemplateColumns?: string;\n getRowId: GetRowId<unknown>;\n countFetchKey: number;\n bumpCountFetchKey: () => void;\n filterDrawerState: BackofficeFilterDrawerState;\n registerRefresh: (refresh: (() => void) \| null) => void;\n};\n\nconst BackofficeEntityListRouteContext =\n createContext<BackofficeEntityListRouteContextValue \| null>(null);\n\nexport const BackofficeEntityListRouteProvider = ({\n children,\n value,\n}: {\n children: JSX.Element;\n value: BackofficeEntityListRouteContextValue;\n}): JSX.Element => {\n return (\n <BackofficeEntityListRouteContext.Provider value={value}>\n {children}\n </BackofficeEntityListRouteContext.Provider>\n );\n};\n\nexport const useBackofficeEntityListRouteContext =\n (): BackofficeEntityListRouteContextValue => {\n const value = useContext(BackofficeEntityListRouteContext);\n if (value == null) {\n throw new Error('BackofficeEntityListRouteContext is missing.');\n }\n return value;\n };\n"],"mappings":";;;AAwBA,IAAM,IACJ,EAA4D,IAAI,GAErD,KAAqC,EAChD,aACA,eAME,kBAAC,EAAiC,UAAlC;CAAkD;CAC/C;AACwC,CAAA,GAIlC,UACkC;CAC3C,IAAM,IAAQ,EAAW,CAAgC;CACzD,IAAI,KAAS,MACX,MAAU,MAAM,8CAA8C;CAEhE,OAAO;AACT"}