@hrbolek/uoisfrontend-template 0.6.0

package/src/StateGQLModel/Pages/PageDeleteItem.jsx

@@ -0,0 +1,16 @@
+import { PageItemBase } from "./PageBase";
+import { DeleteBody } from "../Mutations/Delete";
+
+export const PageDeleteItem = ({ 
+    SubPage=DeleteBody,
+    ...props
+}) => {
+    return (
+        <PageItemBase
+            SubPage={SubPage}
+            {...props}
+        />
+         
+    )
+}
+

package/src/StateGQLModel/Pages/PageNavbar.jsx

@@ -0,0 +1,160 @@
+import Nav from 'react-bootstrap/Nav'
+import { Link, LinkURI } from '../Components'
+import { ProxyLink } from '../../../../_template/src/Base/Components/ProxyLink';
+import { NavDropdown } from 'react-bootstrap';
+import { UpdateLink } from '../Mutations/Update';
+import { CreateButton } from '../Mutations/Create';
+
+/**
+ * Allow to use HashContainer for determination which component at page will be rendered.
+ * That must be manually inserted at TemplatePageContent, usually this should be done 
+ * as children of TemplateLargeCard.
+ * <TemplateLargeCard>
+ *     <HashContainer>
+ *         <VectorA id="history"/>
+ *         <VectorB id="roles"/>
+ *         <VectorC id="graph"/>
+ *     </HashContainer>
+ * </TemplateLargeCard>
+ * it is usefull to define globally active "areas" like science, administration, teaching, ...
+ */
+// const TemplatePageSegments = [
+//     { segment: 'education', label: 'Výuka' },
+//     { segment: 'reaserach', label: 'Tvůrčí činnost' },
+//     { segment: 'administration', label: 'Organizační činnost' },
+//     { segment: 'development', label: 'Rozvoj' },
+// ]
+
+/**
+ * A navigation button component that generates a URL based on the template's ID and a specific segment.
+ * The button uses a `ProxyLink` to navigate while preserving hash and query parameters.
+ *
+ * ### Features:
+ * - Dynamically constructs the URL with a hash fragment pointing to the specified segment.
+ * - Displays a label for the navigation link.
+ * - Integrates seamlessly with `ProxyLink` for enhanced navigation.
+ *
+ * @component
+ * @param {Object} props - The properties for the TitleNavButton component.
+ * @param {Object} props.template - The template object containing details about the template.
+ * @param {string|number} props.template.id - The unique identifier for the template.
+ * @param {string} props.segment - The segment to append as a hash fragment in the URL.
+ * @param {string} props.label - The text to display as the label for the navigation button.
+ *
+ * @returns {JSX.Element} A styled navigation button linking to the constructed URL.
+ *
+ * @example
+ * // Example 1: Basic usage with a template and segment
+ * const template = { id: 123 };
+ * const segment = "details";
+ * const label = "View Details";
+ *
+ * <TitleNavButton template={template} segment={segment} label={label} />
+ * // Resulting URL: `/ug/template/view/123#details`
+ *
+ * @example
+ * // Example 2: Different segment and label
+ * <TitleNavButton template={{ id: 456 }} segment="settings" label="Template Settings" />
+ * // Resulting URL: `/ug/template/view/456#settings`
+ */
+// const TitleNavButton = ({ item, segment, label, ...props }) => {
+//     // const urlbase = (segment) => `/templates/template/${segment}/${template?.id}`;
+//     const urlbase = (segment) => `${LinkURI}${item?.id}#${segment}`;
+//     return (
+//         <Nav.Link as={"span"} {...props}>
+//             {/* <ProxyLink to={urlbase(segment)}>{label}</ProxyLink> */}
+//         </Nav.Link>
+//     );
+// };
+
+/**
+ * Renders the navigation bar for an Template page.
+ *
+ * This component uses a custom hook, `useHash()`, to determine the current hash
+ * and highlights the active segment. It displays a navigation bar (using MyNavbar)
+ * with several segments (e.g. "history", "roles", "graph"), each rendered as a 
+ * TitleNavButton. The segments are hardcoded in this component and only rendered 
+ * if an `template` object is provided.
+ *
+ * @component
+ * @param {Object} props - The component properties.
+ * @param {Object} props.template - The template entity object that provides context for the page.
+ * @param {string|number} props.template.id - The unique identifier for the template.
+ * @param {Function} props.onSearchChange - Callback function to handle changes in the search input.
+ *
+ * @returns {JSX.Element} The rendered TemplatePageNavbar component.
+ *
+ * @example
+ * // Example usage:
+ * const template = { id: 123, ... };
+ * <TemplatePageNavbar template={template} onSearchChange={handleSearchChange} />
+ */
+// export const PageNavbar = ({ item, children, onSearchChange }) => {
+//     // const [currentHash, setHash] = useHash(); // Use the custom hook to manage hash
+//     const currentHash = "da"
+//     return (
+//         <div className='screen-only'>
+//             <MyNavbar onSearchChange={onSearchChange} >
+//                 {item && TemplatePageSegments.map(({ segment, label }) => (
+//                     <Nav.Item key={segment} >
+//                         <TitleNavButton
+//                             template={item}
+//                             segment={segment}
+//                             label={label}
+//                             className={segment === currentHash ? "active" : ""} aria-current={segment === currentHash ? "page" : undefined}
+//                         />
+//                     </Nav.Item>
+//                 ))}
+//                 {children}
+//             </MyNavbar>
+//         </div>
+//     );
+// };
+
+
+export const MyNavDropdown = ({ item }) => {
+    const { __typename } = item || {}
+    const hasProperType = __typename === "TemplateGQLModel"
+    return (
+        <NavDropdown title="Skupiny">
+            <NavDropdown.Item as={ProxyLink} to={VectorItemsURI}>
+                Seznam všech 
+            </NavDropdown.Item>
+            
+            <NavDropdown.Item as={Link} item={item} action="roles" disabled={!hasProperType}>
+                Role<br/><Link item={item} />
+            </NavDropdown.Item>
+            <NavDropdown.Item as={Link} item={item} action="subgroups" disabled={!hasProperType}>
+                Podskupiny<br/><Link item={item} />
+            </NavDropdown.Item>
+            <NavDropdown.Item as={Link} item={item} action="memberships" disabled={!hasProperType}>
+                Členové<br/><Link item={item} />
+            </NavDropdown.Item>
+        
+        
+            <NavDropdown.Divider />
+            
+            <NavDropdown.Item 
+                as={UpdateLink} 
+                item={item}
+                disabled={!hasProperType} 
+            >
+                Upravit<br/><Link item={item} />
+            </NavDropdown.Item>
+            <NavDropdown.Item 
+                as={CreateButton} 
+                item={item} 
+                disabled={!hasProperType} 
+                item={{
+                    group: item,
+                    groupId: item?.groupId
+                }}
+            >
+                Nové<br/><Link item={item} />
+            </NavDropdown.Item>
+            
+            <NavDropdown.Divider />
+            <NavDropdown.Item as={ProxyLink} to={`/generic/${item?.__typename}/__def/${item?.id}`} reloadDocument={false}>Definice</NavDropdown.Item >
+        </NavDropdown>
+    )
+}

