@speron/projekt-front 0.0.3

package/src/StateGQLModel/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/StateGQLModel/Vectors/VectorAttribute.jsx

@@ -0,0 +1,56 @@
+import { CardCapsule } from "../Components/CardCapsule"
+import { Table } from "../Components/Table"
+import { Col } from "../../Base/Components/Col"
+import { Row } from "../../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/StateGQLModel/Vectors/index.js

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

package/src/StateGQLModel/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/StateMachineGQLModel/Components/CardCapsule.jsx

@@ -0,0 +1,43 @@
+import { PersonFill } from "react-bootstrap-icons"
+import { Link } from "./Link"
+import { CardCapsule as CardCapsule_ } from "../../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/StateMachineGQLModel/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/StateMachineGQLModel/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 "../../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/StateMachineGQLModel/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/StateMachineGQLModel/Components/LargeCard.jsx

@@ -0,0 +1,50 @@
+// import Row from "react-bootstrap/Row"
+import { MediumCard } from "./MediumCard"
+import { CardCapsule as CardCapsule_} from "./CardCapsule"
+import { Row } from "../../Base/Components/Row"
+// import { LeftColumn, MiddleColumn } from "@hrbolek/uoisfrontend-shared"
+import { MediumContent as MediumContent_ } from "./MediumContent"
+import { InteractiveMutations } from '../Mutations/InteractiveMutations'
+import { LeftColumn, MiddleColumn } from "../../Base/Components/Col"
+/**
+ * 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} >
+            <Row>
+                <LeftColumn>
+                    <CardCapsule item={item} title="Detail">
+                        <MediumContent item={item} />
+                    </CardCapsule>
+                    <InteractiveMutations item={item} />
+                </LeftColumn>
+                <MiddleColumn>
+                    {children}
+                </MiddleColumn>
+            </Row>
+        </CardCapsule>
+    )
+}