@hrbolek/uoisfrontend-template 0.6.0

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'

package/src/RoleGQLModel/Mutations/AddRoleOnGroup.jsx

@@ -0,0 +1,117 @@
+import { AddRoleOnGroupURI, ReadItemURI } from "../Components"
+import { InsertAsyncAction } from "../Queries"
+import { SearchAsyncAction as SearchUserAsyncAction } from "../../UserGQLModel/Queries/SearchAsyncAction"
+import { SearchAsyncAction as SearchGroupAsyncAction } from "../../GroupGQLModel/Queries/SearchAsyncAction"
+import { 
+    CreateBody as BaseCreateBody, 
+    CreateButton as BaseCreateButton, 
+    CreateDialog as BaseCreateDialog, 
+    CreateLink  as BaseCreateLink
+} from "../../../../_template/src/Base/Mutations/Create"
+import { EntityLookup } from "../../../../_template/src/Base/FormControls/EntityLookup"
+import { Input } from "../../../../_template/src/Base/FormControls/Input"
+
+const AddRoleOnGroupContent = ({ item, onChange=(e)=>null, onBlur=(e)=>null, children}) => {
+    return (
+        <>           
+        {/* defaultValue={item?.name|| "Název"}  */}
+            <EntityLookup 
+                asyncAction={SearchGroupAsyncAction} //SearchGroupAsyncAction
+                id={"groupId"} 
+                label={"Skupina"} 
+                className="form-control" 
+                value={item?.group} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+                disabled
+            />
+            <EntityLookup 
+                asyncAction={SearchUserAsyncAction} //SearchGroupAsyncAction
+                id={"userId"} 
+                label={"Uživatel"} 
+                className="form-control" 
+                value={item?.user} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+            />
+            <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} 
+            />
+            {children}
+        </>
+    )
+}
+
+const DefaultContent = AddRoleOnGroupContent
+const MutationAsyncAction = InsertAsyncAction
+
+const permissions = {
+    oneOfRoles: ["administrátor"],
+    mode: "item",
+}
+
+export const AddRoleOnGroupLink = ({
+    uriPattern=AddRoleOnGroupURI,
+    ...props
+}) => (
+    <BaseCreateLink {...props} uriPattern={uriPattern} />
+);
+
+export const AddRoleOnGroupButton = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateButton 
+        {...props}
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+        {...permissions}
+    />
+}
+
+export const AddRoleOnGroupDialog = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateDialog 
+        {...props} 
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+    />
+};
+
+export const AddRoleOnGroupBody = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateBody 
+        {...props} 
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+    />
+};
+

package/src/RoleGQLModel/Mutations/Create.jsx

@@ -0,0 +1,67 @@
+import { CreateURI, MediumEditableContent, ReadItemURI } from "../Components"
+import { InsertAsyncAction } from "../Queries"
+import { 
+    CreateBody as BaseCreateBody, 
+    CreateButton as BaseCreateButton, 
+    CreateDialog as BaseCreateDialog, 
+    CreateLink  as BaseCreateLink
+} from "../../../../_template/src/Base/Mutations/Create"
+
+const DefaultContent = MediumEditableContent
+const MutationAsyncAction = InsertAsyncAction
+
+const permissions = {
+    oneOfRoles: ["superadmin"],
+    mode: "absolute",
+}
+
+export const CreateLink = ({
+    uriPattern=CreateURI,
+    ...props
+}) => (
+    <BaseCreateLink {...props} uriPattern={uriPattern} />
+);
+
+export const CreateButton = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateButton 
+        {...props}
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+        {...permissions}
+    />
+}
+
+export const CreateDialog = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateDialog 
+        {...props} 
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+    />
+};
+
+export const CreateBody = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateBody 
+        {...props} 
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+    />
+};
+

package/src/RoleGQLModel/Mutations/Delete.jsx

