@hrbolek/uoisfrontend-template 0.6.0

package/src/Template/Pages/PageNavbar.jsx

@@ -0,0 +1,110 @@
+import Nav from 'react-bootstrap/Nav'
+import { ProxyLink, MyNavbar, useHash } from '@hrbolek/uoisfrontend-shared';
+
+import { LinkURI } from '../Components'
+
+/**
+ * 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>
+    );
+};

package/src/Template/Pages/RouterSegment.jsx

@@ -0,0 +1,52 @@
+import { LinkURI } from "../Components/Link"
+import { Page, PageMediumCard } from "./Page"
+import { PageEdit } from "./PageEdit"
+import { VectorPage } from "./VectorPage"
+
+/**
+ * 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: `/${LinkURI}:id`,
+        element: (<Page />),
+    },
+    // {
+    //     path: `/${LinkURI}`,
+    //     element: (<VectorPage />),
+    // },
+    {
+        path: `/${LinkURI.replace('view', 'edit')}:id`,
+        element: (<PageEdit />),
+    },
+    {
+        path: `/${LinkURI.replace('view', 'view2')}:id`,
+        element: (<PageMediumCard />),
+    }    
+]

package/src/Template/Pages/VectorPage.jsx

@@ -0,0 +1,133 @@
+import { useLocation } from "react-router"
+import { InfiniteScroll } from "@hrbolek/uoisfrontend-shared"
+import { ReadPageAsyncAction } from "../Queries"
+import { Link, MediumCard } from "../Components"
+import { PageNavbar } from "./PageNavbar"
+import { Col } from "react-bootstrap"
+
+/**
+ * Visualizes a list of template entities using TemplateMediumCard.
+ *
+ * This component receives an array of template objects via the `items` prop
+ * and renders a `TemplateMediumCard` for each item. Each card is keyed by the template's `id`.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {Array<Object>} props.items - Array of template entities to visualize. Each object should have a unique `id` property.
+ * @returns {JSX.Element} A fragment containing a list of TemplateMediumCard components.
+ *
+ * @example
+ * const templates = [
+ *   { id: 1, name: "Template 1", ... },
+ *   { id: 2, name: "Template 2", ... }
+ * ];
+ *
+ * <TemplateVisualiser items={templates} />
+ */
+const CardVisualiser = ({items}) => {
+    return (
+        <>
+            {items.map(template => (
+                <Col key={requesttype.id} >
+                    <MediumCard key={template.id} template={template}>
+                        
+                    </MediumCard>
+                </Col>
+            ))}
+        </>
+    )
+}
+
+/**
+ * Visualizes a list of template entities using table.
+ *
+ * This component receives an array of template objects via the `items` prop
+ * and renders a `tr` for each item. Each row is keyed by the template's `id`.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {Array<Object>} props.items - Array of template entities to visualize. Each object should have a unique `id` property.
+ * @returns {JSX.Element} A fragment containing a list of TemplateMediumCard components.
+ *
+ * @example
+ * const templates = [
+ *   { id: 1, name: "Template 1", ... },
+ *   { id: 2, name: "Template 2", ... }
+ * ];
+ *
+ * <TemplateTableVisualiser items={templates} />
+ */
+export const TableVisualiser = ({items}) => {
+    return (
+        <table className="table table-striped">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Name</th>
+                    <th>Tools</th>
+                </tr>
+            </thead>
+            <tbody>
+            {items.map(template => (
+                <tr key={template?.id} >
+                    <td>
+                        <Link template={template} />
+                    </td>
+                    <td>{template?.name}</td>
+                    <td></td>
+                </tr>
+            ))}
+            </tbody>
+        </table>
+    )
+}
+
+/**
+ * Page component for displaying a (potentially filtered) list of template entities with infinite scrolling.
+ *
+ * This component parses the `where` query parameter from the URL (if present), 
+ * passes it as a filter to the `InfiniteScroll` component, and visualizes the resulting templates using the specified `Visualiser`.
+ * 
+ * You can optionally provide custom children or a custom Visualiser component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {function} [props.Visualiser=TemplateVisualiser] - 
+ *   Optional component used to visualize the loaded templates. Receives `items` as prop.
+ * @param {React.ReactNode} [props.children] - Optional child elements to render below the visualized templates.
+ *
+ * @returns {JSX.Element} The rendered page with infinite scroll and optional children.
+ *
+ * @example
+ * // Will fetch and display templates filtered by a `where` clause passed in the URL, e.g.:
+ * //   /template?where={"name":"Example"}
+ * <TemplateVectorPage />
+ *
+ * @example
+ * // With a custom visualizer and children:
+ * <TemplateVectorPage Visualiser={CustomTemplateList}>
+ *   <Footer />
+ * </TemplateVectorPage>
+ */
+export const VectorPage = ({children, Visualiser=CardVisualiser}) => {
+    const { search } = useLocation();
+    let actionParams = { skip: 0, limit: 10};
+    try {
+        const params = new URLSearchParams(search);
+        const where = params.get('where');        
+        actionParams.where = where ? JSON.parse(where) : undefined;
+    } catch (e) {
+        console.warn("Invalid 'where' query parameter!", e);
+    }
+    const onSearchChange = () => null
+    return (<>
+        <PageNavbar template={template} onSearchChange={onSearchChange} />
+        <InfiniteScroll
+            preloadedItems={[]} // No preloaded items for template
+            actionParams={actionParams} 
+            asyncAction={ReadPageAsyncAction}
+            Visualiser={Visualiser}
+        />
+        {children}
+    </>)
+}

package/src/Template/Pages/index.js

@@ -0,0 +1,6 @@
+export * from './Page'
+export * from './VectorPage'
+export * from './PageEdit'
+export * from './PageNavbar'
+export * from './RouterSegment'
+

package/src/Template/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/Template/Queries/Fragments.jsx

@@ -0,0 +1,92 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared"
+
+const LinkFragmentStr = `
+fragment Link on UserGQLModel {
+  __typename
+  id
+  lastchange
+  name
+  surname
+  email
+}
+`
+
+const MediumFragmentStr = `
+fragment Medium on UserGQLModel {
+  ...Link
+  rbacobject {
+    ...RBRoles
+  }
+}
+`
+
+const LargeFragmentStr = `
+fragment Large on UserGQLModel {
+  ...Medium
+  rolesOn {
+    ...Role
+  }
+}
+`
+
+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, RoleFragment)
+  

package/src/Template/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/Template/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/Template/Queries/ReadPageAsyncAction.jsx

@@ -0,0 +1,13 @@
+import { createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared";
+import { LargeFragment } from "./Fragments";
+import { createAsyncGraphQLAction2 } from "../../../../dynamic/src/Core/createAsyncGraphQLAction2";
+
+const ReadPageQueryStr = `
+query ReadPageQuery($skip: Int, $limit: Int, $where: UserWhereInputFilter) {
+  result: userPage(skip: $skip, limit: $limit, where: $where) {
+    ...Large
+  }
+}
+`
+const ReadPageQuery = createQueryStrLazy(`${ReadPageQueryStr}`, LargeFragment)
+export const ReadPageAsyncAction = createAsyncGraphQLAction2(ReadPageQuery)

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