@speron/projekt-front 0.0.3

package/src/GroupGQLModel/Vectors/GroupRolesOn.jsx

@@ -0,0 +1,113 @@
+import { Table } from "../../../../_template/src/Base/Components/Table"
+import { CardCapsule } from "../Components/CardCapsule"
+
+import { Table as BaseTable, KebabMenu } from "../../../../_template/src/Base/Components/Table" 
+import { Link as BaseLink } from "../../../../_template/src/Base/Components/Link" 
+import { useNavigate } from "react-router"
+import { UpdateLink } from "../Mutations/Update"
+import { LinkURI } from "../Components"
+import { label } from "happy-dom/lib/PropertySymbol"
+import { Attribute } from "../../../../_template/src/Base/Components/Attribute"
+
+const CellName = ({ row, name }) => (
+    <td key={name}>
+        <BaseLink item={row} />
+    </td>
+)
+
+const CellType = ({ row, name }) => (
+    <td key={name}>
+        <BaseLink item={row?.roletype || {}} />
+    </td>
+)
+
+const CellValid = ({ row, name }) => (
+    <td key={name}>
+        <Attribute attribute_value={row?.valid} />
+        {/* {row?.valid?"ano":"ne"} */}
+    </td>
+)
+
+const CellValidTill = ({ row, name }) => (
+    <td key={name}>
+        <Attribute attribute_value={row?.enddate} />
+        {/* {row?.valid?"ano":"ne"} */}
+    </td>
+)
+
+const CellUser = ({ row, name }) => (
+    <td key={name}>
+        <BaseLink item={row?.user} />
+        {/* {row?.valid?"ano":"ne"} */}
+    </td>
+)
+
+
+const CellTools = ({ row, name }) => {
+    const navigate = useNavigate()
+    const {id, name: name_}  = row || {}
+    return (
+        <td>
+            <KebabMenu actions={[
+                { 
+                    // label: "Editovat", 
+                    label: "Editovat " + name_, 
+                    onClick: () => navigate(`${LinkURI.replace("view", "edit")}${id}`),
+                    children: (<UpdateLink item={row} className="form-control btn btn-outline-secondary">Upravit</UpdateLink>)
+                    // children: (<UpdateLink item={row} className="btn btn-outline-secondary">{name}</UpdateLink>)
+                },
+                { 
+                    // label: "Editovat", 
+                    label: "Smazat " + name_, 
+                    onClick: () => navigate(`${LinkURI.replace("view", "edit")}${id}`),
+                    children: (<UpdateLink item={row} className="form-control btn btn-outline-secondary">Odstranit</UpdateLink>)
+                    // children: (<UpdateLink item={row} className="btn btn-outline-secondary">{name}</UpdateLink>)
+                }
+            ]} />
+        </td>
+    )
+}
+
+const table_def = {
+    // "name": {
+    //     label: "Název",
+    //     component: CellName
+    // },
+    "user": {
+        label: "Kdo",
+        component: CellUser
+    },
+    "roletype": {
+        label: "Typ",
+        component: CellType
+    },
+    "valid": {
+        label: "Platná",
+        component: CellValid
+    },
+    "enddate": {
+        label: "Platná do",
+        component: CellValidTill
+    },
+    "tools": {
+        label: "Nástroje",
+        component: CellTools
+    }
+}
+
+export const GroupRolesOn = ({ item, skiproles=true, children }) => {
+    const attribute_value = item?.rolesOn || []
+    const rolesOn = skiproles && attribute_value.filter(
+        r => r?.group?.id !== item?.id
+    )
+    return (
+        <>
+            <CardCapsule item={item} title={"Odvozené role "}>
+                <BaseTable data={rolesOn || attribute_value} table_def={table_def}/>
+            </CardCapsule>
+            {children}
+        </>
+        
+    )
+}
+

package/src/GroupGQLModel/Vectors/GroupSubgroups.jsx

