@speron/projekt-front 0.0.3

package/src/RoleGQLModel/Components/Children.jsx

@@ -0,0 +1,31 @@
+import { ChildWrapper } from "@hrbolek/uoisfrontend-shared";
+
+/**
+ * TemplateChildren Component
+ *
+ * A utility React component that wraps its children with the `ChildWrapper` component, 
+ * passing down an `template` entity along with other props to all child elements.
+ * This component is useful for injecting a common `template` entity into multiple children 
+ * while preserving their existing functionality.
+ *
+ * @component
+ * @param {Object} props - The props for the TemplateChildren component.
+ * @param {any} props.template - An entity (e.g., object, string, or other data) to be passed to the children.
+ * @param {React.ReactNode} props.children - The children elements to be wrapped and enhanced.
+ * @param {...any} props - Additional props to be passed to each child element.
+ *
+ * @returns {JSX.Element} A `ChildWrapper` component containing the children with the injected `template` entity.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 1, message: "No data available" };
+ *
+ * <TemplateChildren template={templateEntity}>
+ *     <CustomMessage />
+ *     <CustomIcon />
+ * </TemplateChildren>
+ *
+ * // Result: Both <CustomMessage /> and <CustomIcon /> receive the 'template' prop with the specified entity.
+ */
+export const Children = ({item, children, ...props}) => 
+    <ChildWrapper item={item} children={children} {...props} />

package/src/RoleGQLModel/Components/ConfirmEdit.jsx

@@ -0,0 +1,61 @@
+import { UpdateAsyncAction } from "../Queries";
+import { MediumEditableContent } from "./MediumEditableContent";
+import { useEditAction } from "../../../../dynamic/src/Hooks/useEditAction";
+import { useCallback } from "react";
+import { useGQLEntityContext } from "../../../../_template/src/Base/Helpers/GQLEntityProvider";
+
+
+export const ConfirmEdit = ({ item, children }) => {
+    const { run , error, loading, entity, data, onChange: contextOnChange, onBlur: contextOnBlur } = useGQLEntityContext()
+    
+    const localOnMutationEvent = useCallback((mutationHandler, notifyHandler) => async (e) => {
+        const newItem = { ...item, [e.target.id]: e.target.value }
+        const newEvent = { target: { value: newItem } }
+        
+        await notifyHandler(newEvent)
+        return await mutationHandler(e)
+    })
+
+    const {
+        draft,
+        dirty,
+        onChange, 
+        onBlur,
+        onCancel,
+        onConfirm,
+    } = useEditAction(UpdateAsyncAction, item, {mode: "confirm"})
+
+    const handleConfirm = useCallback(async () => {
+        const result = await onConfirm();
+        console.log("ConfirmEdit handleConfirm result", result, "draft", draft)
+        if (result) {
+            const event = { target: { value: result } };
+            // důležité: použij params z kontextu (provider si je drží jako "poslední vars")
+            await contextOnChange(event);
+        }
+        return result;
+    }, [onConfirm, contextOnChange]);
+
+
+    return (
+        <MediumEditableContent item={item} onChange={onChange} onBlur={onBlur} >
+            {children}
+            <hr />
+            {/* <pre>{JSON.stringify(item, null, 2)}</pre> */}
+            <button 
+                className="btn btn-warning form-control" 
+                onClick={onCancel}
+                disabled={!dirty || loading}
+            >
+                Zrušit změny
+            </button>
+            <button 
+                className="btn btn-primary form-control" 
+                onClick={handleConfirm}
+                disabled={!dirty || loading}
+            >
+                Uložit změny
+            </button>
+        </MediumEditableContent>
+    )
+}

package/src/RoleGQLModel/Components/Filter.jsx

