@plumile/backoffice-react 0.1.154 → 0.1.157

package/lib/esm/pages/BackofficeEntityDetailLayoutPage.js

@@ -1,16 +1,116 @@
-import { BackofficeEntityDetailLayoutContextProvider as e } from "./detail/BackofficeEntityDetailLayoutContext.js";
-import { BackofficeRedirect as t } from "./BackofficeRedirect.js";
-import { Fragment as n, jsx as r } from "react/jsx-runtime";
-import * as i from "react-relay";
+import { useBackofficeReactTranslation as e } from "../i18n/useBackofficeReactTranslation.js";
+import { useBackofficeConfig as t } from "../provider/BackofficeConfigContext.js";
+import { BackofficeDetailBadgeRow as n } from "../components/backoffice/detail/BackofficeDetailBadgeRow.js";
+import { BackofficeRightPageLayout as r } from "../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js";
+import { buildEntityDetailBreadcrumb as i } from "../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js";
+import { resolveVisibleDetailPages as a } from "./detail/pageResolution.js";
+import { headerBlock as o, headerMeta as s, headerMetaList as c } from "./backofficeEntityDetailPage.css.js";
+import { resolveHeaderItems as l } from "./BackofficeEntityDetailPage.view-helpers.js";
+import { BackofficeEntityDetailLayoutContextProvider as u } from "./detail/BackofficeEntityDetailLayoutContext.js";
+import { buildTabsItems as d } from "./detail/buildTabsItems.js";
+import { BackofficeRedirect as f } from "./BackofficeRedirect.js";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useTranslation as g } from "react-i18next";
+import * as _ from "react-relay";
+import { FormattedDate as v } from "@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js";
+import { BACKOFFICE_DATE_TIME_OPTIONS as y } from "@plumile/backoffice-core/constants.js";
+import b from "@plumile/router/routing/Link.js";
+import { Tag as x } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
+import { BackofficePageHeader as S } from "@plumile/ui/backoffice/molecules/backoffice_page_header/BackofficePageHeader.js";
+import { Tabs as C } from "@plumile/ui/atomic/molecules/tabs/Tabs.js";
+import { DetailPageTemplate as w } from "@plumile/ui/backoffice/templates/detail_page_template/DetailPageTemplate.js";
+import T from "@plumile/router/routing/useLocation.js";
+import { BackofficeKeyValueList as E } from "@plumile/ui/backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.js";
 //#region src/pages/BackofficeEntityDetailLayoutPage.tsx