@@ -0,0 +1,97 @@
+import { Table } from "../../../../_template/src/Base/Components/Table"
+import { CardCapsule } from "../Components/CardCapsule"
+
+import { Table as BaseTable, KebabMenu } from "../../../../_template/src/Base/Components/Table" 
+import { Link as BaseLink } from "../../../../_template/src/Base/Components/Link" 
+import { useNavigate } from "react-router"
+import { UpdateLink } from "../Mutations/Update"
+import { LinkURI } from "../Components"
+import { label } from "happy-dom/lib/PropertySymbol"
+import { Attribute } from "../../../../_template/src/Base/Components/Attribute"
+import { SimpleCardCapsuleRightCorner } from "../../../../_template/src/Base/Components"
+
+const CellName = ({ row, name }) => (
+    <td key={name}>
+        <BaseLink item={row} />
+    </td>
+)
+
+const CellType = ({ row, name }) => (
+    <td key={name}>
+        <BaseLink item={row?.grouptype || {}} />
+    </td>
+)
+
+const CellValid = ({ row, name }) => (
+    <td key={name}>
+        <Attribute attribute_value={row?.valid} />
+        {/* {row?.valid?"ano":"ne"} */}
+    </td>
+)
+
+const CellValidTill = ({ row, name }) => (
+    <td key={name}>
+        <Attribute attribute_value={row?.enddate} />
+        {/* {row?.valid?"ano":"ne"} */}
+    </td>
+)
+
+const CellTools = ({ row, name }) => {
+    const navigate = useNavigate()
+    const {id, name: name_}  = row || {}
+    return (
+        <td>
+            <KebabMenu actions={[
+                { 
+                    // label: "Editovat", 
+                    label: "Editovat " + name_, 
+                    onClick: () => navigate(`${LinkURI.replace("view", "edit")}${id}`),
+                    children: (<UpdateLink item={row} className="form-control btn btn-outline-secondary">Upravit</UpdateLink>)
+                    // children: (<UpdateLink item={row} className="btn btn-outline-secondary">{name}</UpdateLink>)
+                },
+                { 
+                    // label: "Editovat", 
+                    label: "Smazat " + name_, 
+                    onClick: () => navigate(`${LinkURI.replace("view", "edit")}${id}`),
+                    children: (<UpdateLink item={row} className="form-control btn btn-outline-secondary">Odstranit</UpdateLink>)
+                    // children: (<UpdateLink item={row} className="btn btn-outline-secondary">{name}</UpdateLink>)
+                }
+            ]} />
+        </td>
+    )
+}
+
+const table_def = {
+    "name": {
+        label: "Název",
+        component: CellName
+    },
+    "grouptype": {
+        label: "Typ",
+        component: CellType
+    },
+    "valid": {
+        label: "Platná",
+        component: CellValid
+    },
+    "enddate": {
+        label: "Platná do",
+        component: CellValidTill
+    },
+    "tools": {
+        label: "Nástroje",
+        component: CellTools
+    }
+}
+
+export const GroupSubgroups = ({ item, children }) => {
+    const attribute_value = item?.subgroups || []
+    return (
+        <CardCapsule item={item} title={"Podřízené prvky"}>
+            {/* <SimpleCardCapsuleRightCorner>Edit</SimpleCardCapsuleRightCorner> */}
+            {children}
+            <BaseTable data={attribute_value} table_def={table_def}/>
+        </CardCapsule>            
+    )
+}
+

package/src/GroupGQLModel/Vectors/TemplateVectorsAttribute.jsx

