@hrbolek/uoisfrontend-template 0.6.0

package/src/Base/Queries/Fragments.jsx

@@ -0,0 +1,101 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared"
+
+const LinkFragmentStr = `
+fragment Link on RoleTypeGQLModel {
+  __typename
+  id
+  lastchange
+  created
+  createdbyId
+  changedbyId
+  rbacobjectId
+    name
+  nameEn
+  path
+  mastertypeId
+  mastertype {
+    __typename
+  }
+  
+}
+`
+
+const MediumFragmentStr = `
+fragment Medium on RoleTypeGQLModel {
+  ...Link
+  rbacobject {
+    ...RBRoles
+  }
+}
+`
+
+const LargeFragmentStr = `
+fragment Large on RoleTypeGQLModel {
+  ...Medium
+  subtypes {
+    __typename
+  }
+}
+`
+
+const RoleFragmentStr = `
+fragment Role on RoleGQLModel {
+    __typename
+    id
+    lastchange
+    created
+    createdbyId
+    changedbyId
+    rbacobjectId
+    createdby { id __typename }
+    changedby { id __typename }
+    rbacobject { id __typename }
+    valid
+    deputy
+    startdate
+    enddate
+    roletypeId
+    userId
+    groupId
+    roletype { __typename id name }
+    user { __typename id fullname }
+    group { __typename id name }
+  }
+`
+
+const RBACFragmentStr = `
+fragment RBRoles on RBACObjectGQLModel {
+  __typename
+  id
+  currentUserRoles {
+    __typename
+    id
+    lastchange
+    valid
+    startdate
+    enddate
+    roletype {
+      __typename
+      id
+      name
+    }
+    group {
+      __typename
+      id
+      name
+      grouptype {
+        __typename
+        id
+        name
+      }
+    }
+  }
+}`
+
+export const RoleFragment = createQueryStrLazy(`${RoleFragmentStr}`)
+export const RBACFragment = createQueryStrLazy(`${RBACFragmentStr}`)
+
+export const LinkFragment = createQueryStrLazy(`${LinkFragmentStr}`)
+export const MediumFragment = createQueryStrLazy(`${MediumFragmentStr}`, LinkFragment, RBACFragment)
+export const LargeFragment = createQueryStrLazy(`${LargeFragmentStr}`, MediumFragment)
+  

package/src/Base/Queries/InsertAsyncAction.jsx

@@ -0,0 +1,40 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+
+
+const InsertMutationStr = `
+mutation roleTypeInsert(
+	$mastertypeId: UUID # null, 
+	$id: UUID # null, 
+	$name: String # null, 
+	$nameEn: String # null, 
+	$subtypes: [RoleTypeInsertGQLModel!] # null
+) {
+  roleTypeInsert(
+	roleType: {
+	mastertypeId: $mastertypeId, 
+	id: $id, 
+	name: $name, 
+	nameEn: $nameEn, 
+	subtypes: $subtypes}
+  ) {
+    ... on InsertError { ...InsertError }
+    ... on RoleTypeGQLModel { ...Large }
+  }
+}
+
+
+fragment InsertError on InsertError {
+  __typename
+  msg
+  failed
+  code
+  location
+  input
+
+}
+`
+
+const InsertMutation = createQueryStrLazy(`${InsertMutationStr}`, LargeFragment)
+export const InsertAsyncAction = createAsyncGraphQLAction2(InsertMutation)

package/src/Base/Queries/ReadAsyncAction.jsx

