@hrbolek/uoisfrontend-template 0.6.0

package/src/RBACGQLModel/Mutations/Create.jsx

@@ -0,0 +1,202 @@
+import { CreateURI, MediumEditableContent, ReadItemURI } from "../Components"
+import { InsertAsyncAction } from "../Queries"
+import { 
+    CreateBody as BaseCreateBody, 
+    CreateButton as BaseCreateButton, 
+    CreateDialog as BaseCreateDialog, 
+    CreateLink  as BaseCreateLink
+} from "../../Base/Mutations/Create"
+
+const DefaultContent = (props) => <MediumEditableContent {...props} />
+const MutationAsyncAction = InsertAsyncAction
+
+const permissions = {
+    oneOfRoles: ["superadmin"],
+    mode: "absolute",
+}
+
+const defaultitem = { name: "Nový" };
+
+/**
+ * Wrapper nad `BaseCreateLink` (alias importu `CreateLink` z Base/Mutations/Create),
+ * který je odvozený z obecných `General*` komponent.
+ *
+ * Účel wrapperu:
+ * - nastaví výchozí `uriPattern` pro create route
+ * - aplikuje výchozí RBAC nastavení přes `permissions` (např. `oneOfRoles`, `mode`)
+ * - všechny ostatní props pouze přeposílá do Base komponenty
+ * 
+ * Vizuálně vyrenderuje link pro kliknutí
+ *
+ * @param {Object} params
+ * @param {string} [params.uriPattern=CreateURI]
+ *   Cílová URI/pattern pro link na create stránku nebo create akci (dle routování aplikace).
+ *
+ * @param {Object} params.props
+ *   Další props přeposílané do `BaseCreateLink` (např. `children`, `className`,
+ *   `preserveSearch`, `preserveHash`, atd.).
+ *
+ * @returns {JSX.Element} Vykreslí `BaseCreateLink` s přednastaveným `uriPattern` a RBAC oprávněními.
+ */
+export const CreateLink = ({
+    uriPattern=CreateURI,
+    ...props
+}) => (
+    <BaseCreateLink {...props} uriPattern={uriPattern} {...permissions} />
+);
+
+/**
+ * Wrapper nad `BaseCreateButton` (alias importu `CreateButton` z Base/Mutations/Create),
+ * který je odvozený z obecných `General*` komponent.
+ *
+ * Účel wrapperu:
+ * - nastaví výchozí oprávnění (RBAC) přes `permissions` (`oneOfRoles`, `mode`)
+ * - nastaví výchozí mutaci pro vytvoření entity (`mutationAsyncAction`)
+ * - umožní vyměnit dialog a obsah formuláře (`CreateDialog`, `DefaultContent`)
+ * - určí kam se má po úspěšném vytvoření navigovat (`readItemURI`)
+ * - předá výchozí `item` pro nový záznam
+ *
+ * Zobrazí tlačítko a po jeho stisku otevře dialog, při volbě OK dochází k odeslání mutace na backend
+ *
+ * @param {Object} params
+ * @param {Function} [params.mutationAsyncAction=MutationAsyncAction]
+ *   Async action (thunk) pro vytvoření entity (např. InsertAsyncAction). Používá ho Base/General logika.
+ *
+ * @param {React.ComponentType<Object>} [params.CreateDialog=CreateDialog]
+ *   Komponenta dialogu použitá pro vytvoření (renderuje formulář a volá `onOk(draft)` / `onCancel()`).
+ *
+ * @param {React.ComponentType<Object>} [params.DefaultContent=DefaultContent]
+ *   Komponenta, která vykreslí editable obsah formuláře (typicky MediumEditableContent).
+ *
+ * @param {string} [params.readItemURI=ReadItemURI]
+ *   URI pattern pro navigaci na detail nově vytvořené entity (obvykle obsahuje `:id`).
+ *
+ * @param {Object} [params.rbacitem]
+ *   RBAC item pro PermissionGate/Permission check (pokud se liší od entity, která se vytváří).
+ *
+ * @param {Object} [params.item=defaultitem]
+ *   Výchozí objekt (draft) pro nový záznam. Posílá se do dialogu jako `item`.
+ *
+ * @param {Object} params.props
+ *   Všechny další props jsou přeposlány přímo do `BaseCreateButton`
+ *   (typicky `children`, `className`, `disabled`, `title`, atd.).
+ *
+ * @returns {JSX.Element} Vykreslí `BaseCreateButton` s přednastavenými defaulty a RBAC oprávněními.
+ */
+export const CreateButton = ({
+    mutationAsyncAction=MutationAsyncAction,
+    CreateDialog: CreateDialog_=CreateDialog,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    rbacitem,
+    item=defaultitem,
+    ...props
+}) => {
+    return <BaseCreateButton 
+        {...props}
+        DefaultContent={defaultContent} 
+        CreateDialog={CreateDialog_}
+        readItemURI={readItemURI}
+        rbacitem={rbacitem}
+        item={item}
+        mutationAsyncAction={mutationAsyncAction}
+        {...permissions}
+    />
+}
+
+/**
+ * Wrapper nad `BaseCreateDialog` (alias importu `CreateDialog` z Base/Mutations/Create),
+ * který je odvozený z obecných `General*` komponent.
+ *
+ * Účel wrapperu:
+ * - nastaví výchozí title, obsah formuláře a výchozí draft (`item`)
+ * - předá `readItemURI` pro případnou navigaci po vytvoření (dle implementace Base/General)
+ * - umožní přepsat `mutationAsyncAction` (pokud BaseCreateDialog mutaci používá)
+ *
+ * Mutaci provadi až tlačítko (`BaseCreateButton`) Dialog jen zobrazuje a zabezpecuje sber dat
+ * a dialog je jen “formulář”. 
+ *
+ * @param {Object} params
+ * @param {string} [params.title="Nov(ý/é)"]
+ *   Titulek dialogu.
+ *
+ * @param {Function} [params.mutationAsyncAction=MutationAsyncAction]
+ *   Async action (thunk) pro vytvoření entity. Použije se pouze pokud ho `BaseCreateDialog` skutečně volá
+ *   (záleží na Base/General implementaci).
+ *
+ * @param {React.ComponentType<Object>} [params.DefaultContent=DefaultContent]
+ *   Komponenta, která vykreslí editable obsah formuláře (typicky MediumEditableContent).
+ *
+ * @param {string} [params.readItemURI=ReadItemURI]
+ *   URI pattern pro navigaci na detail nově vytvořené entity (obvykle obsahuje `:id`).
+ *
+ * @param {Object} [params.item=defaultitem]
+ *   Výchozí objekt (draft) pro nový záznam. Posílá se do dialogu jako `item`.
+ *
+ * @param {Object} params.props
+ *   Všechny další props jsou přeposlány přímo do `BaseCreateDialog`
+ *   (typicky `oklabel`, `cancellabel`, `onOk`, `onCancel`, `className`, atd.).
+ *
+ * @returns {JSX.Element} Vykreslí `BaseCreateDialog` s přednastavenými defaulty.
+ */
+export const CreateDialog = ({
+    title = "Nov(ý/é)",
+    // mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    item=defaultitem,
+    ...props
+}) => {
+    return <BaseCreateDialog 
+        {...props} 
+        title={title}
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        item={item}
+        // mutationAsyncAction={mutationAsyncAction}
+    />
+};
+
+/**
+ * Wrapper nad `BaseCreateBody` (alias importu `CreateBody` z Base/Mutations/Create),
+ * který je odvozený z obecných `General*` komponent.
+ *
+ * `CreateBody` typicky reprezentuje “page-level” create workflow (ne jen tlačítko + modal):
+ * - vykreslí create formulář pomocí `DefaultContent`
+ * - zajistí uložení přes `mutationAsyncAction` (dle Base/General implementace)
+ * - po úspěchu může navigovat na detail vytvořené entity přes `readItemURI` (pokud Base/General takto funguje)
+ *
+ * Wrapper pouze nastavuje defaulty a přeposílá props do `BaseCreateBody`.
+ * 
+ * Vizualizuje <DefaultContent />, sbira zmeny a umoznuje volani backendu pro ulozeni dat
+ *
+ * @param {Object} params
+ * @param {Function} [params.mutationAsyncAction=MutationAsyncAction]
+ *   Async action (thunk) pro vytvoření entity (např. InsertAsyncAction). Používá ho Base/General logika.
+ *
+ * @param {React.ComponentType<Object>} [params.DefaultContent=DefaultContent]
+ *   Komponenta, která vykreslí editable obsah formuláře (typicky MediumEditableContent).
+ *
+ * @param {string} [params.readItemURI=ReadItemURI]
+ *   URI pattern pro navigaci na detail nově vytvořené entity (obvykle obsahuje `:id`).
+ *
+ * @param {Object} params.props
+ *   Všechny další props jsou přeposlány přímo do `BaseCreateBody`
+ *   (typicky `title`, `oklabel`, `cancellabel`, `onOk`, `onCancel`, `className`, atd.).
+ *
+ * @returns {JSX.Element} Vykreslí `BaseCreateBody` s přednastavenými defaulty.
+ */
+export const CreateBody = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateBody 
+        {...props} 
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+    />
+};
+

