@speron/projekt-front 0.0.3

package/src/EventGQLModel/Vectors/VectorAttribute.jsx

@@ -0,0 +1,56 @@
+import { CardCapsule } from "../Components/CardCapsule"
+import { Table } from "../Components/Table"
+import { Col } from "../../../../_template/src/Base/Components/Col"
+import { Row } from "../../../../_template/src/Base/Components/Row"
+
+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 (
+        <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} title={attribute_name+'[]'}>
+            <Table data={attribute_value} />
+        </CardCapsule>
+    )
+}
+
+
+export const MediumCardVectors = ({ item }) => {
+    return (
+        <CardCapsule item={item}>
+            {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>
+    )
+}

package/src/EventGQLModel/Vectors/index.js

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

package/src/EventGQLModel/WhatToDo.md

@@ -0,0 +1,44 @@
+
+
+## Base Copy
+
+- copy /_template/ directory to your place
+
+## Adapt to new type
+
+### Change URI locations
+- in Link.jsx file (see subdir ./components/) change LinkURI
+- in Link.jsx file change registerLink('YourGQLModel)
+
+### Register pages and components to Application
+- rename RouterSegments in Page/RouterSegments.jsx
+- insert RouterSegments into app router, so make them working
+
+
+At some point you should restart vite.
+
+- use http://localhost:8001/doc and graphiql at http://localhost:8001/gql to get queries and update AsyncActions, fragments, etc. in directory Queries
+  - readById
+  - readPage
+  - mutations (CUD)
+
+- try to navigate in your app to URI defined in Link to reach list of items `/template/YOUDEFINED/list/'
+- remove all errors until you get your app showing a table
+- try to navigate from table into individual items
+- check permission at API (source code etc.) to get info about neede roles for particular mutations 
+  - UserAbsoluteAccessControlExtension or RbacProviderExtension
+  - set
+
+- Change LargeCard, add there more buttons
+
+- Update MediumContent.jsx file to show more or less data related to you entity
+- Update MediumEditableContent.jsx file to allow edit of more or less data
+
+
+## Add new Mutations
+
+- check gqlendpoint to cover all available mutations with appropriate permissions
+  
+### Update filters
+
+- Set Filter component, correct it at PageVector, do not forget to use appropriate name for query param in url

package/src/EventGQLModel/index.js

@@ -0,0 +1,71 @@
+
+export * from './Components'
+export * from './Scalars'
+export * from './Vectors'
+export * from './Queries'
+export * from './Pages'
+
+import { 
+    CardCapsule,
+    Children,
+    CUDButton,
+    LargeCard,
+    Link,
+    MediumContent,
+    MediumCard,
+
+    MediumEditableContent,
+    LiveEdit
+
+} from './Components'
+
+import { 
+    EditPage,
+    Page,
+    PageNavbar,
+    TemplateRouterSegments,
+    VectorPage
+} from './Pages'
+
+// import { UIActions } from './Queries'
+
+export const TemplateUI = {
+    CardCapsule,
+    Children,
+    CUDButton,
+    LargeCard,
+    Link,
+    MediumContent,
+    MediumCard,
+
+    MediumEditableContent,
+    LiveEdit,
+
+    Page,
+    VectorPage,
+    EditPage,
+    PageNavbar,
+    TemplateRouterSegments
+}
+
+
+
+// export const TemplateUI = {
+//     CardCapsule: withUI(_TemplateUI)(_TemplateUI.CardCapsule),
+//     Children: withUI(_TemplateUI)(_TemplateUI.Children),
+//     CUDButton: withUI(_TemplateUI)(_TemplateUI.CUDButton),
+//     LargeCard: withUI(_TemplateUI)(_TemplateUI.LargeCard),
+//     Link: withUI(_TemplateUI)(_TemplateUI.Link),
+//     MediumContent: withUI(_TemplateUI)(_TemplateUI.MediumContent),
+//     MediumCard: withUI(_TemplateUI)(_TemplateUI.MediumCard),
+
+//     MediumEditableContent: withUI(_TemplateUI)(_TemplateUI.MediumEditableContent),
+//     LiveEdit: withUI(_TemplateUI)(_TemplateUI.LiveEdit),
+
+//     Page: withUI(_TemplateUI)(_TemplateUI.Page),
+//     VectorPage: withUI(_TemplateUI)(_TemplateUI.VectorPage),
+//     EditPage: withUI(_TemplateUI)(_TemplateUI.EditPage),
+//     PageNavbar: withUI(_TemplateUI)(_TemplateUI.PageNavbar),
+//     RouterSegment: withUI(_TemplateUI)(_TemplateUI.RouterSegment)
+// }
+

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_>
+    )
+}
+

package/src/GroupGQLModel/Components/Children.jsx

@@ -0,0 +1,31 @@
+import { ChildWrapper } from "@hrbolek/uoisfrontend-shared";
+
+/**
+ * TemplateChildren Component
+ *
+ * A utility React component that wraps its children with the `ChildWrapper` component, 
+ * passing down an `template` entity along with other props to all child elements.
+ * This component is useful for injecting a common `template` entity into multiple children 
+ * while preserving their existing functionality.
+ *
+ * @component
+ * @param {Object} props - The props for the TemplateChildren component.
+ * @param {any} props.template - An entity (e.g., object, string, or other data) to be passed to the children.
+ * @param {React.ReactNode} props.children - The children elements to be wrapped and enhanced.
+ * @param {...any} props - Additional props to be passed to each child element.
+ *
+ * @returns {JSX.Element} A `ChildWrapper` component containing the children with the injected `template` entity.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 1, message: "No data available" };
+ *
+ * <TemplateChildren template={templateEntity}>
+ *     <CustomMessage />
+ *     <CustomIcon />
+ * </TemplateChildren>
+ *
+ * // Result: Both <CustomMessage /> and <CustomIcon /> receive the 'template' prop with the specified entity.
+ */
+export const Children = ({item, children, ...props}) => 
+    <ChildWrapper item={item} children={children} {...props} />

package/src/GroupGQLModel/Components/ConfirmEdit.jsx

@@ -0,0 +1,61 @@
+import { UpdateAsyncAction } from "../Queries";
+import { MediumEditableContent } from "./MediumEditableContent";
+import { useEditAction } from "../../../../dynamic/src/Hooks/useEditAction";
+import { useCallback } from "react";
+import { useGQLEntityContext } from "../../../../_template/src/Base/Helpers/GQLEntityProvider";
+
+
+export const ConfirmEdit = ({ item, children }) => {
+    const { run , error, loading, entity, data, onChange: contextOnChange, onBlur: contextOnBlur } = useGQLEntityContext()
+    
+    const localOnMutationEvent = useCallback((mutationHandler, notifyHandler) => async (e) => {
+        const newItem = { ...item, [e.target.id]: e.target.value }
+        const newEvent = { target: { value: newItem } }
+        
+        await notifyHandler(newEvent)
+        return await mutationHandler(e)
+    })
+
+    const {
+        draft,
+        dirty,
+        onChange, 
+        onBlur,
+        onCancel,
+        onConfirm,
+    } = useEditAction(UpdateAsyncAction, item, {mode: "confirm"})
+
+    const handleConfirm = useCallback(async () => {
+        const result = await onConfirm();
+        console.log("ConfirmEdit handleConfirm result", result, "draft", draft)
+        if (result) {
+            const event = { target: { value: result } };
+            // důležité: použij params z kontextu (provider si je drží jako "poslední vars")
+            await contextOnChange(event);
+        }
+        return result;
+    }, [onConfirm, contextOnChange]);
+
+
+    return (
+        <MediumEditableContent item={item} onChange={onChange} onBlur={onBlur} >
+            {children}
+            <hr />
+            {/* <pre>{JSON.stringify(item, null, 2)}</pre> */}
+            <button 
+                className="btn btn-warning form-control" 
+                onClick={onCancel}
+                disabled={!dirty || loading}
+            >
+                Zrušit změny
+            </button>
+            <button 
+                className="btn btn-primary form-control" 
+                onClick={handleConfirm}
+                disabled={!dirty || loading}
+            >
+                Uložit změny
+            </button>
+        </MediumEditableContent>
+    )
+}

package/src/GroupGQLModel/Components/Filter.jsx

@@ -0,0 +1,14 @@
+import { DateTimeFilter, Filter as BaseFilter, StringFilter, UUIDFilter } from "../../../../_template/src/Base/FormControls/Filter"
+
+export const Filter = ({ id, onChange: handleChange, children }) => {
+    return (
+        <BaseFilter id={id} onChange={handleChange}>
+            <UUIDFilter id="id" />
+            <StringFilter id="name" />
+            <DateTimeFilter id="created" emitUtcIso={false} />
+            {/* <FloatFilter id="count" /> */}
+            {children}
+        </BaseFilter>
+    )
+}
+

package/src/GroupGQLModel/Components/LargeCard.jsx

@@ -0,0 +1,68 @@
+// import Row from "react-bootstrap/Row"
+import { MediumCard } from "./MediumCard"
+import { CardCapsule as CardCapsule_} from "./CardCapsule"
+import { Row } from "../../../../_template/src/Base/Components/Row"
+import { LeftColumn, MiddleColumn } from "@hrbolek/uoisfrontend-shared"
+import { MediumContent as MediumContent_ } from "./MediumContent"
+import { InteractiveMutations } from '../Mutations/InteractiveMutations'
+import { RBACObject } from "../Scalars/RBACObject"
+import { MasterGroup } from "../Scalars/MasterGroup"
+import { GroupRoles } from "../Scalars/GroupRoles"
+import { SimpleCardCapsuleRightCorner } from "../../../../_template/src/Base/Components"
+import { UpdateLink } from "../Mutations/Update"
+import { RolesURI } from "../Pages/PageReadItemEx"
+import { MegaphoneFill } from "react-bootstrap-icons"
+import { ProxyLink } from "../../../../_template/src/Base/Components/ProxyLink"
+
+/**
+ * A large card component for displaying detailed content and layout for an template entity.
+ *
+ * This component wraps an `TemplateCardCapsule` with a flexible layout that includes multiple
+ * columns. It uses a `Row` layout with a `LeftColumn` for displaying an `TemplateMediumCard`
+ * and a `MiddleColumn` for rendering additional children.
+ *
+ * @component
+ * @param {Object} props - The properties for the TemplateLargeCard 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 name or label of the template entity.
+ * @param {React.ReactNode} [props.children=null] - Additional content to render in the middle column.
+ *
+ * @returns {JSX.Element} A JSX element combining a large card layout with dynamic content.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 123, name: "Sample Entity" };
+ * 
+ * <TemplateLargeCard template={templateEntity}>
+ *   <p>Additional content for the middle column.</p>
+ * </TemplateLargeCard>
+ */
+export const LargeCard = ({ item, children, CardCapsule=CardCapsule_, MediumContent=MediumContent_ }) => {
+    // console.log("LargeCard.item", item)
+    return (
+        <CardCapsule item={item} >
+            {/* <ProxyLink to={`/generic/${item?.__typename}/__def/${item?.id}`} reloadDocument={false}>Definice</ProxyLink> */}
+            <Row>
+                <LeftColumn>
+                    <MediumCard item={item} title="Detail" />
+                    {/* <CardCapsule item={item} title="Detail">
+                        <MediumContent item={item} />
+                    </CardCapsule> */}
+                    <GroupRoles item={item}>
+                        <SimpleCardCapsuleRightCorner>
+                            <UpdateLink item={item} uriPattern={RolesURI}>
+                                <MegaphoneFill />
+                            </UpdateLink>
+                        </SimpleCardCapsuleRightCorner>
+                    </GroupRoles>
+                    <RBACObject item={item} />
+                    <InteractiveMutations item={item} />
+                </LeftColumn>
+                <MiddleColumn>
+                    {children}
+                </MiddleColumn>
+            </Row>
+        </CardCapsule>
+    )
+}

package/src/GroupGQLModel/Components/Link.jsx

@@ -0,0 +1,54 @@
+import { URIRoot } from "../../uriroot";
+import { registerLink, Link as Link_ } from "../../../../_template/src/Base/Components/Link";
+import { ProxyLink } from "../../../../_template/src/Base/Components/ProxyLink";
+
+const modelURI = `${URIRoot}/group`
+export const ListURI = `${modelURI}/list/`;
+export const CreateURI = `${modelURI}/create/`;
+export const ReadURI = `${modelURI}/view/`;
+export const UpdateURI = `${modelURI}/edit/`;
+export const DeleteURI = `${modelURI}/delete/`;
+
+export const LinkURI = ReadURI;
+export const VectorItemsURI = ListURI;
+
+const idParam = ":id"
+export const ReadItemURI = `${LinkURI}${idParam}`;
+export const UpdateItemURI = `${UpdateURI}${idParam}`;
+export const DeleteItemURI = `${DeleteURI}${idParam}`;
+
+/**
+ * A React component that renders a `ProxyLink` to an "template" entity's view page.
+ *
+ * The target URL is dynamically constructed using the `template` object's `id`, and the link displays
+ * the `template` object's `name` as its clickable content.
+ *
+ * @function TemplateLink
+ * @param {Object} props - The properties for the `TemplateLink` component.
+ * @param {Object} props.template - The object representing the "template" entity.
+ * @param {string|number} props.template.id - The unique identifier for the "template" entity. Used to construct the target URL.
+ * @param {string} props.template.name - The display name for the "template" entity. Used as the link text.
+ *
+ * @returns {JSX.Element} A `ProxyLink` component linking to the specified "template" entity's view page.
+ *
+ * @example
+ * // Example usage with a sample template entity:
+ * const templateEntity = { id: 123, name: "Example Template Entity" };
+ * 
+ * <TemplateLink template={templateEntity} />
+ * // Renders: <ProxyLink to="/template/template/view/123">Example Template Entity</ProxyLink>
+ *
+ * @remarks
+ * - This component utilizes `ProxyLink` to ensure consistent link behavior, including parameter preservation and conditional reloads.
+ * - The URL format `/template/template/view/:id` must be supported by the application routing.
+ *
+ * @see ProxyLink - The base component used for rendering the link.
+ */
+export const Link = ({ item, LinkURI:LinkURI_, action="view", children, ...props}) => {
+    const targetURI = LinkURI_ ?? LinkURI.replace('view', action);
+    return <Link_ to={targetURI + item?.id} {...props}>{children || item?.fullname || item?.name || item?.id || "Nevim"}</Link_>
+    // return <BaseUI.Link item={item} />
+    // return <a>{children || item?.fullname || item?.name || item?.id || "Nevim"}</a>
+}
+
+registerLink('GroupGQLModel', Link)