@@ -0,0 +1,44 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+
+const ReadQueryStr = `
+query roleTypeById($id: UUID!) {
+  roleTypeById(id: $id) {
+    ...Large
+  }
+}
+`
+
+const ReadQuery = createQueryStrLazy(`${ReadQueryStr}`, LargeFragment)
+
+/**
+ * An async action for executing a GraphQL query to read  entities.
+ *
+ * This action is created using `createAsyncGraphQLAction` with a predefined `QueryRead` query.
+ * It can be dispatched with query variables to fetch data related to  entities from the GraphQL API.
+ *
+ * @constant
+ * @type {Function}
+ *
+ * @param {Object} query_variables - The variables for the GraphQL query.
+ * @param {string|number} query_variables.id - The unique identifier for the  entity to fetch.
+ *
+ * @returns {Function} A dispatchable async action that performs the GraphQL query, applies middleware, and dispatches the result.
+ *
+ * @throws {Error} If `query_variables` is not a valid JSON object.
+ *
+ * @example
+ * // Example usage:
+ * const queryVariables = { id: "12345" };
+ *
+ * dispatch(ReadAsyncAction(queryVariables))
+ *   .then((result) => {
+ *     console.log("Fetched data:", result);
+ *   })
+ *   .catch((error) => {
+ *     console.error("Error fetching data:", error);
+ *   });
+ */
+// export const ReadAsyncAction = createAsyncGraphQLAction2(ReadQuery, reduceToFirstEntity("result"))
+export const ReadAsyncAction = createAsyncGraphQLAction2(ReadQuery)

package/src/Base/Queries/ReadPageAsyncAction.jsx

@@ -0,0 +1,16 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment, MediumFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+
+const ReadPageQueryStr = `
+query roleTypePage($skip: Int, $limit: Int, $orderby: String, $where: RoleTypeInputWhereFilter) {
+  roleTypePage(skip: $skip, limit: $limit, orderby: $orderby, where: $where) {
+    ...Medium
+  }
+}
+`
+const ReadPageQuery = createQueryStrLazy(`${ReadPageQueryStr}`, 
+    MediumFragment,
+    // LargeFragment,
+)
+export const ReadPageAsyncAction = createAsyncGraphQLAction2(ReadPageQuery)

package/src/Base/Queries/SearchAsyncAction.jsx

@@ -0,0 +1,16 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared"
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2"
+import { LargeFragment } from "./Fragments"
+import { reduceToFirstEntity } from "../../../../dynamic/src/Store"
+
+const SearchQueryStr = `
+query SearchQuery($skip: Int, $limit: Int, $pattern: String) {
+  result: userPage(skip: $skip, limit: $limit, where: {name: {_ilike: $pattern}}) {
+    ...Large
+  }
+}
+`
+
+
+export const SearchAsyncActionQuery = createQueryStrLazy(`${SearchQueryStr}`, LargeFragment)
+export const SearchAsyncAction = createAsyncGraphQLAction2(SearchAsyncActionQuery, reduceToFirstEntity)

package/src/Base/Queries/UpdateAsyncAction.jsx

@@ -0,0 +1,40 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+import { reduceToFirstEntity, updateItemsFromGraphQLResult } from "../../../../dynamic/src/Store";
+
+const UpdateMutationStr = `
+mutation roleTypeUpdate(
+	$id: UUID! # null, 
+	$lastchange: DateTime! # null, 
+	$name: String # null, 
+	$nameEn: String # null
+) {
+  roleTypeUpdate(
+	roleType: {
+	id: $id, 
+	lastchange: $lastchange, 
+	name: $name, 
+	nameEn: $nameEn}
+  ) {
+    ... on RoleTypeGQLModel { ...Large }
+    ... on RoleTypeGQLModelUpdateError { ...Error }
+  }
+}
+
+fragment Error on RoleTypeGQLModelUpdateError {
+  __typename
+  Entity {
+    ...Large
+  }
+  msg
+  failed
+  code
+  location
+  input
+}
+`
+
+const UpdateMutation = createQueryStrLazy(`${UpdateMutationStr}`, LargeFragment)
+export const UpdateAsyncAction = createAsyncGraphQLAction2(UpdateMutation, 
+    updateItemsFromGraphQLResult, reduceToFirstEntity)

package/src/Base/Queries/index.js