-var { useFragment: a, usePreloadedQuery: o } = i, s = ({ config: i, prepared: s, children: c }) => {
-	let l = o(i.layoutPage.query, s.layoutQuery), u = i.layoutPage.resolveNode(l, { id: s.id }), d = a(i.layoutPage.fragment, u);
-	return u == null ? /* @__PURE__ */ r(t, { to: i.routes.list }) : /* @__PURE__ */ r(e, {
-		value: { layoutView: i.layoutPage.toView(d) },
-		children: /* @__PURE__ */ r(n, { children: c })
+var { useFragment: D, usePreloadedQuery: O } = _, k = (e) => e.trim().replace(/^\/+|\/+$/g, ""), A = (e, t, n) => [n.pages.mainPage, ...n.pages.subPages ?? []].find((r) => e === n.routes.detailPage(t, r.id))?.path ?? "", j = ({ config: _, prepared: j, children: M }) => {
+	let { t: N } = g(), { t: P } = e(), { entities: F } = t(), { pathname: I } = T(), L = O(_.layoutPage.query, j.layoutQuery), R = _.layoutPage.resolveNode(L, { id: j.id }), z = D(_.layoutPage.fragment, R);
+	if (R == null) return /* @__PURE__ */ m(f, { to: _.routes.list });
+	let B = _.layoutPage.toView(z), V = A(I, j.id, _), H = a({
+		mainPage: _.pages.mainPage,
+		subPages: _.pages.subPages,
+		activePagePath: V,
+		node: B
+	});
+	if (!H.hasVisiblePages || H.activePage == null) return /* @__PURE__ */ m(f, { to: _.routes.list });
+	let { activePage: U } = H;
+	if (V !== "" && k(U.path) !== k(V)) return /* @__PURE__ */ m(f, { to: _.routes.detailPage(j.id, U.id) });
+	let W = d({
+		pages: H.pages,
+		id: j.id,
+		tApp: N,
+		detailPageHref: _.routes.detailPage
+	}), G = l(_.header, B, {
+		tApp: N,
+		t: P,
+		resolveEntityHref: (e, t) => {
+			let n = F[e];
+			return n == null ? null : n.routes.detail(t);
+		},
+		renderLink: (e, t) => /* @__PURE__ */ m(b, {
+			to: e,
+			preloadOnMouseEnter: !0,
+			children: t
+		}),
+		renderDate: (e, t) => /* @__PURE__ */ m(v, {
+			value: e,
+			options: y,
+			fallback: t
+		}),
+		renderTag: (e, t) => /* @__PURE__ */ m(x, {
+			tone: e,
+			children: t
+		}),
+		renderBadgeRow: (e) => /* @__PURE__ */ m(n, { items: e })
+	}), K = i({
+		config: _,
+		tApp: N,
+		entityId: j.id,
+		layoutView: B,
+		pageLabel: U.label(N),
+		pageId: U.id
+	}), q;
+	(G.status != null || G.badges != null) && (q = /* @__PURE__ */ h("div", {
+		className: s,
+		children: [G.status, G.badges]
+	}));
+	let J = null;
+	G.items != null && G.items.length > 0 && (J = /* @__PURE__ */ m("div", {
+		className: c,
+		children: /* @__PURE__ */ m(E, { items: G.items })
+	}));
+	let Y = /* @__PURE__ */ h("div", {
+		className: o,
+		children: [/* @__PURE__ */ m(S, {
+			title: G.title,
+			subtitle: G.subtitle,
+			meta: q
+		}), J]
+	}), X = null;
+	return H.pages.length > 1 && (X = /* @__PURE__ */ m(C, {
+		items: W,
+		activeId: U.id,
+		variant: "underline"
+	})), /* @__PURE__ */ m(u, {
+		value: {
+			activePage: U,
+			config: _,
+			entityId: j.id,
+			layoutView: B,
+			tabsItems: W,
+			visiblePages: H.pages
+		},
+		children: /* @__PURE__ */ m(r, {
+			breadcrumb: K,
+			children: /* @__PURE__ */ m(w, {
+				headerNode: Y,
+				tabsNode: X,
+				headerDensity: "compact",
+				children: /* @__PURE__ */ m(p, { children: M })
+			})
+		})
 	});
 };
 //#endregion
-export { s as BackofficeEntityDetailLayoutPage, s as default };
+export { j as BackofficeEntityDetailLayoutPage, j as default };
 
 //# sourceMappingURL=BackofficeEntityDetailLayoutPage.js.map

package/lib/esm/pages/BackofficeEntityDetailLayoutPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeEntityDetailLayoutPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityDetailLayoutPage.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport * as ReactRelay from 'react-relay';\n\nimport type {\n  BackofficeEntityManifestItem,\n  BackofficePreparedDetailLayoutRoute,\n  BackofficeResolvedDetailLayoutFacetConfig,\n} from '@plumile/backoffice-core/types.js';\nimport { BackofficeEntityDetailLayoutContextProvider } from './detail/BackofficeEntityDetailLayoutContext.js';\nimport { BackofficeRedirect } from './BackofficeRedirect.js';\n\nconst { useFragment, usePreloadedQuery } = ReactRelay;\n\nexport type BackofficeEntityDetailLayoutPageProps = {\n  entityManifest: BackofficeEntityManifestItem;\n  config: BackofficeResolvedDetailLayoutFacetConfig;\n  prepared: BackofficePreparedDetailLayoutRoute;\n  children?: ReactNode;\n};\n\nexport const BackofficeEntityDetailLayoutPage = ({\n  config,\n  prepared,\n  children,\n}: BackofficeEntityDetailLayoutPageProps): JSX.Element => {\n  const layoutQueryData = usePreloadedQuery(\n    config.layoutPage.query,\n    prepared.layoutQuery,\n  );\n  const layoutNodeRef = config.layoutPage.resolveNode(layoutQueryData, {\n    id: prepared.id,\n  });\n\n  const layoutNode = useFragment(\n    config.layoutPage.fragment,\n    layoutNodeRef as never,\n  );\n\n  if (layoutNodeRef == null) {\n    return <BackofficeRedirect to={config.routes.list} />;\n  }\n\n  const layoutView = config.layoutPage.toView(layoutNode);\n\n  return (\n    <BackofficeEntityDetailLayoutContextProvider\n      value={{\n        layoutView,\n      }}\n    >\n      <>{children}</>\n    </BackofficeEntityDetailLayoutContextProvider>\n  );\n};\n\nexport default BackofficeEntityDetailLayoutPage;\n"],"mappings":";;;;;AAWA,IAAM,EAAE,aAAA,GAAa,mBAAA,MAAsB,GAS9B,KAAoC,EAC/C,WACA,aACA,kBACwD;CACxD,IAAM,IAAkB,EACtB,EAAO,WAAW,OAClB,EAAS,WACX,GACM,IAAgB,EAAO,WAAW,YAAY,GAAiB,EACnE,IAAI,EAAS,GACf,CAAC,GAEK,IAAa,EACjB,EAAO,WAAW,UAClB,CACF;CAQA,OANI,KAAiB,OACZ,kBAAC,GAAD,EAAoB,IAAI,EAAO,OAAO,KAAO,CAAA,IAMpD,kBAAC,GAAD;EACE,OAAO,EACL,YALa,EAAO,WAAW,OAAO,CAKtC,EACF;YAEA,kBAAA,GAAA,EAAG,YAAW,CAAA;CAC6B,CAAA;AAEjD"}
+{"version":3,"file":"BackofficeEntityDetailLayoutPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityDetailLayoutPage.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport * as ReactRelay from 'react-relay';\nimport Link from '@plumile/router/routing/Link.js';\nimport useLocation from '@plumile/router/routing/useLocation.js';\n\nimport { BACKOFFICE_DATE_TIME_OPTIONS } from '@plumile/backoffice-core/constants.js';\nimport type {\n  BackofficeEntityManifestItem,\n  BackofficePreparedDetailLayoutRoute,\n  BackofficeResolvedDetailLayoutFacetConfig,\n} from '@plumile/backoffice-core/types.js';\nimport { FormattedDate } from '@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js';\nimport { Tabs } from '@plumile/ui/atomic/molecules/tabs/Tabs.js';\nimport { Tag } from '@plumile/ui/backoffice/atoms/tag/Tag.js';\nimport { BackofficeKeyValueList } from '@plumile/ui/backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.js';\nimport { BackofficePageHeader } from '@plumile/ui/backoffice/molecules/backoffice_page_header/BackofficePageHeader.js';\nimport { DetailPageTemplate } from '@plumile/ui/backoffice/templates/detail_page_template/DetailPageTemplate.js';\n\nimport { BackofficeDetailBadgeRow } from '../components/backoffice/detail/BackofficeDetailBadgeRow.js';\nimport { BackofficeRightPageLayout } from '../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js';\nimport { buildEntityDetailBreadcrumb } from '../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficeConfig } from '../provider/BackofficeConfigContext.js';\nimport * as pageStyles from './backofficeEntityDetailPage.css.js';\nimport { resolveHeaderItems } from './BackofficeEntityDetailPage.view-helpers.js';\nimport { BackofficeEntityDetailLayoutContextProvider } from './detail/BackofficeEntityDetailLayoutContext.js';\nimport { buildTabsItems } from './detail/buildTabsItems.js';\nimport { resolveVisibleDetailPages } from './detail/pageResolution.js';\nimport { BackofficeRedirect } from './BackofficeRedirect.js';\n\nconst { useFragment, usePreloadedQuery } = ReactRelay;\n\nconst normalizePath = (value: string): string => {\n  return value.trim().replace(/^\\/+|\\/+$/g, '');\n};\n\nconst resolveActivePagePath = (\n  pathname: string,\n  id: string,\n  config: BackofficeResolvedDetailLayoutFacetConfig,\n): string => {\n  const pages = [config.pages.mainPage, ...(config.pages.subPages ?? [])];\n  const activePage = pages.find((page) => {\n    return pathname === config.routes.detailPage(id, page.id);\n  });\n  return activePage?.path ?? '';\n};\n\nexport type BackofficeEntityDetailLayoutPageProps = {\n  entityManifest: BackofficeEntityManifestItem;\n  config: BackofficeResolvedDetailLayoutFacetConfig;\n  prepared: BackofficePreparedDetailLayoutRoute;\n  children?: ReactNode;\n};\n\nexport const BackofficeEntityDetailLayoutPage = ({\n  config,\n  prepared,\n  children,\n}: BackofficeEntityDetailLayoutPageProps): JSX.Element => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const { entities } = useBackofficeConfig();\n  const { pathname } = useLocation();\n  const layoutQueryData = usePreloadedQuery(\n    config.layoutPage.query,\n    prepared.layoutQuery,\n  );\n  const layoutNodeRef = config.layoutPage.resolveNode(layoutQueryData, {\n    id: prepared.id,\n  });\n\n  const layoutNode = useFragment(\n    config.layoutPage.fragment,\n    layoutNodeRef as never,\n  );\n\n  if (layoutNodeRef == null) {\n    return <BackofficeRedirect to={config.routes.list} />;\n  }\n\n  const layoutView = config.layoutPage.toView(layoutNode);\n  const activePagePath = resolveActivePagePath(pathname, prepared.id, config);\n  const resolvedPages = resolveVisibleDetailPages({\n    mainPage: config.pages.mainPage,\n    subPages: config.pages.subPages,\n    activePagePath,\n    node: layoutView as never,\n  });\n\n  if (!resolvedPages.hasVisiblePages || resolvedPages.activePage == null) {\n    return <BackofficeRedirect to={config.routes.list} />;\n  }\n\n  const { activePage } = resolvedPages;\n  if (\n    activePagePath !== '' &&\n    normalizePath(activePage.path) !== normalizePath(activePagePath)\n  ) {\n    return (\n      <BackofficeRedirect\n        to={config.routes.detailPage(prepared.id, activePage.id)}\n      />\n    );\n  }\n\n  const tabsItems = buildTabsItems({\n    pages: resolvedPages.pages,\n    id: prepared.id,\n    tApp,\n    detailPageHref: config.routes.detailPage,\n  });\n  const resolveEntityHref = (entityId: string, refId: string) => {\n    const entityConfig = entities[entityId];\n    if (entityConfig == null) {\n      return null;\n    }\n    return entityConfig.routes.detail(refId);\n  };\n  const header = resolveHeaderItems(config.header, layoutView, {\n    tApp,\n    t,\n    resolveEntityHref,\n    renderLink: (href, label) => {\n      return (\n        <Link to={href} preloadOnMouseEnter>\n          {label}\n        </Link>\n      );\n    },\n    renderDate: (value, fallback) => {\n      return (\n        <FormattedDate\n          value={value}\n          options={BACKOFFICE_DATE_TIME_OPTIONS}\n          fallback={fallback}\n        />\n      );\n    },\n    renderTag: (tone, label) => {\n      return <Tag tone={tone}>{label}</Tag>;\n    },\n    renderBadgeRow: (items) => {\n      return <BackofficeDetailBadgeRow items={items} />;\n    },\n  });\n  const breadcrumb = buildEntityDetailBreadcrumb({\n    config,\n    tApp,\n    entityId: prepared.id,\n    layoutView,\n    pageLabel: activePage.label(tApp),\n    pageId: activePage.id,\n  });\n  let headerMetaNode: JSX.Element | undefined;\n  if (header.status != null || header.badges != null) {\n    headerMetaNode = (\n      <div className={pageStyles.headerMeta}>\n        {header.status}\n        {header.badges}\n      </div>\n    );\n  }\n  let headerItemsNode: JSX.Element | null = null;\n  if (header.items != null && header.items.length > 0) {\n    headerItemsNode = (\n      <div className={pageStyles.headerMetaList}>\n        <BackofficeKeyValueList items={header.items} />\n      </div>\n    );\n  }\n  const headerNode = (\n    <div className={pageStyles.headerBlock}>\n      <BackofficePageHeader\n        title={header.title}\n        subtitle={header.subtitle}\n        meta={headerMetaNode}\n      />\n      {headerItemsNode}\n    </div>\n  );\n  let tabsNode: JSX.Element | null = null;\n  if (resolvedPages.pages.length > 1) {\n    tabsNode = (\n      <Tabs items={tabsItems} activeId={activePage.id} variant=\"underline\" />\n    );\n  }\n\n  return (\n    <BackofficeEntityDetailLayoutContextProvider\n      value={{\n        activePage,\n        config,\n        entityId: prepared.id,\n        layoutView,\n        tabsItems,\n        visiblePages: resolvedPages.pages,\n      }}\n    >\n      <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n        <DetailPageTemplate\n          headerNode={headerNode}\n          tabsNode={tabsNode}\n          headerDensity=\"compact\"\n        >\n          <>{children}</>\n        </DetailPageTemplate>\n      </BackofficeRightPageLayout>\n    </BackofficeEntityDetailLayoutContextProvider>\n  );\n};\n\nexport default BackofficeEntityDetailLayoutPage;\n"],"mappings":"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"}