@hrbolek/uoisfrontend-template 0.6.0

package/src/GroupGQLModel/Queries/InsertAsyncAction.jsx

@@ -0,0 +1,43 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+
+
+const InsertMutationStr = `
+mutation groupInsert(
+	$mastergroupId: UUID! # null, 
+	$name: String! # null, 
+	$grouptypeId: UUID! # null, 
+	$id: UUID # null, 
+	$nameEn: String # null, 
+	$abbreviation: String # null, 
+	$email: String # null, 
+	$subgroups: [GroupInsertSubGroupGQLModel!] # null, 
+	$memberships: [MembershipInsertGQLModel!] # null, 
+	$roles: [RoleInsertGQLModel!] # null
+) {
+  groupInsert(
+	group: {
+	mastergroupId: $mastergroupId, 
+	name: $name, 
+	grouptypeId: $grouptypeId, 
+	id: $id, 
+	nameEn: $nameEn, 
+	abbreviation: $abbreviation, 
+	email: $email, 
+	subgroups: $subgroups, 
+	memberships: $memberships, 
+	roles: $roles}
+  ) {
+    ... on InsertError {
+      failed
+      msg
+      input
+    }
+    ...Large
+  }
+}
+`
+
+const InsertMutation = createQueryStrLazy(`${InsertMutationStr}`, LargeFragment)
+export const InsertAsyncAction = createAsyncGraphQLAction2(InsertMutation)

package/src/GroupGQLModel/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 ReadQuery($id: UUID!) {
+  result: groupById(id: $id) {
+    ...Large
+  }
+}
+`
+
+export 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/GroupGQLModel/Queries/ReadPageAsyncAction.jsx

@@ -0,0 +1,18 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment, MediumFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+import { Medium } from "react-bootstrap-icons";
+
+const ReadPageQueryStr = `
+query ReadPageQuery($skip: Int, $limit: Int, $where: GroupInputWhereFilter) {
+  result: groupPage(skip: $skip, limit: $limit, where: $where) {
+    ...Medium
+  }
+}
+`
+const ReadPageQuery = createQueryStrLazy(`${ReadPageQueryStr}`, 
+    // LargeFragment,
+    MediumFragment
+
+)
+export const ReadPageAsyncAction = createAsyncGraphQLAction2(ReadPageQuery)

package/src/GroupGQLModel/Queries/SearchAsyncAction.jsx

@@ -0,0 +1,15 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+import { addItemsFromGraphQLResult, reduceToFirstEntity } from "../../../../dynamic/src/Store";
+
+const SearchReadPageQueryStr = `
+query ReadPageQuery($skip: Int, $limit: Int, $pattern: String) {
+  result: groupPage(skip: $skip, limit: $limit, where: { name: {_ilike: $pattern}}) {
+    ...Large
+  }
+}
+`
+const SearchPageQuery = createQueryStrLazy(`${SearchReadPageQueryStr}`, LargeFragment)
+export const SearchAsyncAction = createAsyncGraphQLAction2(
+    SearchPageQuery, reduceToFirstEntity)

package/src/GroupGQLModel/Queries/UpdateAsyncAction.jsx

@@ -0,0 +1,56 @@
+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 groupUpdate(
+	$id: UUID! # null, 
+	$lastchange: DateTime! # null, 
+	$name: String # null, 
+	$nameEn: String # null, 
+	$grouptypeId: UUID # null, 
+	$mastergroupId: UUID # null, 
+	$valid: Boolean # null, 
+	$abbreviation: String # null, 
+	$email: String # null
+) {
+  groupUpdate(
+	group: {
+	id: $id, 
+	lastchange: $lastchange, 
+	name: $name, 
+	nameEn: $nameEn, 
+	grouptypeId: $grouptypeId, 
+	mastergroupId: $mastergroupId, 
+	valid: $valid, 
+	abbreviation: $abbreviation, 
+	email: $email}
+  ) {
+    ... on GroupGQLModel {
+      ...Large
+    }
+    ... on GroupGQLModelUpdateError {
+      ...Error
+    }
+  }
+}
+
+
+fragment Error on GroupGQLModelUpdateError {
+  __typename
+  Entity {
+    ...Large
+  }
+  msg
+  failed
+  code
+  location
+  input
+}
+`
+
+
+const UpdateMutation = createQueryStrLazy(`${UpdateMutationStr}`, LargeFragment)
+export const UpdateAsyncAction = createAsyncGraphQLAction2(UpdateMutation, 
+    updateItemsFromGraphQLResult, reduceToFirstEntity)