@@ -0,0 +1,6 @@
+
+export { InsertAsyncAction } from './InsertAsyncAction'
+export { UpdateAsyncAction } from './UpdateAsyncAction'
+export { DeleteAsyncAction } from './DeleteAsyncAction'
+export { ReadAsyncAction } from './ReadAsyncAction'
+export { ReadPageAsyncAction } from './ReadPageAsyncAction'

package/src/Base/Scalars/ScalarAttribute.jsx

@@ -0,0 +1,49 @@
+import { CardCapsule } from "../Components/CardCapsule"
+import { MediumCard } from "../Components/MediumCard"
+import { Col } from "../Components/Col"
+import { Row } from "../Components/Row"
+import { Link } from "../Components"
+
+export const ScalarAttributeFactory = (deafult_attribute_name) => ({ item, attribute_name: attribute_name=deafult_attribute_name }) => {
+    const attribute_value = item?.[attribute_name] || {}
+    return (
+        <Row key={deafult_attribute_name}>
+            <Col className="col-2"><b>{attribute_name}</b></Col>
+            <Col className="col-10">
+                <MediumCard item={attribute_value} />
+            </Col>
+        </Row>
+    )
+}
+
+export const ScalarAttribute = ({ attribute_name, item }) => {
+    const attribute_value = item?.[attribute_name] || {}
+    return (<>
+        
+        <MediumCard item={attribute_value} header={<>
+            <Link item={item}><b>{attribute_name}</b></Link>/ 
+            <Link item={attribute_value} />
+            </>}/>
+    </>
+        // <CardCapsule title={<Link item={item}>{attribute_name}</Link>}>
+        //     <MediumCard item={attribute_value} />
+        // </CardCapsule>
+    )
+}
+
+export const MediumCardScalars = ({ item }) => {
+    return (
+        <CardCapsule item={item} header={"Skalární atributy"}>
+            {Object.entries(item).map(([attribute_name, attribute_value]) => {
+                if (Array.isArray(attribute_value)) return null
+                if (typeof attribute_value === "object" && attribute_value !== null) {
+                    return <ScalarAttribute key={attribute_name} item={item} attribute_name={attribute_name} />
+                }
+                else {
+                    return null
+                }
+            }
+            )}
+        </CardCapsule>
+    )
+}

package/src/Base/Scalars/index.js

@@ -0,0 +1 @@
+export * from "./ScalarAttribute"

package/src/Base/Vectors/VectorAttribute.jsx

