@plumile/backoffice-react 0.1.177 → 0.1.179
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.
- package/lib/esm/auth/authRefreshNotice.css.js +1 -0
- package/lib/esm/auth/login/loginPage.css.js +0 -1
- package/lib/esm/components/backoffice/layout/breadcrumb/backofficeTopbarBreadcrumb.css.js +0 -1
- package/lib/esm/components/backoffice/refs/backofficeEntityIdRef.css.js +1 -0
- package/lib/esm/pages/BackofficeEntityDetailFramePage.js +45 -0
- package/lib/esm/pages/BackofficeEntityDetailFramePage.js.map +1 -0
- package/lib/esm/pages/BackofficeEntityDetailLayoutPage.js +73 -59
- package/lib/esm/pages/BackofficeEntityDetailLayoutPage.js.map +1 -1
- package/lib/esm/pages/BackofficeEntityDetailPage.js.map +1 -1
- package/lib/esm/pages/BackofficeEntityListDataPage.js +146 -0
- package/lib/esm/pages/BackofficeEntityListDataPage.js.map +1 -0
- package/lib/esm/pages/BackofficeEntityListPage.js +119 -130
- package/lib/esm/pages/BackofficeEntityListPage.js.map +1 -1
- package/lib/esm/pages/BackofficeEntityListRouteContext.js +15 -0
- package/lib/esm/pages/BackofficeEntityListRouteContext.js.map +1 -0
- package/lib/esm/router/createBackofficeRoutes.js +164 -119
- package/lib/esm/router/createBackofficeRoutes.js.map +1 -1
- package/lib/types/pages/BackofficeEntityDetailFramePage.d.ts +11 -0
- package/lib/types/pages/BackofficeEntityDetailFramePage.d.ts.map +1 -0
- package/lib/types/pages/BackofficeEntityDetailLayoutPage.d.ts +2 -2
- package/lib/types/pages/BackofficeEntityDetailLayoutPage.d.ts.map +1 -1
- package/lib/types/pages/BackofficeEntityDetailPage.d.ts +2 -11
- package/lib/types/pages/BackofficeEntityDetailPage.d.ts.map +1 -1
- package/lib/types/pages/BackofficeEntityListDataPage.d.ts +8 -0
- package/lib/types/pages/BackofficeEntityListDataPage.d.ts.map +1 -0
- package/lib/types/pages/BackofficeEntityListPage.d.ts +5 -4
- package/lib/types/pages/BackofficeEntityListPage.d.ts.map +1 -1
- package/lib/types/pages/BackofficeEntityListRouteContext.d.ts +22 -0
- package/lib/types/pages/BackofficeEntityListRouteContext.d.ts.map +1 -0
- package/lib/types/router/createBackofficeRoutes.d.ts +2 -0
- package/lib/types/router/createBackofficeRoutes.d.ts.map +1 -1
- package/package.json +11 -11
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { useBackofficeReactTranslation as e } from "../i18n/useBackofficeReactTranslation.js";
|
|
2
|
+
import { BackofficeErrorBoundary as t } from "../components/backoffice/errors/BackofficeErrorBoundary.js";
|
|
3
|
+
import { useBackofficePaginationFragment as n } from "../relay/typedRelayHooks.js";
|
|
4
|
+
import { BackofficeLazyEntityCountLabel as r } from "../components/backoffice/refs/BackofficeLazyEntityCount.js";
|
|
5
|
+
import { BackofficeEntityListScaffold as i } from "../components/backoffice/scaffolds/BackofficeEntityListScaffold.js";
|
|
6
|
+
import { useRelayEnvironment as a } from "../relay/useRelayEnvironment.js";
|
|
7
|
+
import { useBackofficeListRefetch as o } from "../hooks/useBackofficeListRefetch.js";
|
|
8
|
+
import { useBackofficeLoadMore as s } from "../hooks/useBackofficeLoadMore.js";
|
|
9
|
+
import { useBackofficeEntityListRouteContext as c } from "./BackofficeEntityListRouteContext.js";
|
|
10
|
+
import { useCallback as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
|
|
11
|
+
import { InlineBanner as m } from "@plumile/ui/components/feedback/InlineBanner.js";
|
|
12
|
+
import { jsx as h } from "react/jsx-runtime";
|
|
13
|
+
import { Button as g } from "@plumile/ui/atomic/atoms/button/Button.js";
|
|
14
|
+
import { loadQuery as _, usePreloadedQuery as v } from "react-relay";
|
|
15
|
+
import { BACKOFFICE_LIST_DEFAULTS as y, BACKOFFICE_LIST_REFETCH_POLICY as b } from "@plumile/backoffice-core/constants.js";
|
|
16
|
+
//#region src/pages/BackofficeEntityListDataPage.tsx
|
|
17
|
+
function x({ queryRef: t }) {
|
|
18
|
+
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 ?? {
|
|
19
|
+
where: null,
|
|
20
|
+
sort: null
|
|
21
|
+
}, I = f.sort ?? F.sort, { pageSize: L } = y, { isRefreshing: R, onRefresh: z } = o({
|
|
22
|
+
refetch: M,
|
|
23
|
+
variables: d(() => ({
|
|
24
|
+
where: f.where,
|
|
25
|
+
sort: I,
|
|
26
|
+
count: L,
|
|
27
|
+
cursor: null
|
|
28
|
+
}), [
|
|
29
|
+
L,
|
|
30
|
+
I,
|
|
31
|
+
f.where
|
|
32
|
+
]),
|
|
33
|
+
defaults: {
|
|
34
|
+
where: F.where,
|
|
35
|
+
sort: F.sort,
|
|
36
|
+
count: L,
|
|
37
|
+
cursor: null
|
|
38
|
+
},
|
|
39
|
+
fetchPolicy: b,
|
|
40
|
+
buildQueryVariables: T.buildQueryVariables
|
|
41
|
+
}), B = l(() => {
|
|
42
|
+
C(), z();
|
|
43
|
+
}, [C, z]);
|
|
44
|
+
u(() => (w(B), () => {
|
|
45
|
+
w(null);
|
|
46
|
+
}), [B, w]);
|
|
47
|
+
let V = s({
|
|
48
|
+
hasNext: A,
|
|
49
|
+
isLoadingNext: j,
|
|
50
|
+
loadNext: k,
|
|
51
|
+
count: L
|
|
52
|
+
}), H = /* @__PURE__ */ h("span", { children: E("common.loading") });
|
|
53
|
+
return P.length > 0 && (H = /* @__PURE__ */ h("span", { children: E("list.loaded", { count: P.length }) })), /* @__PURE__ */ h(i, {
|
|
54
|
+
config: a,
|
|
55
|
+
state: f,
|
|
56
|
+
pushState: p,
|
|
57
|
+
headerActions: m,
|
|
58
|
+
rows: P,
|
|
59
|
+
columns: g,
|
|
60
|
+
gridTemplateColumns: _,
|
|
61
|
+
getRowId: x,
|
|
62
|
+
hasNextPage: A,
|
|
63
|
+
isLoadingMore: j,
|
|
64
|
+
isRefreshing: R,
|
|
65
|
+
onLoadMore: V,
|
|
66
|
+
onRefresh: B,
|
|
67
|
+
totalCount: null,
|
|
68
|
+
loadedCountLabel: /* @__PURE__ */ h(r, {
|
|
69
|
+
count: T.count,
|
|
70
|
+
where: f.where,
|
|
71
|
+
fetchKey: S,
|
|
72
|
+
loadingFallback: H,
|
|
73
|
+
children: (e) => /* @__PURE__ */ h("span", { children: E("list.showing", {
|
|
74
|
+
shown: P.length,
|
|
75
|
+
total: e
|
|
76
|
+
}) })
|
|
77
|
+
})
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
var S = ({ prepared: n }) => {
|
|
81
|
+
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(() => {
|
|
82
|
+
D.current?.dispose(), D.current = null;
|
|
83
|
+
}, []);
|
|
84
|
+
u(() => {
|
|
85
|
+
O(), E(n.query);
|
|
86
|
+
}, [O, n.query]), u(() => () => {
|
|
87
|
+
O();
|
|
88
|
+
}, [O]);
|
|
89
|
+
let k = l(() => {
|
|
90
|
+
let e = r.list, t = r.listDefaults ?? e.defaultState ?? {
|
|
91
|
+
where: null,
|
|
92
|
+
sort: null
|
|
93
|
+
}, { pageSize: n } = y, i = {
|
|
94
|
+
where: o.where,
|
|
95
|
+
sort: o.sort ?? t.sort,
|
|
96
|
+
count: n,
|
|
97
|
+
cursor: null
|
|
98
|
+
}, a = e.buildQueryVariables(i), s = _(C, e.query, a, { fetchPolicy: "network-only" });
|
|
99
|
+
O(), D.current = s, E(s);
|
|
100
|
+
}, [
|
|
101
|
+
r,
|
|
102
|
+
O,
|
|
103
|
+
C,
|
|
104
|
+
o.sort,
|
|
105
|
+
o.where
|
|
106
|
+
]);
|
|
107
|
+
return /* @__PURE__ */ h(t, {
|
|
108
|
+
fallback: ({ reset: e }) => /* @__PURE__ */ h(i, {
|
|
109
|
+
config: r,
|
|
110
|
+
state: o,
|
|
111
|
+
pushState: s,
|
|
112
|
+
headerActions: d,
|
|
113
|
+
rows: [],
|
|
114
|
+
columns: v,
|
|
115
|
+
gridTemplateColumns: b,
|
|
116
|
+
getRowId: S,
|
|
117
|
+
hasNextPage: !1,
|
|
118
|
+
isLoadingMore: !1,
|
|
119
|
+
isRefreshing: !1,
|
|
120
|
+
onLoadMore: () => {},
|
|
121
|
+
onRefresh: () => {
|
|
122
|
+
e(), k();
|
|
123
|
+
},
|
|
124
|
+
totalCount: null,
|
|
125
|
+
emptyState: /* @__PURE__ */ h(m, {
|
|
126
|
+
tone: "danger",
|
|
127
|
+
title: w("list.errors.title"),
|
|
128
|
+
actions: /* @__PURE__ */ h(g, {
|
|
129
|
+
type: "button",
|
|
130
|
+
variant: "secondary",
|
|
131
|
+
size: "small",
|
|
132
|
+
onClick: () => {
|
|
133
|
+
e(), k();
|
|
134
|
+
},
|
|
135
|
+
children: w("list.actions.retry")
|
|
136
|
+
}),
|
|
137
|
+
children: w("list.errors.tableFailed")
|
|
138
|
+
})
|
|
139
|
+
}),
|
|
140
|
+
children: /* @__PURE__ */ h(x, { queryRef: T })
|
|
141
|
+
});
|
|
142
|
+
};
|
|
143
|
+
//#endregion
|
|
144
|
+
export { S as BackofficeEntityListDataPage, S as default };
|
|
145
|
+
|
|
146
|
+
//# sourceMappingURL=BackofficeEntityListDataPage.js.map
|
|
@@ -0,0 +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":"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"}
|
|
@@ -1,124 +1,93 @@
|
|
|
1
1
|
import { useBackofficeReactTranslation as e } from "../i18n/useBackofficeReactTranslation.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import { BACKOFFICE_LIST_DEFAULTS as O, BACKOFFICE_LIST_REFETCH_POLICY as ie } from "@plumile/backoffice-core/constants.js";
|
|
22
|
-
import ae from "@plumile/router/routing/Link.js";
|
|
23
|
-
import { LinkButton as oe } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
|
|
24
|
-
import { TableCell as se } from "@plumile/ui/components/data-table/TableCell.js";
|
|
25
|
-
import { EyeSvg as ce } from "@plumile/ui/icons/EyeSvg.js";
|
|
2
|
+
import { LazyBackofficeEntityActionFormDialog as t } from "../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js";
|
|
3
|
+
import { buildDataTableColumns as n } from "../components/backoffice/columns/buildDataTableColumns.js";
|
|
4
|
+
import { BackofficeRightPageLayout as r } from "../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js";
|
|
5
|
+
import { buildEntityListBreadcrumb as i } from "../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js";
|
|
6
|
+
import { rowFlagsColumnCell as a } from "../components/backoffice/list/RowFlagsCell.css.js";
|
|
7
|
+
import { RowFlagsCell as o } from "../components/backoffice/list/RowFlagsCell.js";
|
|
8
|
+
import { BackofficeEntityListScaffold as s } from "../components/backoffice/scaffolds/BackofficeEntityListScaffold.js";
|
|
9
|
+
import { useBackofficeListUrlState as c } from "../hooks/useBackofficeListUrlState.js";
|
|
10
|
+
import { BackofficeEntityListRouteProvider as l } from "./BackofficeEntityListRouteContext.js";
|
|
11
|
+
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";
|
|
12
|
+
import { actionTrigger as v, actionsColumnCell as y, headerActions as b } from "./backofficeEntityListPage.css.js";
|
|
13
|
+
import { Suspense as x, useCallback as S, useMemo as C, useRef as w, useState as T } from "react";
|
|
14
|
+
import { jsx as E, jsxs as D } from "react/jsx-runtime";
|
|
15
|
+
import { useTranslation as O } from "react-i18next";
|
|
16
|
+
import { Button as k } from "@plumile/ui/atomic/atoms/button/Button.js";
|
|
17
|
+
import A from "@plumile/router/routing/Link.js";
|
|
18
|
+
import { LinkButton as j } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
|
|
19
|
+
import { TableCell as M } from "@plumile/ui/components/data-table/TableCell.js";
|
|
20
|
+
import { EyeSvg as N } from "@plumile/ui/icons/EyeSvg.js";
|
|
26
21
|
//#region src/pages/BackofficeEntityListPage.tsx
|
|
27
|
-
var
|
|
28
|
-
let i = t != null && t.length > 0,
|
|
22
|
+
var P = (e, t, n, r) => {
|
|
23
|
+
let i = t != null && t.length > 0, s = e;
|
|
29
24
|
if (i) {
|
|
30
25
|
let n = [{
|
|
31
26
|
id: "__rowFlags",
|
|
32
27
|
header: "",
|
|
33
|
-
className:
|
|
28
|
+
className: a,
|
|
34
29
|
mobileRole: "badge",
|
|
35
|
-
cell: (e) => /* @__PURE__ */
|
|
30
|
+
cell: (e) => /* @__PURE__ */ E(o, {
|
|
36
31
|
row: e,
|
|
37
32
|
flags: t,
|
|
38
33
|
tApp: r
|
|
39
34
|
})
|
|
40
35
|
}, ...e], i = n.some((e) => e.isPrimary === !0);
|
|
41
|
-
|
|
36
|
+
s = n, i || (s = n.map((e, t) => t === 1 ? {
|
|
42
37
|
...e,
|
|
43
38
|
isPrimary: !0
|
|
44
39
|
} : e));
|
|
45
40
|
}
|
|
46
41
|
let c = 0;
|
|
47
42
|
i && (c = t.length);
|
|
48
|
-
let l =
|
|
49
|
-
i && (
|
|
50
|
-
let
|
|
51
|
-
return g = i ? `${l}px ${
|
|
52
|
-
columns:
|
|
43
|
+
let l = f(c), u = d(n), p = 0;
|
|
44
|
+
i && (p = 1);
|
|
45
|
+
let m = s.length - p - 1, h = s.slice(p, p + Math.max(0, m)).map((e) => _(e, "1fr")).join(" "), g = "";
|
|
46
|
+
return g = i ? `${l}px ${h} ${u}px` : `${h} ${u}px`, {
|
|
47
|
+
columns: s,
|
|
53
48
|
gridTemplateColumns: g
|
|
54
49
|
};
|
|
55
|
-
},
|
|
56
|
-
let
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
50
|
+
}, F = ({ children: i, config: a, breadcrumb: o }) => {
|
|
51
|
+
let d = a.list, { t: f } = O(), { t: _ } = e(), [F, I] = T(null), [L, R] = T(0), z = w(null), B = S((e) => {
|
|
52
|
+
z.current = e;
|
|
53
|
+
}, []), { columns: V, gridTemplateColumns: H } = C(() => {
|
|
54
|
+
let e = n(d.columns, {
|
|
55
|
+
tApp: f,
|
|
56
|
+
t: _
|
|
57
|
+
}), t = u({
|
|
58
|
+
ariaLabel: _("actions.view"),
|
|
59
|
+
fallback: _("common.notAvailable"),
|
|
60
|
+
className: y,
|
|
64
61
|
resolveDetailHref: (e) => a.routes.detail(e),
|
|
65
|
-
renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */
|
|
62
|
+
renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ E(M.Actions, { children: /* @__PURE__ */ E(A, {
|
|
66
63
|
to: e,
|
|
67
|
-
className:
|
|
64
|
+
className: v,
|
|
68
65
|
"aria-label": t,
|
|
69
66
|
title: t,
|
|
70
67
|
preloadOnMouseEnter: !0,
|
|
71
|
-
children: /* @__PURE__ */
|
|
68
|
+
children: /* @__PURE__ */ E(N, {
|
|
72
69
|
width: 16,
|
|
73
70
|
height: 16
|
|
74
71
|
})
|
|
75
72
|
}) })
|
|
76
73
|
});
|
|
77
|
-
return
|
|
74
|
+
return P([...e, t], d.rowFlags, 1, f);
|
|
78
75
|
}, [
|
|
79
76
|
a.routes,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
]),
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}), [
|
|
95
|
-
K,
|
|
96
|
-
G,
|
|
97
|
-
U.where
|
|
98
|
-
]),
|
|
99
|
-
defaults: {
|
|
100
|
-
where: W.where,
|
|
101
|
-
sort: W.sort,
|
|
102
|
-
count: K,
|
|
103
|
-
cursor: null
|
|
104
|
-
},
|
|
105
|
-
fetchPolicy: ie,
|
|
106
|
-
buildQueryVariables: m.buildQueryVariables
|
|
107
|
-
}), J = x(() => {
|
|
108
|
-
j((e) => e + 1), q();
|
|
109
|
-
}, [q]), Y = f({
|
|
110
|
-
hasNext: F,
|
|
111
|
-
isLoadingNext: I,
|
|
112
|
-
loadNext: P,
|
|
113
|
-
count: K
|
|
114
|
-
}), X = S(() => a.listActions ?? [], [a.listActions]), Z = S(() => X.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [X]), pe = S(() => {
|
|
115
|
-
if (Z.length !== 0) return /* @__PURE__ */ w("div", {
|
|
116
|
-
className: ne,
|
|
117
|
-
children: Z.map((e, t) => {
|
|
118
|
-
let { variant: n } = e, r = _(e.label, h), i = r;
|
|
119
|
-
e.ariaLabel != null && (i = _(e.ariaLabel, h));
|
|
120
|
-
let a = te(n, t), o = e.size ?? "small", s = e.isDisabled?.(null) === !0;
|
|
121
|
-
return ee(e) ? /* @__PURE__ */ w(oe, {
|
|
77
|
+
d.columns,
|
|
78
|
+
d.rowFlags,
|
|
79
|
+
_,
|
|
80
|
+
f
|
|
81
|
+
]), U = S((e) => d.getRowId(e), [d]), { state: W, pushState: G } = c(a), K = S(() => {
|
|
82
|
+
R((e) => e + 1), z.current?.();
|
|
83
|
+
}, []), q = C(() => a.listActions ?? [], [a.listActions]), J = C(() => q.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [q]), Y = C(() => {
|
|
84
|
+
if (J.length !== 0) return /* @__PURE__ */ E("div", {
|
|
85
|
+
className: b,
|
|
86
|
+
children: J.map((e, t) => {
|
|
87
|
+
let { variant: n } = e, r = g(e.label, f), i = r;
|
|
88
|
+
e.ariaLabel != null && (i = g(e.ariaLabel, f));
|
|
89
|
+
let a = h(n, t), o = e.size ?? "small", s = e.isDisabled?.(null) === !0;
|
|
90
|
+
return m(e) ? /* @__PURE__ */ E(j, {
|
|
122
91
|
to: e.to(null),
|
|
123
92
|
variant: a,
|
|
124
93
|
size: o,
|
|
@@ -126,67 +95,87 @@ var le = (e, t, n, r) => {
|
|
|
126
95
|
"aria-label": i,
|
|
127
96
|
preloadOnMouseEnter: !0,
|
|
128
97
|
children: r
|
|
129
|
-
}, e.id) :
|
|
98
|
+
}, e.id) : p(e) ? /* @__PURE__ */ E(k, {
|
|
130
99
|
type: "button",
|
|
131
100
|
variant: a,
|
|
132
101
|
size: o,
|
|
133
102
|
disabled: s,
|
|
134
103
|
onClick: () => {
|
|
135
|
-
|
|
104
|
+
I(e.id);
|
|
136
105
|
},
|
|
137
106
|
"aria-label": i,
|
|
138
107
|
children: r
|
|
139
108
|
}, e.id) : null;
|
|
140
109
|
})
|
|
141
110
|
});
|
|
142
|
-
}, [
|
|
143
|
-
return
|
|
144
|
-
breadcrumb:
|
|
145
|
-
children: [/* @__PURE__ */
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
111
|
+
}, [f, J]), X = q.find((e) => e.id === F);
|
|
112
|
+
return /* @__PURE__ */ D(r, {
|
|
113
|
+
breadcrumb: o,
|
|
114
|
+
children: [/* @__PURE__ */ E(l, {
|
|
115
|
+
value: C(() => ({
|
|
116
|
+
config: a,
|
|
117
|
+
state: W,
|
|
118
|
+
pushState: G,
|
|
119
|
+
headerActions: Y,
|
|
120
|
+
columns: V,
|
|
121
|
+
gridTemplateColumns: H,
|
|
122
|
+
getRowId: U,
|
|
123
|
+
countFetchKey: L,
|
|
124
|
+
bumpCountFetchKey: () => {
|
|
125
|
+
R((e) => e + 1);
|
|
126
|
+
},
|
|
127
|
+
registerRefresh: B
|
|
128
|
+
}), [
|
|
129
|
+
V,
|
|
130
|
+
a,
|
|
131
|
+
L,
|
|
132
|
+
U,
|
|
133
|
+
H,
|
|
134
|
+
Y,
|
|
135
|
+
G,
|
|
136
|
+
B,
|
|
137
|
+
W
|
|
138
|
+
]),
|
|
139
|
+
children: /* @__PURE__ */ E(x, {
|
|
140
|
+
fallback: /* @__PURE__ */ E(s, {
|
|
141
|
+
config: a,
|
|
142
|
+
state: W,
|
|
143
|
+
pushState: G,
|
|
144
|
+
headerActions: Y,
|
|
145
|
+
rows: [],
|
|
146
|
+
columns: V,
|
|
147
|
+
gridTemplateColumns: H,
|
|
148
|
+
getRowId: U,
|
|
149
|
+
hasNextPage: !1,
|
|
150
|
+
isLoadingMore: !1,
|
|
151
|
+
isRefreshing: !1,
|
|
152
|
+
onLoadMore: () => {},
|
|
153
|
+
onRefresh: K,
|
|
154
|
+
totalCount: null,
|
|
155
|
+
isLoadingInitial: !0
|
|
156
|
+
}),
|
|
157
|
+
children: i
|
|
169
158
|
})
|
|
170
|
-
}),
|
|
159
|
+
}), X != null && p(X) && /* @__PURE__ */ E(t, {
|
|
171
160
|
isOpen: !0,
|
|
172
|
-
action:
|
|
161
|
+
action: X,
|
|
173
162
|
node: null,
|
|
174
163
|
onClose: () => {
|
|
175
|
-
|
|
164
|
+
I(null);
|
|
176
165
|
},
|
|
177
|
-
onSuccess:
|
|
166
|
+
onSuccess: K
|
|
178
167
|
})]
|
|
179
168
|
});
|
|
180
|
-
},
|
|
181
|
-
let { t: r } =
|
|
182
|
-
return /* @__PURE__ */
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
breadcrumb:
|
|
169
|
+
}, I = ({ children: e, entityManifest: t, config: n }) => {
|
|
170
|
+
let { t: r } = O();
|
|
171
|
+
return /* @__PURE__ */ E(F, {
|
|
172
|
+
children: e,
|
|
173
|
+
entityManifest: t,
|
|
174
|
+
config: n,
|
|
175
|
+
breadcrumb: i(n, r)
|
|
187
176
|
});
|
|
188
177
|
};
|
|
189
178
|
//#endregion
|
|
190
|
-
export {
|
|
179
|
+
export { I as BackofficeEntityListPage, I as default };
|
|
191
180
|
|
|
192
181
|
//# sourceMappingURL=BackofficeEntityListPage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BackofficeEntityListPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.tsx"],"sourcesContent":["import { type JSX, useCallback, useMemo, useState } from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport Link from '@plumile/router/routing/Link.js';\nimport { 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 {\n BackofficeEntityManifestItem,\n BackofficePreparedListRoute,\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 { BackofficeLazyEntityCountLabel } from '../components/backoffice/refs/BackofficeLazyEntityCount.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 { useBackofficeLoadMore } from '../hooks/useBackofficeLoadMore.js';\nimport { useBackofficeListRefetch } from '../hooks/useBackofficeListRefetch.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePaginationFragment } from '../relay/typedRelayHooks.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 {\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 entityManifest: BackofficeEntityManifestItem;\n config: BackofficeRuntimeResolvedListFacetConfig;\n prepared: BackofficePreparedListRoute;\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 config,\n prepared,\n breadcrumb,\n}: Omit<BackofficeEntityListPageProps, 'config'> & {\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\n const queryData = usePreloadedQuery(listConfig.query, prepared.query);\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 { 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 preloadOnMouseEnter\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 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 setCountFetchKey((current) => {\n return current + 1;\n });\n onRefresh();\n }, [onRefresh]);\n\n const handleLoadMore = useBackofficeLoadMore({\n hasNext,\n isLoadingNext,\n loadNext,\n count: pageSize,\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 preloadOnMouseEnter\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 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 <BackofficeRightPageLayout breadcrumb={breadcrumb}>\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 {activeFormAction != null && isFormMutationAction(activeFormAction) && (\n <LazyBackofficeEntityActionFormDialog\n isOpen\n action={activeFormAction}\n node={null}\n onClose={() => {\n setActiveFormActionId(null);\n }}\n onSuccess={handleRefresh}\n />\n )}\n </BackofficeRightPageLayout>\n );\n};\n\nexport const BackofficeEntityListPage = ({\n entityManifest,\n config,\n prepared,\n}: BackofficeEntityListPageProps): JSX.Element | null => {\n const { t: tApp } = useTranslation();\n const breadcrumb = buildEntityListBreadcrumb(config, tApp);\n\n return (\n <BackofficeEntityConnectionListPage\n entityManifest={entityManifest}\n config={config}\n prepared={prepared}\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 * 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 preloadOnMouseEnter\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 preloadOnMouseEnter\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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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { createContext as e, useContext as t } from "react";
|
|
2
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
3
|
+
//#region src/pages/BackofficeEntityListRouteContext.tsx
|
|
4
|
+
var r = e(null), i = ({ children: e, value: t }) => /* @__PURE__ */ n(r.Provider, {
|
|
5
|
+
value: t,
|
|
6
|
+
children: e
|
|
7
|
+
}), a = () => {
|
|
8
|
+
let e = t(r);
|
|
9
|
+
if (e == null) throw Error("BackofficeEntityListRouteContext is missing.");
|
|
10
|
+
return e;
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
export { i as BackofficeEntityListRouteProvider, a as useBackofficeEntityListRouteContext };
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=BackofficeEntityListRouteContext.js.map
|
|
@@ -0,0 +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"}
|