@speron/projekt-front 0.0.3

package/src/UserGQLModel/Pages/PageReadItemEx.jsx

@@ -0,0 +1,62 @@
+import { MegaphoneFill, PencilFill, PlusLg } from "react-bootstrap-icons"
+import { SimpleCardCapsuleRightCorner } from "../../../../_template/src/Base/Components"
+import { ReadItemURI } from "../Components"
+import { UpdateLink } from "../Mutations/Update"
+import { ReadAsyncAction } from "../Queries"
+import { UserMembershipsTable } from "../Vectors/UserMemberships"
+import { PageReadItem } from "./PageReadItem"
+import { UserRolesTable } from "../Vectors/UserRoles"
+import { CreateUserInserMembershipButton } from "../Mutations/AddMembership"
+
+export const UserMembershipsURI = ReadItemURI.replace("view", "memberships")
+
+export const PageReadUserMemberships = ({ 
+    queryAsyncAction=ReadAsyncAction
+}) => (
+    <PageReadItem queryAsyncAction={queryAsyncAction} SubPage={UserMembershipsTableSubPage}/>
+)
+
+const UserMembershipsTableSubPage = ({ item }) => {
+    const isoNow = new Date().toISOString()
+    const isoNowZ = isoNow.slice(0, isoNow.length - 1)
+
+    // const item = {
+    //     userId: item?.id,
+    //     user: item,
+    //     startdate: isoNowZ
+    // }
+    console.log("item", item)
+    return (
+        <UserMembershipsTable item={item}>
+            {/* <SimpleCardCapsuleRightCorner>
+                ČLENSTVÍ
+                <CreateUserInserMembershipButton 
+                    item={{...item, __token: "CreateUserInserMembershipButton"}} 
+                    className="btn btn-sm btn-link"
+                    item={item}
+                >
+                    <PlusLg />
+                </CreateUserInserMembershipButton>
+                
+            </SimpleCardCapsuleRightCorner> */}
+        </UserMembershipsTable>
+    )
+}
+
+export const UserRolesURI = ReadItemURI.replace("view", "roles")
+
+export const PageReadUserRoles = ({ 
+    queryAsyncAction=ReadAsyncAction
+}) => (
+    <PageReadItem queryAsyncAction={queryAsyncAction} SubPage={UserRolesTableSubPage}/>
+)
+
+const UserRolesTableSubPage = ({ item }) => (
+    <UserRolesTable item={item}>
+        <SimpleCardCapsuleRightCorner>
+            <UpdateLink item={item} className="btn btn-sm btn-link">
+                <PencilFill />
+            </UpdateLink>
+        </SimpleCardCapsuleRightCorner>
+    </UserRolesTable>
+)

package/src/UserGQLModel/Pages/PageUpdateItem.jsx

@@ -0,0 +1,14 @@
+import { UpdateBody } from "../Mutations/Update"
+import { PageItemBase } from "./PageBase"
+
+export const PageUpdateItem = ({ 
+    SubPage=UpdateBody,
+    ...props
+}) => {
+    return (
+        <PageItemBase 
+            SubPage={SubPage}
+            {...props}
+        />
+    )
+}

package/src/UserGQLModel/Pages/PageVector.jsx

@@ -0,0 +1,78 @@
+
+import { ReadPageAsyncAction } from "../Queries"
+import { useInfiniteScroll } from "../../../../dynamic/src/Hooks/useInfiniteScroll"
+import { PageBase } from "./PageBase"
+import { Table } from "../Components/Table"
+import { Filter } from "../Components/Filter"
+import { FilterButton, ResetFilterButton } from "../../../../_template/src/Base/FormControls/Filter"
+import { useSearchParams } from "react-router"
+import { useEffect } from "react"
+import { useMemo } from "react"
+import { AsyncStateIndicator } from "../../../../_template/src/Base/Helpers/AsyncStateIndicator"
+import { Collapsible } from "../../../../_template/src/Base/FormControls/Collapsible"
+
+
+function safeParseWhere(sp, paramName = "where") {
+    const raw = sp.get(paramName);
+    if (!raw) return null;
+    try {
+        const obj = JSON.parse(raw);
+        return obj && typeof obj === "object" ? obj : null;
+    } catch {
+        return null;
+    }
+}
+
+export const PageVector = ({ children, queryAsyncAction = ReadPageAsyncAction }) => {
+    
+    const [sp] = useSearchParams();
+
+    const whereFromUrl = useMemo(() => safeParseWhere(sp, "usWhere"), [sp.toString()]);
+
+    const { items, loading, error, hasMore, sentinelRef, loadMore, restart } = useInfiniteScroll(
+        {
+            asyncAction: queryAsyncAction,
+            actionParams: { skip: 0, limit: 30, where: whereFromUrl },
+            // reset: whereFromUrl
+        }
+    )
+
+    useEffect(() => {
+        const params = {skip: 0, limit: 30, where: whereFromUrl} 
+        restart(params)
+    }, [whereFromUrl]);
+
+    
+    return (
+        <PageBase>
+            <Collapsible 
+                className="form-control btn btn-outline-primary"
+                buttonLabelCollapsed="Zobrazit filtr"
+                buttonLabelExpanded="Skrýt filtr"
+            >
+                <Filter>
+                    <FilterButton 
+                        className="form-control btn btn-outline-success"
+                        paramName="usWhere"
+                    >
+                        Filtrovat
+                    </FilterButton>
+                    <ResetFilterButton 
+                        className="form-control btn btn-warning"
+                        paramName="usWhere"
+                    >
+                        Vymazat filtr
+                    </ResetFilterButton>
+                </Filter>
+            </Collapsible>
+
+            <Table data={items} />
+
+            <AsyncStateIndicator error={error}  loading={loading} text="Nahrávám další..." />
+
+            {hasMore && <div ref={sentinelRef} style={{ height: 80, backgroundColor: "lightgray" }} />}
+            {hasMore && <button className="btn btn-success form-control" onClick={() => loadMore()}>Více</button>}
+        </PageBase>
+    )
+}
+