@@ -0,0 +1,326 @@
+import { useEffect } from "react";
+import { Col } from "react-bootstrap";
+import { useAsyncAction, createAsyncGraphQLAction, processVectorAttributeFromGraphQLResult, createQueryStrLazy } from "@hrbolek/uoisfrontend-gql-shared"
+import { ErrorHandler, InfiniteScroll, LoadingSpinner } from "@hrbolek/uoisfrontend-shared"
+
+
+/**
+ * Inserts a VectorGQLModel item into a template’s vectors array and dispatches an update.
+ *
+ * @param {Object} template - The current template object containing a `vectors` array.
+ * @param {Object} vectorItem - The item to insert; must have `__typename === "VectorGQLModel"`.
+ * @param {Function} dispatch - Redux dispatch function (or similar) to call the update action.
+ */
+const followUpTemplateVectorItemInsert = (template, vectorItem, dispatch) => {
+    const { __typename } = vectorItem;
+    if (__typename === "VectorGQLModel") {
+        const { vectors, ...others } = template;
+        const newTemplateVectorItems = [...vectors, vectorItem];
+        const newTemplate = { ...others, vectors: newTemplateVectorItems };
+        dispatch(ItemActions.item_update(newTemplate));
+    }
+};
+
+/**
+ * Replaces an existing VectorGQLModel item in a template’s vectors array and dispatches an update.
+ *
+ * @param {Object} template - The current template object containing a `vectors` array.
+ * @param {Object} vectorItem - The updated item; must have `__typename === "VectorGQLModel"` and an `id` field matching an existing item.
+ * @param {Function} dispatch - Redux dispatch function (or similar) to call the update action.
+ */
+const followUpTemplateVectorItemUpdate = (template, vectorItem, dispatch) => {
+    const { __typename } = vectorItem;
+    if (__typename === "VectorGQLModel") {
+        const { vectors, ...others } = template;
+        const newTemplateVectorItems = vectors.map(item =>
+            item.id === vectorItem.id ? vectorItem : item
+        );
+        const newTemplate = { ...others, vectors: newTemplateVectorItems };
+        dispatch(ItemActions.item_update(newTemplate));
+    }
+};
+
+/**
+ * Removes a VectorGQLModel item from a template’s vectors array by its `id` and dispatches an update.
+ *
+ * @param {Object} template - The current template object containing a `vectors` array.
+ * @param {Object} vectorItem - The item to delete; must have `__typename === "VectorGQLModel"` and an `id` field.
+ * @param {Function} dispatch - Redux dispatch function (or similar) to call the update action.
+ */
+const followUpTemplateVectorItemDelete = (template, vectorItem, dispatch) => {
+    const { __typename } = vectorItem;
+    if (__typename === "VectorGQLModel") {
+        const { vectors, ...others } = template;
+        const newTemplateVectorItems = vectors.filter(
+            item => item.id !== vectorItem.id
+        );
+        const newTemplate = { ...others, vectors: newTemplateVectorItems };
+        dispatch(ItemActions.item_update(newTemplate));
+    }
+};
+
+const TemplateVectorsAttributeQuery = `
+query TemplateQueryRead($id: UUID!, $where: VectorInputFilter, $skip: Int, $limit: Int) {
+    result: templateById(id: $id) {
+        __typename
+        id
+        vectors(skip: $skip, limit: $limit, where: $where) {
+            __typename
+            id
+            # ...VectorMedium
+        }
+    }
+}
+`
+
+const TemplateVectorsAttributeAsyncAction = createAsyncGraphQLAction(
+    createQueryStrLazy(TemplateVectorsAttributeQuery,
+        //VectorMediumFragment
+    ),
+    processVectorAttributeFromGraphQLResult("vectors")
+)
+
+
+/**
+ * A component for displaying the `vectors` attribute of a template entity.
+ *
+ * This component checks if the `vectors` attribute exists on the `template` object. If `vectors` is undefined,
+ * the component returns `null` and renders nothing. Otherwise, it maps over the (optionally filtered) `vectors` array
+ * and displays a placeholder message and a JSON representation for each item.
+ *
+ * @component
+ * @param {Object} props - The props for the TemplateVectorsAttribute component.
+ * @param {Object} props.template - The object representing the template entity.
+ * @param {Array<Object>} [props.template.vectors] - An array of vector items associated with the template entity.
+ *   Each item is expected to have a unique `id` property.
+ * @param {Function} [props.filter=Boolean] - (Optional) A function to filter the vectors array before rendering.
+ *
+ * @returns {JSX.Element|null} A JSX element displaying the (filtered) `vectors` items or `null` if the attribute is undefined or empty.
+ *
+ * @example
+ * // Basic usage:
+ * const templateEntity = { 
+ *   vectors: [
+ *     { id: 1, name: "Vector Item 1" }, 
+ *     { id: 2, name: "Vector Item 2" }
+ *   ] 
+ * };
+ * <TemplateVectorsAttribute template={templateEntity} />
+ *
+ * @example
+ * // With a custom filter:
+ * <TemplateVectorsAttribute 
+ *   template={templateEntity}
+ *   filter={vector => vector.name.includes("1")}
+ * />
+ */
+export const TemplateVectorsAttribute_old = ({template, filter=Boolean, Visualiser=TrivialVisualiserDiv}) => {
+    const { vectors: unfiltered } = template
+    if (typeof unfiltered === 'undefined') return null
+    const vectors = unfiltered.filter(filter)
+    if (vectors.length === 0) return null
+    return (
+        <>
+            {vectors.map(
+                vector => <Visualiser id={vector.id} key={vector.id} vector={vector} />
+            )}
+        </>
+    )
+}
+
+/**
+ * Visualiser component for displaying a list of vector items using `TemplateVectorsAttribute`.
+ *
+ * Wraps the `TemplateVectorsAttribute` component, passing the given `items` as the `vectors` attribute
+ * on a synthetic `template` object. All other props are forwarded.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {Array<Object>} props.items - The array of vector items to be visualized.
+ * @param {...any} [props] - Additional props forwarded to `TemplateVectorsAttribute` (e.g., `filter`).
+ *
+ * @returns {JSX.Element|null} Rendered list of vectors or `null` if none are provided.
+ *
+ * @example
+ * <VectorsVisualiser
+ *   items={[
+ *     { id: 1, name: "Vector 1" },
+ *     { id: 2, name: "Vector 2" }
+ *   ]}
+ *   filter={v => v.name.includes("1")}
+ * />
+ */
+const VectorsVisualiser = ({ items, ...props }) => 
+    <TemplateVectorsAttribute_old {...props} template={{ vectors: items }} />
+
+/**
+ * Infinite-scrolling component for the `vectors` attribute of a template entity.
+ *
+ * Uses the generic `InfiniteScroll` component to fetch, merge, and display the `vectors` array
+ * associated with the provided `template` object. It utilizes `VectorsVisualiser` for rendering,
+ * and handles pagination, lazy-loading, and merging of items as the user scrolls.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {Object} props.template - The template entity containing the `vectors` array.
+ * @param {Array<Object>} [props.template.vectors] - (Optional) Preloaded vector items.
+ * @param {Object} [props.actionParams={}] - Optional extra parameters for the async fetch action (merged with pagination).
+ * @param {...any} [props] - Additional props passed to `InfiniteScroll` or `VectorsVisualiser`.
+ *
+ * @returns {JSX.Element} An infinite-scrolling list of vectors.
+ *
+ * @example
+ * <TemplateVectorsAttributeInfinite
+ *   template={{
+ *     vectors: [
+ *       { id: 1, name: "Vector 1" },
+ *       { id: 2, name: "Vector 2" }
+ *     ]
+ *   }}
+ * />
+ */
+export const TemplateVectorsAttributeInfinite = ({template, actionParams={}, ...props}) => { 
+    const {vectors} = template
+
+    return (
+        <InfiniteScroll 
+            {...props}
+            Visualiser={VectorsVisualiser} 
+            preloadedItems={vectors}
+            actionParams={{...actionParams, skip: 0, limit: 10}}
+            asyncAction={TemplateVectorsAttributeAsyncAction}
+        />
+    )
+}
+
+/**
+ * A lazy-loading component for displaying filtered `vectors` from a `template` entity.
+ *
+ * This component uses the `TemplateVectorsAttributeAsyncAction` to asynchronously fetch
+ * the `template.vectors` 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 `vectors` array before rendering.
+ *
+ * @returns {JSX.Element} A rendered list of filtered vectors or a loading/error placeholder.
+ *
+ * @example
+ * <TemplateVectorsAttributeLazy template={{ id: "abc123" }} />
+ *
+ * 
+ * @example
+ * <TemplateVectorsAttributeLazy
+ *   template={{ id: "abc123" }}
+ *   filter={(v) => v.status === "active"}
+ * />
+ */
+export const TemplateVectorsAttributeLazy = ({template, filter=Boolean, ...props}) => {
+    const {loading, error, entity, fetch} = useAsyncAction(TemplateVectorsAttributeAsyncAction, template, {deferred: true})
+    useEffect(() => {
+        fetch(template)
+    }, [template])
+
+    if (loading) return <LoadingSpinner />
+    if (error) return <ErrorHandler errors={error} />
+
+    return <TemplateVectorsAttribute_old template={entity} filter={filter} {...props}/>    
+}
+
+const TrivialVisualiserDiv = ({vector, children}) => <div>
+    Probably {'<VectorMediumCard vector={vector} />'} <br />
+    <pre>{JSON.stringify(vector, null, 4)}</pre>
+    {children}
+</div>
+
+/**
+ * Component to render the filtered `vectors` attribute of a template entity.
+ *
+ * Applies an optional filter function to the vectors array before rendering.
+ * Supports infinite scrolling to load more items lazily.
+ *
+ * The `Layout` prop is used as a wrapper component for each rendered item and
+ * is consistently applied in both static and infinite scroll rendering modes.
+ * If different layouts are desired for infinite vs static modes,
+ * consider conditionally passing different `Layout` props.
+ *
+ * @param {object} props - Component props.
+ * @param {object} props.template - The template entity containing the `vectors` array.
+ * @param {Array<object>} [props.template.vectors] - Array of vector items to render.
+ * @param {React.ComponentType} [props.Visualiser=TrivialVisualiserDiv] - Component to render each vector item.
+ *   Receives `vector` and optionally other props.
+ * @param {boolean} [props.infinite=true] - Whether to enable infinite scrolling.
+ * @param {React.ComponentType|string} [props.Layout=Col] - Wrapper component for each rendered item.
+ *   This component is used consistently for both static rendering and infinite scroll loading.
+ * @param {Function} [props.filter=Boolean] - Filter function to apply on vectors before rendering.
+ * @param {...any} props - Additional props forwarded to `Visualiser` and `InfiniteScroll`.
+ *
+ * @returns {JSX.Element|null} Rendered list or infinite scroll component, or null if no vectors.
+ *
+ * @example
+ * <TemplateVectorsAttribute
+ *   template={template}
+ *   Visualiser={VectorMediumCard}
+ *   Layout={Col}
+ *   filter={(v) => v.active}
+ *   infinite={true}
+ * />
+ */
+export const TemplateVectorsAttribute = ({
+    template,
+    Visualiser = TrivialVisualiserDiv,
+    infinite = true,
+    Layout = Col, // 'list' | 'grid' | 'infinite'
+    filter = Boolean,
+    ...props
+}) => {
+
+    const { vectors: unfiltered } = template
+    if (typeof unfiltered === 'undefined') return null
+    const vectors = unfiltered.filter(filter)
+    if (vectors.length === 0) return null
+
+
+
+    if (infinite) {
+        // Pro infinite scroll použijeme komponentu InfiniteScroll
+        // Visualiser zde je komponenta, která přijímá pole položek (items)
+        // a zobrazí je – proto vytvoříme wrapper, který předá Visualiser správně
+
+        const VisualiserWrapper = ({ items }) => ( 
+            <TemplateVectorsAttribute 
+                {...props}    
+                template={{vectors: items}} 
+                Visualiser={Visualiser} 
+                infinite={false} 
+                Layout={Layout} 
+                filter={filter}
+            />
+        );
+
+        return (
+            <InfiniteScroll
+                actionParams={{ ...template, skip: 0, limit: 10 }}
+                asyncAction={TemplateVectorsAttributeAsyncAction}
+                {...props}
+                Visualiser={VisualiserWrapper}
+                preloadedItems={vectors}
+            />
+        );
+    }
+
+    return (
+        <>
+        {vectors.map((vector) => (
+            <Layout key={vector.id}>
+                {vector && <Visualiser {...props} vector={vector} />}
+            </Layout>
+        ))}
+        </>
+    );
+};

package/src/GroupGQLModel/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/GroupGQLModel/Vectors/index.js

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

package/src/GroupGQLModel/index.js

@@ -0,0 +1,7 @@
+
+export * from './Components'
+export * from './Scalars'
+export * from './Vectors'
+export * from './Queries'
+export * from './Pages'
+