@@ -0,0 +1,137 @@
+import { CardCapsule, SimpleCardCapsule, SimpleCardCapsuleRightCorner } from "../Components/CardCapsule"
+import { NonPriorityAttributeValue } from "../Components/MediumContent"
+import { Table } from "../Components/Table"
+import { Col } from "../Components/Col"
+import { Row } from "../Components/Row"
+import { useState } from "react"
+import { Link } from "../Components"
+
+export const VectorAttributeFactory = (attribute_name) => ({ item }) => {
+    const attribute_value = item?.[attribute_name] || []
+    return (
+        <Row key={attribute_name}>
+            <Col className="col-2"><b>{attribute_name}</b></Col>
+            <Col className="col-10">
+                <CardCapsule item={item}>
+                    <Table data={attribute_value} />
+                </CardCapsule>
+            </Col>
+        </Row>
+    )
+}
+
+export const VectorAttribute = ({ attribute_name, item }) => {
+    const attribute_value = item?.[attribute_name] || []
+    return (
+        <CardCapsule item={item} header={<Link item={item} action={attribute_name}>{attribute_name+' []'}</Link> }>
+            <Table data={attribute_value} />
+        </CardCapsule>
+    )
+}
+
+export const MediumCardVectors = ({ item }) => {
+    return (
+        <CardCapsule item={item} header={"Vektorové atributy"}>
+            {Object.entries(item).map(([attribute_name, attribute_value]) => {
+                if (Array.isArray(attribute_value)) {
+                    return <VectorAttribute key={attribute_name} attribute_name={attribute_name} item={item} />
+                } else {
+                    return null
+                }
+            })}
+        </CardCapsule>
+    )
+}
+
+
+
+const isPlainObject = (v) =>
+    v !== null &&
+    typeof v === "object" &&
+    !Array.isArray(v) &&
+    (Object.getPrototypeOf(v) === Object.prototype || Object.getPrototypeOf(v) === null);
+
+const SimpleValue = ({ label, value }) => (<><b>{label}</b><br/> {`${value}`} </>)
+// const SimpleValue = ({ datarow, name, label, value }) => (
+//     <NonPriorityAttributeValue datarow={datarow} name={name} />
+// )
+
+const TreeSimpleValues = ({ item }) => {
+    return (<Row>
+        {Object.entries(item).map(([attribute_name, attribute_value]) => {
+            if (attribute_value === null) return null
+            if (Array.isArray(attribute_value)) return null
+            if (isPlainObject(attribute_value)) return null
+            return (
+                // <Row key={attribute_name} >
+                <Col key={attribute_name} >
+                    <SimpleValue datarow={item} name={attribute_name} label={attribute_name} value={attribute_value} />
+                </Col>
+                // </Row>
+            )
+        })}
+    </Row>)
+}
+
+const TreeDict = ({ title, item }) => {
+    const [collapsed, setCollapsed] = useState(true)
+    const toggle = () => setCollapsed(prev => !prev)
+
+    return (<SimpleCardCapsule title={<>
+            {`${title} `}
+            <Link item={item} />
+            <button className="btn btn-outline-secondary btn-sm btn-link border-0" onClick={toggle}>
+                <b> {collapsed?"Open":"Close"}</b>
+            </button>
+        </>}>
+        <TreeSimpleValues item={item} />
+        {!collapsed && (<>
+            {Object.entries(item).map(([attribute_name, attribute_value]) => {
+                if (Array.isArray(attribute_value)) return null
+                if (isPlainObject(attribute_value)) return (
+                    <TreeDict key={attribute_name} title={attribute_name} item={attribute_value} />       
+                )
+                return null
+            })}
+            {Object.entries(item).map(([attribute_name, attribute_value]) => {
+                if (Array.isArray(attribute_value)) return (
+                    <TreeArray key={attribute_name} title={`${attribute_name}`} items={attribute_value} />
+                )
+                return null
+            })}
+        </>)}
+    </SimpleCardCapsule>)
+}
+
+const TreeArray = ({ title, items }) => {
+    const [collapsed, setCollapsed] = useState(true)
+    const toggle = () => setCollapsed(prev => !prev)
+    return (<SimpleCardCapsule title={<>
+            
+    {`${title}[${items?.length}]`}
+            <button className="btn btn-link btn-sm btn-outline-secondary border-0" onClick={toggle}>
+                <b> {collapsed ? "Open" : "Close"}</b>
+            </button>
+            </>
+        }>
+        <SimpleCardCapsuleRightCorner>
+            <button className="btn btn-sm btn-outline-secondary form-control border-0" onClick={toggle}>
+                {collapsed ? "Open" : "Close"}
+            </button>
+        </SimpleCardCapsuleRightCorner>
+        
+        {!collapsed && items?.map((item, index) => (
+            <TreeDict key={item?.id} title={`${title}[${index}] `} item={item} />
+        ))}
+    </SimpleCardCapsule>)
+}
+
+export const Tree = ({ item }) => {
+    return (
+        <TreeDict title={"Tree"} item={item} />
+        // <CardCapsule item={item} header={"Tree"}>
+        //     <TreeDict title={"Tree"} item={item} />
+        // </CardCapsule>
+    )
+}
+

package/src/Base/Vectors/index.js

@@ -0,0 +1 @@
+export * from "./VectorAttribute"

package/src/Base/index.js