package/src/GroupGQLModel/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/GroupGQLModel/Scalars/GroupRoles.jsx

@@ -0,0 +1,69 @@
+import { BaseUI } from "../../Base"
+import { Attribute } from "../../../../_template/src/Base/Components/Attribute"
+import { CardCapsule } from "../Components"
+
+export const GroupRoles = ({ item, children }) => {
+    const { rolesOn } = item || []
+
+    return (
+        <CardCapsule item={item} title="Vedoucí">
+            {children}
+            <Roles roles={rolesOn} />
+            {/* <AllRoles roles={rolesOn} /> */}
+        </CardCapsule>
+    )
+}
+
+export const AllRoles = ({ roles }) => {
+    return (
+        <>
+            {roles.map(role => (
+                <Attribute key={role.id} label={role?.roletype?.name || "Role"}>
+                    <BaseUI.Link item={role?.user} />
+                </Attribute>
+            ))}
+        </>
+    )
+}
+
+export const Roles = ({ roles }) => {
+    const rectors = roles?.filter(r => r?.roletype?.name === "rektor") || []
+    const vicerectors = roles?.filter(r => r?.roletype?.name === "prorektor") || []
+    const deans = roles?.filter(r => r?.roletype?.name === "děkan") || []
+    const viceDeans = roles?.filter(r => r?.roletype?.name === "proděkan") || []
+    const headOfDepartments = roles?.filter(r => r?.roletype?.name === "vedoucí katedry") || []
+    return (
+        <>
+            {headOfDepartments.map(headOfDepartment => (
+                <Attribute key={headOfDepartment.id} label="Vedoucí katedry">
+                    <BaseUI.Link item={headOfDepartment?.user} />
+                </Attribute>
+            ))}
+            {headOfDepartments.length > 0 && <hr />}    
+            {deans.map(dean => (
+                <Attribute key={dean.id} label="Děkan">
+                    <BaseUI.Link item={dean?.user} />
+                </Attribute>
+            ))}
+            {viceDeans.map(viceDean => (
+                <Attribute key={viceDean.id} label="Proděkan">
+                    <BaseUI.Link item={viceDean?.user} />
+                </Attribute>
+            ))}
+            {(deans.length > 0 || viceDeans.length > 0) && <hr />}
+
+            {rectors.map(rector => (
+                <Attribute key={rector.id} label="Rektor">
+                    <BaseUI.Link item={rector?.user} />
+                </Attribute>
+            ))}
+            {vicerectors.map(vicerector => (
+                <Attribute key={vicerector.id} label="Prorektor">
+                    <BaseUI.Link item={vicerector?.user} />
+                </Attribute>
+            ))}
+            {/* {JSON.stringify(roles.map(r => r?.roletype?.name))} */}
+        </>
+    )
+}
+

package/src/GroupGQLModel/Scalars/MasterGroup.jsx

@@ -0,0 +1,15 @@
+import { BaseUI } from "../../Base"
+import { Attribute } from "../../../../_template/src/Base/Components/Attribute"
+import { Link } from "../../../../_template/src/Base/Components/Link"
+
+export const MasterGroup = ({ item }) => {
+    const { mastergroup } = item || {}
+    // const { currentUserRoles=[] } = rbacobject || {}
+    return (
+        <BaseUI.CardCapsule item={{}} title="Moje role vůči této entitě">
+            <Attribute label={"Nadřízený"}>
+                <Link item={mastergroup} />
+            </Attribute>
+        </BaseUI.CardCapsule>
+    )
+}