package/src/StateGQLModel/Pages/PageReadItem.jsx

@@ -0,0 +1,11 @@
+import { GeneratedContentBase } from "../../../../_template/src/Base/Pages/Page"
+import { PageItemBase } from "./PageBase"
+
+export const PageReadItem = ({ 
+    SubPage=GeneratedContentBase,
+    ...props
+}) => {
+    return (
+        <PageItemBase SubPage={SubPage} {...props}/>
+    )
+}

package/src/StateGQLModel/Pages/PageReadItemEx.jsx

@@ -0,0 +1,42 @@
+import { GeneratedContentBase } from "../../../../_template/src/Base/Pages/Page"
+import { ReadItemURI } from "../Components"
+import { ReadAsyncAction } from "../Queries"
+import { PageReadItem } from "./PageReadItem"
+
+export const RolesOnURI = ReadItemURI.replace("view", "roleson")
+
+
+/**
+ * Základní obálka pro „read“ stránku entity podle `:id` z routy.
+ *
+ * Využívá `PageItemBase`, který zajistí:
+ * - získání `id` z URL (`useParams`)
+ * - načtení entity přes `AsyncActionProvider` pomocí `queryAsyncAction`
+ * - vložení navigace (`PageNavbar`)
+ *
+ * Uvnitř provideru vykreslí `ReadWithComponent`, který si vezme načtený `item`
+ * z `useGQLEntityContext()` a zobrazí ho v zadané komponentě (defaultně `LargeCard`).
+ *
+ * @component
+ * @param {object} props
+ * @param {Function} [props.queryAsyncAction=ReadAsyncAction]
+ *   Async action (např. thunk) pro načtení entity z backendu/GraphQL dle `id`.
+ * @param {Object<string, any>} [props]
+ *   Další props předané do `ReadWithComponent` (např. `Component`, layout props).
+ *
+ * @returns {import("react").JSX.Element}
+ */
+export const PageReadItemRolesOn = ({ 
+    queryAsyncAction=ReadAsyncAction, 
+    children, 
+    ...props 
+}) => {
+    return (
+        <PageReadItem 
+            queryAsyncAction={queryAsyncAction}
+            SubPage={GeneratedContentBase} 
+            {...props}
+        />
+    )
+}
+