@@ -0,0 +1,32 @@
+import { Attribute } from "./Components/Attribute";
+import { CardCapsule } from "./Components/CardCapsule";
+import { LargeCard } from "./Components/LargeCard";
+import { Link } from "./Components/Link";
+import { MediumCard } from "./Components/MediumCard";
+import { MediumContent } from "./Components/MediumContent";
+// import { Page } from "./Pages/Page";
+import { Page } from "./Pages/Page";
+import { MediumCardScalars } from "./Scalars/ScalarAttribute";
+import { MediumCardVectors } from "./Vectors/VectorAttribute";
+
+export const BaseUI = {
+    Link,
+    Attribute,
+    CardCapsule,
+    MediumCard,
+    MediumContent,
+    MediumEditableContent: MediumContent,
+    MediumCardScalars,
+    MediumCardVectors,
+    LargeCard,
+    Page
+}
+
+export * from "./Components"
+export * from "./FormControls"
+export * from "./Helpers"
+export * from "./Mutations"
+export * from "./Pages"
+export * from "./Queries"
+export * from "./Scalars"
+export * from "./Vectors"

package/src/GroupGQLModel/Components/CUDButton.jsx

@@ -0,0 +1,128 @@
+import { ButtonWithDialog, ErrorHandler, LoadingSpinner } from "@hrbolek/uoisfrontend-shared";
+
+import { useAsyncAction } from "@hrbolek/uoisfrontend-gql-shared";
+import { DeleteAsyncAction, InsertAsyncAction, UpdateAsyncAction } from "../Queries";
+import { MediumEditableContent } from "./MediumEditableContent";
+
+/**
+ * TemplateCUDButton Component
+ *
+ * A higher-order component that dynamically renders one of the following components
+ * based on the `operation` prop:
+ * - `InsertTemplateButton` for creating a new item (operation "C")
+ * - `UpdateTemplateButton` for updating an existing item (operation "U")
+ * - `DeleteTemplateButton` for deleting an existing item (operation "D")
+ *
+ * This component validates the `template` prop:
+ * - For "C" (create), `template` can be any object (no restrictions).
+ * - For "U" (update) and "D" (delete), `template` must include an `id` key.
+ *
+ * If the `operation` prop is invalid or required conditions for `template` are not met,
+ * an `ErrorHandler` component is rendered with an appropriate error message.
+ *
+ * @component
+ * @param {Object} props - The props for the TemplateCUDButton component.
+ * @param {string} props.operation - The operation type ("C" for create, "U" for update, "D" for delete).
+ * @param {React.ReactNode} props.children - The content or label for the button.
+ * @param {Object} props.template - The parameters for the operation. For "U" and "D", it must include an `id` key.
+ * @param {string} [props.template.id] - The unique identifier for the item (required for "U" and "D").
+ * @param {string} [props.template.name] - The name of the item (optional).
+ * @param {string} [props.template.name_en] - The English name of the item (optional).
+ * @param {Function} [props.onDone=(template) => {}] - Callback executed after the operation completes. Receives the `template` object.
+ * @param {...Object} props - Additional props passed to the underlying button components.
+ *
+ * @example
+ * // Example Usage
+ * const Example = () => {
+ *   const handleDone = (data) => console.log("Operation completed:", data);
+ *
+ *   return (
+ *     <>
+ *       <TemplateCUDButton
+ *         operation="C"
+ *         template={{ name: "New Item", name_en: "New Item EN" }}
+ *         onDone={handleDone}
+ *       >
+ *         Insert
+ *       </TemplateCUDButton>
+ *
+ *       <TemplateCUDButton
+ *         operation="U"
+ *         template={{ id: "123", name: "Updated Item", name_en: "Updated Item EN" }}
+ *         onDone={handleDone}
+ *       >
+ *         Update
+ *       </TemplateCUDButton>
+ *
+ *       <TemplateCUDButton
+ *         operation="D"
+ *         template={{ id: "123" }}
+ *         onDone={handleDone}
+ *       >
+ *         Delete
+ *       </TemplateCUDButton>
+ *     </>
+ *   );
+ * };
+ *
+ * @returns {JSX.Element} The dynamically selected button component for the specified operation.
+ */
+export const CUDButton = ({ operation, children, item, onDone = () => {}, onOptimistic = () => {}, ...props }) => {
+    const operationConfig = {
+        C: {
+            asyncAction: InsertAsyncAction,
+            dialogTitle: "Vložit novou template",
+            loadingMsg: "Vkládám novou template",
+            renderContent: () => <MediumEditableContent item={item} />,
+        },
+        U: {
+            asyncAction: UpdateAsyncAction,
+            dialogTitle: "Upravit template",
+            loadingMsg: "Ukládám template",
+            renderContent: () => <MediumEditableContent item={item} />,
+        },
+        D: {
+            asyncAction: DeleteAsyncAction,
+            dialogTitle: "Chcete odebrat template?",
+            loadingMsg: "Odstraňuji template",
+            renderContent: () => (
+                <h2>
+                    {item?.name} ({item?.name_en})
+                </h2>
+            ),
+        },
+    };
+
+    if (!operationConfig[operation]) {
+        return <ErrorHandler errors={`Invalid operation value: '${operation}'. Must be one of 'C', 'U', or 'D'.`} />;
+    }
+
+    const { asyncAction, dialogTitle, loadingMsg, renderContent } = operationConfig[operation];
+
+    const { error, loading, fetch, entity } = useAsyncAction(asyncAction, item, { deferred: true });
+    const handleClick = async (params = {}) => {
+        const fetchParams = { ...item, ...params };
+        onOptimistic(fetchParams);
+        const freshTemplate = await fetch(fetchParams);
+        onDone(freshTemplate); // Pass the result to the external callback
+    };
+
+    // Validate required fields for "U" and "D"
+    if ((operation === 'U' || operation === 'D') && !item?.id) {
+        return <ErrorHandler errors={`For '${operation}' operation, 'template' must include an 'id' key.`} />;
+    }
+
+    return (<>
+        {error && <ErrorHandler errors={error} />}
+        {loading && <LoadingSpinner text={loadingMsg} />}
+        <ButtonWithDialog
+            buttonLabel={children}
+            dialogTitle={dialogTitle}
+            {...props}
+            params={item}
+            onClick={handleClick}
+        >
+            {renderContent()}
+        </ButtonWithDialog>
+    </>);
+};