@@ -0,0 +1,80 @@
+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 "../../../../_template/src/Base/Mutations/Delete";
+
+const DefaultContent = MediumContent
+const MutationAsyncAction = DeleteAsyncAction
+
+const permissions = {
+    oneOfRoles: ["superadmin"],
+    mode: "absolute",
+}
+
+export const DeleteLink = ({ 
+    uriPattern=DeleteItemURI,
+    ...props
+ }) => {
+    return (
+        <BaseDeleteLink 
+            {...props} 
+            uriPattern={uriPattern} 
+            {...permissions}
+        />
+    )
+};
+
+export const DeleteButton = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:DefaultContent_=DefaultContent,
+    vectorItemsURI=ListURI,
+    ...props 
+}) => {
+    return (
+        <BaseDeleteButton 
+            {...props} 
+            DefaultContent={DefaultContent_} 
+            mutationAsyncAction={mutationAsyncAction}
+            vectorItemsURI={vectorItemsURI}
+            {...permissions}
+        />
+    )
+}
+
+export const DeleteDialog = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:DefaultContent_=DefaultContent,
+    vectorItemsURI=ListURI,
+    ...props 
+}) => {
+    return (
+        <BaseDeleteDialog 
+            {...props} 
+            DefaultContent={DefaultContent} 
+            mutationAsyncAction={MutationAsyncAction}
+            vectorItemsURI={vectorItemsURI}
+            {...permissions}
+        />
+    )
+}
+
+export const DeleteBody = ({ 
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:DefaultContent_=DefaultContent,
+    vectorItemsURI=ListURI,
+    ...props
+}) => {
+    return (
+        <BaseDeleteBody 
+            {...props} 
+            DefaultContent={DefaultContent} 
+            mutationAsyncAction={MutationAsyncAction}
+            vectorItemsURI={vectorItemsURI}
+            {...permissions}
+        />
+    )
+}

package/src/RoleGQLModel/Mutations/InteractiveMutations.jsx

@@ -0,0 +1,31 @@
+import { CardCapsule } from "../Components"
+import { VectorItemsURI } from "../Pages"
+import { CreateButton, CreateLink } from "./Create"
+import { UpdateButton, UpdateLink } from "./Update"
+import { ProxyLink } from "../../../../_template/src/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/RoleGQLModel/Mutations/Update.jsx

@@ -0,0 +1,74 @@
+import { 
+    UpdateBody as BaseUpdateBody, 
+    UpdateButton as BaseUpdateButton, 
+    UpdateDialog as BaseUpdateDialog, 
+    UpdateLink as BaseUpdateLink 
+} from "../../../../_template/src/Base/Mutations/Update";
+
+import { MediumEditableContent, UpdateItemURI } from "../Components";
+import { UpdateAsyncAction } from "../Queries";
+
+const DefaultContent = MediumEditableContent
+const mutationAsyncAction = UpdateAsyncAction
+
+const permissions = {
+    oneOfRoles: ["superadmin"],
+    mode: "absolute",
+}
+
+// ALTERNATIVE, CHECK GQLENDPOINT
+// const permissions = {
+//     oneOfRoles: ["administrátor", "personalista"],
+//     mode: "item",
+// }
+
+
+export const UpdateLink = ({
+    uriPattern=UpdateItemURI, 
+    ...props
+}) => {
+    return <BaseUpdateLink 
+        {...props} 
+        uriPattern={uriPattern} 
+        {...permissions}
+    />
+}
+
+export const UpdateButton = ({
+    DefaultContent:DefaultContent_=DefaultContent,
+    mutationAsyncAction:mutationAsyncAction_=mutationAsyncAction,
+    ...props
+}) => {
+    return <BaseUpdateButton 
+        {...props} 
+        DefaultContent={DefaultContent_} 
+        mutationAsyncAction={mutationAsyncAction_}
+        {...permissions}
+    />
+}
+
+export const UpdateDialog = ({
+    DefaultContent:DefaultContent_=DefaultContent,
+    mutationAsyncAction:mutationAsyncAction_=mutationAsyncAction,
+    ...props
+}) => {
+    return <BaseUpdateDialog 
+        {...props} 
+        DefaultContent={DefaultContent} 
+        mutationAsyncAction={mutationAsyncAction}
+        {...permissions}
+    />
+}
+
+export const UpdateBody = ({
+    DefaultContent:DefaultContent_=DefaultContent,
+    mutationAsyncAction:mutationAsyncAction_=mutationAsyncAction,
+    ...props
+}) => {
+    return <BaseUpdateBody 
+        {...props} 
+        DefaultContent={DefaultContent} 
+        mutationAsyncAction={mutationAsyncAction}
+        {...permissions}
+    />
+}