package/src/RBACGQLModel/Mutations/Delete.jsx

@@ -0,0 +1,173 @@
+import { DeleteItemURI, ListURI, MediumContent, VectorItemsURI } from "../Components";
+import { DeleteAsyncAction } from "../Queries";
+import { 
+    DeleteBody as BaseDeleteBody, 
+    DeleteButton as BaseDeleteButton, 
+    DeleteDialog as BaseDeleteDialog, 
+    DeleteLink as BaseDeleteLink
+} from "../../Base/Mutations/Delete";
+
+const DefaultContent = MediumContent
+const MutationAsyncAction = DeleteAsyncAction
+
+const permissions = {
+    oneOfRoles: ["superadmin"],
+    mode: "absolute",
+}
+
+/**
+ * Link na delete route pro konkrétní entitu.
+ *
+ * Wrapper nad `BaseDeleteLink`. Nastavuje výchozí `uriPattern` pro delete route a aplikuje RBAC
+ * přes `permissions`. Ostatní props přeposílá do Base komponenty.
+ *
+ * @param {Object} params
+ * @param {string} [params.uriPattern=DeleteItemURI]
+ *   URI pattern pro delete route (typicky obsahuje `:id` nebo odpovídá routování aplikace).
+ * @param {Object} params.props
+ *   Další props přeposílané do `BaseDeleteLink` (např. `children`, `className`,
+ *   `preserveSearch`, `preserveHash`, atd.).
+ *
+ * @returns {JSX.Element}
+ */
+export const DeleteLink = ({ 
+    uriPattern=DeleteItemURI,
+    ...props
+ }) => {
+    return (
+        <BaseDeleteLink 
+            {...props} 
+            uriPattern={uriPattern} 
+            {...permissions}
+        />
+    )
+};
+
+/**
+ * Tlačítko pro smazání entity (obvykle otevře confirm dialog a spustí delete mutaci).
+ *
+ * Wrapper nad `BaseDeleteButton`. Dodává výchozí `DefaultContent`, `mutationAsyncAction`
+ * a `vectorItemsURI` (kam se naviguje po úspěšném smazání, pokud není použit `onOk`).
+ *
+ * Chování navigace / callback:
+ * - Pokud je definované `onOk`, použije se pro “feedback”, že mazání proběhlo (tj. uživatel si
+ *   rozhodne, co dál).
+ * - Pokud `onOk` definované není, Base implementace typicky naviguje na `vectorItemsURI`.
+ *
+ * @param {Object} params
+ * @param {Function} [params.mutationAsyncAction=MutationAsyncAction]
+ *   Async action (thunk) pro delete operaci (např. DeleteAsyncAction).
+ *
+ * @param {React.ComponentType<Object>} [params.DefaultContent=MediumContent]
+ *   Komponenta pro zobrazení mazáné entity v confirm dialogu (read-only).
+ *
+ * @param {string} [params.vectorItemsURI=ListURI]
+ *   URI pro návrat po úspěšném smazání (typicky list stránka / kolekce).
+ *
+ * @param {Function} [params.onOk]
+ *   Callback po úspěšném smazání. Pokud není zadán, Base implementace typicky použije navigaci na `vectorItemsURI`.
+ *
+ * @param {Object}} params.props
+ *   Další props přeposílané do `BaseDeleteButton` (např. `children`, `title`, `className`,
+ *   `rbacitem`, `item`, `disabled`, atd. – podle Base/General implementace).
+ *
+ * @returns {JSX.Element}
+ */
+export const DeleteButton = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:DefaultContent_=DefaultContent,
+    Dialog=DeleteDialog,
+    vectorItemsURI=ListURI,
+    onOk,
+    ...props 
+}) => {
+    return (
+        <BaseDeleteButton 
+            {...props} 
+            DefaultContent={DefaultContent_} 
+            Dialog={Dialog}
+            mutationAsyncAction={mutationAsyncAction}
+            vectorItemsURI={vectorItemsURI}
+            onOk={onOk}
+            {...permissions}
+        />
+    )
+}
+
+/**
+ * Confirm dialog pro smazání entity.
+ *
+ * Wrapper nad `BaseDeleteDialog`. Dodává výchozí `DefaultContent` (read-only zobrazení entity),
+ * `mutationAsyncAction` a `vectorItemsURI` pro návrat po úspěchu (dle Base/General implementace).
+ *
+ * @param {Object} params
+ * @param {Function} [params.mutationAsyncAction=MutationAsyncAction]
+ *   Async action (thunk) pro delete operaci (např. DeleteAsyncAction).
+ *
+ * @param {React.ComponentType<Object>} [params.DefaultContent=MediumContent]
+ *   Komponenta pro zobrazení mazáné entity (read-only).
+ *
+ * @param {string} [params.vectorItemsURI=ListURI]
+ *   URI pro návrat po úspěšném smazání (typicky list stránka / kolekce).
+ *
+ * @param {Object}} params.props
+ *   Další props přeposílané do `BaseDeleteDialog` (např. `title`, `oklabel`, `cancellabel`,
+ *   `item`, `onOk`, `onCancel`, atd.).
+ *
+ * @returns {JSX.Element}
+ */
+export const DeleteDialog = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:DefaultContent_=DefaultContent,
+    vectorItemsURI=ListURI,
+    ...props 
+}) => {
+    return (
+        <BaseDeleteDialog 
+            {...props} 
+            DefaultContent={DefaultContent_} 
+            mutationAsyncAction={mutationAsyncAction}
+            vectorItemsURI={vectorItemsURI}
+            {...permissions}
+        />
+    )
+}
+
+/**
+ * “Page-level” delete workflow (mazání na celé stránce / v těle stránky).
+ *
+ * Wrapper nad `BaseDeleteBody`. Dodává výchozí `DefaultContent`, `mutationAsyncAction`
+ * a `vectorItemsURI` a aplikuje RBAC přes `permissions`.
+ *
+ * @param {Object} params
+ * @param {Function} [params.mutationAsyncAction=MutationAsyncAction]
+ *   Async action (thunk) pro delete operaci (např. DeleteAsyncAction).
+ *
+ * @param {React.ComponentType<Object>} [params.DefaultContent=MediumContent]
+ *   Komponenta pro zobrazení mazáné entity (read-only).
+ *
+ * @param {string} [params.vectorItemsURI=ListURI]
+ *   URI pro návrat po úspěšném smazání (typicky list stránka / kolekce).
+ *
+ * @param {Object}} params.props
+ *   Další props přeposílané do `BaseDeleteBody` (např. `title`, `oklabel`, `cancellabel`,
+ *   `item`, `onOk`, `onCancel`, atd.).
+ *
+ * @returns {JSX.Element}
+ */
+export const DeleteBody = ({ 
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:DefaultContent_=DefaultContent,
+    vectorItemsURI=ListURI,
+    ...props
+}) => {
+    return (
+        <BaseDeleteBody 
+            {...props} 
+            DefaultContent={DefaultContent_} 
+            mutationAsyncAction={mutationAsyncAction}
+            vectorItemsURI={vectorItemsURI}
+            {...permissions}
+        />
+    )
+}