package/src/UserGQLModel/Pages/RouterSegment.jsx

@@ -0,0 +1,77 @@
+import { PageVector } from "./PageVector"
+import { PageUpdateItem } from "./PageUpdateItem"
+import { PageCreateItem } from "./PageCreateItem"
+import { PageReadItem } from "./PageReadItem"
+import { PageDeleteItem } from "./PageDeleteItem"
+
+import { CreateURI, DeleteItemURI, DeleteURI, ListURI, ReadItemURI, UpdateItemURI, UpdateURI, VectorItemsURI } from "../Components"
+import { PageReadUserMemberships, PageReadUserRoles, UserMembershipsURI, UserRolesURI } from "./PageReadItemEx"
+
+/**
+ * Definice segmentů rout pro Template stránky.
+ *
+ * Každý objekt v tomto poli popisuje jednu trasu (route) v aplikaci:
+ *  - `path`: Stringová URL s parametrem `:id`, která identifikuje konkrétní instanci template entity.
+ *  - `element`: React komponenta, která se má renderovat při shodě s cestou.
+ *
+ * Pokud komponenta stránky podporuje children jako render funkci,
+ * všechny children předané přes router budou dostávat objekt:
+ *   - `template` — načtená entita podle `:id`
+ *   - `onChange` — callback pro změnu hodnoty pole
+ *   - `onBlur` — callback pro blur event (například při opuštění pole)
+ *
+ * @constant
+ * @type {Array<{ path: string, element: JSX.Element }>}
+ *
+ * @example
+ * // Tato route reaguje na URL jako "/template/123"
+ * {
+ *   path: "/template/:id",
+ *   element: <TemplatePage />
+ * }
+ *
+ * // Editační route: "/template/edit/123"
+ * {
+ *   path: "/template/edit/:id",
+ *   element: <TemplateEditPage />
+ * }
+ */
+export const UserRouterSegments = [
+    {
+        path: CreateURI,
+        element: (<PageCreateItem />),
+    },
+    {
+        path: VectorItemsURI,
+        element: (<PageVector />),
+    },
+    {
+        path: ReadItemURI,
+        element: (<PageReadUserMemberships />),
+    },
+    {
+        path: UpdateItemURI,
+        element: (<PageUpdateItem />),
+    },   
+    {
+        path: DeleteItemURI,
+        element: (<PageDeleteItem />),
+    },   
+    {
+        path: UserMembershipsURI,
+        element: (<PageReadUserMemberships />),
+    },   
+    {
+        path: UserRolesURI,
+        element: (<PageReadUserRoles />)
+    },   
+    {
+        path: VectorItemsURI.replace("list", ":any"),
+        element: (<PageVector />),
+    },
+    {
+        path: ReadItemURI.replace("view", ":any"),
+        element: (<PageReadItem />),
+    }
+    
+]

package/src/UserGQLModel/Pages/index.js

@@ -0,0 +1,9 @@
+export * from './PageBase'
+export * from './PageVector'
+
+export * from './PageCreateItem'
+export * from './PageUpdateItem'
+
+export * from './PageNavbar'
+export * from './RouterSegment'
+

package/src/UserGQLModel/Queries/DeleteAsyncAction.jsx

@@ -0,0 +1,22 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+
+const DeleteMutationStr = `
+mutation DeleteMutation($id: UUID!, $lastchange: DateTime!) {
+  result: Delete(
+    item : {id: $id, lastchange: $lastchange}
+  ) {
+    ... on GQLModelDeleteError {
+      failed
+      msg
+      input
+      Entity {
+        ...Large
+      }
+    }
+  }
+}
+`
+const DeleteMutation = createQueryStrLazy(`${DeleteMutationStr}`, LargeFragment)
+export const DeleteAsyncAction = createAsyncGraphQLAction2(DeleteMutation)

package/src/UserGQLModel/Queries/Fragments.jsx