@@ -0,0 +1,14 @@
+import { DateTimeFilter, Filter as BaseFilter, StringFilter, UUIDFilter } from "../../../../_template/src/Base/FormControls/Filter"
+
+export const Filter = ({ id, onChange: handleChange, children }) => {
+    return (
+        <BaseFilter id={id} onChange={handleChange}>
+            <UUIDFilter id="id" />
+            <StringFilter id="name" />
+            <DateTimeFilter id="created" emitUtcIso={false} />
+            {/* <FloatFilter id="count" /> */}
+            {children}
+        </BaseFilter>
+    )
+}
+

package/src/RoleGQLModel/Components/LargeCard.jsx

@@ -0,0 +1,49 @@
+// import Row from "react-bootstrap/Row"
+import { MediumCard } from "./MediumCard"
+import { CardCapsule as CardCapsule_} from "./CardCapsule"
+import { Row } from "../../../../_template/src/Base/Components/Row"
+import { LeftColumn, MiddleColumn } from "@hrbolek/uoisfrontend-shared"
+import { MediumContent as MediumContent_ } from "./MediumContent"
+import { InteractiveMutations } from '../Mutations/InteractiveMutations'
+/**
+ * A large card component for displaying detailed content and layout for an template entity.
+ *
+ * This component wraps an `TemplateCardCapsule` with a flexible layout that includes multiple
+ * columns. It uses a `Row` layout with a `LeftColumn` for displaying an `TemplateMediumCard`
+ * and a `MiddleColumn` for rendering additional children.
+ *
+ * @component
+ * @param {Object} props - The properties for the TemplateLargeCard 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 in the middle column.
+ *
+ * @returns {JSX.Element} A JSX element combining a large card layout with dynamic content.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 123, name: "Sample Entity" };
+ * 
+ * <TemplateLargeCard template={templateEntity}>
+ *   <p>Additional content for the middle column.</p>
+ * </TemplateLargeCard>
+ */
+export const LargeCard = ({ item, children, CardCapsule=CardCapsule_, MediumContent=MediumContent_ }) => {
+    // console.log("LargeCard.item", item)
+    return (
+        <CardCapsule item={item} >
+            <Row>
+                <LeftColumn>
+                    <CardCapsule item={item} title="Detail">
+                        <MediumContent item={item} />
+                    </CardCapsule>
+                    <InteractiveMutations item={item} />
+                </LeftColumn>
+                <MiddleColumn>
+                    {children}
+                </MiddleColumn>
+            </Row>
+        </CardCapsule>
+    )
+}

package/src/RoleGQLModel/Components/Link.jsx

@@ -0,0 +1,55 @@
+import { ProxyLink } from "@hrbolek/uoisfrontend-shared"
+import { URIRoot } from "../../uriroot";
+import { registerLink } from "../../../../_template/src/Base/Components/Link";
+
+const modelURI = `${URIRoot}/role`
+export const ListURI = `${modelURI}/list/`;
+export const CreateURI = `${modelURI}/create/`;
+export const ReadURI = `${modelURI}/view/`;
+export const UpdateURI = `${modelURI}/edit/`;
+export const DeleteURI = `${modelURI}/delete/`;
+
+export const LinkURI = ReadURI;
+export const VectorItemsURI = ListURI;
+
+const idParam = ":id"
+export const ReadItemURI = `${LinkURI}${idParam}`;
+export const UpdateItemURI = `${UpdateURI}${idParam}`;
+export const DeleteItemURI = `${DeleteURI}${idParam}`;
+
+export const AddRoleOnGroupURI = `${modelURI}/createongroup/`
+/**
+ * A React component that renders a `ProxyLink` to an "template" entity's view page.
+ *
+ * The target URL is dynamically constructed using the `template` object's `id`, and the link displays
+ * the `template` object's `name` as its clickable content.
+ *
+ * @function TemplateLink
+ * @param {Object} props - The properties for the `TemplateLink` component.
+ * @param {Object} props.template - The object representing the "template" entity.
+ * @param {string|number} props.template.id - The unique identifier for the "template" entity. Used to construct the target URL.
+ * @param {string} props.template.name - The display name for the "template" entity. Used as the link text.
+ *
+ * @returns {JSX.Element} A `ProxyLink` component linking to the specified "template" entity's view page.
+ *
+ * @example
+ * // Example usage with a sample template entity:
+ * const templateEntity = { id: 123, name: "Example Template Entity" };
+ * 
+ * <TemplateLink template={templateEntity} />
+ * // Renders: <ProxyLink to="/template/template/view/123">Example Template Entity</ProxyLink>
+ *
+ * @remarks
+ * - This component utilizes `ProxyLink` to ensure consistent link behavior, including parameter preservation and conditional reloads.
+ * - The URL format `/template/template/view/:id` must be supported by the application routing.
+ *
+ * @see ProxyLink - The base component used for rendering the link.
+ */
+export const Link = ({ item, LinkURI: LinkURI_ = LinkURI, action="view", children, ...props}) => {
+    const targetURI = LinkURI_.replace('view', action);
+    return <ProxyLink to={targetURI + item?.id} {...props}>{children || item?.fullname || item?.name || item?.id || "Nevim"}</ProxyLink>
+    // return <BaseUI.Link item={item} />
+    // return <a>{children || item?.fullname || item?.name || item?.id || "Nevim"}</a>
+}
+
+registerLink('RoleGQLModel', Link)