package/src/RBACGQLModel/Mutations/InteractiveMutations.jsx

@@ -0,0 +1,30 @@
+import { CardCapsule, VectorItemsURI } from "../Components"
+import { CreateButton, CreateLink } from "./Create"
+import { UpdateButton, UpdateLink } from "./Update"
+import { ProxyLink } from "../../Base/Components/ProxyLink"
+import { DeleteButton } from "./Delete"
+
+export const PageLink = ({ children, preserveHash = true, preserveSearch = true, ...props }) => {
+    return (
+        <ProxyLink
+            to={VectorItemsURI}
+            preserveHash={preserveHash}
+            preserveSearch={preserveSearch}
+            {...props}
+        >
+            {children}
+        </ProxyLink>
+    );
+};
+
+export const InteractiveMutations = ({ item }) => {
+    return (
+        <CardCapsule item={item} title="Nástroje">
+            <PageLink className="btn btn-outline-success">Stránka</PageLink>
+            <UpdateLink className="btn btn-outline-success" item={item}>Upravit</UpdateLink>
+            <UpdateButton className="btn btn-outline-success" item={item}>Upravit Dialog</UpdateButton>
+            <CreateButton className="btn btn-outline-success" rbacitem={{}}>Vytvořit nový</CreateButton>
+            <DeleteButton className="btn btn-outline-danger" item={item}>Odstranit</DeleteButton>
+        </CardCapsule>
+    )
+}