@@ -0,0 +1,120 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared"
+
+const LinkFragmentStr = `
+fragment Link on UserGQLModel {
+  __typename
+  id
+  lastchange
+  name
+  surname
+  fullname
+  email
+}
+`
+
+const MediumFragmentStr = `
+fragment Medium on UserGQLModel {
+  ...Link
+  rbacobject {
+    ...RBRoles
+  }
+}
+`
+
+const LargeFragmentStr = `
+fragment Large on UserGQLModel {
+  ...Medium
+  rolesOn {
+    ...Role
+  }
+  memberships {
+    __typename
+    id
+    groupId
+    group {
+      __typename
+      id
+      name
+      grouptype {
+        __typename
+        id
+        name
+      }
+        rbacobject {
+        ...RBRoles
+    }
+    }
+    valid
+    startdate
+    enddate
+    rbacobject {
+        ...RBRoles
+    }
+  }
+  roles {
+    ...Role
+  }
+}
+`
+
+const RoleFragmentStr = `
+fragment Role on RoleGQLModel {
+    __typename
+    id
+    lastchange
+    created
+    createdbyId
+    changedbyId
+    rbacobjectId
+    createdby { id __typename fullname}
+    changedby { id __typename fullname}
+    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, RoleFragment)
+  

package/src/UserGQLModel/Queries/InsertAsyncAction.jsx

@@ -0,0 +1,22 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+
+
+const InsertMutationStr = `
+mutation InsertMutation($id: UUID, $name: String, $name_en: String) {
+  result: Insert(
+    template: {id: $id, name: $name, nameEn: $name_en}
+  ) {
+    ... on InsertError {
+      failed
+      msg
+      input
+    }
+    ...Large
+  }
+}
+`
+
+const InsertMutation = createQueryStrLazy(`${InsertMutationStr}`, LargeFragment)
+export const InsertAsyncAction = createAsyncGraphQLAction2(InsertMutation)

package/src/UserGQLModel/Queries/ReadAsyncAction.jsx

@@ -0,0 +1,45 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+import { reduceToFirstEntity } from "../../../../dynamic/src/Store";
+
+const ReadQueryStr = `
+query ReadQuery($id: UUID!) {
+  result: userById(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/UserGQLModel/Queries/ReadPageAsyncAction.jsx

@@ -0,0 +1,17 @@
+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: UserInputWhereFilter) {
+  result: userPage(skip: $skip, limit: $limit, where: $where) {
+    ...Medium
+  }
+}
+`
+const ReadPageQuery = createQueryStrLazy(`${ReadPageQueryStr}`, 
+    // LargeFragment,
+    MediumFragment,
+)
+export const ReadPageAsyncAction = createAsyncGraphQLAction2(ReadPageQuery)

package/src/UserGQLModel/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 { reduceToFirstEntity } from "../../../../dynamic/src/Store";
+
+const SearchReadPageQueryStr = `
+query ReadPageQuery($skip: Int, $limit: Int, $pattern: String) {
+  result: userPage(skip: $skip, limit: $limit, where: { fullname: {_ilike: $pattern}}) {
+    ...Large
+  }
+}
+`
+const SearchPageQuery = createQueryStrLazy(`${SearchReadPageQueryStr}`, LargeFragment)
+export const SearchAsyncAction = createAsyncGraphQLAction2(
+    SearchPageQuery, reduceToFirstEntity)

package/src/UserGQLModel/Queries/UpdateAsyncAction.jsx

@@ -0,0 +1,76 @@
+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 userUpdate($id: UUID!, $lastchange: DateTime!, $name: String, $surname: String, $email: String, $valid: Boolean) {
+  userUpdate(
+    user: {id: $id, lastchange: $lastchange, name: $name, surname: $surname, email: $email, valid: $valid}
+  ) {
+    ... on UserGQLModel {
+      ...User
+    }
+    ... on UserGQLModelUpdateError {
+      ...Error
+    }
+  }
+}
+
+# fragment Role on RoleGQLModel {
+#   __typename
+#   id
+#   lastchange
+#   created
+#   createdbyId
+#   changedbyId
+#   rbacobjectId
+#   createdby {
+#     id
+#   }
+#   changedby {
+#     id
+#   }
+#   rbacobject {
+#     id
+#   }
+#   valid
+#   deputy
+#   startdate
+#   enddate
+#   roletypeId
+#   userId
+#   groupId
+#   roletype {
+#     id
+#   }
+#   user {
+#     id
+#   }
+#   group {
+#     id
+#   }
+# }
+
+fragment User on UserGQLModel {
+  __typename
+  id
+  ...Large
+}
+
+fragment Error on UserGQLModelUpdateError {
+  __typename
+  Entity {
+    ...User
+  }
+  msg
+  failed
+  code
+  location
+  input
+}
+`
+
+const UpdateMutation = createQueryStrLazy(`${UpdateMutationStr}`, LargeFragment)
+export const UpdateAsyncAction = createAsyncGraphQLAction2(UpdateMutation, 
+    updateItemsFromGraphQLResult, reduceToFirstEntity)

package/src/UserGQLModel/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/UserGQLModel/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>
+    )
+}