package/src/RoleGQLModel/Components/LiveEdit.jsx

@@ -0,0 +1,111 @@
+import { useCallback } from "react";
+import { useMemo } from "react";
+
+import { UpdateAsyncAction } from "../Queries";
+import { CreateDelayer, ErrorHandler, LoadingSpinner } from "@hrbolek/uoisfrontend-shared";
+import { MediumEditableContent } from "./MediumEditableContent";
+import { useEditAction } from "../../../../dynamic/src/Hooks/useEditAction";
+
+/**
+ * TemplateLiveEdit Component
+ *
+ * Interaktivní React komponenta pro live editaci entity `template` s podporou optimistického fetchování a debounce delaye.
+ *
+ * - Používá `useAsyncAction` k načítání a update entit (např. GraphQL mutation).
+ * - Pokud se hodnota pole změní, spustí se update po krátkém zpoždění (`delayer`) — uživatelské změny nejsou ihned posílány, ale až po pauze.
+ * - Zobrazuje loading a error stav pomocí komponent `LoadingSpinner` a `ErrorHandler`.
+ * - Předává editované hodnoty do komponenty `TemplateMediumEditableContent`, která zajišťuje zobrazení a editaci jednotlivých polí šablony (`template`).
+ *
+ * @component
+ * @param {Object} props - Props objekt.
+ * @param {Object} props.template - Objekt reprezentující editovanou šablonu (template entity).
+ * @param {React.ReactNode} [props.children] - Libovolné children, které se vloží pod editační komponentu.
+ * @param {Function} [props.asyncAction=TemplateUpdateAsyncAction] - Asynchronní akce pro update (`useAsyncAction`), typicky GraphQL update mutation.
+ *
+ * @example
+ * // Standardní použití
+ * <TemplateLiveEdit template={templateEntity} />
+ *
+ * @example
+ * // S vlastním asyncAction a doplňkovým obsahem
+ * <TemplateLiveEdit template={templateEntity} asyncAction={myUpdateAction}>
+ *   <div>Extra obsah nebo poznámka</div>
+ * </TemplateLiveEdit>
+ *
+ * @returns {JSX.Element}
+ *   Interaktivní komponenta pro live editaci šablony, včetně spinneru a error handleru.
+ */
+export const LiveEdit_ = ({ children, asyncAction=UpdateAsyncAction}) => {
+    const { onChange, onBlur, item } = useGQLEntityContext()
+    return (
+        <AsyncActionProvider 
+            item={item} 
+            queryAsyncAction={asyncAction}
+            options={{deferred: true, network: true}}
+            onChange={onChange}
+            onBlur={onBlur}
+        >
+            <LiveEditWrapper item={item}>
+                {children}
+                {/* <hr />
+                <pre>{JSON.stringify(item, null, 2)}</pre> */}
+            </LiveEditWrapper>
+        </AsyncActionProvider>
+    )
+}
+
+const LiveEditWrapper = ({ item, children }) => {
+    const { run , error, loading, entity, data, onChange, onBlur } = useGQLEntityContext()
+    
+    const handleEvent = useCallback((handler) => async (e) => {
+        const {id, value} = e?.target || {}
+        if (id === undefined || value === undefined) return 
+        if (item?.[id] === value) {
+            return;
+        }
+        const newItem = { ...item, [e.target.id]: e.target.value }
+        const newEvent = { target: { value: newItem } }
+        // console.log("LiveEditWrapper localOnChange start e", e, '=>', newEvent)
+        // const result = await delayer(()=>onChange(newEvent))
+        const result = await handler(newEvent)
+        // console.log("LiveEditWrapper localOnChange end e", e, '=>', newItem, '=>', result)
+        return result
+    }, [item])
+
+    const bindedOnChange = useMemo(() => handleEvent(onChange), [onChange, handleEvent])
+    const bindedOnBlur = useMemo(() => handleEvent(onBlur), [onBlur, handleEvent])
+
+    return (
+        <MediumEditableContent item={item} onChange={bindedOnChange} onBlur={bindedOnBlur} >
+            {children}
+            {/* <hr />
+            <pre>{JSON.stringify(item, null, 2)}</pre> */}
+        </MediumEditableContent>
+    )
+}
+
+
+export const LiveEdit = ({ item, children, asyncMutationAction=UpdateAsyncAction }) => {
+    // const { run , error, loading, entity, data, onChange: contextOnChange, onBlur: contextOnBlur } = useGQLEntityContext()
+    const {
+        draft,
+        dirty,
+        loading: saving,
+        onChange, 
+        onBlur,
+        onCancel,
+        onConfirm,
+    } = useEditAction(asyncMutationAction, item, {
+        mode: "live", 
+        // onCommit: contextOnChange
+    })
+
+    return (
+        
+        <MediumEditableContent item={item} onChange={onChange} onBlur={onBlur} >
+            {saving && <LoadingSpinner/>}
+            {children}
+        </MediumEditableContent>
+        
+    )
+}