package/src/RoleGQLModel/Pages/Page.jsx

@@ -0,0 +1,3 @@
+import { PageReadItem } from "./PageReadItem"
+
+export const Page = PageReadItem

package/src/RoleGQLModel/Pages/PageBase.jsx

@@ -0,0 +1,26 @@
+import { useParams } from "react-router"
+import { AsyncActionProvider } from "../../../../_template/src/Base/Helpers/GQLEntityProvider"
+import { PlaceChild } from "../../../../_template/src/Base/Helpers/PlaceChild"
+import { PageNavbar } from "./PageNavbar"
+import { ReadAsyncAction } from "../Queries"
+
+export const PageItemBase = ({ children, queryAsyncAction=ReadAsyncAction }) => {
+    const {id} = useParams()
+    const item = {id}
+    return (
+        <AsyncActionProvider item={item} queryAsyncAction={queryAsyncAction}>
+            <PlaceChild Component={PageNavbar} />
+            {children}
+        </AsyncActionProvider>
+    )
+}
+
+
+export const PageBase = ({ children }) => {
+    return (
+        <>
+            <PageNavbar />
+            {children}
+        </>
+    )
+}

package/src/RoleGQLModel/Pages/PageContent.jsx

@@ -0,0 +1,31 @@
+import { BaseUI } from "../../Base"
+import { useGQLEntityContext } from "../../Template/Utils/GQLEntityProvider"
+
+/**
+ * Renders a page layout for a single template entity, including navigation and detailed view.
+ *
+ * This component wraps `TemplatePageNavbar` and `TemplateLargeCard` to provide a consistent
+ * interface for displaying an individual template. It also supports rendering children as 
+ * nested content inside the card.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {React.ReactNode} [props.children] - Optional nested content rendered inside the card.
+ * @returns {JSX.Element} Rendered page layout for a template.
+ *
+ * @example
+ * const template = { id: 1, name: "Example Template" };
+ * <TemplatePageContent template={template}>
+ *   <p>Additional info here.</p>
+ * </TemplatePageContent>
+ */
+export const PageContent = ({ children, ...props}) => {
+    const { item } = useGQLEntityContext()
+    if (!item) return null
+    return (<>
+        <BaseUI.LargeCard item={item} {...props} >
+            {children}
+            {/* Template {JSON.stringify(item)} */}
+        </BaseUI.LargeCard>        
+    </>)
+}

package/src/RoleGQLModel/Pages/PageCreateItem.jsx

@@ -0,0 +1,21 @@
+import { ReadAsyncAction } from "../Queries"
+import { Row } from "../../../../_template/src/Base/Components/Row";
+import { Col as Col_ } from "../../../../_template/src/Base/Components/Col";
+import { LinkURI } from "../Components";
+import { PageBase } from "./PageBase";
+import { CreateBody } from "../Mutations/Create";
+
+export const PageCreateItem = ({ children, queryAsyncAction=ReadAsyncAction, ...props }) => {
+    return (
+        <PageBase>
+            <Row>
+                <Col_></Col_>
+                <Col_></Col_>
+                <Col_>
+                    <CreateBody {...props} />
+                </Col_>
+                <Col_></Col_>
+            </Row>
+        </PageBase>
+    )
+}

package/src/RoleGQLModel/Pages/PageDeleteItem.jsx

@@ -0,0 +1,13 @@
+import { DeleteAsyncAction } from "../Queries"
+import { LinkURI } from "../Components";
+import { PageBase } from "./PageBase";
+import { DeleteBody } from "../Mutations/Delete";
+
+export const PageDeleteItem = ({ children, queryAsyncAction=DeleteAsyncAction, ...props }) => {
+    return (
+        <PageBase>
+            <DeleteBody {...props} mutationAsyncAction={queryAsyncAction} />
+        </PageBase>
+    )
+}
+