package/src/RBACGQLModel/Mutations/Update.jsx

@@ -0,0 +1,147 @@
+import {
+    UpdateBody as BaseUpdateBody,
+    UpdateButton as BaseUpdateButton,
+    UpdateDialog as BaseUpdateDialog,
+    UpdateLink as BaseUpdateLink
+} from "../../Base/Mutations/Update";
+
+import { MediumEditableContent, UpdateItemURI } from "../Components";
+import { UpdateAsyncAction } from "../Queries";
+
+const DefaultContent = (props) => <MediumEditableContent {...props} />
+const mutationAsyncAction = UpdateAsyncAction
+
+const permissions = {
+    oneOfRoles: ["superadmin"],
+    mode: "absolute",
+}
+
+// ALTERNATIVE, CHECK GQLENDPOINT
+// const permissions = {
+//     oneOfRoles: ["administrátor", "personalista"],
+//     mode: "item",
+// }
+
+/**
+ * Link na update stránku / update route pro konkrétní entitu.
+ *
+ * Wrapper nad `BaseUpdateLink`. Nastavuje výchozí `uriPattern` a aplikuje RBAC
+ * přes `permissions`. Vše ostatní přeposílá do Base komponenty.
+ *
+ * @param {Object} params
+ * @param {string} [params.uriPattern=UpdateItemURI]
+ *   URI pattern pro update route (typicky obsahuje `:id` nebo je již konkrétní URL dle routování).
+ * @param {Object} params.props
+ *   Další props přeposílané do `BaseUpdateLink` (např. `children`, `className`,
+ *   `preserveSearch`, `preserveHash`, atd.).
+ * @returns {JSX.Element}
+ */
+export const UpdateLink = ({
+    uriPattern = UpdateItemURI,
+    ...props
+}) => {
+    return <BaseUpdateLink
+        {...props}
+        uriPattern={uriPattern}
+        {...permissions}
+    />
+}
+
+/**
+ * Dialog pro editaci entity.
+ *
+ * Wrapper nad `BaseUpdateDialog`. Dodává výchozí editovatelný obsah (`DefaultContent`)
+ * a výchozí mutační akci (`mutationAsyncAction`) pro uložení změn. Aplikuje RBAC
+ * přes `permissions`.
+ *
+ * @param {Object} params
+ * @param {React.ComponentType<Object>} [params.DefaultContent=DefaultContent]
+ *   Komponenta, která vykreslí editovatelný obsah dialogu (typicky MediumEditableContent).
+ * @param {Function} [params.mutationAsyncAction=mutationAsyncAction]
+ *   Async action (thunk) pro uložení změn (např. UpdateAsyncAction). Použije se podle Base/General implementace.
+ * @param {Object} params.props
+ *   Další props přeposílané do `BaseUpdateDialog` (např. `title`, `oklabel`, `cancellabel`,
+ *   `item`, `onOk`, `onCancel`, atd.).
+ * @returns {JSX.Element}
+ */
+export const UpdateDialog = ({
+    DefaultContent: DefaultContent_ = DefaultContent,
+    mutationAsyncAction: mutationAsyncAction_ = mutationAsyncAction,
+    ...props
+}) => {
+    return (
+        <BaseUpdateDialog
+            {...props}
+            DefaultContent={DefaultContent_}
+            mutationAsyncAction={mutationAsyncAction_}
+            {...permissions}
+        />
+    );
+};
+
+/**
+ * Tlačítko, které otevře update dialog a provede uložení.
+ *
+ * Wrapper nad `BaseUpdateButton`. Dodává výchozí `DefaultContent`, výchozí `Dialog`,
+ * a výchozí `mutationAsyncAction`. Aplikuje RBAC přes `permissions`.
+ *
+ * @param {Object} params
+ * @param {React.ComponentType<Object>} [params.DefaultContent=DefaultContent]
+ *   Komponenta editovatelného obsahu (typicky MediumEditableContent).
+ * @param {React.ComponentType<Object>} [params.Dialog=UpdateDialog]
+ *   Dialog komponenta použitá pro editaci (volá `onOk(draft)` / `onCancel()`).
+ * @param {Function} [params.mutationAsyncAction=mutationAsyncAction]
+ *   Async action (thunk) pro uložení změn (např. UpdateAsyncAction).
+ * @param {Object} params.props
+ *   Další props přeposílané do `BaseUpdateButton` (např. `children`, `className`, `title`,
+ *   `item`, `uriPattern`, `onOk`, `onCancel`, atd.).
+ * @returns {JSX.Element}
+ */
+export const UpdateButton = ({
+    DefaultContent: DefaultContent_ = DefaultContent,
+    Dialog = UpdateDialog,
+    mutationAsyncAction: mutationAsyncAction_ = mutationAsyncAction,
+    ...props
+}) => {
+    return (
+        <BaseUpdateButton
+            {...props}
+            DefaultContent={DefaultContent_}
+            Dialog={Dialog}
+            mutationAsyncAction={mutationAsyncAction_}
+            {...permissions}
+        />
+    );
+};
+
+/**
+ * “Page-level” update workflow (inline edit / celá stránka editace).
+ *
+ * Wrapper nad `BaseUpdateBody`. Typicky vykreslí editovatelný obsah (`DefaultContent`)
+ * a zajistí uložení přes `mutationAsyncAction` (dle Base/General implementace).
+ * Aplikuje RBAC přes `permissions`.
+ *
+ * @param {Object} params
+ * @param {React.ComponentType<Object>} [params.DefaultContent=DefaultContent]
+ *   Komponenta editovatelného obsahu (typicky MediumEditableContent).
+ * @param {Function} [params.mutationAsyncAction=mutationAsyncAction]
+ *   Async action (thunk) pro uložení změn (např. UpdateAsyncAction).
+ * @param {Object} params.props
+ *   Další props přeposílané do `BaseUpdateBody` (např. `title`, `oklabel`, `cancellabel`,
+ *   `item`, `onOk`, `onCancel`, `className`, atd.).
+ * @returns {JSX.Element}
+ */
+export const UpdateBody = ({
+    DefaultContent: DefaultContent_ = DefaultContent,
+    mutationAsyncAction: mutationAsyncAction_ = mutationAsyncAction,
+    ...props
+}) => {
+    return (
+        <BaseUpdateBody
+            {...props}
+            DefaultContent={DefaultContent_}
+            mutationAsyncAction={mutationAsyncAction_}
+            {...permissions}
+        />
+    );
+};