package/src/RoleGQLModel/Components/MediumCard.jsx

@@ -0,0 +1,39 @@
+import { PersonFill } from "react-bootstrap-icons"
+import { CardCapsule } from "./CardCapsule"
+import { MediumContent } from "./MediumContent"
+import { Link } from "./Link"
+
+/**
+ * A card component that displays detailed content for an template entity.
+ *
+ * This component combines `TemplateCardCapsule` and `TemplateMediumContent` to create a card layout
+ * with a title and medium-level content. The title includes a `PersonFill` icon and a link to
+ * the template entity's details, while the body displays serialized details of the entity along
+ * with any additional children passed to the component.
+ *
+ * @component
+ * @param {Object} props - The properties for the TemplateMediumCard 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 inside the card body.
+ *
+ * @returns {JSX.Element} A JSX element combining a card with a title and detailed content.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 123, name: "Sample Entity" };
+ * 
+ * <TemplateMediumCard template={templateEntity}>
+ *   <p>Additional details or actions for the entity.</p>
+ * </TemplateMediumCard>
+ */
+export const MediumCard = ({ item, children }) => {
+    return (
+        <CardCapsule title={<><PersonFill /> <Link item={item} /></>}>
+            <MediumContent item={item}>
+                {children}
+            </MediumContent>
+        </CardCapsule>
+    )
+}

package/src/RoleGQLModel/Components/MediumContent.jsx