package/src/GroupGQLModel/Components/CardCapsule.jsx

@@ -0,0 +1,44 @@
+import { PersonFill } from "react-bootstrap-icons"
+import { Link } from "./Link"
+import { CardCapsule as CardCapsule_ } from "../../../../_template/src/Base/Components"
+
+/**
+ * A specialized card component that displays an `TemplateLink` as its title and encapsulates additional content.
+ *
+ * This component extends the `CardCapsule` component by using a combination of a `PersonFill` icon and 
+ * an `TemplateLink` component in the card's header. The `children` prop is used to render any content 
+ * inside the card body. It is designed for use with entities represented by the `template` object.
+ *
+ * @component
+ * @param {Object} props - The props for the TemplateCardCapsule 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 display name for the template entity.
+ * @param {React.ReactNode} [props.children=null] - The content to render inside the card's body.
+ *
+ * @returns {JSX.Element} The rendered card component with a dynamic title and body content.
+ *
+ * @example
+ * // Example usage:
+ * import { TemplateCardCapsule } from './TemplateCardCapsule';
+ * import { Button } from 'react-bootstrap';
+ *
+ * const templateEntity = { id: 123, name: "Example Entity" };
+ *
+ * <TemplateCardCapsule template={templateEntity}>
+ *   <Button variant="primary">Click Me</Button>
+ * </TemplateCardCapsule>
+ */
+export const CardCapsule = ({ item, children, title=null}) => {
+    
+    if (!title) {
+        title = <><PersonFill /> <Link item={item} /></>
+    }
+    return (
+        
+        <CardCapsule_ title={title}>
+            {children}
+        </CardCapsule_>
+    )
+}
+