package/src/RBACGQLModel/Mutations/helpers.jsx

@@ -0,0 +1,7 @@
+export const makeMutationURI = (linkURI, action, { withId = false } = {}) => {
+    const viewSegmentRe = /\/view(\/|$)/;
+    if (!viewSegmentRe.test(linkURI)) throw new Error(`LinkURI must contain '/view'. Got: ${linkURI}`);
+
+    const base = linkURI.replace(viewSegmentRe, `/${action}$1`).replace(/\/?$/, "/");
+    return withId ? `${base}:id` : base.replace(/\/$/, "");
+};

package/src/RBACGQLModel/Pages/PageBase.jsx

@@ -0,0 +1,56 @@
+import { ReadAsyncAction } from "../Queries"
+import { PageItemBase as PageItemBase_} from "../../../../_template/src/Base/Pages/Page"
+import { LargeCard } from "../Components"
+
+
+/**
+ * Base wrapper pro stránky pracující s jedním entity itemem podle `:id` z routy.
+ *
+ * Komponenta:
+ * - načte `id` z URL přes `useParams()`
+ * - sestaví minimální `item` objekt `{ id }`
+ * - poskytne jej přes `AsyncActionProvider`, který zajistí načtení entity pomocí `queryAsyncAction`
+ * - vloží do stránky navbar přes `PlaceChild Component={PageNavbar}`
+ * - vyrenderuje `children` uvnitř provideru (tj. až v kontextu načtené entity)
+ *
+ * Typické použití je jako obálka routy typu `/.../:id`, kde vnořené komponenty
+ * (detail, editace, akce) používají kontext z `AsyncActionProvider`.
+ *
+ * @component
+ * @param {object} props
+ * @param {import("react").ReactNode} props.children
+ *   Obsah stránky, který se má vyrenderovat uvnitř `AsyncActionProvider`.
+ * @param {Function} [props.queryAsyncAction=ReadAsyncAction]
+ *   Async action (např. thunk) použitá pro načtení entity z GraphQL endpointu.
+ *   Dostane `item` s `id` (a případně další parametry podle implementace provideru).
+ *
+ * @returns {import("react").JSX.Element}
+ *   Provider s navigací (`PageNavbar`) a obsahem stránky (`children`).
+ */
+export const PageItemBase = ({ 
+    queryAsyncAction=ReadAsyncAction,
+    PageNavbar=()=>null,
+    ItemLayout=LargeCard,
+    SubPage=null,
+    ...props
+}) => {
+    return (
+        <PageItemBase_ 
+            queryAsyncAction={queryAsyncAction} 
+            PageNavbar={PageNavbar}
+            ItemLayout={ItemLayout}
+            SubPage={SubPage}
+            {...props} 
+        />  
+    )
+}
+
+
+export const PageBase = ({ children, PageNavbar=()=>null }) => {
+    return (
+        <>
+            <PageNavbar />
+            {children}
+        </>
+    )
+}