@@ -0,0 +1,97 @@
+import { BaseUI } from "../../Base"
+import { Col as Col_ } from "../../../../_template/src/Base/Components/Col"
+import { Row } from "../../../../_template/src/Base/Components/Row"
+import { Link } from "./Link"
+/**
+ * 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 MediumContent = ({ item, children}) => {
+//     return (
+//         <MediumContent_ item={item}>
+//             {children}
+//         </MediumContent_>
+//     )
+// }
+
+// export const MediumContent_ = ({ item, children }) => {
+//     return (
+//         <>
+//             {Object.entries(item).map(([attribute_name, attribute_value]) => {
+//                 // if (attribute_name !== "id") return null
+//                 if (Array.isArray(attribute_value)) return null
+//                 if (typeof attribute_value === "object" && attribute_value !== null) return null
+//                 let attribute_value_result = attribute_value
+//                 // let attribute_value_result = attribute_value
+//                 if (Array.isArray(attribute_value))
+//                     // attribute_value_result = <CardCapsule><Table data={attribute_value} /></CardCapsule>
+//                     return null
+//                 else if (typeof attribute_value === "object" && attribute_value !== null)
+//                     // attribute_value_result = <MediumCard item={attribute_value} />
+//                     return null
+//                 else if (attribute_name === "__typename") {
+//                     /*attribute_value_result = <Link item={attribute_value} />*/
+//                     // console.log("else1", attribute_name, attribute_value)
+//                 }
+//                 if (attribute_name === "id")
+//                     attribute_value_result = <Link item={item}>{item?.id || "Data error"}</Link>
+//                 if (attribute_name === "name")
+//                     attribute_value_result = <Link item={item} />
+//                 // else return null
+//                 if (attribute_value)
+//                     return (
+//                         <Row key={attribute_name}>
+//                             <Col className="col-4"><b>{attribute_name}</b></Col>
+//                             <Col className="col-8">{attribute_value_result}</Col>
+//                         </Row>
+//                     )
+//                 else return null
+//             })}
+//             {Object.entries(item).map(([attribute_name, attribute_value]) => {
+//                 if (attribute_value !== null) return null
+//                 let attribute_value_result = JSON.stringify(attribute_value)
+//                 if (Array.isArray(attribute_value))
+//                     // attribute_value_result = <CardCapsule><Table data={attribute_value} /></CardCapsule>
+//                     return null
+//                 else if (typeof attribute_value === "object" && attribute_value !== null)
+//                     // attribute_value_result = <MediumCard item={attribute_value} />
+//                     return null
+//                 else if (attribute_name === "__typename") {
+//                     /*attribute_value_result = <Link item={attribute_value} />*/
+//                     console.log("else2", attribute_name, attribute_value)
+//                 }
+//                 if (attribute_value)
+//                     return null
+//                 else
+//                     return (
+//                         <Row key={attribute_name}>
+//                             <Col className="col-4"><b>{attribute_name}</b></Col>
+//                             <Col className="col-8">{attribute_value_result}</Col>
+//                         </Row>
+//                     )
+//             })}
+//             {children}
+//         </>
+//     )
+// }
+
+export { MediumContent } from "../../../../_template/src/Base/Components/MediumContent"

package/src/RoleGQLModel/Components/MediumEditableContent.jsx

