@speron/projekt-front 0.0.3

package/src/RBACGQLModel/Components/MediumEditableContent.jsx

@@ -0,0 +1,212 @@
+import { useState } from "react"
+import { Link } from "../../Base/Components"
+import { Attribute, formatDateTime } from "../../Base/Components/Attribute"
+import { EntityLookup } from "../../Base/FormControls/EntityLookup"
+import { Input } from "../../Base/FormControls/Input"
+import { SearchAsyncAction as SearchUserAsyncAction } from "../../UserGQLModel/Queries/SearchAsyncAction"
+import { useEffect } from "react"
+import { useAsyncThunkAction } from "../../../../dynamic/src/Hooks"
+import { ReadAsyncAction } from "../../GroupGQLModel"
+import { AsyncStateIndicator } from "../../Base/Helpers/AsyncStateIndicator"
+import { InsertAsyncAction } from "../../RoleGQLModel/Queries"
+import { SearchAsyncAction as SearchRoleTypeAsyncAction } from "../../RoleTypeGQLModel/Queries/SearchAsyncAction"
+
+/**
+ * A component that displays medium-level content for an template entity.
+ *
+ * This component renders a label "TemplateMediumContent" followed by a serialized representation of the `template` object
+ * and any additional child content. It is designed to handle and display information about an template entity object.
+ *
+ * @component
+ * @param {Object} props - The properties for the TemplateMediumContent component.
+ * @param {Object} props.template - The object representing the template entity.
+ * @param {string|number} props.template.id - The unique identifier for the template entity.
+ * @param {string} props.template.name - The name or label of the template entity.
+ * @param {React.ReactNode} [props.children=null] - Additional content to render after the serialized `template` object.
+ *
+ * @returns {JSX.Element} A JSX element displaying the entity's details and optional content.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 123, name: "Sample Entity" };
+ * 
+ * <TemplateMediumContent template={templateEntity}>
+ *   <p>Additional information about the entity.</p>
+ * </TemplateMediumContent>
+ */
+export const MediumEditableContent = ({ item, onChange=(e)=>null, onBlur=(e)=>null, children}) => {
+    return (
+        <>           
+        {/* defaultValue={item?.name|| "Název"}  */}
+            <Input id={"name"} label={"Jméno"} className="form-control" value={item?.name|| "Název"} onChange={onChange} onBlur={onBlur} />
+            <Input id={"nameEn"} label={"Anglický název"} className="form-control" value={item?.nameEn|| "Anglický název"} onChange={onChange} onBlur={onBlur} />
+            {children}
+        </>
+    )
+}
+
+
+export const RBACEdit = ({ item, onChange }) => {
+    const { id="" } = item || {}
+    const { entity, loading, error, run } = useAsyncThunkAction(ReadAsyncAction, {id}, {deferred: true})
+    const { data, loading: saving, error: updateError, run: save } = useAsyncThunkAction(InsertAsyncAction, {id}, {deferred: true})
+
+    const [roles, setRoles] = useState((entity || {})?.roles||[])
+    
+    // useEffect(()=>{
+    //     const newRoles = (entity || {})?.roles||[]
+    //     if (newRoles === roles)
+    //         return 
+    //     setRoles(newRoles)
+    // }, [entity, roles])
+
+    useEffect(()=>{
+        if (!id) return
+        console.log("RBACEdit", item?.id, item)
+    
+        const runner = async () => {
+            const result = await run({id})
+            console.log("RBACEdit", item?.id, result)
+    
+        }
+        runner()
+    }, [id])
+
+    useEffect(() => {
+        console.log("RBACEdit.useEffect2", item?.id, entity)
+        const newRoles = (entity || {})?.roles||[]
+        setRoles(newRoles)
+    },[entity])
+
+    const [role, setRole] = useState({
+        id: crypto.randomUUID(),
+        groupId: entity?.id ?? id,
+        // startdate: formatDateTime(new Date()),
+        // enddate: formatDateTime(new Date() + 14)
+    })
+
+    const handleChangeOrBlur = (e) => {
+        const id = e?.target?.id
+        const value = e?.target?.value
+        if (!id) return;
+            
+        setRole(prev => ({
+            ...prev, [id]: value
+        }))
+        
+    }
+    const handleConfirm = async() => {
+        console.log("RBACEdit.handleConfirm", item?.id, role)
+        await save(role)
+        await run({id})
+        setRole(
+            prev => ({
+                ...prev,
+                id: crypto.randomUUID(),
+                userId: null,
+                user: null,
+            })
+        )
+        // setRoles(prev => ([...prev, role]))
+    }
+    return (<>
+        <AsyncStateIndicator 
+            error={error} 
+            loading={loading} 
+            text={"Nahrávám"} 
+        />
+        <AsyncStateIndicator 
+            error={updateError} 
+            loading={saving} 
+            text={"Ukládám"} 
+        />
+        <table className="table table-stripped">
+            <thead>
+            <tr>
+                <th>Typ role</th>
+                <th>Osoba</th>
+                <th>Počátek</th>
+                <th>Konec</th>
+                <th>Platná</th>
+                <th></th>
+            </tr>
+            </thead>
+            <tbody>
+                {roles.map(role => <tr key={role?.id}>
+                    <td>
+                        <Link item={role?.roletype || {}}/>
+                    </td>
+                    <td>
+                        <Link item={role?.user || {}}/>
+                    </td>
+                    <td>
+                        {role?.startdate?formatDateTime(role?.startdate):"-"}
+                    </td>
+                    <td>
+                        {role?.enddate?formatDateTime(role?.enddate):"-"}
+                    </td>
+                    <td>
+                        {role?.valid?"Ano":"Ne"}
+                    </td>
+                    <td>
+
+                    </td>
+                </tr>
+                )}
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td>
+                        <EntityLookup 
+                            id="roletypeId"
+                            className="form-control"
+                            asyncAction={SearchRoleTypeAsyncAction}
+                            onChange={handleChangeOrBlur}
+                            onBlur={handleChangeOrBlur}
+                            value={role?.roletype}
+                        />
+                    </td>
+                    <td>
+                        <EntityLookup 
+                            id="userId"
+                            className="form-control"
+                            asyncAction={SearchUserAsyncAction}
+                            onChange={handleChangeOrBlur}
+                            onBlur={handleChangeOrBlur}
+                            value={role?.user}
+                        />
+                    </td>
+                    <td>
+                        <Input 
+                            id="startdate"
+                            type="datetime-local" 
+                            className="form-control"
+                            onChange={handleChangeOrBlur}
+                            onBlur={handleChangeOrBlur}
+                            value={role?.startdate}
+                        />
+                    </td>
+                    <td>
+                        <Input 
+                            id="enddate"
+                            type="datetime-local" 
+                            className="form-control"
+                            onChange={handleChangeOrBlur}
+                            onBlur={handleChangeOrBlur}
+                            value={role?.enddate}
+                        />
+                    </td>
+                    <td colSpan={2}>
+                        <button 
+                            className="btn btn-outline-primary form-control"
+                            onClick={handleConfirm}
+                            disabled={
+                                !(role?.userId && role?.startdate && role?.roletypeId)
+                            }
+                        >Ok</button>
+                    </td>
+                </tr>
+            </tfoot>
+        </table>
+    </>)
+}

package/src/RBACGQLModel/Components/Table.jsx

@@ -0,0 +1,7 @@
+import { Table as BaseTable } from "../../../../_template/src/Base/Components/Table" 
+
+export const Table = ({ data }) => {
+    return (
+        <BaseTable data={data} />
+    )
+}

package/src/RBACGQLModel/Components/index.js

@@ -0,0 +1,13 @@
+
+export * from './CardCapsule'
+export * from './Children'
+export * from './LargeCard'
+export * from './Link'
+export * from './MediumContent'
+export * from './MediumCard'
+
+export * from './MediumEditableContent'
+export * from './LiveEdit'
+
+
+export * from './ConfirmEdit'

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>
+    )
+}