@burojs/ui-shadcn 0.9.0 → 0.10.0
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/dist/{bulk-summary-2HLgz7Il.cjs → bulk-summary-Chc61Pyw.cjs} +9 -7
- package/dist/bulk-summary-Chc61Pyw.cjs.map +1 -0
- package/dist/{bulk-summary-D6A0ua21.js → bulk-summary-DpSQD2Fq.js} +9 -7
- package/dist/bulk-summary-DpSQD2Fq.js.map +1 -0
- package/dist/{candidates-relation-picker-QvoY2bOQ.js → candidates-relation-picker-DRsHKe6N.js} +3 -3
- package/dist/{candidates-relation-picker-QvoY2bOQ.js.map → candidates-relation-picker-DRsHKe6N.js.map} +1 -1
- package/dist/{candidates-relation-picker-pEAWKQEY.cjs → candidates-relation-picker-GIxsp7D_.cjs} +3 -3
- package/dist/{candidates-relation-picker-pEAWKQEY.cjs.map → candidates-relation-picker-GIxsp7D_.cjs.map} +1 -1
- package/dist/{check-confirm-dialog-W-8WOmGh.cjs → check-confirm-dialog-BMSb7wFv.cjs} +17 -9
- package/dist/check-confirm-dialog-BMSb7wFv.cjs.map +1 -0
- package/dist/{check-confirm-dialog-B-CbJTln.js → check-confirm-dialog-B_u3YVHS.js} +18 -10
- package/dist/{check-confirm-dialog-B-CbJTln.js.map → check-confirm-dialog-B_u3YVHS.js.map} +1 -1
- package/dist/{filter-builder-04nas3eq.js → filter-builder-DX-xC3Yd.js} +2 -2
- package/dist/{filter-builder-04nas3eq.js.map → filter-builder-DX-xC3Yd.js.map} +1 -1
- package/dist/{filter-builder-DQX-TMFh.cjs → filter-builder-Dt5E8PSX.cjs} +2 -2
- package/dist/{filter-builder-DQX-TMFh.cjs.map → filter-builder-Dt5E8PSX.cjs.map} +1 -1
- package/dist/{flow-runtime-DyNIYfUP.cjs → flow-runtime-CQ4wf8co.cjs} +2 -2
- package/dist/{flow-runtime-DyNIYfUP.cjs.map → flow-runtime-CQ4wf8co.cjs.map} +1 -1
- package/dist/{flow-runtime-BEIyym7d.js → flow-runtime-Q2vD7R3c.js} +2 -2
- package/dist/{flow-runtime-BEIyym7d.js.map → flow-runtime-Q2vD7R3c.js.map} +1 -1
- package/dist/{flow-screen-DY1Z9PbG.js → flow-screen-B1y2yizP.js} +18 -18
- package/dist/flow-screen-B1y2yizP.js.map +1 -0
- package/dist/{flow-screen-FE5Xhb3t.cjs → flow-screen-sw2cP70t.cjs} +18 -18
- package/dist/flow-screen-sw2cP70t.cjs.map +1 -0
- package/dist/index.cjs +2183 -109
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +76 -8
- package/dist/index.d.ts +76 -8
- package/dist/index.js +2095 -24
- package/dist/index.js.map +1 -1
- package/dist/{inline-flow-host-yVLo6-sM.cjs → inline-flow-host-CkhoA69R.cjs} +3 -3
- package/dist/{inline-flow-host-yVLo6-sM.cjs.map → inline-flow-host-CkhoA69R.cjs.map} +1 -1
- package/dist/{inline-flow-host-D6u-RlsV.js → inline-flow-host-DqbXqcPS.js} +3 -3
- package/dist/{inline-flow-host-D6u-RlsV.js.map → inline-flow-host-DqbXqcPS.js.map} +1 -1
- package/dist/{lazy-relation-picker-dialog-BaORufxQ.js → lazy-relation-picker-dialog-BaIEWLbF.js} +3 -52
- package/dist/lazy-relation-picker-dialog-BaIEWLbF.js.map +1 -0
- package/dist/{lazy-relation-picker-dialog-C_VlGlDz.cjs → lazy-relation-picker-dialog-CeRzOAi0.cjs} +3 -52
- package/dist/lazy-relation-picker-dialog-CeRzOAi0.cjs.map +1 -0
- package/dist/{page-flow-route-CyMzUidK.js → page-flow-route-CP7cS7FY.js} +5 -5
- package/dist/page-flow-route-CP7cS7FY.js.map +1 -0
- package/dist/{page-flow-route-OFx7h7Ja.cjs → page-flow-route-UDx8qvdM.cjs} +9 -9
- package/dist/page-flow-route-UDx8qvdM.cjs.map +1 -0
- package/dist/{place-node-BZF5Af6x.cjs → place-node-C5ZmuHaN.cjs} +149 -40
- package/dist/place-node-C5ZmuHaN.cjs.map +1 -0
- package/dist/{place-node-DRjmJGQ_.js → place-node-DwWAigv0.js} +146 -43
- package/dist/place-node-DwWAigv0.js.map +1 -0
- package/dist/record-trail-store-Cjo9vtod.cjs +126 -0
- package/dist/record-trail-store-Cjo9vtod.cjs.map +1 -0
- package/dist/record-trail-store-Dn6bVry4.js +91 -0
- package/dist/record-trail-store-Dn6bVry4.js.map +1 -0
- package/dist/{related-list-cards-xVvgSlu-.cjs → related-list-cards-BypKfm9t.cjs} +3 -3
- package/dist/{related-list-cards-xVvgSlu-.cjs.map → related-list-cards-BypKfm9t.cjs.map} +1 -1
- package/dist/{related-list-cards-2hLitVkg.js → related-list-cards-Dcmruy09.js} +3 -3
- package/dist/{related-list-cards-2hLitVkg.js.map → related-list-cards-Dcmruy09.js.map} +1 -1
- package/dist/{related-list-timeline-Dsf5WewG.cjs → related-list-timeline-D-KClgKb.cjs} +4 -4
- package/dist/{related-list-timeline-Dsf5WewG.cjs.map → related-list-timeline-D-KClgKb.cjs.map} +1 -1
- package/dist/{related-list-timeline-CxJqe6eK.js → related-list-timeline-DZON_qSc.js} +4 -4
- package/dist/{related-list-timeline-CxJqe6eK.js.map → related-list-timeline-DZON_qSc.js.map} +1 -1
- package/dist/{related-rows-DDhp9axl.cjs → related-rows-DgF05ssi.cjs} +4 -4
- package/dist/{related-rows-DDhp9axl.cjs.map → related-rows-DgF05ssi.cjs.map} +1 -1
- package/dist/{related-rows-DL6CWsrj.js → related-rows-ETZl5CB9.js} +4 -4
- package/dist/{related-rows-DL6CWsrj.js.map → related-rows-ETZl5CB9.js.map} +1 -1
- package/dist/{relation-create-_SFuPQGM.cjs → relation-create-B8zngAcA.cjs} +46 -11
- package/dist/relation-create-B8zngAcA.cjs.map +1 -0
- package/dist/{relation-create-6WicROWA.js → relation-create-CeCWyxIb.js} +47 -12
- package/dist/relation-create-CeCWyxIb.js.map +1 -0
- package/dist/{relation-many-picker-mGEQDWo2.js → relation-many-picker-CT7nKfE2.js} +4 -4
- package/dist/{relation-many-picker-mGEQDWo2.js.map → relation-many-picker-CT7nKfE2.js.map} +1 -1
- package/dist/{relation-many-picker-BBNsmkaX.cjs → relation-many-picker-Cq0EHY5I.cjs} +4 -4
- package/dist/{relation-many-picker-BBNsmkaX.cjs.map → relation-many-picker-Cq0EHY5I.cjs.map} +1 -1
- package/dist/{relation-picker-BbO41cFV.js → relation-picker-CCyuMeGq.js} +6 -6
- package/dist/{relation-picker-BbO41cFV.js.map → relation-picker-CCyuMeGq.js.map} +1 -1
- package/dist/{relation-picker-jk9D_uwn.cjs → relation-picker-DmwTzgsd.cjs} +6 -6
- package/dist/{relation-picker-jk9D_uwn.cjs.map → relation-picker-DmwTzgsd.cjs.map} +1 -1
- package/dist/{relation-picker-dialog-BgSG_8bU.js → relation-picker-dialog-CoWKjNv8.js} +4 -4
- package/dist/{relation-picker-dialog-BgSG_8bU.js.map → relation-picker-dialog-CoWKjNv8.js.map} +1 -1
- package/dist/{relation-picker-dialog-Duqy2r0n.cjs → relation-picker-dialog-mbwyNK43.cjs} +4 -4
- package/dist/{relation-picker-dialog-Duqy2r0n.cjs.map → relation-picker-dialog-mbwyNK43.cjs.map} +1 -1
- package/dist/{relation-select-C3aV18kT.cjs → relation-select-CguIo2M5.cjs} +2 -2
- package/dist/{relation-select-C3aV18kT.cjs.map → relation-select-CguIo2M5.cjs.map} +1 -1
- package/dist/{relation-select-CjQT9LpS.js → relation-select-nAYxhopN.js} +2 -2
- package/dist/{relation-select-CjQT9LpS.js.map → relation-select-nAYxhopN.js.map} +1 -1
- package/dist/{use-dialog-filter-state-lsTJxrB4.cjs → use-dialog-filter-state-CpWblz3C.cjs} +2 -2
- package/dist/{use-dialog-filter-state-lsTJxrB4.cjs.map → use-dialog-filter-state-CpWblz3C.cjs.map} +1 -1
- package/dist/{use-dialog-filter-state-CJoeY-1j.js → use-dialog-filter-state-ZYxOp5WO.js} +2 -2
- package/dist/{use-dialog-filter-state-CJoeY-1j.js.map → use-dialog-filter-state-ZYxOp5WO.js.map} +1 -1
- package/dist/{use-record-subtitle-BJ9rnj6F.cjs → use-record-subtitle-B4lTR7pf.cjs} +2 -2
- package/dist/{use-record-subtitle-BJ9rnj6F.cjs.map → use-record-subtitle-B4lTR7pf.cjs.map} +1 -1
- package/dist/{use-record-subtitle-w3ZhXNlf.js → use-record-subtitle-pWMBqQx9.js} +2 -2
- package/dist/{use-record-subtitle-w3ZhXNlf.js.map → use-record-subtitle-pWMBqQx9.js.map} +1 -1
- package/package.json +9 -9
- package/dist/bulk-summary-2HLgz7Il.cjs.map +0 -1
- package/dist/bulk-summary-D6A0ua21.js.map +0 -1
- package/dist/check-confirm-dialog-W-8WOmGh.cjs.map +0 -1
- package/dist/flow-screen-DY1Z9PbG.js.map +0 -1
- package/dist/flow-screen-FE5Xhb3t.cjs.map +0 -1
- package/dist/lazy-relation-picker-dialog-BaORufxQ.js.map +0 -1
- package/dist/lazy-relation-picker-dialog-C_VlGlDz.cjs.map +0 -1
- package/dist/page-flow-route-CyMzUidK.js.map +0 -1
- package/dist/page-flow-route-OFx7h7Ja.cjs.map +0 -1
- package/dist/place-node-BZF5Af6x.cjs.map +0 -1
- package/dist/place-node-DRjmJGQ_.js.map +0 -1
- package/dist/relation-create-6WicROWA.js.map +0 -1
- package/dist/relation-create-_SFuPQGM.cjs.map +0 -1
- package/dist/resource-page-router-CzaNATSp.js +0 -2010
- package/dist/resource-page-router-CzaNATSp.js.map +0 -1
- package/dist/resource-page-router-dmVIeu5s.cjs +0 -2231
- package/dist/resource-page-router-dmVIeu5s.cjs.map +0 -1
|
@@ -1,2010 +0,0 @@
|
|
|
1
|
-
import { l as cn } from "./use-theme-dnE3Od3I.js";
|
|
2
|
-
import { l as useLinkComponent } from "./toaster-Ct_YHGs6.js";
|
|
3
|
-
import { A as useLoaded, O as loadPageFlowRoute, T as loadFailedText, s as canonicalResourceName, t as CheckConfirmDialog, y as FlowBoundary } from "./check-confirm-dialog-B-CbJTln.js";
|
|
4
|
-
import { t as Button } from "./button-MWVeZaqj.js";
|
|
5
|
-
import { b as LoadError, m as useRowTitle, x as RecordState, y as InvalidRouteId } from "./relation-create-6WicROWA.js";
|
|
6
|
-
import { t as Skeleton } from "./skeleton-U2noefj5.js";
|
|
7
|
-
import { Ct as useShownItemActions, G as RouteScreenClaimContext, H as ScreenTree, J as FormControlProvider, K as RouteScreenContext, Mt as FieldDisplay, S as useFrameChrome, U as useTabsUrlState, W as QuickScreenClaimContext, X as useFormControlOf, d as resolveFrameView, g as UndeclaredTypeNotice, gt as PageHeader, h as TypeChromeDrawnContext, i as RouteListContext, kt as DeepLinkScope, m as HeaderTypeNotice, n as viewOf, p as ChangeTypeButton, q as useIsRouteScreen, t as selectImplementation, u as isBuiltinRecordView, v as FormActions, x as FrameChromeContext } from "./place-node-DRjmJGQ_.js";
|
|
8
|
-
import { t as useNoticeSink } from "./success-notices-CrcWOGSo.js";
|
|
9
|
-
import { FORM_SLOT, addressesCapability, builtinFrames, canonicalEntityNodeKey, compilePageScreen, declaredText, dtoFields, evaluateVisible, fieldSensitivity, formatEntityRef, hasListPage, hrefFor, humanizeKey, isCustomPageDef, isScreenFailure, issueOfInput, matchPath, navHrefFor, nodeKind, normalizeEntityRef, normalizeIssueInputs, pageParamNames, parsePageParams, permissionsUndecided, resolveNavLabel, resolveResourceLabel, resolveResourceNavLabel, resourceKey, routeResourceKey, routeServerIssues, scopeColumnOf, snapshotAppFrames, snapshotBlockLookup, snapshotFrameLookup, successNoticesOf } from "@burojs/core";
|
|
10
|
-
import { ActionRouteContext, ComponentsContext, FrameCheckContext, ORIGIN_DEPTH, RecordFrameContext, RecordScopeProvider, ResourceContext, RouteSourceContext, ScreenStateProvider, maybeThen, pageAccessFor, policyRecordOf, recordKeyOf, recordRouteAvailable, resolveRoute, retryRecordRead, settle, useApp, useApplicationSnapshot, useAvailabilityResolver, useChromeT, useComponent, useCtx, useCurrentUserId, useFieldAccess, useFormController, useFrameImplementations, useFrameT, useI18nCaps, useList, useNavigationGuardText, useOne, useOptionalDataRuntime, useOptionalRouterAdapter, useOptionalT, usePageAccess, usePageScreen, usePermissions, usePlatformStorage, useProjectedRecord, usePublishDocVariant, useQuickEntry, useRecordFrame, useRecordTitle, useReturnTarget, useRouteListImplementation, useRouteNavigate, useRouteRecordId, useScope, useT, useTestIds, useTranslate, useVisibilityCtx } from "@burojs/react";
|
|
11
|
-
import { Suspense, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
12
|
-
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
-
//#region src/resource-key.ts
|
|
14
|
-
function canonicalNavKey(node) {
|
|
15
|
-
return canonicalEntityNodeKey(node);
|
|
16
|
-
}
|
|
17
|
-
function canonicalResourceKey$1(def) {
|
|
18
|
-
return canonicalNavKey(def);
|
|
19
|
-
}
|
|
20
|
-
//#endregion
|
|
21
|
-
//#region src/layout/build-nav-items.ts
|
|
22
|
-
function groupNavHref(registry, group, isVisible) {
|
|
23
|
-
let href;
|
|
24
|
-
try {
|
|
25
|
-
href = navHrefFor(registry, group, { isVisible });
|
|
26
|
-
} catch {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
return matchPath(registry, href, { isVisible }) === null ? void 0 : href;
|
|
30
|
-
}
|
|
31
|
-
function buildNavItems(args) {
|
|
32
|
-
const { registry, caps, groupName, match, isVisible, entryFilter, icons } = args;
|
|
33
|
-
const chain = match?.groupChain ?? [];
|
|
34
|
-
const qualifiedMatch = match;
|
|
35
|
-
const activeLeaf = qualifiedMatch == null ? void 0 : qualifiedMatch.kind === "group-index" ? canonicalNavKey({
|
|
36
|
-
name: qualifiedMatch.target ?? qualifiedMatch.name,
|
|
37
|
-
ref: qualifiedMatch.targetRef
|
|
38
|
-
}) : canonicalNavKey(qualifiedMatch);
|
|
39
|
-
const isEligible = (node) => isVisible(node) && (entryFilter ? entryFilter(node) : true);
|
|
40
|
-
const out = [];
|
|
41
|
-
for (const child of registry.groups.childrenOf(groupName)) {
|
|
42
|
-
if (!isEligible(child)) continue;
|
|
43
|
-
const kind = nodeKind(child);
|
|
44
|
-
const childKey = canonicalNavKey(child);
|
|
45
|
-
if (kind === "group") {
|
|
46
|
-
const href = groupNavHref(registry, childKey, isEligible);
|
|
47
|
-
if (href === void 0) continue;
|
|
48
|
-
const label = resolveNavLabel(caps, `groups.${childKey}`, declaredText("chrome", child, "label"));
|
|
49
|
-
const active = chain.some((g) => canonicalNavKey(g) === childKey);
|
|
50
|
-
out.push({
|
|
51
|
-
kind: "group",
|
|
52
|
-
name: childKey,
|
|
53
|
-
label,
|
|
54
|
-
href,
|
|
55
|
-
icon: icons?.group?.(childKey),
|
|
56
|
-
active
|
|
57
|
-
});
|
|
58
|
-
continue;
|
|
59
|
-
}
|
|
60
|
-
const href = navHrefFor(registry, childKey, { isVisible: isEligible });
|
|
61
|
-
if (kind === "custom-page") out.push({
|
|
62
|
-
kind: "custom-page",
|
|
63
|
-
name: childKey,
|
|
64
|
-
label: resolveNavLabel(caps, `pages.${childKey}`, declaredText("chrome", child, "label")),
|
|
65
|
-
href,
|
|
66
|
-
icon: icons?.page?.(childKey),
|
|
67
|
-
active: activeLeaf === childKey
|
|
68
|
-
});
|
|
69
|
-
else out.push({
|
|
70
|
-
kind: "resource",
|
|
71
|
-
name: childKey,
|
|
72
|
-
label: resolveResourceNavLabel(caps, childKey, child),
|
|
73
|
-
href,
|
|
74
|
-
icon: icons?.resource?.(childKey),
|
|
75
|
-
active: activeLeaf === childKey
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
return out;
|
|
79
|
-
}
|
|
80
|
-
//#endregion
|
|
81
|
-
//#region src/layout/layouts/secondary-sidebar-layout.tsx
|
|
82
|
-
function Row({ it }) {
|
|
83
|
-
const RouterLink = useLinkComponent();
|
|
84
|
-
return jsx("li", { children: jsxs(RouterLink, {
|
|
85
|
-
href: it.href,
|
|
86
|
-
"data-testid": `nav-secondary-item:${it.name}`,
|
|
87
|
-
"aria-current": it.active ? "page" : void 0,
|
|
88
|
-
className: cn("flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium outline-hidden ring-offset-background transition-colors", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", it.active ? "bg-secondary text-secondary-foreground" : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground"),
|
|
89
|
-
children: [it.icon != null && jsx("span", {
|
|
90
|
-
className: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
|
|
91
|
-
"aria-hidden": "true",
|
|
92
|
-
children: it.icon
|
|
93
|
-
}), jsx("span", {
|
|
94
|
-
className: "truncate",
|
|
95
|
-
title: it.label,
|
|
96
|
-
children: it.label
|
|
97
|
-
})]
|
|
98
|
-
}) });
|
|
99
|
-
}
|
|
100
|
-
function SecondarySidebarLayout({ group, groupKey, items, children }) {
|
|
101
|
-
const RouterLink = useLinkComponent();
|
|
102
|
-
const caps = useI18nCaps();
|
|
103
|
-
const id = groupKey ?? group.name;
|
|
104
|
-
const label = resolveNavLabel(caps, `groups.${id}`, declaredText("chrome", group, "label"));
|
|
105
|
-
return jsxs("div", {
|
|
106
|
-
className: "md:-m-6 md:flex md:min-h-[calc(100%+3rem)]",
|
|
107
|
-
"data-testid": `nav-secondary:${id}`,
|
|
108
|
-
children: [
|
|
109
|
-
jsx("aside", {
|
|
110
|
-
className: "hidden w-64 shrink-0 border-r bg-background text-foreground md:block",
|
|
111
|
-
children: jsxs("div", {
|
|
112
|
-
className: "space-y-4 p-4",
|
|
113
|
-
children: [jsx("p", {
|
|
114
|
-
className: "px-3 text-base font-semibold tracking-tight",
|
|
115
|
-
children: label
|
|
116
|
-
}), jsx("nav", {
|
|
117
|
-
"aria-label": label,
|
|
118
|
-
children: jsx("ul", {
|
|
119
|
-
className: "space-y-0.5",
|
|
120
|
-
children: items.map((it) => jsx(Row, { it }, it.name))
|
|
121
|
-
})
|
|
122
|
-
})]
|
|
123
|
-
})
|
|
124
|
-
}),
|
|
125
|
-
jsx("nav", {
|
|
126
|
-
"aria-label": label,
|
|
127
|
-
"data-testid": `nav-secondary-select:${id}`,
|
|
128
|
-
className: "-mx-1 mb-4 flex snap-x snap-proximity gap-1.5 overflow-x-auto scroll-smooth px-1 pb-1 [-ms-overflow-style:none] [mask-image:linear-gradient(to_right,transparent,black_8px,black_calc(100%-8px),transparent)] [scrollbar-width:none] md:hidden [&::-webkit-scrollbar]:hidden",
|
|
129
|
-
children: items.map((it) => jsx(RouterLink, {
|
|
130
|
-
href: it.href,
|
|
131
|
-
"aria-current": it.active ? "page" : void 0,
|
|
132
|
-
className: cn("snap-start whitespace-nowrap rounded-full border px-3 py-1.5 text-sm outline-hidden ring-offset-background transition-colors duration-150", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", it.active ? "border-primary/40 bg-primary/10 font-medium text-foreground" : "border-border text-muted-foreground hover:bg-accent/60 hover:text-accent-foreground"),
|
|
133
|
-
children: it.label
|
|
134
|
-
}, it.name))
|
|
135
|
-
}),
|
|
136
|
-
jsx("div", {
|
|
137
|
-
className: "min-w-0 flex-1 md:overflow-x-hidden md:p-6",
|
|
138
|
-
children
|
|
139
|
-
})
|
|
140
|
-
]
|
|
141
|
-
});
|
|
142
|
-
}
|
|
143
|
-
//#endregion
|
|
144
|
-
//#region src/layout/layouts/tabs-layout.tsx
|
|
145
|
-
function TabsLayout({ group, groupKey, items, children }) {
|
|
146
|
-
const RouterLink = useLinkComponent();
|
|
147
|
-
const caps = useI18nCaps();
|
|
148
|
-
const id = groupKey ?? group.name;
|
|
149
|
-
const label = resolveNavLabel(caps, `groups.${id}`, declaredText("chrome", group, "label"));
|
|
150
|
-
return jsxs("div", {
|
|
151
|
-
className: "flex flex-col gap-4",
|
|
152
|
-
"data-testid": `nav-tabs:${id}`,
|
|
153
|
-
children: [jsx("nav", {
|
|
154
|
-
"aria-label": label,
|
|
155
|
-
className: "flex gap-1 overflow-x-auto scroll-smooth border-b border-border [-ms-overflow-style:none] [mask-image:linear-gradient(to_right,transparent,black_8px,black_calc(100%-8px),transparent)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
|
|
156
|
-
children: items.map((it) => jsxs(RouterLink, {
|
|
157
|
-
href: it.href,
|
|
158
|
-
"aria-current": it.active ? "page" : void 0,
|
|
159
|
-
"data-testid": `nav-tab:${it.name}`,
|
|
160
|
-
className: cn("group/tab relative flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-t-sm px-3 py-2.5 text-sm outline-hidden ring-offset-background transition-colors duration-150", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", it.active ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"),
|
|
161
|
-
children: [
|
|
162
|
-
it.icon != null && jsx("span", {
|
|
163
|
-
className: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
|
|
164
|
-
"aria-hidden": "true",
|
|
165
|
-
children: it.icon
|
|
166
|
-
}),
|
|
167
|
-
it.label,
|
|
168
|
-
jsx("span", {
|
|
169
|
-
"aria-hidden": "true",
|
|
170
|
-
className: cn("pointer-events-none absolute inset-x-2 -bottom-px h-0.5 origin-center scale-x-0 rounded-full bg-primary opacity-0 transition-all duration-300 ease-out", it.active ? "scale-x-100 opacity-100" : "group-hover/tab:scale-x-100 group-hover/tab:opacity-30")
|
|
171
|
-
})
|
|
172
|
-
]
|
|
173
|
-
}, it.name))
|
|
174
|
-
}), jsx("div", {
|
|
175
|
-
className: "min-w-0",
|
|
176
|
-
children
|
|
177
|
-
})]
|
|
178
|
-
});
|
|
179
|
-
}
|
|
180
|
-
//#endregion
|
|
181
|
-
//#region src/layout/nav-slots.ts
|
|
182
|
-
function layoutSlot(key) {
|
|
183
|
-
return `layout.${key}`;
|
|
184
|
-
}
|
|
185
|
-
function useLayout(key) {
|
|
186
|
-
return useComponent(layoutSlot(key));
|
|
187
|
-
}
|
|
188
|
-
const BUILTIN_LAYOUTS = {
|
|
189
|
-
[layoutSlot("secondary-sidebar")]: SecondarySidebarLayout,
|
|
190
|
-
[layoutSlot("tabs")]: TabsLayout
|
|
191
|
-
};
|
|
192
|
-
function useLayoutResolver() {
|
|
193
|
-
const components = useContext(ComponentsContext);
|
|
194
|
-
return (key) => components[layoutSlot(key)] ?? BUILTIN_LAYOUTS[layoutSlot(key)];
|
|
195
|
-
}
|
|
196
|
-
const unresolvedLayoutReported = new WeakMap();
|
|
197
|
-
function useReportUnresolvedLayouts(groups, resolve) {
|
|
198
|
-
const app = useApp();
|
|
199
|
-
useEffect(() => {
|
|
200
|
-
if (process.env.NODE_ENV === "production") return;
|
|
201
|
-
for (const group of groups) {
|
|
202
|
-
const layout = group.layout;
|
|
203
|
-
if (layout === "flat" || layout === "collapsible" || resolve(layout)) continue;
|
|
204
|
-
const key = canonicalNavKey(group);
|
|
205
|
-
let seen = unresolvedLayoutReported.get(app);
|
|
206
|
-
if (!seen) {
|
|
207
|
-
seen = new Set();
|
|
208
|
-
unresolvedLayoutReported.set(app, seen);
|
|
209
|
-
}
|
|
210
|
-
if (seen.has(key)) continue;
|
|
211
|
-
seen.add(key);
|
|
212
|
-
console.error(`[burojs] Nav group "${key}" declares layout "${layout}", and no renderer is registered for it. Register one as components["layout.${layout}"] on <BuroProvider>, or use a built-in layout: "secondary-sidebar", "tabs", "flat", "collapsible".`);
|
|
213
|
-
}
|
|
214
|
-
});
|
|
215
|
-
}
|
|
216
|
-
//#endregion
|
|
217
|
-
//#region src/layout/use-nav-routing.ts
|
|
218
|
-
function useNavVisible() {
|
|
219
|
-
const ctx = useVisibilityCtx();
|
|
220
|
-
const allowed = usePageAllowed();
|
|
221
|
-
return useCallback((node) => evaluateVisible(node.visible, ctx) && (!isCustomPageDef(node) || allowed(node)), [ctx, allowed]);
|
|
222
|
-
}
|
|
223
|
-
function useResourceVisible() {
|
|
224
|
-
const ctx = useVisibilityCtx();
|
|
225
|
-
return useCallback((def) => evaluateVisible(def.visible, ctx), [ctx]);
|
|
226
|
-
}
|
|
227
|
-
function usePageAllowed() {
|
|
228
|
-
const permissions = usePermissions();
|
|
229
|
-
return useCallback((page) => pageAccessFor(page, permissions) === "allowed", [permissions]);
|
|
230
|
-
}
|
|
231
|
-
function useHref(name, opts) {
|
|
232
|
-
const app = useApp();
|
|
233
|
-
const isVisible = useNavVisible();
|
|
234
|
-
return hrefFor(app.registry, name, {
|
|
235
|
-
...opts,
|
|
236
|
-
isVisible
|
|
237
|
-
});
|
|
238
|
-
}
|
|
239
|
-
function useMatch() {
|
|
240
|
-
const app = useApp();
|
|
241
|
-
const isVisible = useNavVisible();
|
|
242
|
-
const path = useOptionalRouterAdapter()?.pathname;
|
|
243
|
-
return path === void 0 ? null : matchPath(app.registry, path, { isVisible });
|
|
244
|
-
}
|
|
245
|
-
//#endregion
|
|
246
|
-
//#region src/layout/nav-chrome-mounted.ts
|
|
247
|
-
const NavChromeMountedContext = createContext(false);
|
|
248
|
-
const NavChromeMountedProvider = NavChromeMountedContext.Provider;
|
|
249
|
-
function useNavChromeMounted() {
|
|
250
|
-
return useContext(NavChromeMountedContext);
|
|
251
|
-
}
|
|
252
|
-
//#endregion
|
|
253
|
-
//#region src/flows/page-flow-loader.tsx
|
|
254
|
-
function PageFlowRouteLoader({ match }) {
|
|
255
|
-
const t = useOptionalT();
|
|
256
|
-
const chromeT = useChromeT();
|
|
257
|
-
const loaded = useLoaded(loadPageFlowRoute);
|
|
258
|
-
const failed = (retry) => jsxs("div", {
|
|
259
|
-
role: "alert",
|
|
260
|
-
"data-buro-flow-load": "failed",
|
|
261
|
-
className: "flex flex-col gap-3 p-6 text-sm",
|
|
262
|
-
children: [jsx("p", { children: loadFailedText(t) }), jsx("div", { children: jsx(Button, {
|
|
263
|
-
type: "button",
|
|
264
|
-
onClick: retry,
|
|
265
|
-
children: chromeT("actions.retry", { defaultValue: "Retry" })
|
|
266
|
-
}) })]
|
|
267
|
-
});
|
|
268
|
-
if (loaded.error !== void 0) return failed(loaded.retry);
|
|
269
|
-
if (loaded.module === void 0) return jsx(RecordState, { state: "loading" });
|
|
270
|
-
const Route = loaded.module.PageFlowRoute;
|
|
271
|
-
return jsx(FlowBoundary, {
|
|
272
|
-
fallback: (_error, reset) => failed(reset),
|
|
273
|
-
children: jsx(Route, { match })
|
|
274
|
-
});
|
|
275
|
-
}
|
|
276
|
-
//#endregion
|
|
277
|
-
//#region src/list-kit/resource-list-page.tsx
|
|
278
|
-
function ResourceListPage({ resource: resourceInput, meta, renderCell, emptyState }) {
|
|
279
|
-
const resource = routeResourceKey(resourceInput);
|
|
280
|
-
const app = useRouteListImplementation();
|
|
281
|
-
const implementation = selectImplementation("buro:related-list", app);
|
|
282
|
-
const View = implementation === void 0 ? void 0 : viewOf(implementation);
|
|
283
|
-
const translate = useTranslate();
|
|
284
|
-
const route = useMemo(() => ({
|
|
285
|
-
meta,
|
|
286
|
-
renderCell,
|
|
287
|
-
emptyState
|
|
288
|
-
}), [
|
|
289
|
-
meta,
|
|
290
|
-
renderCell,
|
|
291
|
-
emptyState
|
|
292
|
-
]);
|
|
293
|
-
const viewProps = useMemo(() => ({
|
|
294
|
-
props: { resource: normalizeEntityRef(resource) },
|
|
295
|
-
data: {},
|
|
296
|
-
t: (key, options) => translate(`blocks.buro:related-list.${key}`, options)
|
|
297
|
-
}), [resource, translate]);
|
|
298
|
-
return jsx("div", {
|
|
299
|
-
"data-buro-node": "place",
|
|
300
|
-
"data-buro-size": "full",
|
|
301
|
-
className: "min-w-0",
|
|
302
|
-
children: jsx(RouteListContext.Provider, {
|
|
303
|
-
value: route,
|
|
304
|
-
children: jsx(Suspense, {
|
|
305
|
-
fallback: null,
|
|
306
|
-
children: View === void 0 ? null : jsx(View, { ...viewProps })
|
|
307
|
-
})
|
|
308
|
-
})
|
|
309
|
-
});
|
|
310
|
-
}
|
|
311
|
-
//#endregion
|
|
312
|
-
//#region src/layout/page-host.tsx
|
|
313
|
-
function PageHost({ page, match, notFound }) {
|
|
314
|
-
const isVisible = useNavVisible();
|
|
315
|
-
const ctx = useVisibilityCtx();
|
|
316
|
-
const access = usePageAccess(page);
|
|
317
|
-
if (!(evaluateVisible(page.visible, ctx) && match.groupChain.every((group) => isVisible(group)))) return notFound;
|
|
318
|
-
if (access === "pending") return jsx(RecordState, { state: "loading" });
|
|
319
|
-
if (access === "denied") return notFound;
|
|
320
|
-
return jsx(PageParams, {
|
|
321
|
-
page,
|
|
322
|
-
notFound
|
|
323
|
-
});
|
|
324
|
-
}
|
|
325
|
-
const NO_SEARCH = new URLSearchParams();
|
|
326
|
-
function PageParams({ page, notFound }) {
|
|
327
|
-
const search = useOptionalRouterAdapter()?.searchParams ?? (typeof window === "undefined" ? NO_SEARCH : new URLSearchParams(window.location.search));
|
|
328
|
-
const raw = JSON.stringify(pageParamNames(page.params).map((name) => search.get(name)));
|
|
329
|
-
const parsed = useMemo(() => parsePageParams(page, search), [page, raw]);
|
|
330
|
-
if (!parsed.ok) return notFound;
|
|
331
|
-
return jsx(RouteSourceContext.Provider, {
|
|
332
|
-
value: parsed.route,
|
|
333
|
-
children: jsx(PageBody, { page })
|
|
334
|
-
});
|
|
335
|
-
}
|
|
336
|
-
function PageBody({ page }) {
|
|
337
|
-
const snapshot = useApplicationSnapshot();
|
|
338
|
-
const compiled = useMemo(() => compilePageScreen(page, {
|
|
339
|
-
blocks: snapshotBlockLookup(snapshot),
|
|
340
|
-
frames: snapshotFrameLookup(snapshot),
|
|
341
|
-
appFrames: snapshotAppFrames(snapshot)
|
|
342
|
-
}), [page, snapshot]);
|
|
343
|
-
const failure = isScreenFailure(compiled) ? compiled : null;
|
|
344
|
-
const screen = failure === null && !isScreenFailure(compiled) ? compiled : null;
|
|
345
|
-
const caps = useI18nCaps();
|
|
346
|
-
const name = canonicalNavKey(page);
|
|
347
|
-
const label = resolveNavLabel(caps, `pages.${name}`, declaredText("chrome", page, "label"));
|
|
348
|
-
useEffect(() => {
|
|
349
|
-
if (failure === null || process.env.NODE_ENV === "production") return;
|
|
350
|
-
console.error(`[burojs] The page "${name}" cannot render its body: ${failure.code} at ${failure.path.join(".")}: ${failure.message}.`);
|
|
351
|
-
}, [failure, name]);
|
|
352
|
-
return jsxs("div", {
|
|
353
|
-
className: "flex flex-col gap-4",
|
|
354
|
-
children: [jsx("h1", {
|
|
355
|
-
className: "text-2xl font-semibold tracking-tight",
|
|
356
|
-
children: label
|
|
357
|
-
}), screen === null ? jsx(RecordState, { state: "error" }) : jsx(PageRouteScreen, { children: jsx(PlannedBody, {
|
|
358
|
-
screen,
|
|
359
|
-
name,
|
|
360
|
-
label
|
|
361
|
-
}) })]
|
|
362
|
-
});
|
|
363
|
-
}
|
|
364
|
-
function PageRouteScreen({ children }) {
|
|
365
|
-
const tabs = useTabsUrlState("show", true);
|
|
366
|
-
return jsx(RouteScreenClaimContext.Provider, {
|
|
367
|
-
value: false,
|
|
368
|
-
children: jsx(RouteScreenContext.Provider, {
|
|
369
|
-
value: true,
|
|
370
|
-
children: jsx(ScreenStateProvider, {
|
|
371
|
-
open: tabs.open,
|
|
372
|
-
onOpenChange: tabs.onOpenChange,
|
|
373
|
-
children
|
|
374
|
-
})
|
|
375
|
-
})
|
|
376
|
-
});
|
|
377
|
-
}
|
|
378
|
-
function PlannedBody({ screen, name, label, record }) {
|
|
379
|
-
const pageOptions = useMemo(() => record === void 0 ? {} : { record }, [record]);
|
|
380
|
-
const page = usePageScreen(screen, pageOptions);
|
|
381
|
-
const { PlacementScope } = page;
|
|
382
|
-
const route = useContext(RouteSourceContext);
|
|
383
|
-
const catalog = useFrameImplementations();
|
|
384
|
-
const id = formatEntityRef(screen.frame);
|
|
385
|
-
const resolved = useMemo(() => resolveFrameView(screen.frame, catalog, "page"), [screen.frame, catalog]);
|
|
386
|
-
const t = useFrameT(id);
|
|
387
|
-
const slots = {};
|
|
388
|
-
for (const slot of Object.keys(screen.slots)) slots[slot] = (page.plan.slots[slot] ?? []).every((node) => node.state === "absent") ? null : jsx(ScreenTree, {
|
|
389
|
-
region: slot === "body" ? "page-body" : "record",
|
|
390
|
-
slot,
|
|
391
|
-
resource: name,
|
|
392
|
-
mode: "show",
|
|
393
|
-
compiled: screen,
|
|
394
|
-
page
|
|
395
|
-
}, slot);
|
|
396
|
-
const View = resolved.view;
|
|
397
|
-
const viewProps = {
|
|
398
|
-
slots,
|
|
399
|
-
label,
|
|
400
|
-
params: route ?? {},
|
|
401
|
-
t
|
|
402
|
-
};
|
|
403
|
-
return jsx(RouteSourceContext.Provider, {
|
|
404
|
-
value: null,
|
|
405
|
-
children: jsx(ActionRouteContext.Provider, {
|
|
406
|
-
value: route,
|
|
407
|
-
children: jsx(PlacementScope, { children: jsx(DeepLinkScope, {
|
|
408
|
-
plan: page.plan,
|
|
409
|
-
enabled: true,
|
|
410
|
-
children: jsx("div", {
|
|
411
|
-
"data-buro-region": "page-body",
|
|
412
|
-
children: jsx(Suspense, {
|
|
413
|
-
fallback: null,
|
|
414
|
-
children: jsx(View, { ...viewProps })
|
|
415
|
-
})
|
|
416
|
-
})
|
|
417
|
-
}) })
|
|
418
|
-
})
|
|
419
|
-
});
|
|
420
|
-
}
|
|
421
|
-
//#endregion
|
|
422
|
-
//#region src/frames/obligations.tsx
|
|
423
|
-
const SlotMountsContext = createContext(null);
|
|
424
|
-
function useSlotOnce(slot) {
|
|
425
|
-
const mounts = useContext(SlotMountsContext);
|
|
426
|
-
const token = useId();
|
|
427
|
-
const first = mounts === null || mounts.claim(slot, token);
|
|
428
|
-
useEffect(() => {
|
|
429
|
-
if (mounts === null) return;
|
|
430
|
-
mounts.claim(slot, token);
|
|
431
|
-
return () => mounts.release(slot, token);
|
|
432
|
-
}, [
|
|
433
|
-
mounts,
|
|
434
|
-
slot,
|
|
435
|
-
token
|
|
436
|
-
]);
|
|
437
|
-
useEffect(() => {
|
|
438
|
-
if (!first) mounts?.twice(slot);
|
|
439
|
-
}, [
|
|
440
|
-
first,
|
|
441
|
-
mounts,
|
|
442
|
-
slot
|
|
443
|
-
]);
|
|
444
|
-
return first;
|
|
445
|
-
}
|
|
446
|
-
function FrameObligations({ id, mode, showActions, root, children }) {
|
|
447
|
-
const told = useRef(new Set());
|
|
448
|
-
const counts = useRef(new Map());
|
|
449
|
-
const owners = useRef(new Map());
|
|
450
|
-
const tell = (key, write) => {
|
|
451
|
-
if (told.current.has(key) || process.env.NODE_ENV === "production") return;
|
|
452
|
-
told.current.add(key);
|
|
453
|
-
write();
|
|
454
|
-
};
|
|
455
|
-
const latestId = useRef(id);
|
|
456
|
-
latestId.current = id;
|
|
457
|
-
const slotMounts = useMemo(() => ({
|
|
458
|
-
claim(slot, token) {
|
|
459
|
-
const owner = owners.current.get(slot);
|
|
460
|
-
if (owner === void 0) {
|
|
461
|
-
owners.current.set(slot, token);
|
|
462
|
-
return true;
|
|
463
|
-
}
|
|
464
|
-
return owner === token;
|
|
465
|
-
},
|
|
466
|
-
release(slot, token) {
|
|
467
|
-
if (owners.current.get(slot) === token) owners.current.delete(slot);
|
|
468
|
-
},
|
|
469
|
-
twice(slot) {
|
|
470
|
-
tell(`slot-twice:${slot}`, () => console.error(`[burojs] frame.slot-twice: ${latestId.current} renders slots.${slot} twice; a slot renders at most once (body twice would mount every field twice under one form).`));
|
|
471
|
-
}
|
|
472
|
-
}), []);
|
|
473
|
-
const pieces = useMemo(() => ({
|
|
474
|
-
stub: false,
|
|
475
|
-
mount(piece) {
|
|
476
|
-
counts.current.set(piece, (counts.current.get(piece) ?? 0) + 1);
|
|
477
|
-
return () => counts.current.set(piece, (counts.current.get(piece) ?? 1) - 1);
|
|
478
|
-
}
|
|
479
|
-
}), []);
|
|
480
|
-
return jsx(SlotMountsContext.Provider, {
|
|
481
|
-
value: slotMounts,
|
|
482
|
-
children: jsxs(FrameCheckContext.Provider, {
|
|
483
|
-
value: pieces,
|
|
484
|
-
children: [children, jsx(ObligationCheck, { check: () => {
|
|
485
|
-
const mounted = (piece) => (counts.current.get(piece) ?? 0) > 0;
|
|
486
|
-
if (mode !== "show" && !mounted("FormActions")) tell("no-form-actions", () => console.error(`[burojs] frame.no-form-actions: ${id} renders no <FormActions/> in ${mode}; nothing can submit or cancel the form.`));
|
|
487
|
-
if (mode === "show" && showActions && !mounted("RecordActions")) tell("no-actions", () => console.warn(`[burojs] screen.no-actions: ${id} renders no <RecordActions/> in show, and the resource has item actions there.`));
|
|
488
|
-
if (root.current?.querySelector("h1") != null) tell("h1", () => console.error(`[burojs] ${id} renders an h1; the route draws the screen's one h1.`));
|
|
489
|
-
} })]
|
|
490
|
-
})
|
|
491
|
-
});
|
|
492
|
-
}
|
|
493
|
-
function ObligationCheck({ check }) {
|
|
494
|
-
useEffect(() => {
|
|
495
|
-
check();
|
|
496
|
-
});
|
|
497
|
-
return null;
|
|
498
|
-
}
|
|
499
|
-
//#endregion
|
|
500
|
-
//#region src/frames/slot-wrapper.tsx
|
|
501
|
-
function DraftBanner() {
|
|
502
|
-
const { resource, mode, controller } = useRecordFrame();
|
|
503
|
-
const t = useOptionalT();
|
|
504
|
-
const tid = useTestIds();
|
|
505
|
-
const { draft } = controller;
|
|
506
|
-
if (mode === "show" || draft.pending === null) return null;
|
|
507
|
-
return jsxs("div", {
|
|
508
|
-
"data-testid": tid.formDraftBanner(resource, mode),
|
|
509
|
-
role: "status",
|
|
510
|
-
"aria-live": "polite",
|
|
511
|
-
className: "flex flex-wrap items-center gap-2 rounded-md border border-warning/50 bg-warning/10 px-3 py-2 text-sm",
|
|
512
|
-
children: [
|
|
513
|
-
jsx("span", {
|
|
514
|
-
className: "font-medium",
|
|
515
|
-
children: draft.recordChanged ? t("draft.recordChanged") : t("draft.found", { params: { time: timeAgo(draft.pending.savedAt, t) } })
|
|
516
|
-
}),
|
|
517
|
-
draft.recordChanged ? null : jsx("span", {
|
|
518
|
-
className: "text-muted-foreground",
|
|
519
|
-
children: t("draft.restorePrompt")
|
|
520
|
-
}),
|
|
521
|
-
jsxs("div", {
|
|
522
|
-
className: "ml-auto flex gap-2",
|
|
523
|
-
children: [draft.recordChanged ? null : jsx(Button, {
|
|
524
|
-
type: "button",
|
|
525
|
-
size: "sm",
|
|
526
|
-
variant: "outline",
|
|
527
|
-
"data-testid": tid.formDraftRestore(resource, mode),
|
|
528
|
-
onClick: draft.restore,
|
|
529
|
-
children: t("draft.restore")
|
|
530
|
-
}), jsx(Button, {
|
|
531
|
-
type: "button",
|
|
532
|
-
size: "sm",
|
|
533
|
-
variant: "ghost",
|
|
534
|
-
"data-testid": tid.formDraftDiscard(resource, mode),
|
|
535
|
-
onClick: draft.discard,
|
|
536
|
-
children: t("draft.discard")
|
|
537
|
-
})]
|
|
538
|
-
})
|
|
539
|
-
]
|
|
540
|
-
});
|
|
541
|
-
}
|
|
542
|
-
function timeAgo(savedAt, t) {
|
|
543
|
-
const then = new Date(savedAt).getTime();
|
|
544
|
-
if (!Number.isFinite(then)) return t("draft.timeAgoRecently");
|
|
545
|
-
const diff = Date.now() - then;
|
|
546
|
-
if (diff < 6e4) return t("draft.timeAgoMoment");
|
|
547
|
-
if (diff < 36e5) return t("draft.timeAgoMinutes", { count: Math.round(diff / 6e4) });
|
|
548
|
-
if (diff < 864e5) return t("draft.timeAgoHours", { count: Math.round(diff / 36e5) });
|
|
549
|
-
return t("draft.timeAgoDays", { count: Math.round(diff / 864e5) });
|
|
550
|
-
}
|
|
551
|
-
function frameRecordId(frame, def) {
|
|
552
|
-
if (frame.recordId !== void 0) return frame.recordId;
|
|
553
|
-
const id = recordKeyOf(def, frame.record);
|
|
554
|
-
return typeof id === "string" || typeof id === "number" ? String(id) : void 0;
|
|
555
|
-
}
|
|
556
|
-
function BodySlot() {
|
|
557
|
-
const frame = useRecordFrame();
|
|
558
|
-
const { resource, mode, controller } = frame;
|
|
559
|
-
const chrome = useFrameChrome();
|
|
560
|
-
const tid = useTestIds();
|
|
561
|
-
const id = frameRecordId(frame, useApp().registry.get(resource));
|
|
562
|
-
const tree = jsx("div", {
|
|
563
|
-
"data-buro-region": "record-body",
|
|
564
|
-
"data-buro-slot": FORM_SLOT,
|
|
565
|
-
children: jsx(ScreenTree, {
|
|
566
|
-
region: "record",
|
|
567
|
-
slot: FORM_SLOT,
|
|
568
|
-
resource,
|
|
569
|
-
mode,
|
|
570
|
-
compiled: controller.screen,
|
|
571
|
-
controller
|
|
572
|
-
})
|
|
573
|
-
});
|
|
574
|
-
if (mode === "show") return tree;
|
|
575
|
-
return jsxs("form", {
|
|
576
|
-
id: chrome.formId,
|
|
577
|
-
noValidate: true,
|
|
578
|
-
"data-testid": tid.form(resource, mode, id),
|
|
579
|
-
onSubmit: (event) => {
|
|
580
|
-
event.preventDefault();
|
|
581
|
-
const steps = controller.steps;
|
|
582
|
-
if (steps !== null && steps.current !== void 0 && steps.current !== steps.ids[steps.ids.length - 1]) steps.next();
|
|
583
|
-
else chrome.submit();
|
|
584
|
-
},
|
|
585
|
-
className: "flex flex-col gap-4",
|
|
586
|
-
children: [jsx(DraftBanner, {}), tree]
|
|
587
|
-
});
|
|
588
|
-
}
|
|
589
|
-
function DisplaySlot({ name }) {
|
|
590
|
-
const { resource, mode, controller } = useRecordFrame();
|
|
591
|
-
return jsx(ScreenTree, {
|
|
592
|
-
region: "record",
|
|
593
|
-
slot: name,
|
|
594
|
-
resource,
|
|
595
|
-
mode,
|
|
596
|
-
compiled: controller.screen,
|
|
597
|
-
controller
|
|
598
|
-
});
|
|
599
|
-
}
|
|
600
|
-
function SlotWrapper({ name }) {
|
|
601
|
-
if (!useSlotOnce(name)) return null;
|
|
602
|
-
return name === FORM_SLOT ? jsx(BodySlot, {}) : jsx(DisplaySlot, { name });
|
|
603
|
-
}
|
|
604
|
-
//#endregion
|
|
605
|
-
//#region src/frames/record-frame-host.tsx
|
|
606
|
-
const NO_ROOT = { current: null };
|
|
607
|
-
function drawnFields(roots, compiled, out) {
|
|
608
|
-
for (const node of roots) {
|
|
609
|
-
if (node.state === "absent") continue;
|
|
610
|
-
const field = node.field ?? compiled.nodes[node.index]?.field;
|
|
611
|
-
if (node.kind === "field" && field !== void 0 && node.state === "ready") out.add(field);
|
|
612
|
-
drawnFields(node.children, compiled, out);
|
|
613
|
-
}
|
|
614
|
-
}
|
|
615
|
-
function frameRecord(record, compiled, slots, idField, visible = () => true) {
|
|
616
|
-
if (record === void 0 || compiled === null || slots === void 0) return void 0;
|
|
617
|
-
const drawn = new Set();
|
|
618
|
-
for (const roots of Object.values(slots)) drawnFields(roots, compiled, drawn);
|
|
619
|
-
const declarations = new Map(compiled.fields.map((entry) => [entry.name, entry.declaration]));
|
|
620
|
-
const out = {};
|
|
621
|
-
if (Object.hasOwn(record, idField)) out[idField] = record[idField];
|
|
622
|
-
for (const name of drawn) {
|
|
623
|
-
if (!Object.hasOwn(record, name) || !visible(name)) continue;
|
|
624
|
-
if (fieldSensitivity(declarations.get(name)) !== void 0) continue;
|
|
625
|
-
out[name] = record[name];
|
|
626
|
-
}
|
|
627
|
-
return Object.freeze(out);
|
|
628
|
-
}
|
|
629
|
-
function declaredSlots(compiled) {
|
|
630
|
-
if (compiled === null) return [];
|
|
631
|
-
return Object.entries(compiled.slots).filter(([, nodes]) => nodes.length > 0).map(([name]) => name);
|
|
632
|
-
}
|
|
633
|
-
function useEffectiveFrame(instance) {
|
|
634
|
-
const { resource, mode, controller } = useRecordFrame();
|
|
635
|
-
const compiled = controller.screen;
|
|
636
|
-
const missing = useMemo(() => {
|
|
637
|
-
if (instance === void 0 || instance.for !== "record") return void 0;
|
|
638
|
-
const own = new Set(Object.keys(instance.slots));
|
|
639
|
-
return declaredSlots(compiled).find((slot) => !own.has(slot));
|
|
640
|
-
}, [instance, compiled]);
|
|
641
|
-
const told = useRef(false);
|
|
642
|
-
const instanceId = instance === void 0 ? void 0 : formatEntityRef(instance.ref);
|
|
643
|
-
useEffect(() => {
|
|
644
|
-
if (missing === void 0 || told.current || process.env.NODE_ENV === "production") return;
|
|
645
|
-
told.current = true;
|
|
646
|
-
console.error(`[burojs] <RecordScreen frame={${instanceId}}> lacks the slot ${missing} that ${resource}'s ${mode} screen fills; the screen's own frame draws it.`);
|
|
647
|
-
}, [
|
|
648
|
-
missing,
|
|
649
|
-
instanceId,
|
|
650
|
-
resource,
|
|
651
|
-
mode
|
|
652
|
-
]);
|
|
653
|
-
if (instance !== void 0 && instance.for === "record" && missing === void 0 && compiled !== null) return {
|
|
654
|
-
ref: instance.ref,
|
|
655
|
-
slotNames: Object.keys(instance.slots)
|
|
656
|
-
};
|
|
657
|
-
return {
|
|
658
|
-
ref: compiled?.frame ?? builtinFrames.record.ref,
|
|
659
|
-
slotNames: compiled === null ? ["header", FORM_SLOT] : Object.keys(compiled.slots)
|
|
660
|
-
};
|
|
661
|
-
}
|
|
662
|
-
function RecordFrameView({ frame: instance }) {
|
|
663
|
-
const { resource, mode, controller, record } = useRecordFrame();
|
|
664
|
-
const chrome = useFrameChrome();
|
|
665
|
-
const quick = useQuickEntry();
|
|
666
|
-
const app = useApp();
|
|
667
|
-
const catalog = useFrameImplementations();
|
|
668
|
-
const { ref, slotNames } = useEffectiveFrame(instance);
|
|
669
|
-
const id = formatEntityRef(ref);
|
|
670
|
-
const resolved = useMemo(() => resolveFrameView(ref, catalog, "record"), [ref, catalog]);
|
|
671
|
-
const t = useFrameT(id);
|
|
672
|
-
const compiled = controller.screen;
|
|
673
|
-
const plan = controller.plan;
|
|
674
|
-
const slots = {};
|
|
675
|
-
for (const name of slotNames) {
|
|
676
|
-
if (name === FORM_SLOT) {
|
|
677
|
-
slots[name] = jsx(SlotWrapper, { name }, name);
|
|
678
|
-
continue;
|
|
679
|
-
}
|
|
680
|
-
slots[name] = (plan?.slots[name] ?? []).every((node) => node.state === "absent") ? null : jsx(SlotWrapper, { name }, name);
|
|
681
|
-
}
|
|
682
|
-
slots[FORM_SLOT] ??= jsx(SlotWrapper, { name: FORM_SLOT });
|
|
683
|
-
const idField = app.registry.get(resource)?.data?.idField ?? "id";
|
|
684
|
-
const access = useFieldAccess(resource, "record", record === void 0 ? void 0 : policyRecordOf(controller, record));
|
|
685
|
-
const projected = useMemo(() => frameRecord(record, compiled, plan?.slots, idField, (name) => access[name]?.view === "visible"), [
|
|
686
|
-
record,
|
|
687
|
-
compiled,
|
|
688
|
-
plan,
|
|
689
|
-
idField,
|
|
690
|
-
access
|
|
691
|
-
]);
|
|
692
|
-
const quickHost = chrome.hostTitle === true && quick !== null;
|
|
693
|
-
const props = {
|
|
694
|
-
slots,
|
|
695
|
-
host: quickHost ? quick.host : "page",
|
|
696
|
-
mode,
|
|
697
|
-
screen: {
|
|
698
|
-
resource,
|
|
699
|
-
entry: quickHost ? "quick" : "route"
|
|
700
|
-
},
|
|
701
|
-
record: mode === "create" ? void 0 : projected,
|
|
702
|
-
t
|
|
703
|
-
};
|
|
704
|
-
const policyRecord = policyRecordOf(controller, record);
|
|
705
|
-
const rowId = record?.[idField];
|
|
706
|
-
const actionRow = useMemo(() => ({
|
|
707
|
-
...policyRecord ?? {},
|
|
708
|
-
id: typeof rowId === "string" || typeof rowId === "number" ? String(rowId) : ""
|
|
709
|
-
}), [policyRecord, rowId]);
|
|
710
|
-
const showItemActions = useShownItemActions(resource, actionRow, "show", void 0, controller.sources);
|
|
711
|
-
const showActions = mode === "show" && record !== void 0 && showItemActions.length > 0;
|
|
712
|
-
const View = resolved.view;
|
|
713
|
-
const builtin = isBuiltinRecordView(resolved);
|
|
714
|
-
return jsxs(Fragment$1, { children: [builtin ? null : jsxs(Fragment$1, { children: [jsx(HeaderTypeNotice, { resource }), jsx(ChangeTypeButton, {})] }), jsx(TypeChromeDrawnContext.Provider, {
|
|
715
|
-
value: !builtin,
|
|
716
|
-
children: jsx(Suspense, {
|
|
717
|
-
fallback: jsx(RecordState, { state: "loading" }),
|
|
718
|
-
children: jsx(FrameObligations, {
|
|
719
|
-
id,
|
|
720
|
-
mode,
|
|
721
|
-
showActions,
|
|
722
|
-
root: chrome.root ?? NO_ROOT,
|
|
723
|
-
children: jsx(View, { ...props })
|
|
724
|
-
})
|
|
725
|
-
})
|
|
726
|
-
})] });
|
|
727
|
-
}
|
|
728
|
-
function useResourceDimensionOptions(dimension, resource, labelField) {
|
|
729
|
-
const def = useApp().registry.get(resource);
|
|
730
|
-
const rowTitle = useRowTitle(resource, labelField ?? def?.displayField);
|
|
731
|
-
const rows = useList(resource, {
|
|
732
|
-
pagination: {
|
|
733
|
-
kind: "offset",
|
|
734
|
-
page: 1,
|
|
735
|
-
pageSize: 100
|
|
736
|
-
},
|
|
737
|
-
total: false,
|
|
738
|
-
scope: {
|
|
739
|
-
default: "session",
|
|
740
|
-
dimensions: { [dimension]: "none" }
|
|
741
|
-
}
|
|
742
|
-
}).data?.data;
|
|
743
|
-
return useMemo(() => (rows ?? []).flatMap((row) => {
|
|
744
|
-
const key = recordKeyOf(def, row);
|
|
745
|
-
return key === null || key === void 0 ? [] : [{
|
|
746
|
-
value: key,
|
|
747
|
-
label: rowTitle(row)
|
|
748
|
-
}];
|
|
749
|
-
}), [
|
|
750
|
-
rows,
|
|
751
|
-
def,
|
|
752
|
-
rowTitle
|
|
753
|
-
]);
|
|
754
|
-
}
|
|
755
|
-
//#endregion
|
|
756
|
-
//#region src/record/scope-mismatch-banner.tsx
|
|
757
|
-
const asList = (value) => value === null ? [] : Array.isArray(value) ? value : [value];
|
|
758
|
-
const isScalar = (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean";
|
|
759
|
-
function ScopeMismatchBanner(props) {
|
|
760
|
-
const app = useApp();
|
|
761
|
-
const mapping = app.registry.get(props.resource)?.data?.scope;
|
|
762
|
-
if (app.scope === void 0 || mapping === void 0 || props.record === void 0) return null;
|
|
763
|
-
return jsx(Banner, {
|
|
764
|
-
...props,
|
|
765
|
-
record: props.record,
|
|
766
|
-
mapping
|
|
767
|
-
});
|
|
768
|
-
}
|
|
769
|
-
function Banner({ record, mapping, kind = "record" }) {
|
|
770
|
-
const scope = useScope();
|
|
771
|
-
const chromeT = useChromeT();
|
|
772
|
-
const differences = useMemo(() => {
|
|
773
|
-
const out = [];
|
|
774
|
-
for (const [dimension, target] of Object.entries(mapping)) {
|
|
775
|
-
const definition = scope.definition?.dimensions[dimension];
|
|
776
|
-
if (definition === void 0 || definition.select === "none") continue;
|
|
777
|
-
const selected = asList(scope.selection[dimension] ?? null);
|
|
778
|
-
if (selected.length === 0) continue;
|
|
779
|
-
const column = scopeColumnOf(target);
|
|
780
|
-
if (!Object.hasOwn(record, column)) continue;
|
|
781
|
-
const held = record[column];
|
|
782
|
-
if (held === null || held === void 0 || held === "") {
|
|
783
|
-
if (kind === "created" || "field" in target && target.empty === "shared") continue;
|
|
784
|
-
out.push({
|
|
785
|
-
dimension,
|
|
786
|
-
value: null,
|
|
787
|
-
selected,
|
|
788
|
-
select: definition.select
|
|
789
|
-
});
|
|
790
|
-
continue;
|
|
791
|
-
}
|
|
792
|
-
if (!isScalar(held)) continue;
|
|
793
|
-
if (selected.some((value) => String(value) === String(held))) continue;
|
|
794
|
-
out.push({
|
|
795
|
-
dimension,
|
|
796
|
-
value: held,
|
|
797
|
-
selected,
|
|
798
|
-
select: definition.select
|
|
799
|
-
});
|
|
800
|
-
}
|
|
801
|
-
return out;
|
|
802
|
-
}, [
|
|
803
|
-
mapping,
|
|
804
|
-
record,
|
|
805
|
-
scope.definition,
|
|
806
|
-
scope.selection,
|
|
807
|
-
kind
|
|
808
|
-
]);
|
|
809
|
-
if (differences.length === 0) return null;
|
|
810
|
-
const apply = () => {
|
|
811
|
-
for (const difference of differences) scope.select(difference.dimension, difference.value === null ? null : difference.select === "multiple" ? [difference.value] : difference.value);
|
|
812
|
-
};
|
|
813
|
-
return jsxs("div", {
|
|
814
|
-
role: "status",
|
|
815
|
-
"data-testid": "scope-mismatch:banner",
|
|
816
|
-
className: "flex flex-wrap items-center justify-between gap-3 rounded-md border bg-muted/50 px-3 py-2 text-sm",
|
|
817
|
-
children: [jsxs("div", {
|
|
818
|
-
className: "space-y-1",
|
|
819
|
-
children: [jsx("p", {
|
|
820
|
-
className: "font-medium",
|
|
821
|
-
children: kind === "created" ? chromeT("scope.mismatch.createdOutside", { defaultValue: "Created outside the current scope" }) : chromeT("scope.mismatch.title", { defaultValue: "This record is outside the current scope" })
|
|
822
|
-
}), jsx("ul", {
|
|
823
|
-
className: "text-muted-foreground",
|
|
824
|
-
children: differences.map((difference) => jsx(DifferenceLine, {
|
|
825
|
-
difference,
|
|
826
|
-
definition: scope.definition.dimensions[difference.dimension]
|
|
827
|
-
}, difference.dimension))
|
|
828
|
-
})]
|
|
829
|
-
}), jsx(Button, {
|
|
830
|
-
type: "button",
|
|
831
|
-
size: "sm",
|
|
832
|
-
"data-testid": "scope-mismatch:switch",
|
|
833
|
-
onClick: apply,
|
|
834
|
-
children: chromeT("scope.mismatch.switch", { defaultValue: "Switch" })
|
|
835
|
-
})]
|
|
836
|
-
});
|
|
837
|
-
}
|
|
838
|
-
function DifferenceLine(props) {
|
|
839
|
-
const source = props.definition.values;
|
|
840
|
-
if (source !== void 0 && !Array.isArray(source)) {
|
|
841
|
-
const { resource, label } = source;
|
|
842
|
-
return jsx(ResourceLine, {
|
|
843
|
-
...props,
|
|
844
|
-
resource,
|
|
845
|
-
...label ? { labelField: label } : {}
|
|
846
|
-
});
|
|
847
|
-
}
|
|
848
|
-
return jsx(LineText, {
|
|
849
|
-
difference: props.difference,
|
|
850
|
-
options: source ?? []
|
|
851
|
-
});
|
|
852
|
-
}
|
|
853
|
-
function ResourceLine({ difference, resource, labelField }) {
|
|
854
|
-
const options = useResourceDimensionOptions(difference.dimension, resource, labelField);
|
|
855
|
-
return jsx(LineText, {
|
|
856
|
-
difference,
|
|
857
|
-
options
|
|
858
|
-
});
|
|
859
|
-
}
|
|
860
|
-
function LineText({ difference, options }) {
|
|
861
|
-
const chromeT = useChromeT();
|
|
862
|
-
const labelOf = (value) => options.find((option) => String(option.value) === String(value))?.label ?? String(value);
|
|
863
|
-
const field = humanizeKey(difference.dimension);
|
|
864
|
-
const item = difference.value === null ? chromeT("scope.mismatch.empty", { defaultValue: "not set" }) : labelOf(difference.value);
|
|
865
|
-
const items = difference.selected.map(labelOf).join(", ");
|
|
866
|
-
return jsx("li", {
|
|
867
|
-
"data-testid": `scope-mismatch:line:${difference.dimension}`,
|
|
868
|
-
children: chromeT("scope.mismatch.line", {
|
|
869
|
-
params: {
|
|
870
|
-
field,
|
|
871
|
-
item,
|
|
872
|
-
items
|
|
873
|
-
},
|
|
874
|
-
defaultValue: `${field}: ${item} (selected: ${items})`
|
|
875
|
-
})
|
|
876
|
-
});
|
|
877
|
-
}
|
|
878
|
-
//#endregion
|
|
879
|
-
//#region src/record/type-offer.tsx
|
|
880
|
-
function TypeOffer({ resource, offer, onChoose }) {
|
|
881
|
-
const app = useApp();
|
|
882
|
-
const t = useOptionalT();
|
|
883
|
-
const tid = useTestIds();
|
|
884
|
-
const def = app.registry.get(resource);
|
|
885
|
-
const by = def?.types?.by;
|
|
886
|
-
const field = by === void 0 ? void 0 : def?.fields[by];
|
|
887
|
-
const ref = def?.ref ?? {
|
|
888
|
-
namespace: "default",
|
|
889
|
-
id: resource
|
|
890
|
-
};
|
|
891
|
-
return jsxs("section", {
|
|
892
|
-
"aria-labelledby": "type-offer-title",
|
|
893
|
-
className: "flex flex-col gap-3",
|
|
894
|
-
children: [jsxs("div", {
|
|
895
|
-
className: "flex flex-col gap-1",
|
|
896
|
-
children: [jsx("h2", {
|
|
897
|
-
id: "type-offer-title",
|
|
898
|
-
className: "text-base font-semibold",
|
|
899
|
-
children: t("create.typeOffer.title", { defaultValue: "Choose a type" })
|
|
900
|
-
}), jsx("p", {
|
|
901
|
-
className: "text-sm text-muted-foreground",
|
|
902
|
-
children: t("create.typeOffer.hint", { defaultValue: "The type decides which fields the record has." })
|
|
903
|
-
})]
|
|
904
|
-
}), offer.status === "pending" ? jsxs("div", {
|
|
905
|
-
"aria-busy": "true",
|
|
906
|
-
className: "flex flex-col gap-2",
|
|
907
|
-
children: [jsx(Skeleton, { className: "h-10 w-full" }), jsx(Skeleton, { className: "h-10 w-full" })]
|
|
908
|
-
}) : offer.types.length === 0 ? jsx("p", {
|
|
909
|
-
role: "status",
|
|
910
|
-
className: "text-sm text-muted-foreground",
|
|
911
|
-
children: t("create.typeOffer.empty", { defaultValue: "No type can be created here." })
|
|
912
|
-
}) : jsx("ul", {
|
|
913
|
-
className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
|
|
914
|
-
children: offer.types.map((type) => jsx("li", { children: jsx("button", {
|
|
915
|
-
type: "button",
|
|
916
|
-
"data-testid": tid.typeOffer(resource, type),
|
|
917
|
-
onClick: () => onChoose(type),
|
|
918
|
-
className: "flex w-full items-center gap-2 rounded-md border px-3 py-2 text-left text-sm hover:bg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
|
|
919
|
-
children: by === void 0 || field === void 0 ? type : jsx(FieldDisplay, {
|
|
920
|
-
resource: ref,
|
|
921
|
-
name: by,
|
|
922
|
-
field,
|
|
923
|
-
value: type,
|
|
924
|
-
fallback: jsx("span", { children: type })
|
|
925
|
-
})
|
|
926
|
-
}) }, type))
|
|
927
|
-
})]
|
|
928
|
-
});
|
|
929
|
-
}
|
|
930
|
-
//#endregion
|
|
931
|
-
//#region src/record/record-screen.tsx
|
|
932
|
-
function isAbort(error) {
|
|
933
|
-
if (error === null || typeof error !== "object" && typeof error !== "function") return false;
|
|
934
|
-
try {
|
|
935
|
-
return error.name === "AbortError";
|
|
936
|
-
} catch {
|
|
937
|
-
return false;
|
|
938
|
-
}
|
|
939
|
-
}
|
|
940
|
-
const NO_ISSUES = Object.freeze([]);
|
|
941
|
-
const APPLIED_UNREADABLE = Object.freeze({
|
|
942
|
-
code: "applied-unreadable",
|
|
943
|
-
message: Object.freeze({
|
|
944
|
-
key: "errors.appliedUnreadable",
|
|
945
|
-
default: "Saved. The server's answer could not be read, so the screen may not show the latest values."
|
|
946
|
-
}),
|
|
947
|
-
path: Object.freeze([]),
|
|
948
|
-
source: "server",
|
|
949
|
-
severity: "info"
|
|
950
|
-
});
|
|
951
|
-
function issuesOf(error) {
|
|
952
|
-
if (error === null || typeof error !== "object") return void 0;
|
|
953
|
-
try {
|
|
954
|
-
const descriptor = Object.getOwnPropertyDescriptor(error, "issues");
|
|
955
|
-
return descriptor !== void 0 && "value" in descriptor ? descriptor.value : void 0;
|
|
956
|
-
} catch {
|
|
957
|
-
return;
|
|
958
|
-
}
|
|
959
|
-
}
|
|
960
|
-
const NO_EDITED = new Set();
|
|
961
|
-
function sameValue(a, b) {
|
|
962
|
-
if (Object.is(a, b)) return true;
|
|
963
|
-
try {
|
|
964
|
-
return JSON.stringify(a) === JSON.stringify(b);
|
|
965
|
-
} catch {
|
|
966
|
-
return false;
|
|
967
|
-
}
|
|
968
|
-
}
|
|
969
|
-
function RecordFrameHost(props) {
|
|
970
|
-
const { resource, mode } = props;
|
|
971
|
-
const [failed, setFailed] = useState(NO_ISSUES);
|
|
972
|
-
const named = useMemo(() => failed.length === 0 ? NO_ISSUES : routeServerIssues({ issues: failed }, (segment) => segment, (field) => field !== "_form").fields, [failed]);
|
|
973
|
-
const atFailure = useRef({});
|
|
974
|
-
const [edited, setEdited] = useState(NO_EDITED);
|
|
975
|
-
const controller = useFormController({
|
|
976
|
-
resource,
|
|
977
|
-
mode,
|
|
978
|
-
...props.recordId === void 0 ? {} : { recordId: props.recordId },
|
|
979
|
-
...props.type === void 0 ? {} : { type: props.type },
|
|
980
|
-
...props.record === void 0 ? {} : { record: props.record },
|
|
981
|
-
...props.defaults === void 0 ? {} : { defaults: props.defaults },
|
|
982
|
-
...props.onSubmit === void 0 ? {} : { onSubmit: props.onSubmit },
|
|
983
|
-
...props.hostTitle ? { entry: "quick" } : {},
|
|
984
|
-
serverIssues: named
|
|
985
|
-
});
|
|
986
|
-
const inputApplied = useRef(false);
|
|
987
|
-
const { input } = props;
|
|
988
|
-
const plan = controller.plan;
|
|
989
|
-
useEffect(() => {
|
|
990
|
-
if (inputApplied.current || input === void 0 || mode !== "create" || plan === null) return;
|
|
991
|
-
inputApplied.current = true;
|
|
992
|
-
for (const [key, value] of Object.entries(input)) if (plan.fields[key] === "active") controller.setValue(key, value);
|
|
993
|
-
}, [
|
|
994
|
-
input,
|
|
995
|
-
mode,
|
|
996
|
-
plan,
|
|
997
|
-
controller
|
|
998
|
-
]);
|
|
999
|
-
const tid = useTestIds();
|
|
1000
|
-
const formId = `record-form-${useId()}`;
|
|
1001
|
-
const root = useRef(null);
|
|
1002
|
-
const [submitError, setSubmitError] = useState(void 0);
|
|
1003
|
-
const [submitApplied, setSubmitApplied] = useState(void 0);
|
|
1004
|
-
useEffect(() => {
|
|
1005
|
-
if (plan === null) return;
|
|
1006
|
-
const now = Object.keys(atFailure.current).filter((name) => !edited.has(name) && plan.fields[name] === "active" && !sameValue(controller.field(name).value, atFailure.current[name]));
|
|
1007
|
-
if (now.length > 0) setEdited((previous) => new Set([...previous, ...now]));
|
|
1008
|
-
}, [
|
|
1009
|
-
plan,
|
|
1010
|
-
controller,
|
|
1011
|
-
edited
|
|
1012
|
-
]);
|
|
1013
|
-
const notify = useNoticeSink(resource);
|
|
1014
|
-
const routeScreen = useIsRouteScreen();
|
|
1015
|
-
const leavesOnCreate = mode === "create" && routeScreen;
|
|
1016
|
-
const [created, setCreated] = useState(false);
|
|
1017
|
-
const createdRef = useRef(false);
|
|
1018
|
-
const latest = useRef({
|
|
1019
|
-
controller,
|
|
1020
|
-
onSuccess: props.onSuccess,
|
|
1021
|
-
notify,
|
|
1022
|
-
leavesOnCreate
|
|
1023
|
-
});
|
|
1024
|
-
latest.current = {
|
|
1025
|
-
controller,
|
|
1026
|
-
onSuccess: props.onSuccess,
|
|
1027
|
-
notify,
|
|
1028
|
-
leavesOnCreate
|
|
1029
|
-
};
|
|
1030
|
-
const mounted = useRef(true);
|
|
1031
|
-
useEffect(() => {
|
|
1032
|
-
mounted.current = true;
|
|
1033
|
-
return () => {
|
|
1034
|
-
mounted.current = false;
|
|
1035
|
-
};
|
|
1036
|
-
}, []);
|
|
1037
|
-
const submit = useCallback(async () => {
|
|
1038
|
-
if (createdRef.current) return;
|
|
1039
|
-
setSubmitError(void 0);
|
|
1040
|
-
setSubmitApplied(void 0);
|
|
1041
|
-
setFailed(NO_ISSUES);
|
|
1042
|
-
setEdited(NO_EDITED);
|
|
1043
|
-
atFailure.current = {};
|
|
1044
|
-
const outcome = await latest.current.controller.submit();
|
|
1045
|
-
if (!mounted.current) return;
|
|
1046
|
-
if (latest.current.leavesOnCreate && (outcome.status === "submitted" || outcome.status === "failed" && outcome.applied === "yes")) {
|
|
1047
|
-
createdRef.current = true;
|
|
1048
|
-
setCreated(true);
|
|
1049
|
-
}
|
|
1050
|
-
if (outcome.status === "submitted") {
|
|
1051
|
-
const notices = successNoticesOf(outcome.result);
|
|
1052
|
-
if (notices.length > 0) latest.current.notify(notices);
|
|
1053
|
-
latest.current.onSuccess?.(outcome.result);
|
|
1054
|
-
} else if (outcome.status === "failed" && outcome.applied === "yes") {
|
|
1055
|
-
latest.current.notify([APPLIED_UNREADABLE]);
|
|
1056
|
-
latest.current.onSuccess?.(void 0);
|
|
1057
|
-
} else if (outcome.status === "failed" && !isAbort(outcome.error)) {
|
|
1058
|
-
setSubmitError(outcome.error ?? null);
|
|
1059
|
-
setSubmitApplied(outcome.applied);
|
|
1060
|
-
const issues = normalizeIssueInputs(issuesOf(outcome.error)).issues;
|
|
1061
|
-
const next = issues.length === 0 ? NO_ISSUES : Object.freeze(issues.map(issueOfInput));
|
|
1062
|
-
const held = {};
|
|
1063
|
-
const now = latest.current.controller;
|
|
1064
|
-
for (const issue of next) {
|
|
1065
|
-
const head = issue.path[0];
|
|
1066
|
-
if (typeof head === "string" && head !== "_form" && now.plan?.fields[head] === "active") held[head] = now.field(head).value;
|
|
1067
|
-
}
|
|
1068
|
-
atFailure.current = held;
|
|
1069
|
-
setFailed(next);
|
|
1070
|
-
}
|
|
1071
|
-
}, []);
|
|
1072
|
-
const record = controller.record;
|
|
1073
|
-
const recordText = props.recordId === void 0 ? void 0 : String(props.recordId);
|
|
1074
|
-
const frame = useMemo(() => ({
|
|
1075
|
-
resource,
|
|
1076
|
-
recordId: recordText,
|
|
1077
|
-
mode,
|
|
1078
|
-
record,
|
|
1079
|
-
controller
|
|
1080
|
-
}), [
|
|
1081
|
-
resource,
|
|
1082
|
-
recordText,
|
|
1083
|
-
mode,
|
|
1084
|
-
record,
|
|
1085
|
-
controller
|
|
1086
|
-
]);
|
|
1087
|
-
const { chooseType } = props;
|
|
1088
|
-
const typedAndAccepted = mode === "create" && controller.typeOffer !== null && controller.failure === null;
|
|
1089
|
-
const adapter = useOptionalRouterAdapter();
|
|
1090
|
-
const hostRouter = routeScreen ? adapter : null;
|
|
1091
|
-
const guardText = useNavigationGuardText();
|
|
1092
|
-
const changeType = useMemo(() => typedAndAccepted ? () => {
|
|
1093
|
-
if (hostRouter === null && latest.current.controller.isDirty && !window.confirm(`${guardText.title}\n\n${guardText.body}`)) return;
|
|
1094
|
-
chooseType(void 0);
|
|
1095
|
-
} : void 0, [
|
|
1096
|
-
typedAndAccepted,
|
|
1097
|
-
chooseType,
|
|
1098
|
-
hostRouter,
|
|
1099
|
-
guardText.title,
|
|
1100
|
-
guardText.body
|
|
1101
|
-
]);
|
|
1102
|
-
const app = useApp();
|
|
1103
|
-
const typesDecl = app.registry.get(resource)?.types;
|
|
1104
|
-
const loaded = controller.record;
|
|
1105
|
-
const unsupportedType = useMemo(() => {
|
|
1106
|
-
if (mode === "create" || typesDecl === void 0 || loaded === void 0) return void 0;
|
|
1107
|
-
const value = loaded[typesDecl.by];
|
|
1108
|
-
const name = typeof value === "string" && value !== "" ? value : null;
|
|
1109
|
-
return name !== null && typesDecl.items.some((item) => item.name === name) ? void 0 : name;
|
|
1110
|
-
}, [
|
|
1111
|
-
mode,
|
|
1112
|
-
typesDecl,
|
|
1113
|
-
loaded
|
|
1114
|
-
]);
|
|
1115
|
-
const shownFailed = useMemo(() => edited.size === 0 ? failed : Object.freeze(failed.filter((issue) => {
|
|
1116
|
-
const head = issue.path[0];
|
|
1117
|
-
return typeof head !== "string" || !edited.has(head);
|
|
1118
|
-
})), [failed, edited]);
|
|
1119
|
-
const chrome = useMemo(() => ({
|
|
1120
|
-
...props.onCancel === void 0 ? {} : { onCancel: props.onCancel },
|
|
1121
|
-
...props.submitLabel === void 0 ? {} : { submitLabel: props.submitLabel },
|
|
1122
|
-
...props.extraActions === void 0 ? {} : { extraActions: props.extraActions },
|
|
1123
|
-
...changeType === void 0 ? {} : { changeType },
|
|
1124
|
-
...unsupportedType === void 0 ? {} : { unsupportedType },
|
|
1125
|
-
...props.hostTitle ? { hostTitle: true } : {},
|
|
1126
|
-
formId,
|
|
1127
|
-
submitError,
|
|
1128
|
-
...submitApplied === void 0 ? {} : { submitApplied },
|
|
1129
|
-
serverIssues: shownFailed,
|
|
1130
|
-
...created ? { created: true } : {},
|
|
1131
|
-
submit,
|
|
1132
|
-
root
|
|
1133
|
-
}), [
|
|
1134
|
-
props.onCancel,
|
|
1135
|
-
props.submitLabel,
|
|
1136
|
-
props.extraActions,
|
|
1137
|
-
changeType,
|
|
1138
|
-
unsupportedType,
|
|
1139
|
-
props.hostTitle,
|
|
1140
|
-
formId,
|
|
1141
|
-
submitError,
|
|
1142
|
-
submitApplied,
|
|
1143
|
-
shownFailed,
|
|
1144
|
-
created,
|
|
1145
|
-
submit
|
|
1146
|
-
]);
|
|
1147
|
-
usePublishDocVariant(mode === "show" ? resource : void 0, record);
|
|
1148
|
-
const failure = controller.failure;
|
|
1149
|
-
const offering = failure?.kind === "type-required" && controller.typeOffer !== null;
|
|
1150
|
-
useEffect(() => {
|
|
1151
|
-
if (failure === null || offering || process.env.NODE_ENV === "production") return;
|
|
1152
|
-
console.error(`[burojs] <RecordScreen resource="${resource}" mode="${mode}"> cannot render its screen: ${failure.kind === "screen" ? `${failure.failure.code} at ${failure.failure.path.join(".")}: ${failure.failure.message}` : "a typed create needs an accepted type"}.`);
|
|
1153
|
-
}, [
|
|
1154
|
-
failure,
|
|
1155
|
-
offering,
|
|
1156
|
-
resource,
|
|
1157
|
-
mode
|
|
1158
|
-
]);
|
|
1159
|
-
const formControl = useFormControlOf(controller);
|
|
1160
|
-
const id = frameRecordId(frame, app.registry.get(frame.resource));
|
|
1161
|
-
const rootId = mode === "show" ? tid.pageShow(resource, id ?? "") : mode === "edit" ? tid.pageEdit(resource, id ?? "") : tid.pageCreate(resource);
|
|
1162
|
-
const claimedRoute = useContext(RouteSourceContext);
|
|
1163
|
-
const scopeValues = mode === "show" ? controller.record : controller.values;
|
|
1164
|
-
return jsx(RecordScopeProvider, {
|
|
1165
|
-
resource,
|
|
1166
|
-
...recordText === void 0 ? {} : { recordId: recordText },
|
|
1167
|
-
values: scopeValues,
|
|
1168
|
-
create: mode === "create",
|
|
1169
|
-
children: jsx(RouteSourceContext.Provider, {
|
|
1170
|
-
value: null,
|
|
1171
|
-
children: jsx(ActionRouteContext.Provider, {
|
|
1172
|
-
value: claimedRoute,
|
|
1173
|
-
children: jsx(RecordFrameContext.Provider, {
|
|
1174
|
-
value: frame,
|
|
1175
|
-
children: jsx(FrameChromeContext.Provider, {
|
|
1176
|
-
value: chrome,
|
|
1177
|
-
children: jsxs(FormControlProvider, {
|
|
1178
|
-
value: formControl,
|
|
1179
|
-
children: [jsx(DeepLinkScope, {
|
|
1180
|
-
plan: controller.plan,
|
|
1181
|
-
enabled: routeScreen && mode !== "create",
|
|
1182
|
-
children: jsx("div", {
|
|
1183
|
-
ref: root,
|
|
1184
|
-
"data-testid": rootId,
|
|
1185
|
-
className: "flex flex-col gap-[var(--buro-section-gap)]",
|
|
1186
|
-
children: offering && controller.typeOffer !== null ? jsx(TypeOffer, {
|
|
1187
|
-
resource,
|
|
1188
|
-
offer: controller.typeOffer,
|
|
1189
|
-
onChoose: (type) => chooseType(type)
|
|
1190
|
-
}) : failure !== null ? jsxs(Fragment$1, { children: [jsx(RecordState, { state: "error" }), jsx(FormActions, {})] }) : mode === "edit" && unsupportedType !== void 0 ? jsx(UndeclaredTypeNotice, {
|
|
1191
|
-
resource,
|
|
1192
|
-
typeValue: unsupportedType
|
|
1193
|
-
}) : jsxs(Fragment$1, { children: [jsx(ScopeMismatchBanner, {
|
|
1194
|
-
resource,
|
|
1195
|
-
record: mode === "create" ? controller.trustedSeeds : controller.record,
|
|
1196
|
-
kind: mode === "create" ? "created" : "record"
|
|
1197
|
-
}), jsx(RecordFrameView, { ...props.frame === void 0 ? {} : { frame: props.frame } })] })
|
|
1198
|
-
})
|
|
1199
|
-
}), controller.checkGate === null ? null : jsx(CheckConfirmDialog, {
|
|
1200
|
-
state: controller.checkGate,
|
|
1201
|
-
testid: `${tid.form(resource, mode, id)}:checks`
|
|
1202
|
-
})]
|
|
1203
|
-
})
|
|
1204
|
-
})
|
|
1205
|
-
})
|
|
1206
|
-
})
|
|
1207
|
-
})
|
|
1208
|
-
});
|
|
1209
|
-
}
|
|
1210
|
-
function RecordScreen(props) {
|
|
1211
|
-
const app = useApp();
|
|
1212
|
-
const routeScreen = useContext(RouteScreenClaimContext);
|
|
1213
|
-
const quickScreen = useContext(QuickScreenClaimContext);
|
|
1214
|
-
const route = useContext(RouteSourceContext);
|
|
1215
|
-
const resourceInput = props.resource;
|
|
1216
|
-
const resource = resourceKey(resourceInput);
|
|
1217
|
-
const tabs = useTabsUrlState(props.mode, routeScreen);
|
|
1218
|
-
const adapter = useOptionalRouterAdapter();
|
|
1219
|
-
const router = routeScreen ? adapter : null;
|
|
1220
|
-
const navigate = useRouteNavigate();
|
|
1221
|
-
const [local, setLocal] = useState(props.type);
|
|
1222
|
-
const [typeProp, setTypeProp] = useState(props.type);
|
|
1223
|
-
if (props.type !== typeProp) {
|
|
1224
|
-
setTypeProp(props.type);
|
|
1225
|
-
setLocal(props.type);
|
|
1226
|
-
}
|
|
1227
|
-
const [chose, setChose] = useState(false);
|
|
1228
|
-
const fromUrl = router?.searchParams.get("type") ?? void 0;
|
|
1229
|
-
const type = props.mode !== "create" ? props.type : router === null ? local : chose ? fromUrl : props.type ?? fromUrl;
|
|
1230
|
-
const chooseType = useCallback((next) => {
|
|
1231
|
-
if (router === null) {
|
|
1232
|
-
setLocal(next);
|
|
1233
|
-
return;
|
|
1234
|
-
}
|
|
1235
|
-
setChose(true);
|
|
1236
|
-
const params = new URLSearchParams(router.searchParams);
|
|
1237
|
-
if (next === void 0) params.delete("type");
|
|
1238
|
-
else params.set("type", next);
|
|
1239
|
-
const query = params.toString();
|
|
1240
|
-
navigate(query === "" ? router.pathname : `${router.pathname}?${query}`);
|
|
1241
|
-
}, [router, navigate]);
|
|
1242
|
-
if (app.registry.get(resource) === void 0) return jsx(RecordState, { state: "not-found" });
|
|
1243
|
-
const { type: _declared, ...rest } = props;
|
|
1244
|
-
return jsx(RouteScreenClaimContext.Provider, {
|
|
1245
|
-
value: false,
|
|
1246
|
-
children: jsx(QuickScreenClaimContext.Provider, {
|
|
1247
|
-
value: false,
|
|
1248
|
-
children: jsx(RouteSourceContext.Provider, {
|
|
1249
|
-
value: routeScreen || quickScreen ? route : null,
|
|
1250
|
-
children: jsx(RouteScreenContext.Provider, {
|
|
1251
|
-
value: routeScreen,
|
|
1252
|
-
children: jsx(ResourceContext.Provider, {
|
|
1253
|
-
value: { resource },
|
|
1254
|
-
children: jsx(ScreenStateProvider, {
|
|
1255
|
-
open: tabs.open,
|
|
1256
|
-
onOpenChange: tabs.onOpenChange,
|
|
1257
|
-
children: jsx(RecordFrameHost, {
|
|
1258
|
-
...rest,
|
|
1259
|
-
...type === void 0 ? {} : { type },
|
|
1260
|
-
resource,
|
|
1261
|
-
chooseType,
|
|
1262
|
-
hostTitle: quickScreen
|
|
1263
|
-
}, type ?? "")
|
|
1264
|
-
})
|
|
1265
|
-
})
|
|
1266
|
-
})
|
|
1267
|
-
})
|
|
1268
|
-
})
|
|
1269
|
-
});
|
|
1270
|
-
}
|
|
1271
|
-
//#endregion
|
|
1272
|
-
//#region src/layout/record-trail-store.ts
|
|
1273
|
-
const stores = new WeakMap();
|
|
1274
|
-
function storeOf(app) {
|
|
1275
|
-
let store = stores.get(app);
|
|
1276
|
-
if (store === void 0) {
|
|
1277
|
-
store = {
|
|
1278
|
-
current: null,
|
|
1279
|
-
listeners: new Set()
|
|
1280
|
-
};
|
|
1281
|
-
stores.set(app, store);
|
|
1282
|
-
}
|
|
1283
|
-
return store;
|
|
1284
|
-
}
|
|
1285
|
-
function set(store, value) {
|
|
1286
|
-
store.current = value;
|
|
1287
|
-
for (const listener of store.listeners) listener();
|
|
1288
|
-
}
|
|
1289
|
-
function recordTrailKey(resource, id, route) {
|
|
1290
|
-
return JSON.stringify([
|
|
1291
|
-
resource,
|
|
1292
|
-
id,
|
|
1293
|
-
route
|
|
1294
|
-
]);
|
|
1295
|
-
}
|
|
1296
|
-
function usePublishRecordTrail(entry) {
|
|
1297
|
-
const app = useApp();
|
|
1298
|
-
const key = entry?.key;
|
|
1299
|
-
const title = entry?.title;
|
|
1300
|
-
const flowLabel = entry?.flowLabel;
|
|
1301
|
-
useEffect(() => {
|
|
1302
|
-
if (key === void 0 || title === void 0) return;
|
|
1303
|
-
const store = storeOf(app);
|
|
1304
|
-
const value = {
|
|
1305
|
-
key,
|
|
1306
|
-
title,
|
|
1307
|
-
...flowLabel === void 0 ? {} : { flowLabel }
|
|
1308
|
-
};
|
|
1309
|
-
set(store, value);
|
|
1310
|
-
return () => {
|
|
1311
|
-
if (store.current === value) set(store, null);
|
|
1312
|
-
};
|
|
1313
|
-
}, [
|
|
1314
|
-
app,
|
|
1315
|
-
key,
|
|
1316
|
-
title,
|
|
1317
|
-
flowLabel
|
|
1318
|
-
]);
|
|
1319
|
-
}
|
|
1320
|
-
function usePublishedRecordTrail(key) {
|
|
1321
|
-
const store = storeOf(useApp());
|
|
1322
|
-
const subscribe = useCallback((listener) => {
|
|
1323
|
-
store.listeners.add(listener);
|
|
1324
|
-
return () => {
|
|
1325
|
-
store.listeners.delete(listener);
|
|
1326
|
-
};
|
|
1327
|
-
}, [store]);
|
|
1328
|
-
const current = useSyncExternalStore(subscribe, () => store.current, () => null);
|
|
1329
|
-
return current !== null && current.key === key ? current : null;
|
|
1330
|
-
}
|
|
1331
|
-
//#endregion
|
|
1332
|
-
//#region src/layout/record-targets.ts
|
|
1333
|
-
function isShowAvailable(registry, resource) {
|
|
1334
|
-
return recordRouteAvailable(registry, resource, "show");
|
|
1335
|
-
}
|
|
1336
|
-
function showTarget(resource, id) {
|
|
1337
|
-
return {
|
|
1338
|
-
resource,
|
|
1339
|
-
action: "show",
|
|
1340
|
-
params: { id }
|
|
1341
|
-
};
|
|
1342
|
-
}
|
|
1343
|
-
function listTarget(resource) {
|
|
1344
|
-
return {
|
|
1345
|
-
resource,
|
|
1346
|
-
action: "list"
|
|
1347
|
-
};
|
|
1348
|
-
}
|
|
1349
|
-
//#endregion
|
|
1350
|
-
//#region src/layout/route-trail.ts
|
|
1351
|
-
function useTrailContext() {
|
|
1352
|
-
const app = useApp();
|
|
1353
|
-
const caps = useI18nCaps();
|
|
1354
|
-
const isVisible = useNavVisible();
|
|
1355
|
-
const t = useT();
|
|
1356
|
-
return {
|
|
1357
|
-
registry: app.registry,
|
|
1358
|
-
caps,
|
|
1359
|
-
isVisible,
|
|
1360
|
-
t
|
|
1361
|
-
};
|
|
1362
|
-
}
|
|
1363
|
-
function groupCrumbs(ctx, chain) {
|
|
1364
|
-
return chain.map((group) => {
|
|
1365
|
-
const key = canonicalNavKey(group);
|
|
1366
|
-
return {
|
|
1367
|
-
label: resolveNavLabel(ctx.caps, `groups.${key}`, declaredText("chrome", group, "label")),
|
|
1368
|
-
href: groupNavHref(ctx.registry, key, ctx.isVisible),
|
|
1369
|
-
jump: true
|
|
1370
|
-
};
|
|
1371
|
-
});
|
|
1372
|
-
}
|
|
1373
|
-
function nonEmpty(crumbs) {
|
|
1374
|
-
return crumbs.length > 0 ? crumbs : void 0;
|
|
1375
|
-
}
|
|
1376
|
-
function recordActionOf(match) {
|
|
1377
|
-
if (match === null || match.kind !== "resource") return void 0;
|
|
1378
|
-
switch (match.action) {
|
|
1379
|
-
case "show":
|
|
1380
|
-
case "edit":
|
|
1381
|
-
case "create": return match.action;
|
|
1382
|
-
default: return;
|
|
1383
|
-
}
|
|
1384
|
-
}
|
|
1385
|
-
function pathOf(href) {
|
|
1386
|
-
const path = href.split(/[?#]/, 1)[0] ?? "";
|
|
1387
|
-
return path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
|
|
1388
|
-
}
|
|
1389
|
-
function originTrail(ctx, origin, depth = ORIGIN_DEPTH) {
|
|
1390
|
-
const match = matchPath(ctx.registry, pathOf(origin.href), { isVisible: ctx.isVisible });
|
|
1391
|
-
if (match === null) return void 0;
|
|
1392
|
-
switch (match.kind) {
|
|
1393
|
-
case "resource": {
|
|
1394
|
-
const key = canonicalNavKey(match);
|
|
1395
|
-
if (match.action === "list") return {
|
|
1396
|
-
leading: groupCrumbs(ctx, match.groupChain),
|
|
1397
|
-
resource: key,
|
|
1398
|
-
resourceHref: origin.href,
|
|
1399
|
-
segments: []
|
|
1400
|
-
};
|
|
1401
|
-
const def = ctx.registry.get(key);
|
|
1402
|
-
const crumb = {
|
|
1403
|
-
label: match.action === "create" ? ctx.t("breadcrumbs.create") : origin.title || (match.id === void 0 ? "" : `#${match.id}`),
|
|
1404
|
-
href: origin.href
|
|
1405
|
-
};
|
|
1406
|
-
const parent = depth > 1 && origin.origin !== void 0 ? originTrail(ctx, origin.origin, depth - 1) : void 0;
|
|
1407
|
-
if (parent !== void 0) return {
|
|
1408
|
-
...parent,
|
|
1409
|
-
segments: [...parent.segments, crumb]
|
|
1410
|
-
};
|
|
1411
|
-
return {
|
|
1412
|
-
leading: groupCrumbs(ctx, match.groupChain),
|
|
1413
|
-
resource: key,
|
|
1414
|
-
...def !== void 0 && hasListPage(def) ? { resourceHref: hrefFor(ctx.registry, key) } : {},
|
|
1415
|
-
segments: [crumb]
|
|
1416
|
-
};
|
|
1417
|
-
}
|
|
1418
|
-
case "custom-page": {
|
|
1419
|
-
const trail = headerTrail(ctx, match);
|
|
1420
|
-
if (trail === null || trail.pageLabel === void 0) return void 0;
|
|
1421
|
-
return {
|
|
1422
|
-
leading: trail.leadingSegments ?? [],
|
|
1423
|
-
segments: [{
|
|
1424
|
-
label: trail.pageLabel,
|
|
1425
|
-
href: origin.href
|
|
1426
|
-
}]
|
|
1427
|
-
};
|
|
1428
|
-
}
|
|
1429
|
-
case "group-index": {
|
|
1430
|
-
const crumbs = groupCrumbs(ctx, match.groupChain);
|
|
1431
|
-
const own = crumbs[crumbs.length - 1];
|
|
1432
|
-
if (own === void 0) return void 0;
|
|
1433
|
-
return {
|
|
1434
|
-
leading: crumbs.slice(0, -1),
|
|
1435
|
-
segments: [{
|
|
1436
|
-
label: own.label,
|
|
1437
|
-
href: origin.href
|
|
1438
|
-
}]
|
|
1439
|
-
};
|
|
1440
|
-
}
|
|
1441
|
-
default: return;
|
|
1442
|
-
}
|
|
1443
|
-
}
|
|
1444
|
-
function recordTrail(ctx, input) {
|
|
1445
|
-
const { resource, action, id, origin } = input;
|
|
1446
|
-
if (origin !== void 0 && (action === "create" || id !== "")) return originRooted(ctx, input, origin);
|
|
1447
|
-
const leadingSegments = nonEmpty(groupCrumbs(ctx, input.groupChain));
|
|
1448
|
-
if (action !== "create" && id === "") return {
|
|
1449
|
-
resource,
|
|
1450
|
-
leadingSegments
|
|
1451
|
-
};
|
|
1452
|
-
const recordLabel = input.title || id;
|
|
1453
|
-
const middleSegments = action === "edit" ? [isShowAvailable(ctx.registry, resource) ? {
|
|
1454
|
-
label: recordLabel,
|
|
1455
|
-
href: resolveRoute(showTarget(resource, id), ctx.registry)
|
|
1456
|
-
} : { label: recordLabel }] : void 0;
|
|
1457
|
-
const pageLabel = action === "create" ? ctx.t("breadcrumbs.create") : action === "edit" ? ctx.t("breadcrumbs.edit") : recordLabel;
|
|
1458
|
-
return {
|
|
1459
|
-
resource,
|
|
1460
|
-
recordId: action === "create" ? void 0 : id,
|
|
1461
|
-
pageLabel,
|
|
1462
|
-
leadingSegments,
|
|
1463
|
-
middleSegments
|
|
1464
|
-
};
|
|
1465
|
-
}
|
|
1466
|
-
function originRooted(ctx, input, origin) {
|
|
1467
|
-
const { resource, action, id } = input;
|
|
1468
|
-
const recordLabel = input.title || id;
|
|
1469
|
-
const drawn = new Set(origin.segments.flatMap((crumb) => crumb.href === void 0 ? [] : [pathOf(crumb.href)]));
|
|
1470
|
-
const own = action === "edit" ? [isShowAvailable(ctx.registry, resource) ? {
|
|
1471
|
-
label: recordLabel,
|
|
1472
|
-
href: resolveRoute(showTarget(resource, id), ctx.registry)
|
|
1473
|
-
} : { label: recordLabel }].filter((crumb) => crumb.href === void 0 || !drawn.has(pathOf(crumb.href))) : [];
|
|
1474
|
-
const pageLabel = action === "create" ? ctx.t("breadcrumbs.create") : action === "edit" ? ctx.t("breadcrumbs.edit") : recordLabel;
|
|
1475
|
-
const recordId = action === "create" ? void 0 : id;
|
|
1476
|
-
const middleSegments = nonEmpty([...origin.segments, ...own]);
|
|
1477
|
-
if (origin.resource !== void 0 && ctx.registry.get(origin.resource) === ctx.registry.get(resource)) return {
|
|
1478
|
-
resource,
|
|
1479
|
-
recordId,
|
|
1480
|
-
pageLabel,
|
|
1481
|
-
leadingSegments: nonEmpty([...origin.leading]),
|
|
1482
|
-
...origin.resourceHref === void 0 ? {} : { resourceHref: origin.resourceHref },
|
|
1483
|
-
middleSegments
|
|
1484
|
-
};
|
|
1485
|
-
const def = origin.resource === void 0 ? void 0 : ctx.registry.get(origin.resource);
|
|
1486
|
-
const resourceCrumb = origin.resource === void 0 ? [] : [{
|
|
1487
|
-
label: resolveResourceLabel(ctx.caps, origin.resource, "plural", def),
|
|
1488
|
-
...origin.resourceHref === void 0 ? {} : { href: origin.resourceHref }
|
|
1489
|
-
}];
|
|
1490
|
-
return {
|
|
1491
|
-
resource,
|
|
1492
|
-
recordId,
|
|
1493
|
-
pageLabel,
|
|
1494
|
-
rootSegments: [
|
|
1495
|
-
...origin.leading,
|
|
1496
|
-
...resourceCrumb,
|
|
1497
|
-
...origin.segments,
|
|
1498
|
-
...own
|
|
1499
|
-
]
|
|
1500
|
-
};
|
|
1501
|
-
}
|
|
1502
|
-
function recordTrailRoute(registry, match) {
|
|
1503
|
-
if (match === null || match.kind !== "resource") return null;
|
|
1504
|
-
const resource = canonicalNavKey(match);
|
|
1505
|
-
const { groupChain } = match;
|
|
1506
|
-
if (match.action === "flow") return {
|
|
1507
|
-
resource,
|
|
1508
|
-
action: "show",
|
|
1509
|
-
id: match.id ?? "",
|
|
1510
|
-
flow: match.flow ?? "",
|
|
1511
|
-
groupChain
|
|
1512
|
-
};
|
|
1513
|
-
const action = recordActionOf(match);
|
|
1514
|
-
if (action === void 0 || !recordRouteAvailable(registry, resource, action)) return null;
|
|
1515
|
-
return {
|
|
1516
|
-
resource,
|
|
1517
|
-
action,
|
|
1518
|
-
id: action === "create" ? "" : match.id ?? "",
|
|
1519
|
-
groupChain
|
|
1520
|
-
};
|
|
1521
|
-
}
|
|
1522
|
-
function headerTrail(ctx, match) {
|
|
1523
|
-
if (match === null) return null;
|
|
1524
|
-
const key = canonicalNavKey(match);
|
|
1525
|
-
switch (match.kind) {
|
|
1526
|
-
case "resource": {
|
|
1527
|
-
const leadingSegments = nonEmpty(groupCrumbs(ctx, match.groupChain));
|
|
1528
|
-
const action = recordActionOf(match);
|
|
1529
|
-
if (recordTrailRoute(ctx.registry, match) !== null) return null;
|
|
1530
|
-
if (action === void 0) return {
|
|
1531
|
-
resource: key,
|
|
1532
|
-
leadingSegments
|
|
1533
|
-
};
|
|
1534
|
-
return {
|
|
1535
|
-
resource: key,
|
|
1536
|
-
recordId: match.id,
|
|
1537
|
-
pageLabel: ctx.t("router.notFoundTitle"),
|
|
1538
|
-
leadingSegments
|
|
1539
|
-
};
|
|
1540
|
-
}
|
|
1541
|
-
case "custom-page": {
|
|
1542
|
-
const page = ctx.registry.customPages.get(match.name);
|
|
1543
|
-
if (page === void 0 || !ctx.isVisible(page)) return null;
|
|
1544
|
-
return {
|
|
1545
|
-
name: key,
|
|
1546
|
-
pageLabel: resolveNavLabel(ctx.caps, `pages.${key}`, declaredText("chrome", page, "label")),
|
|
1547
|
-
leadingSegments: nonEmpty(groupCrumbs(ctx, match.groupChain))
|
|
1548
|
-
};
|
|
1549
|
-
}
|
|
1550
|
-
case "group-index": {
|
|
1551
|
-
const own = match.groupChain[match.groupChain.length - 1];
|
|
1552
|
-
if (own === void 0) return null;
|
|
1553
|
-
const crumbs = groupCrumbs(ctx, match.groupChain);
|
|
1554
|
-
const current = crumbs[crumbs.length - 1];
|
|
1555
|
-
return {
|
|
1556
|
-
name: canonicalNavKey(own),
|
|
1557
|
-
pageLabel: current.label,
|
|
1558
|
-
leadingSegments: nonEmpty(crumbs.slice(0, -1))
|
|
1559
|
-
};
|
|
1560
|
-
}
|
|
1561
|
-
default: return null;
|
|
1562
|
-
}
|
|
1563
|
-
}
|
|
1564
|
-
function recentStorageKey(userId) {
|
|
1565
|
-
return `buro:recent:v2:${userId}`;
|
|
1566
|
-
}
|
|
1567
|
-
function isRecent(value) {
|
|
1568
|
-
if (typeof value !== "object" || value === null) return false;
|
|
1569
|
-
const entry = value;
|
|
1570
|
-
return typeof entry.canonicalRef === "string" && typeof entry.id === "string" && typeof entry.label === "string" && (entry.labelField === void 0 || typeof entry.labelField === "string") && typeof entry.at === "string";
|
|
1571
|
-
}
|
|
1572
|
-
function parse(raw) {
|
|
1573
|
-
if (raw === null) return [];
|
|
1574
|
-
try {
|
|
1575
|
-
const parsed = JSON.parse(raw);
|
|
1576
|
-
if (typeof parsed !== "object" || parsed === null) return [];
|
|
1577
|
-
const envelope = parsed;
|
|
1578
|
-
if (envelope.version !== 2 || !Array.isArray(envelope.items)) return [];
|
|
1579
|
-
return envelope.items.filter(isRecent);
|
|
1580
|
-
} catch {
|
|
1581
|
-
return [];
|
|
1582
|
-
}
|
|
1583
|
-
}
|
|
1584
|
-
function readRecentRecords(store, userId) {
|
|
1585
|
-
return maybeThen(settle(() => store.get(recentStorageKey(userId)), null), parse);
|
|
1586
|
-
}
|
|
1587
|
-
function writeRecentRecord(store, userId, entry) {
|
|
1588
|
-
const key = recentStorageKey(userId);
|
|
1589
|
-
return maybeThen(settle(() => store.get(key), null), (raw) => {
|
|
1590
|
-
const envelope = {
|
|
1591
|
-
version: 2,
|
|
1592
|
-
items: [entry, ...parse(raw).filter((item) => !(item.canonicalRef === entry.canonicalRef && item.id === entry.id))].slice(0, 5)
|
|
1593
|
-
};
|
|
1594
|
-
return settle(() => store.set(key, JSON.stringify(envelope)), void 0);
|
|
1595
|
-
});
|
|
1596
|
-
}
|
|
1597
|
-
function text(value) {
|
|
1598
|
-
return typeof value === "string" && value.length > 0 ? value : void 0;
|
|
1599
|
-
}
|
|
1600
|
-
const RECENT_LABEL_KEYS = [
|
|
1601
|
-
"alias",
|
|
1602
|
-
"name",
|
|
1603
|
-
"title",
|
|
1604
|
-
"label"
|
|
1605
|
-
];
|
|
1606
|
-
function recentLabel(record, id, isGuarded = () => false) {
|
|
1607
|
-
for (const key of RECENT_LABEL_KEYS) {
|
|
1608
|
-
if (isGuarded(key)) continue;
|
|
1609
|
-
const value = text(record[key]);
|
|
1610
|
-
if (value !== void 0) return {
|
|
1611
|
-
label: value,
|
|
1612
|
-
field: key
|
|
1613
|
-
};
|
|
1614
|
-
}
|
|
1615
|
-
return { label: id };
|
|
1616
|
-
}
|
|
1617
|
-
//#endregion
|
|
1618
|
-
//#region src/layout/use-record-visit.ts
|
|
1619
|
-
function useRecordVisit(resource, record, opts) {
|
|
1620
|
-
const userId = useCurrentUserId();
|
|
1621
|
-
const store = usePlatformStorage().local;
|
|
1622
|
-
const app = useApp();
|
|
1623
|
-
const def = app.registry.get(resource);
|
|
1624
|
-
const raw = recordKeyOf(def, record);
|
|
1625
|
-
const id = typeof raw === "string" || typeof raw === "number" ? String(raw) : void 0;
|
|
1626
|
-
const fields = def?.fields;
|
|
1627
|
-
const rules = app.ruleSource?.rules(resource) ?? [];
|
|
1628
|
-
const isGuarded = (field) => fields !== void 0 && Object.hasOwn(fields, field) && fieldSensitivity(fields[field]) !== void 0 || addressesCapability(rules, "view", {
|
|
1629
|
-
kind: "field",
|
|
1630
|
-
name: field
|
|
1631
|
-
});
|
|
1632
|
-
const picked = record != null && id !== void 0 ? recentLabel(record, id, isGuarded) : void 0;
|
|
1633
|
-
const label = picked?.label;
|
|
1634
|
-
const labelField = picked?.field;
|
|
1635
|
-
const canonicalRef = canonicalResourceName(resource);
|
|
1636
|
-
const { isCurrentData } = opts;
|
|
1637
|
-
useEffect(() => {
|
|
1638
|
-
if (userId === null || !isCurrentData || id === void 0 || id === "") return;
|
|
1639
|
-
if (label === void 0) return;
|
|
1640
|
-
writeRecentRecord(store, userId, {
|
|
1641
|
-
canonicalRef,
|
|
1642
|
-
id,
|
|
1643
|
-
label,
|
|
1644
|
-
...labelField === void 0 ? {} : { labelField },
|
|
1645
|
-
at: new Date().toISOString()
|
|
1646
|
-
});
|
|
1647
|
-
}, [
|
|
1648
|
-
store,
|
|
1649
|
-
userId,
|
|
1650
|
-
isCurrentData,
|
|
1651
|
-
canonicalRef,
|
|
1652
|
-
id,
|
|
1653
|
-
label,
|
|
1654
|
-
labelField
|
|
1655
|
-
]);
|
|
1656
|
-
}
|
|
1657
|
-
//#endregion
|
|
1658
|
-
//#region src/layout/record-page.tsx
|
|
1659
|
-
function useMountedRef() {
|
|
1660
|
-
const mounted = useRef(true);
|
|
1661
|
-
useEffect(() => {
|
|
1662
|
-
mounted.current = true;
|
|
1663
|
-
return () => {
|
|
1664
|
-
mounted.current = false;
|
|
1665
|
-
};
|
|
1666
|
-
}, []);
|
|
1667
|
-
return mounted;
|
|
1668
|
-
}
|
|
1669
|
-
function RecordRouteHeader({ resource, action, id, record }) {
|
|
1670
|
-
const recordName = useRecordTitle(resource, action === "create" ? void 0 : id, record);
|
|
1671
|
-
usePublishRecordTrail(action === "create" ? null : {
|
|
1672
|
-
key: recordTrailKey(resource, id, action),
|
|
1673
|
-
title: recordName
|
|
1674
|
-
});
|
|
1675
|
-
return jsx(PageHeader, {
|
|
1676
|
-
resource,
|
|
1677
|
-
mode: action,
|
|
1678
|
-
...action === "create" ? {} : { recordName }
|
|
1679
|
-
});
|
|
1680
|
-
}
|
|
1681
|
-
function RecordShow({ resource, id, recordId, record, shown }) {
|
|
1682
|
-
return jsxs("div", { children: [jsx(RecordRouteHeader, {
|
|
1683
|
-
resource,
|
|
1684
|
-
action: "show",
|
|
1685
|
-
id,
|
|
1686
|
-
record: shown
|
|
1687
|
-
}), jsx(RecordScreen, {
|
|
1688
|
-
resource,
|
|
1689
|
-
mode: "show",
|
|
1690
|
-
recordId,
|
|
1691
|
-
record
|
|
1692
|
-
})] });
|
|
1693
|
-
}
|
|
1694
|
-
function RecordEdit({ resource, id, recordId, record, shown }) {
|
|
1695
|
-
const navigate = useRouteNavigate();
|
|
1696
|
-
const mounted = useMountedRef();
|
|
1697
|
-
const back = useReturnTarget(resource, "edit", id);
|
|
1698
|
-
return jsxs("div", { children: [jsx(RecordRouteHeader, {
|
|
1699
|
-
resource,
|
|
1700
|
-
action: "edit",
|
|
1701
|
-
id,
|
|
1702
|
-
record: shown
|
|
1703
|
-
}), jsx(RecordScreen, {
|
|
1704
|
-
resource,
|
|
1705
|
-
mode: "edit",
|
|
1706
|
-
recordId,
|
|
1707
|
-
record,
|
|
1708
|
-
onCancel: () => navigate(back, { origin: "inherit" }),
|
|
1709
|
-
onSuccess: () => {
|
|
1710
|
-
if (mounted.current) navigate(back, { origin: "inherit" });
|
|
1711
|
-
}
|
|
1712
|
-
})] });
|
|
1713
|
-
}
|
|
1714
|
-
function createdId(result) {
|
|
1715
|
-
const id = result?.id;
|
|
1716
|
-
return typeof id === "string" || typeof id === "number" ? String(id) : void 0;
|
|
1717
|
-
}
|
|
1718
|
-
function RecordCreate({ resource, defaults }) {
|
|
1719
|
-
const app = useApp();
|
|
1720
|
-
const navigate = useRouteNavigate();
|
|
1721
|
-
const mounted = useMountedRef();
|
|
1722
|
-
const adapter = useOptionalRouterAdapter();
|
|
1723
|
-
const list = listTarget(resource);
|
|
1724
|
-
const back = useReturnTarget(resource, "create");
|
|
1725
|
-
const type = adapter?.searchParams.get("type") ?? void 0;
|
|
1726
|
-
return jsxs("div", { children: [jsx(RecordRouteHeader, {
|
|
1727
|
-
resource,
|
|
1728
|
-
action: "create",
|
|
1729
|
-
id: ""
|
|
1730
|
-
}), jsx(RouteScreenClaimContext.Provider, {
|
|
1731
|
-
value: true,
|
|
1732
|
-
children: jsx(RecordScreen, {
|
|
1733
|
-
resource,
|
|
1734
|
-
mode: "create",
|
|
1735
|
-
...type === void 0 ? {} : { type },
|
|
1736
|
-
...defaults === void 0 ? {} : { defaults },
|
|
1737
|
-
onCancel: () => navigate(back, { origin: "inherit" }),
|
|
1738
|
-
onSuccess: (result) => {
|
|
1739
|
-
if (!mounted.current) return;
|
|
1740
|
-
const id = createdId(result);
|
|
1741
|
-
navigate(id !== void 0 && isShowAvailable(app.registry, resource) ? showTarget(resource, id) : list, { origin: "inherit" });
|
|
1742
|
-
}
|
|
1743
|
-
})
|
|
1744
|
-
})] });
|
|
1745
|
-
}
|
|
1746
|
-
function RecordRead({ resource, action, id, recordId }) {
|
|
1747
|
-
const app = useApp();
|
|
1748
|
-
const def = app.registry.get(resource);
|
|
1749
|
-
const projection = useMemo(() => def === void 0 ? void 0 : dtoFields(def, "record"), [def]);
|
|
1750
|
-
const query = useOne(resource, {
|
|
1751
|
-
id: recordId,
|
|
1752
|
-
retry: retryRecordRead,
|
|
1753
|
-
...projection === void 0 ? {} : { projection }
|
|
1754
|
-
});
|
|
1755
|
-
const result = query.data;
|
|
1756
|
-
const read = result?.data;
|
|
1757
|
-
const projected = useProjectedRecord(resource, read, { placeholder: query.isPlaceholderData });
|
|
1758
|
-
const showAvailability = useAvailabilityResolver(resource, "show");
|
|
1759
|
-
const permissions = useCtx((c) => c.permissions);
|
|
1760
|
-
const showRuled = addressesCapability(app.ruleSource.rules(resource), "run", {
|
|
1761
|
-
kind: "action",
|
|
1762
|
-
name: "show"
|
|
1763
|
-
});
|
|
1764
|
-
const showHidden = showRuled && read !== null && typeof read === "object" && showAvailability("show", read).state !== "available";
|
|
1765
|
-
const showSettled = !showRuled || !query.isPlaceholderData && !permissionsUndecided(permissions) && permissions?.status !== "error";
|
|
1766
|
-
useRecordVisit(resource, projected.status === "ready" && showSettled && !showHidden ? projected.value : null, { isCurrentData: !query.isPlaceholderData });
|
|
1767
|
-
const route = useMemo(() => Object.freeze({ id }), [id]);
|
|
1768
|
-
const availability = useAvailabilityResolver(resource, "edit");
|
|
1769
|
-
if (result !== void 0) {
|
|
1770
|
-
const record = result.data;
|
|
1771
|
-
if (record === null || typeof record !== "object") return jsx(RecordState, { state: "not-found" });
|
|
1772
|
-
const loaded = record;
|
|
1773
|
-
if (showRuled) {
|
|
1774
|
-
if (query.isPlaceholderData || permissionsUndecided(permissions)) return jsx(RecordState, { state: "loading" });
|
|
1775
|
-
if (permissions?.status === "error") return jsx(RecordState, { state: "not-found" });
|
|
1776
|
-
if (showHidden) return jsx(RecordState, { state: "not-found" });
|
|
1777
|
-
}
|
|
1778
|
-
if (projected.status === "pending" || projected.value === null) return jsx(RecordState, { state: "loading" });
|
|
1779
|
-
const shown = projected.value;
|
|
1780
|
-
if (action === "edit") {
|
|
1781
|
-
const edit = availability("edit", loaded).state;
|
|
1782
|
-
if (edit === "hidden" || edit === "absent") return jsx(RecordState, { state: "not-found" });
|
|
1783
|
-
if (edit === "undecided") return jsx(RecordState, { state: "loading" });
|
|
1784
|
-
}
|
|
1785
|
-
return jsx(RouteSourceContext.Provider, {
|
|
1786
|
-
value: route,
|
|
1787
|
-
children: jsx(RouteScreenClaimContext.Provider, {
|
|
1788
|
-
value: true,
|
|
1789
|
-
children: action === "edit" ? jsx(RecordEdit, {
|
|
1790
|
-
resource,
|
|
1791
|
-
id,
|
|
1792
|
-
recordId,
|
|
1793
|
-
record: loaded,
|
|
1794
|
-
shown
|
|
1795
|
-
}) : jsx(RecordShow, {
|
|
1796
|
-
resource,
|
|
1797
|
-
id,
|
|
1798
|
-
recordId,
|
|
1799
|
-
record: loaded,
|
|
1800
|
-
shown
|
|
1801
|
-
})
|
|
1802
|
-
})
|
|
1803
|
-
});
|
|
1804
|
-
}
|
|
1805
|
-
if (query.error != null) return jsx(LoadError, {
|
|
1806
|
-
surface: "record",
|
|
1807
|
-
resource,
|
|
1808
|
-
error: query.error,
|
|
1809
|
-
retry: () => void query.refetch()
|
|
1810
|
-
});
|
|
1811
|
-
return jsx(RecordState, { state: "loading" });
|
|
1812
|
-
}
|
|
1813
|
-
function RecordRouteBody(props) {
|
|
1814
|
-
if (props.action === "create") return jsx(RecordCreate, { ...props });
|
|
1815
|
-
if (props.id === "") return jsx(RecordState, { state: "not-found" });
|
|
1816
|
-
return jsx(RecordReadRoute, { ...props });
|
|
1817
|
-
}
|
|
1818
|
-
function RecordReadRoute(props) {
|
|
1819
|
-
const recordId = useRouteRecordId(props.resource, props.id);
|
|
1820
|
-
if (recordId === void 0) return jsx(InvalidRouteId, { resource: props.resource });
|
|
1821
|
-
return jsx(RecordRead, {
|
|
1822
|
-
...props,
|
|
1823
|
-
recordId
|
|
1824
|
-
});
|
|
1825
|
-
}
|
|
1826
|
-
function RecordRoute(props) {
|
|
1827
|
-
const missingRuntime = useOptionalDataRuntime() === null;
|
|
1828
|
-
useEffect(() => {
|
|
1829
|
-
if (!missingRuntime || process.env.NODE_ENV === "production") return;
|
|
1830
|
-
console.error(`[burojs] The '${props.resource}' record page has no data runtime to read or write with: BuroProvider.dataRuntime is not set. Pass <BuroProvider dataRuntime={…}> (createDataRuntime from @burojs/react); until then record routes render the error state.`);
|
|
1831
|
-
}, [missingRuntime, props.resource]);
|
|
1832
|
-
if (missingRuntime) return jsx(RecordState, { state: "error" });
|
|
1833
|
-
return jsx(RecordRouteBody, { ...props }, `${props.resource}:${props.id}`);
|
|
1834
|
-
}
|
|
1835
|
-
function recordPageProblem(input) {
|
|
1836
|
-
const { props, resource, action } = input;
|
|
1837
|
-
if (resource === void 0 || action === void 0) return "[burojs] <RecordPage> needs both `resource` and `action`. Pass them; until then it renders not-found.";
|
|
1838
|
-
if (!input.onRecordRoute) return `[burojs] <RecordPage resource="${resource}" action="${action}"> is not on a record route (show, edit or create), so it has no record to read: render it on one, under a RouterAdapterProvider. Until then it renders not-found.`;
|
|
1839
|
-
if (props.defaults !== void 0 && action !== "create") return `[burojs] <RecordPage defaults> applies to create only; on this '${action}' route it is ignored.`;
|
|
1840
|
-
return null;
|
|
1841
|
-
}
|
|
1842
|
-
const recordPageProblemsLogged = new WeakMap();
|
|
1843
|
-
function RecordPage(props) {
|
|
1844
|
-
const app = useApp();
|
|
1845
|
-
const match = useMatch();
|
|
1846
|
-
const id = match === null ? null : match.id ?? "";
|
|
1847
|
-
const { action } = props;
|
|
1848
|
-
const resource = props.resource === void 0 ? void 0 : routeResourceKey(props.resource);
|
|
1849
|
-
const onRecordRoute = recordActionOf(match) !== void 0;
|
|
1850
|
-
const problem = recordPageProblem({
|
|
1851
|
-
props,
|
|
1852
|
-
resource,
|
|
1853
|
-
action,
|
|
1854
|
-
onRecordRoute
|
|
1855
|
-
});
|
|
1856
|
-
useEffect(() => {
|
|
1857
|
-
if (problem === null || process.env.NODE_ENV === "production") return;
|
|
1858
|
-
let logged = recordPageProblemsLogged.get(app);
|
|
1859
|
-
if (logged === void 0) {
|
|
1860
|
-
logged = new Set();
|
|
1861
|
-
recordPageProblemsLogged.set(app, logged);
|
|
1862
|
-
}
|
|
1863
|
-
if (logged.has(problem)) return;
|
|
1864
|
-
logged.add(problem);
|
|
1865
|
-
console.error(problem);
|
|
1866
|
-
}, [app, problem]);
|
|
1867
|
-
if (resource === void 0 || action === void 0 || id === null || !onRecordRoute) return jsx(RecordState, { state: "not-found" });
|
|
1868
|
-
const route = action === "create" ? {
|
|
1869
|
-
resource,
|
|
1870
|
-
action,
|
|
1871
|
-
defaults: props.defaults
|
|
1872
|
-
} : {
|
|
1873
|
-
resource,
|
|
1874
|
-
action
|
|
1875
|
-
};
|
|
1876
|
-
return jsx(RecordRoute, {
|
|
1877
|
-
...route,
|
|
1878
|
-
id
|
|
1879
|
-
});
|
|
1880
|
-
}
|
|
1881
|
-
//#endregion
|
|
1882
|
-
//#region src/layout/resource-page-router.tsx
|
|
1883
|
-
function ResourcePageRouterEmpty() {
|
|
1884
|
-
const t = useT();
|
|
1885
|
-
return jsxs("div", {
|
|
1886
|
-
"data-testid": "resource-page-router-empty",
|
|
1887
|
-
className: "flex flex-col items-center justify-center gap-1 px-6 py-24 text-center",
|
|
1888
|
-
children: [jsx("h2", {
|
|
1889
|
-
className: "text-base font-semibold tracking-tight",
|
|
1890
|
-
children: t("router.emptyTitle")
|
|
1891
|
-
}), jsx("p", {
|
|
1892
|
-
className: "max-w-sm text-sm text-muted-foreground",
|
|
1893
|
-
children: t("router.emptyBody")
|
|
1894
|
-
})]
|
|
1895
|
-
});
|
|
1896
|
-
}
|
|
1897
|
-
function ResourcePageRouter({ match }) {
|
|
1898
|
-
const app = useApp();
|
|
1899
|
-
const qualifiedMatch = match;
|
|
1900
|
-
const resource = canonicalNavKey(qualifiedMatch);
|
|
1901
|
-
const target = canonicalNavKey({
|
|
1902
|
-
name: match.target ?? match.name,
|
|
1903
|
-
ref: qualifiedMatch.targetRef
|
|
1904
|
-
});
|
|
1905
|
-
const recordAction = recordActionOf(match);
|
|
1906
|
-
switch (match.kind) {
|
|
1907
|
-
case "resource":
|
|
1908
|
-
if (match.action === "list") {
|
|
1909
|
-
const def = app.registry.get(resource);
|
|
1910
|
-
return def !== void 0 && !hasListPage(def) ? jsx(NavAreaNotFound, {}) : jsx(ResourceListPage, { resource });
|
|
1911
|
-
}
|
|
1912
|
-
if (match.action === "flow") return jsx(PageFlowRouteLoader, { match });
|
|
1913
|
-
if (recordAction === void 0) return jsx(ResourcePageRouterEmpty, {});
|
|
1914
|
-
if (!recordRouteAvailable(app.registry, resource, recordAction)) return jsx(NavAreaNotFound, {});
|
|
1915
|
-
return jsx(RecordRoute, {
|
|
1916
|
-
resource,
|
|
1917
|
-
action: recordAction,
|
|
1918
|
-
id: match.id ?? ""
|
|
1919
|
-
});
|
|
1920
|
-
case "custom-page": {
|
|
1921
|
-
const page = app.registry.customPages.get(resource);
|
|
1922
|
-
if (page === void 0) return jsx(ResourcePageRouterEmpty, {});
|
|
1923
|
-
if (!page.body?.length) return jsx(NavAreaNotFound, {});
|
|
1924
|
-
return jsx(PageHost, {
|
|
1925
|
-
page,
|
|
1926
|
-
match,
|
|
1927
|
-
notFound: jsx(NavAreaNotFound, {})
|
|
1928
|
-
}, resource);
|
|
1929
|
-
}
|
|
1930
|
-
case "group-index": {
|
|
1931
|
-
const indexPage = app.registry.customPages.get(target);
|
|
1932
|
-
if (indexPage?.body?.length) return jsx(PageHost, {
|
|
1933
|
-
page: indexPage,
|
|
1934
|
-
match,
|
|
1935
|
-
notFound: jsx(NavAreaNotFound, {})
|
|
1936
|
-
}, target);
|
|
1937
|
-
const targetDef = app.registry.get(target);
|
|
1938
|
-
if (targetDef !== void 0) return hasListPage(targetDef) ? jsx(ResourceListPage, { resource: target }) : jsx(NavAreaNotFound, {});
|
|
1939
|
-
return jsx(ResourcePageRouterEmpty, {});
|
|
1940
|
-
}
|
|
1941
|
-
default: return jsx(ResourcePageRouterEmpty, {});
|
|
1942
|
-
}
|
|
1943
|
-
}
|
|
1944
|
-
function NavAreaPageSkeleton() {
|
|
1945
|
-
return jsxs("div", {
|
|
1946
|
-
className: "space-y-3 p-6",
|
|
1947
|
-
role: "status",
|
|
1948
|
-
"aria-busy": "true",
|
|
1949
|
-
"aria-live": "polite",
|
|
1950
|
-
"data-testid": "nav-area-skeleton",
|
|
1951
|
-
children: [
|
|
1952
|
-
jsx("span", {
|
|
1953
|
-
className: "sr-only",
|
|
1954
|
-
children: "Loading…"
|
|
1955
|
-
}),
|
|
1956
|
-
jsx("div", { className: "h-6 w-48 animate-pulse rounded bg-muted/60" }),
|
|
1957
|
-
jsx("div", { className: "h-4 w-full animate-pulse rounded bg-muted/40" }),
|
|
1958
|
-
jsx("div", { className: "h-4 w-5/6 animate-pulse rounded bg-muted/40" }),
|
|
1959
|
-
jsx("div", { className: "h-4 w-2/3 animate-pulse rounded bg-muted/40" })
|
|
1960
|
-
]
|
|
1961
|
-
});
|
|
1962
|
-
}
|
|
1963
|
-
function NavAreaNotFound() {
|
|
1964
|
-
const t = useT();
|
|
1965
|
-
return jsxs("div", {
|
|
1966
|
-
"data-testid": "nav-area-not-found",
|
|
1967
|
-
className: "flex flex-col items-center justify-center gap-1 px-6 py-24 text-center",
|
|
1968
|
-
children: [jsx("h2", {
|
|
1969
|
-
className: "text-base font-semibold tracking-tight",
|
|
1970
|
-
children: t("router.notFoundTitle")
|
|
1971
|
-
}), jsx("p", {
|
|
1972
|
-
className: "max-w-sm text-sm text-muted-foreground",
|
|
1973
|
-
children: t("router.notFoundBody")
|
|
1974
|
-
})]
|
|
1975
|
-
});
|
|
1976
|
-
}
|
|
1977
|
-
const adapterNoticeGiven = new WeakSet();
|
|
1978
|
-
const chromeNoticeGiven = new WeakSet();
|
|
1979
|
-
function NavAreaPage() {
|
|
1980
|
-
const match = useMatch();
|
|
1981
|
-
const app = useApp();
|
|
1982
|
-
const noAdapter = useOptionalRouterAdapter() === null;
|
|
1983
|
-
const chromeMounted = useNavChromeMounted();
|
|
1984
|
-
const resolveLayout = useLayoutResolver();
|
|
1985
|
-
const chromeGroup = match?.groupChain.find((g) => resolveLayout(g.layout)) ?? null;
|
|
1986
|
-
useEffect(() => {
|
|
1987
|
-
if (process.env.NODE_ENV === "production") return;
|
|
1988
|
-
if (chromeMounted || !chromeGroup || chromeNoticeGiven.has(app)) return;
|
|
1989
|
-
chromeNoticeGiven.add(app);
|
|
1990
|
-
console.error(`[burojs] <NavAreaPage> is inside the nav group "${canonicalNavKey(chromeGroup)}" whose layout "${chromeGroup.layout}" draws area chrome, and no <NavChrome> is mounted above it. <AppShell> mounts one by default; with your own frame, wrap your routes in <NavChrome>.`);
|
|
1991
|
-
}, [
|
|
1992
|
-
app,
|
|
1993
|
-
chromeMounted,
|
|
1994
|
-
chromeGroup
|
|
1995
|
-
]);
|
|
1996
|
-
useEffect(() => {
|
|
1997
|
-
if (!noAdapter || process.env.NODE_ENV === "production") return;
|
|
1998
|
-
if (adapterNoticeGiven.has(app)) return;
|
|
1999
|
-
adapterNoticeGiven.add(app);
|
|
2000
|
-
console.error("[burojs] <NavAreaPage> has no location to match: no RouterAdapterProvider is mounted. Mount your router’s adapter (RouterAdapterProvider from @burojs/react) above <BuroProvider>; until then every route renders not-found.");
|
|
2001
|
-
}, [app, noAdapter]);
|
|
2002
|
-
return jsx(Suspense, {
|
|
2003
|
-
fallback: jsx(NavAreaPageSkeleton, {}),
|
|
2004
|
-
children: match ? jsx(ResourcePageRouter, { match }) : jsx(NavAreaNotFound, {})
|
|
2005
|
-
});
|
|
2006
|
-
}
|
|
2007
|
-
//#endregion
|
|
2008
|
-
export { useLayoutResolver as A, useMatch as C, BUILTIN_LAYOUTS as D, useResourceVisible as E, groupNavHref as F, canonicalNavKey as I, canonicalResourceKey$1 as L, TabsLayout as M, SecondarySidebarLayout as N, layoutSlot as O, buildNavItems as P, useHref as S, usePageAllowed as T, RecordScreen as _, useRecordVisit as a, ResourceListPage as b, headerTrail as c, recordTrailRoute as d, useTrailContext as f, usePublishedRecordTrail as g, usePublishRecordTrail as h, RecordPage as i, useReportUnresolvedLayouts as j, useLayout as k, originTrail as l, recordTrailKey as m, NavAreaPage as n, RECENT_LABEL_KEYS as o, isShowAvailable as p, ResourcePageRouter as r, readRecentRecords as s, NavAreaNotFound as t, recordTrail as u, useResourceDimensionOptions as v, useNavVisible as w, NavChromeMountedProvider as x, PlannedBody as y };
|
|
2009
|
-
|
|
2010
|
-
//# sourceMappingURL=resource-page-router-CzaNATSp.js.map
|