package/src/RBACGQLModel/Pages/PageCreateItem.jsx

@@ -0,0 +1,28 @@
+import { ReadAsyncAction } from "../Queries"
+import { Row } from "../../../../_template/src/Base/Components/Row";
+import { CreateBody } from "../Mutations/Create";
+import { LeftColumn, MiddleColumn } from "@hrbolek/uoisfrontend-shared";
+import { PageItemBase } from "./PageBase";
+
+
+
+const PageBody = ({...props}) => (
+    <Row>
+        <LeftColumn />
+        <MiddleColumn>
+            <CreateBody {...props} />
+        </MiddleColumn>
+    </Row>
+)
+
+export const PageCreateItem = ({ 
+    SubPage=PageBody,
+    ...props
+}) => {
+    return (
+        <PageItemBase 
+            SubPage={SubPage}
+            {...props}
+        />
+    )
+}

package/src/RBACGQLModel/Pages/PageDeleteItem.jsx

@@ -0,0 +1,16 @@
+import { PageItemBase } from "./PageBase";
+import { DeleteBody } from "../Mutations/Delete";
+
+export const PageDeleteItem = ({ 
+    SubPage=DeleteBody,
+    ...props
+}) => {
+    return (
+        <PageItemBase
+            SubPage={SubPage}
+            {...props}
+        />
+         
+    )
+}
+