package/src/GroupGQLModel/Scalars/RBACObject.jsx

@@ -0,0 +1,233 @@
+import { ShieldLock } from "react-bootstrap-icons"
+
+import { BaseUI } from "../../Base"
+import { Attribute } from "../../../../_template/src/Base/Components/Attribute"
+import { Link } from "../../../../_template/src/Base/Components/Link"
+import { useMemo } from "react"
+import { SimpleCardCapsuleRightCorner } from "../../Base/Components"
+import { Dialog } from "../../Base/FormControls/Dialog"
+import { useState } from "react"
+
+import { 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"
+
+export const RBACObject = ({ item }) => {
+    const { rbacobject } = item || {}
+    const { currentUserRoles=[] } = rbacobject || {}
+    const filtered = useMemo(() => currentUserRoles.filter(cr => cr?.valid), [currentUserRoles])
+    return (
+        <BaseUI.CardCapsule item={{}} title="Moje role vůči této entitě">
+            <SimpleCardCapsuleRightCorner>
+                <Edit item={item}/>
+            </SimpleCardCapsuleRightCorner>
+            {filtered.map(role => (
+                <Attribute key={role?.id}>
+                    <Link item={role?.roletype} />@
+                    <Link item={role?.group} />
+                </Attribute>
+            ))}
+            
+            {/* <hr/>
+            <pre>
+            {JSON.stringify(currentUserRoles, null, 2)}
+            </pre> */}
+        </BaseUI.CardCapsule>
+    )
+}
+
+const Edit = ({ item }) => {
+    const [visible, setVisible] = useState(false)
+    const handleShow = () => setVisible(true)
+    const BTN = (
+        <button 
+            className="btn btn-sm btn-outline-primary border-0"
+            onClick={handleShow}
+        ><ShieldLock /></button>
+    )
+    if (!visible) return BTN
+    const handleHide = () => setVisible(false)
+    return (<>
+        {BTN}
+        <Dialog
+            title="Oprávnění"
+            onCancel={handleHide}
+            onOk={handleHide}
+        >
+            {/* {JSON.stringify(item)} */}
+            <RBACEdit item={item?.rbacobject}/>
+        </Dialog>
+    </>)
+}
+
+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/GroupGQLModel/Scalars/ScalarAttribute.jsx

@@ -0,0 +1,54 @@
+import { useSelector } from "react-redux";
+
+// import { selectItemById } from "../Store/ItemSlice"; // uprav cestu
+
+import { CardCapsule } from "../Components/CardCapsule"
+import { MediumCard } from "../Components/MediumCard"
+import { Col } from "../../../../_template/src/Base/Components/Col"
+import { Row } from "../../../../_template/src/Base/Components/Row"
+import { selectItemById } from "../../../../dynamic/src/Store";
+import { useMemo } from "react";
+
+export const ScalarAttributeCapsule = ({ attribute_name, item, children }) => {
+    return (
+        <Row>
+            <Col className="col-2"><b>{attribute_name}</b></Col>
+            <Col className="col-10">
+                {children}
+            </Col>
+        </Row>
+    )
+}
+
+export const ScalarAttributeBase = ({ attribute_name, item }) => {
+    return (
+        <ScalarAttributeCapsule attribute_name={attribute_name} item={item}>
+            <MediumCard item={item} />
+        </ScalarAttributeCapsule>
+    )
+}
+
+export const ScalarAttributeBind = ({ attribute_name, item }) => {
+    const id = item?.[attribute_name]?.id
+    const storedItem = useSelector((rootState) => {
+        const result = id != null ? selectItemById(rootState, id) : null
+        return result
+    })
+    return (
+        <ScalarAttributeBase attribute_name={attribute_name} item={storedItem} />
+    )
+}
+
+export const MediumCardScalars = ({ item }) => {
+    const sureitem = item || {}
+    const noArrays = useMemo(() => Object.fromEntries(
+        Object.entries(sureitem).filter(([_, v]) => v && typeof v === "object" && !Array.isArray(v) && v.id != null)
+    ), [item]);
+    return (
+        <CardCapsule item={sureitem}>
+            {Object.keys(noArrays).map(
+                (attribute_name) => <ScalarAttributeBind key={attribute_name} item={item} attribute_name={attribute_name} />
+            )}
+        </CardCapsule>
+    )
+}

package/src/GroupGQLModel/Scalars/TemplateScalarAttribute.jsx

@@ -0,0 +1,88 @@
+import { createAsyncGraphQLAction, useAsyncAction } from "@hrbolek/uoisfrontend-gql-shared"
+import { ErrorHandler, LoadingSpinner } from "@hrbolek/uoisfrontend-shared"
+
+/**
+ * A component for displaying the `scalar` attribute of an template entity.
+ *
+ * This component checks if the `scalar` attribute exists on the `template` object. If `scalar` is undefined,
+ * the component returns `null` and renders nothing. Otherwise, it displays a placeholder message
+ * and a JSON representation of the `scalar` attribute.
+ *
+ * @component
+ * @param {Object} props - The props for the TemplateScalarAttribute component.
+ * @param {Object} props.template - The object representing the template entity.
+ * @param {*} [props.template.scalar] - The scalar attribute of the template entity to be displayed, if defined.
+ *
+ * @returns {JSX.Element|null} A JSX element displaying the `scalar` attribute or `null` if the attribute is undefined.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { scalar: { id: 1, name: "Sample Scalar" } };
+ *
+ * <TemplateScalarAttribute template={templateEntity} />
+ */
+export const TemplateScalarAttribute = ({template}) => {
+    const {scalar} = template
+    if (typeof scalar === 'undefined') return null
+    return (
+        <>
+            {/* <ScalarMediumCard scalar={scalar} /> */}
+            {/* <ScalarLink scalar={scalar} /> */}
+            Probably {'<ScalarMediumCard scalar={scalar} />'} <br />
+            <pre>{JSON.stringify(scalar, null, 4)}</pre>
+        </>
+    )
+}
+
+const TemplateScalarAttributeQuery = `
+query TemplateQueryRead($id: UUID!) {
+    result: templateById(id: $id) {
+        __typename
+        id
+        scalar {
+            __typename
+            id
+        }
+    }
+}
+`
+
+const TemplateScalarAttributeAsyncAction = createAsyncGraphQLAction(
+    TemplateScalarAttributeQuery
+)
+
+/**
+ * A lazy-loading component for displaying filtered `scalar` from a `template` entity.
+ *
+ * This component uses the `TemplateScalarAttributeAsyncAction` to asynchronously fetch
+ * the `template.scalar` data. It shows a loading spinner while fetching, handles errors,
+ * and filters the resulting list using a custom `filter` function (defaults to `Boolean` to remove falsy values).
+ *
+ * Each vector item is rendered as a `<div>` with its `id` as both the `key` and the `id` attribute,
+ * and displays a formatted JSON preview using `<pre>`.
+ *
+ * @component
+ * @param {Object} props - The properties object.
+ * @param {Object} props.template - The template entity or identifying query variables used to fetch it.
+ * @param {Function} [props.filter=Boolean] - A filtering function applied to the `scalar` array before rendering.
+ *
+ * @returns {JSX.Element} A rendered list of filtered scalar or a loading/error placeholder.
+ *
+ * @example
+ * <TemplateScalarAttributeLazy template={{ id: "abc123" }} />
+ *
+ * 
+ * @example
+ * <TemplateScalarAttributeLazy
+ *   template={{ id: "abc123" }}
+ *   filter={(v) => v.status === "active"}
+ * />
+ */
+export const TemplateScalarAttributeLazy = ({template}) => {
+    const {loading, error, entity, fetch} = useAsyncAction(TemplateScalarAttributeAsyncAction, template)
+
+    if (loading) return <LoadingSpinner />
+    if (error) return <ErrorHandler errors={error} />
+
+    return <TemplateScalarAttribute template={entity} />    
+}

package/src/GroupGQLModel/Scalars/index.js

@@ -0,0 +1 @@
+ export * from './TemplateScalarAttribute'