package/src/StateGQLModel/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/StateGQLModel/Pages/PageVector.jsx

@@ -0,0 +1,80 @@
+
+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;
+    }
+}
+
+// 
+const filterParameterName = "gr_where"
+export const PageVector = ({ children, queryAsyncAction = ReadPageAsyncAction }) => {
+    
+    const [sp] = useSearchParams();
+
+    const whereFromUrl = useMemo(() => safeParseWhere(sp, filterParameterName), [sp.toString()]);
+
+    const { items, loading, error, hasMore, sentinelRef, loadMore, restart } = useInfiniteScroll(
+        {
+            asyncAction: queryAsyncAction,
+            actionParams: { skip: 0, limit: 25, where: whereFromUrl },
+            // reset: whereFromUrl
+        }
+    )
+
+    useEffect(() => {
+        const params = {skip: 0, limit: 25, 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={filterParameterName}
+                    >
+                        Filtrovat
+                    </FilterButton>
+                    <ResetFilterButton 
+                        className="form-control btn btn-warning"
+                        paramName={filterParameterName}
+                    >
+                        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/StateGQLModel/Pages/RouterSegment.jsx

@@ -0,0 +1,72 @@
+import { PageVector } from "./PageVector"
+import { PageUpdateItem } from "./PageUpdateItem"
+import { PageCreateItem } from "./PageCreateItem"
+import { PageReadItem } from "./PageReadItem"
+import { PageDeleteItem } from "./PageDeleteItem"
+
+import { DeleteItemURI, UpdateItemURI } from "../Components"
+import { CreateURI, ReadItemURI, VectorItemsURI } from "../Components"
+
+/**
+ * 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 TemplateRouterSegments = [
+    {
+        path: CreateURI,
+        element: (<PageCreateItem />),
+    },
+    {
+        path: VectorItemsURI,
+        element: (<PageVector />),
+    },
+    {
+        path: ReadItemURI,
+        element: (<PageReadItem />),
+    },
+    {
+        path: UpdateItemURI,
+        element: (<PageUpdateItem />),
+    },   
+    {
+        path: DeleteItemURI,
+        element: (<PageDeleteItem />),
+    },   
+    // {
+    //     path: "sad",
+    //     element: (<PageReadItemRolesOn />)
+    // },
+    {
+        path: VectorItemsURI.replace("list", ":any"),
+        element: (<PageVector />),
+    },
+    {
+        path: ReadItemURI.replace("view", ":any"),
+        element: (<PageReadItem />),
+    }    
+]

package/src/StateGQLModel/Pages/index.js

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

package/src/StateGQLModel/Queries/DeleteAsyncAction.jsx

@@ -0,0 +1,32 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+
+const DeleteMutationStr = `
+mutation stateDelete(
+	$lastchange: DateTime! # null, 
+	$id: UUID! # null
+) {
+  stateDelete(
+	state: {
+	lastchange: $lastchange, 
+	id: $id}
+  ) {
+  ...StateGQLModelDeleteError
+}
+}
+
+fragment StateGQLModelDeleteError on StateGQLModelDeleteError {
+  __typename
+  Entity {
+    ...Large
+  }
+  msg
+  code
+  failed
+  location
+  input
+}
+`
+const DeleteMutation = createQueryStrLazy(`${DeleteMutationStr}`, LargeFragment)
+export const DeleteAsyncAction = createAsyncGraphQLAction2(DeleteMutation)

package/src/StateGQLModel/Queries/Fragments.jsx

@@ -0,0 +1,109 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared"
+
+const LinkFragmentStr = `
+fragment Link on StateGQLModel  {
+    __typename
+    id
+    lastchange
+    created
+    createdbyId
+    changedbyId
+    rbacobjectId
+    createdby { __typename id fullname }
+    changedby { __typename id fullname }
+
+    name
+    nameEn
+    statemachineId
+    writerslistId
+    readerslistId
+    order
+
+    # userCan
+}
+`
+
+const MediumFragmentStr = `
+fragment Medium on StateGQLModel  {
+  ...Link
+  rbacobject {
+    ...RBRoles
+  }
+    statemachine { __typename id name }
+
+    sources { __typename id name }
+    targets { __typename id name }
+    #roletypes {
+    #...RoleType
+    #}
+}
+`
+
+const LargeFragmentStr = `
+fragment Large on StateGQLModel  {
+  ...Medium
+
+}
+`
+
+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 }
+    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/StateGQLModel/Queries/InsertAsyncAction.jsx

@@ -0,0 +1,104 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+
+
+const InsertMutationStr = `
+mutation stateInsert(
+	$name: String! # null, 
+	$statemachineId: UUID! # null, 
+	$nameEn: String # null, 
+	$order: Int # null, 
+	$id: UUID # null
+) {
+  stateInsert(
+	state: {
+	name: $name, 
+	statemachineId: $statemachineId, 
+	nameEn: $nameEn, 
+	order: $order, 
+	id: $id}
+  ) {
+    ... on StateGQLModel { 
+        ...Large 
+        statemachine { ...StateMachineGQLModel }
+    }
+    ... on StateGQLModelInsertError { ...StateGQLModelInsertError }
+  }
+}
+
+
+fragment StateGQLModelInsertError on StateGQLModelInsertError {
+  __typename
+  msg
+  failed
+  code
+  location
+  input
+
+}
+
+
+fragment StateGQLModel on StateGQLModel {
+  __typename
+  id
+  lastchange
+  created
+  createdbyId
+  changedbyId
+  rbacobjectId
+  name
+  nameEn
+  statemachineId
+  writerslistId
+  readerslistId
+  order
+  sources { __typename id name }
+  targets { __typename id name }
+#  roletypes { __typename }
+  # userCan
+  }
+
+
+fragment StateTransitionGQLModel on StateTransitionGQLModel {
+  __typename
+  id
+  lastchange
+  created
+  createdbyId
+  changedbyId
+  rbacobjectId
+  changedby { __typename id fullname }
+  name
+  nameEn
+  sourceId
+  source { __typename id name }
+  targetId
+  target { __typename id name }
+  statemachineId 
+  }
+
+fragment StateMachineGQLModel on StateMachineGQLModel {
+    __typename
+    id
+    lastchange
+    created
+    createdbyId
+    changedbyId
+    rbacobjectId
+
+    name
+    nameEn
+    states {
+    ...StateGQLModel
+    }
+    transitions {
+    ...StateTransitionGQLModel
+    }
+    typeId
+}
+
+`
+
+const InsertMutation = createQueryStrLazy(`${InsertMutationStr}`, LargeFragment)
+export const InsertAsyncAction = createAsyncGraphQLAction2(InsertMutation)