@@ -0,0 +1,72 @@
+import { EntityLookup } from "../../../../_template/src/Base/FormControls/EntityLookup"
+import { SearchAsyncAction as SearchUserAsyncAction } from "../../UserGQLModel/Queries/SearchAsyncAction"
+import { SearchAsyncAction as SearchGroupAsyncAction } from "../../GroupGQLModel/Queries/SearchAsyncAction"
+import { Input } from "../../../../_template/src/Base/FormControls/Input"
+
+/**
+ * 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={"startdate"} 
+                type={"datetime-local"}
+                label={"Počáteční datum"} 
+                className="form-control" 
+                value={item?.startdate} // || isoNowZ } //|| new Date().toISOString()} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+            />
+            <Input 
+                id={"enddate"} 
+                type={"datetime-local"}
+                label={"Koncové datum"} 
+                className="form-control" 
+                value={item?.enddate} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+            />
+            <EntityLookup 
+                asyncAction={SearchUserAsyncAction} //SearchGroupAsyncAction
+                id={"userId"} 
+                label={"Uživatel"} 
+                className="form-control" 
+                value={item?.user} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+            />
+            <EntityLookup 
+                asyncAction={SearchGroupAsyncAction} //SearchGroupAsyncAction
+                id={"groupId"} 
+                label={"Skupina"} 
+                className="form-control" 
+                value={item?.group} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+            />
+            {children}
+        </>
+    )
+}

package/src/RoleGQLModel/Components/RBACObject.jsx

@@ -0,0 +1,22 @@
+import { Link, SimpleCardCapsule } from "../../../../_template/src/Base/Components"
+import { Col as Col_ } from "../../../../_template/src/Base/Components/Col"
+import { Row } from "../../../../_template/src/Base/Components/Row"
+
+export const RBACObject = ({ item }) => {
+    const { currentUserRoles=[] } = item || {}
+
+    return (
+        <SimpleCardCapsule title="Moje oprávnění">
+
+            {currentUserRoles.map(role => (
+                <Row key={role?.id}>
+                    <Col_>
+                        <Link item={role?.roletype} />@
+                        <Link item={role?.group} />
+                    </Col_>
+                </Row>
+            ))}
+
+        </SimpleCardCapsule>
+    )
+}

package/src/RoleGQLModel/Components/Table.jsx

@@ -0,0 +1,82 @@
+import { Table as BaseTable, KebabMenu } from "../../../../_template/src/Base/Components/Table" 
+import { Link as BaseLink } from "../../../../_template/src/Base/Components/Link" 
+import { Link, LinkURI } from "./Link"
+import { useNavigate } from "react-router"
+import { UpdateLink } from "../Mutations/Update"
+import { DeleteButton } from "../Mutations/Delete"
+
+const CellName = ({ row, name }) => (
+    <td key={name}>
+        <Link item={row} />
+    </td>
+)
+
+const CellGroup = ({ row, name }) => (
+    <td key={name}>
+        <BaseLink item={row?.group || {}} />
+    </td>
+)
+
+const CellUser = ({ row, name }) => (
+    <td key={name}>
+        <BaseLink item={row?.user || {}} />
+    </td>
+)
+
+const CellRoleType = ({ row, name }) => (
+    <td key={name}>
+        <BaseLink item={row?.roletype || {}} />
+    </td>
+)
+
+
+const CellTools = ({ row, name }) => {
+    const navigate = useNavigate()
+    const {id, name: name_}  = row || {}
+    return (
+        <td>
+            <KebabMenu actions={[
+                { 
+                    // label: "Editovat", 
+                    label: "Editovat " + name_, 
+                    onClick: () => navigate(`${LinkURI.replace("view", "edit")}${id}`),
+                    children: (<UpdateLink item={row} className="form-control btn btn-outline-secondary border-0">Upravit</UpdateLink>)
+                    // children: (<UpdateLink item={row} className="btn btn-outline-secondary">{name}</UpdateLink>)
+                },
+                { 
+                    // label: "Editovat", 
+                    label: "Smazat " + name_, 
+                    onClick: () => navigate(`${LinkURI.replace("view", "edit")}${id}`),
+                    children: (<DeleteButton item={row} className="form-control btn btn-outline-secondary border-0">Odstranit</DeleteButton>)
+                    // children: (<UpdateLink item={row} className="btn btn-outline-secondary">{name}</UpdateLink>)
+                }
+            ]} />
+        </td>
+    )
+}
+
+const table_def = {
+    "roletype": {
+        label: "Typ role",
+        component: CellRoleType
+    },
+    "user": {
+        label: "Uživatel",
+        component: CellUser
+    },
+    "group": {
+        label: "Skupina",
+        component: CellGroup
+    },
+    
+    "tools": {
+        label: "Nástroje",
+        component: CellTools
+    }
+}
+
+export const Table = ({ data }) => {
+    return (
+        <BaseTable data={data} table_def={table_def}/>
+    )
+}

package/src/RoleGQLModel/Components/index.js

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