@speron/projekt-front 0.0.3

package/src/Base/Components/LiveEdit.jsx

@@ -0,0 +1,64 @@
+import { useCallback } from "react";
+import { useMemo } from "react";
+
+import { UpdateAsyncAction } from "../Queries";
+import { MediumEditableContent } from "./MediumEditableContent";
+import { useEditAction } from "../../../../dynamic/src/Hooks/useEditAction";
+import { LoadingSpinner } from "@hrbolek/uoisfrontend-shared";
+import { AsyncStateIndicator } from "../Helpers/AsyncStateIndicator";
+
+/**
+ * TemplateLiveEdit Component
+ *
+ * Interaktivní React komponenta pro live editaci entity `template` s podporou optimistického fetchování a debounce delaye.
+ *
+ * - Používá `useAsyncAction` k načítání a update entit (např. GraphQL mutation).
+ * - Pokud se hodnota pole změní, spustí se update po krátkém zpoždění (`delayer`) — uživatelské změny nejsou ihned posílány, ale až po pauze.
+ * - Zobrazuje loading a error stav pomocí komponent `LoadingSpinner` a `ErrorHandler`.
+ * - Předává editované hodnoty do komponenty `TemplateMediumEditableContent`, která zajišťuje zobrazení a editaci jednotlivých polí šablony (`template`).
+ *
+ * @component
+ * @param {Object} props - Props objekt.
+ * @param {Object} props.template - Objekt reprezentující editovanou šablonu (template entity).
+ * @param {React.ReactNode} [props.children] - Libovolné children, které se vloží pod editační komponentu.
+ * @param {Function} [props.asyncAction=TemplateUpdateAsyncAction] - Asynchronní akce pro update (`useAsyncAction`), typicky GraphQL update mutation.
+ *
+ * @example
+ * // Standardní použití
+ * <TemplateLiveEdit template={templateEntity} />
+ *
+ * @example
+ * // S vlastním asyncAction a doplňkovým obsahem
+ * <TemplateLiveEdit template={templateEntity} asyncAction={myUpdateAction}>
+ *   <div>Extra obsah nebo poznámka</div>
+ * </TemplateLiveEdit>
+ *
+ * @returns {JSX.Element}
+ *   Interaktivní komponenta pro live editaci šablony, včetně spinneru a error handleru.
+ */
+export const LiveEdit = ({ 
+    item, 
+    children, 
+    mutationAsyncAction=UpdateAsyncAction,
+    DefaultContent=MediumEditableContent
+}) => {
+    // const { run , error, loading, entity, data, onChange: contextOnChange, onBlur: contextOnBlur } = useGQLEntityContext()
+    const {
+        loading: saving,
+        error,
+        onChange, 
+        onBlur,
+    } = useEditAction(mutationAsyncAction, item, {
+        mode: "live", 
+        // onCommit: contextOnChange
+    })
+
+    return (
+        
+        <DefaultContent item={item} onChange={onChange} onBlur={onBlur} >
+            <AsyncStateIndicator loading={saving} error={error} text={"Ukládám"} />
+            {children}
+        </DefaultContent>
+        
+    )
+}

package/src/Base/Components/MediumCard.jsx

@@ -0,0 +1,30 @@
+import { CardCapsule } from "./CardCapsule"
+import { Link } from "./Link"
+import { MediumContent } from "./MediumContent"
+
+export const MediumCard = ({ header, item, children }) => {
+    return (
+        <CardCapsule header={header || <Link item={item}/>} item={item}>
+            
+            <MediumContent item={item} />
+            {children}
+            <hr/>
+            {Object.entries(item).map(([attribute_name, attribute_value]) => {
+                if (Array.isArray(attribute_value)) return null
+                if (typeof attribute_value === "object" && attribute_value !== null) {
+                    return <Link item={attribute_value}><b>{attribute_name} {JSON.stringify({})}</b><br/></Link>
+                    return <Link item={item} action={attribute_name}><b>{attribute_name} {JSON.stringify({})}</b><br/></Link>
+                }
+                return null
+            }
+            )}
+            <hr/>
+            {Object.entries(item).map(([attribute_name, attribute_value]) => {
+                if (Array.isArray(attribute_value)) return (
+                    <Link item={item} action={attribute_name}><b>{attribute_name} []</b><br/></Link>
+                )
+                return null
+            })}
+        </CardCapsule>
+    )
+}

package/src/Base/Components/MediumContent.jsx

@@ -0,0 +1,74 @@
+import { data } from "react-router"
+import { Attribute } from "./Attribute"
+import { Link } from "./Link"
+
+export const NonPriorityAttributeValue = ({ datarow = {}, name }) => {
+    const value = datarow?.[name] || ""
+    if (name === "id")
+        return (
+            <Attribute item={datarow} label={name} attribute_name={name}>
+                <Link item={datarow} >{datarow?.id || "Data Error"}</Link >
+            </Attribute> 
+        )
+    if (["name", "surname", "fullname"].includes(name))
+        return (
+            <Attribute item={datarow} label={name} attribute_name={name}>
+                <Link item={datarow}>{value}</Link>
+            </Attribute>
+        )
+
+    const idpos = name.indexOf("Id")
+    if (idpos === -1) {
+        if (typeof value === "object")
+            // <Attribute item={datarow} label={name} attribute_name={name} attribute_value_result={<Link item={value} />} />
+            return null
+        else {
+            return (            
+                <Attribute item={datarow} label={name} attribute_name={name} attribute_value_result={value || ""} />
+            )
+        }
+    }
+
+    const scalarname = name.replace("Id", "")
+    const { id, __typename} = datarow?.[scalarname] || {}
+    if (id && __typename) {
+        // return <>{id} {__typename}</>
+        return (
+            <Attribute item={datarow} label={name} attribute_name={name}>
+                <Link item={datarow?.[scalarname]}>{id}</Link>
+            </Attribute>
+        )
+        return <Attribute item={datarow} label={name} attribute_name={name} attribute_value_result={<Link item={datarow?.[scalarname]}>{id}</Link>} />
+    } else {
+        // if (typeof value === "object")
+        //     return <Attribute item={datarow} label={name} attribute_name={name} attribute_value_result={`${value?.fullname || value?.name || value?.id}`} />
+        // else
+        //     return <Attribute item={datarow} label={name} attribute_name={name} attribute_value_result={value || ""} />
+    }    
+}
+
+export const MediumContent = ({ item, children }) => {
+    return (
+        <>
+            {Object.entries(item).map(([attribute_name, attribute_value]) => {
+                // if (attribute_name !== "id") return null
+                if (Array.isArray(attribute_value)) return null
+                if (attribute_value)
+                    return (
+                        <NonPriorityAttributeValue key={attribute_name} datarow={item} name={attribute_name} />
+                    )
+                else return null
+            })}
+            {Object.entries(item).map(([attribute_name, attribute_value]) => {
+                if (attribute_value !== null) return null
+                if (attribute_value)
+                    return null
+                else
+                    return (
+                        <NonPriorityAttributeValue key={attribute_name} datarow={item} name={attribute_name} />
+                    )
+            })}
+            {children}
+        </>
+    )
+}

package/src/Base/Components/MediumEditableContent.jsx

@@ -0,0 +1,52 @@
+import { SearchAsyncAction } from "../Queries/SearchAsyncAction"
+import { EntityLookup } from "../../../../_template/src/Base/FormControls/EntityLookup"
+import { Input } from "../../../../_template/src/Base/FormControls/Input"
+
+/**
+ * A component that displays medium-level content for an template entity.
+ *
+ * This component renders a label "TemplateMediumContent" followed by a serialized representation of the `template` object
+ * and any additional child content. It is designed to handle and display information about an template entity object.
+ *
+ * @component
+ * @param {Object} props - The properties for the TemplateMediumContent 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 after the serialized `template` object.
+ *
+ * @returns {JSX.Element} A JSX element displaying the entity's details and optional content.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 123, name: "Sample Entity" };
+ * 
+ * <TemplateMediumContent template={templateEntity}>
+ *   <p>Additional information about the entity.</p>
+ * </TemplateMediumContent>
+ */
+export const MediumEditableContent = ({ item, onChange=(e)=>null, onBlur=(e)=>null, children}) => {
+    return (
+        <>           
+        {/* defaultValue={item?.name|| "Název"}  */}
+            <Input 
+                id={"name"} 
+                label={"Jméno"} 
+                className="form-control" 
+                value={item?.name|| "Jméno"} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+            />
+            
+            <EntityLookup 
+                id={"mastertypeId"}
+                label="Nadřízený typ"
+                className="form-control"
+                value={item?.mastertype}
+                asyncAction={SearchAsyncAction}
+                onChange={onChange} onBlur={onBlur} 
+            />
+            {children}
+        </>
+    )
+}

package/src/Base/Components/ProxyLink.jsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { useCallback } from "react";
+import { useMemo } from "react";
+import { Link, useResolvedPath } from "react-router-dom";
+import { useNavigate } from 'react-router-dom'
+/**
+ * shared module.
+ * @module shared/components
+ */
+
+
+/**
+ * useLink
+ *
+ * Spočítá cílový odkaz pro react-router <Link>, včetně volitelného zachování
+ * aktuálního hash/search. Zároveň určí, zda je cílová cesta "lokální"
+ * (tj. stejný base segment jako aktuální app), a podle toho doporučí reloadDocument.
+ *
+ * @param {Object} args
+ * @param {string} args.to - cílová cesta nebo URL (relativní/absolutní)
+ * @param {boolean} [args.preserveHash=true] - pokud cílové `to` nemá hash, použij aktuální hash
+ * @param {boolean} [args.preserveSearch=true] - pokud cílové `to` nemá search, použij aktuální search
+ *
+ * @returns {{
+ *   href: string,
+ *   pathname: string,
+ *   search: string,
+ *   hash: string,
+ *   isLocal: boolean,
+ *   reloadDocument: boolean
+ * }}
+ */
+export const useLink = ({
+    to,
+    preserveHash = true,
+    preserveSearch = true,
+} = {}) => {
+    
+    const resolved = useResolvedPath(to);
+    const navigate = useNavigate()
+    // const navigate = () => null
+
+    const follow = useCallback(() => {
+        console.log("state.href", state.href)
+        navigate(state.href)
+    }, [navigate])
+
+
+    const state = useMemo(() => {
+        // SSR-safe guard
+        const origin =
+            typeof window !== "undefined" ? window.location.origin : "http://localhost";
+        const currentHref =
+            typeof window !== "undefined" ? window.location.href : `${origin}/`;
+
+        const { pathname } = resolved;          // resolved target pathname
+        const base = pathname.split("/")[1] || ""; // first segment
+
+        const currentUrl = new URL(currentHref);
+        const currentHash = preserveHash ? currentUrl.hash : "";
+        const currentSearch = preserveSearch ? currentUrl.search : "";
+
+        // Resolve `to` as URL (handles both relative paths and absolute URLs)
+        const destinationUrl = new URL(to, origin);
+
+        // If destination does not specify search/hash, inherit current ones
+        destinationUrl.search = destinationUrl.search || currentSearch;
+        destinationUrl.hash = destinationUrl.hash || currentHash;
+
+        const href = destinationUrl.pathname + destinationUrl.search + destinationUrl.hash;
+
+        const isLocal =
+            typeof window !== "undefined"
+                ? window.location.pathname.startsWith(`/${base}`)
+                : true;
+        
+        return {
+            follow,
+            href,
+            pathname: destinationUrl.pathname,
+            search: destinationUrl.search,
+            hash: destinationUrl.hash,
+            isLocal,
+            reloadDocument: !isLocal,
+        };
+    }, [to, preserveHash, preserveSearch, resolved]);
+
+
+    return state
+};
+
+/**
+ * A `ProxyLink` component that conditionally reloads the document based on whether the link's target
+ * is local or external. It also preserves existing hash and query parameters from the current URL
+ * and appends them to the target path if they are not already specified.
+ *
+ * @param {Object} props - The properties for the ProxyLink component.
+ * @param {string} props.to - The target path or URL for the link.
+ * @param {React.ReactNode} props.children - The content to render inside the link.
+ * @param {boolean} [props.preserveHash=true] - Flag indicating whether to preserve the current URL's hash.
+ * @param {boolean} [props.preserveSearch=true] - Flag indicating whether to preserve the current URL's query parameters.
+ * @param {Object} [props.others] - Additional props to pass to the underlying React Router `Link` component.
+ *
+ * @returns {JSX.Element} A React Router `Link` component with conditional reload behavior and parameter preservation.
+ *
+ * @example
+ * // Example usage:
+ * <ProxyLink to="/local-path">Local Link</ProxyLink>
+ * <ProxyLink to="https://external-site.com">External Link</ProxyLink>
+ */
+export const ProxyLink = ({ 
+    to, 
+    children, 
+    preserveHash = true, 
+    preserveSearch = true, 
+    disabled = false,
+    ...others 
+}) => {
+    const { href, reloadDocument } = useLink({ to, preserveHash, preserveSearch });
+
+    return (
+        <>
+        {disabled && children}
+        {!disabled && (
+            <Link to={href} reloadDocument={reloadDocument} {...others}>
+                {children}
+            </Link>
+        )}
+        </>
+    );
+};
+

package/src/Base/Components/Row.jsx

@@ -0,0 +1,23 @@
+import { bs, cx } from "./style";
+
+export const Row0 = ({ children, className, ...props }) => {
+    return (
+        <div {...props} className={className ? className + " row" : "row"}>
+            {children}
+        </div>
+    )
+}
+
+export function Row({ className, classNames, g, gx, gy, align, justify, as: Tag = "div", ...props }) {
+  return (
+    <Tag
+      {...props}
+      className={cx(
+        "Row", // hook
+        bs.grid.row({ g, gx, gy, align, justify }),
+        className,
+        classNames?.root
+      )}
+    />
+  );
+}

package/src/Base/Components/Table.jsx

@@ -0,0 +1,275 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Link } from "./Link";
+import { CreateButton, CreateLink } from "../Mutations/Create";
+import { UpdateButton, UpdateLink } from "../Mutations/Update";
+import { DeleteButton } from "../Mutations/Delete";
+import { r } from "happy-dom/lib/PropertySymbol";
+
+const CellId = ({ row, name }) => (
+    <td key={name}>
+        <Link item={row}>{row?.id || "Data Error"}</Link>
+    </td>
+)
+
+export const CellName = ({ row, name }) => (
+    <td key={name}>
+        <Link item={row} />
+    </td>
+)
+
+const CellDefault = ({ row, name }) => {
+    const value = row?.[name] ?? ""
+
+    const idpos = name.indexOf("Id")
+    if (idpos === -1) {
+        return <td key={name}>{typeof value === "object" ? `${value}` : (value || "")}</td>
+    }
+
+    const scalarname = name.replace("Id", "")
+    const { id, __typename } = row?.[scalarname] || {}
+
+    if (id && __typename && id == value) {
+        return (
+            <td key={name}>
+                <Link item={row?.[scalarname]}>{value || ""}</Link>
+            </td>
+        )
+    }
+
+    return <td key={name}>{typeof value === "object" ? `${value}` : (value || "")}</td>
+}
+
+// 2) Funkce, která z dat vyrobí table_def
+export const buildTableDef = (data) => {
+    const row = data?.[0] ?? {}
+    const priority = ["__typename", "id", "name"]
+
+    const attribute_names = Object.keys(row).filter((attribute_name) => {
+        const v = row[attribute_name]
+        if (Array.isArray(v)) return false
+        if (typeof v === "object" && v !== null) return false
+        return true
+    })
+
+    const columns = [
+        ...priority.filter((a) => attribute_names.includes(a)),
+        ...attribute_names.filter((a) => !priority.includes(a)),
+    ]
+
+    // table_def: colname -> { label, component }
+    const result = Object.fromEntries(
+        columns.map((name) => {
+            let component = CellDefault
+            if (name === "id") component = CellId
+            if (name === "name") component = CellName
+
+            return [
+                name,
+                {
+                    label: name,        // tady si můžeš dát hezčí label
+                    component,          // React komponenta pro buňku
+                },
+            ]
+        })
+    )
+
+    result["tools"] = {
+        label: "Nástroje",
+        component: ({row}) => <td><KebabMenu actions={[
+            // { label: "Editovat", onClick: () => console.log("edit") },
+            // { label: "Smazat", onClick: () => console.log("delete") },
+            // { label: "Detail", onClick: () => console.log("detail") },
+            { children: <Link 
+                    className="btn btn-sm btn-outline-secondary border-0 text-start w-100"
+                    item={row}
+                >Detail</Link> },
+            { children: <UpdateLink 
+                className="btn btn-sm btn-outline-secondary border-0 text-start w-100"
+                item={row}
+                action="edit"
+                >Editovat</UpdateLink> },
+            { children: <UpdateButton 
+                    className="btn btn-sm btn-outline-secondary border-0 text-start w-100"
+                    item={row}
+                >Editovat (zde)</UpdateButton> },
+            { children: <DeleteButton 
+                className="btn btn-sm btn-outline-secondary border-0 text-start w-100"  
+                >Smazat</DeleteButton> },
+        ]} /></td>,
+    }
+
+    return result
+}
+
+
+export const KebabMenu = ({ actions = [] }) => {
+    const [open, setOpen] = useState(false);
+    const btnRef = useRef(null);
+    const menuRef = useRef(null);
+    const [pos, setPos] = useState({ left: 0, top: 0 });
+
+    const close = () => setOpen(false);
+
+    // zavření při kliku mimo (funguje i s portalem)
+    useEffect(() => {
+        if (!open) return;
+
+        const onMouseDown = (e) => {
+            const btn = btnRef.current;
+            const menu = menuRef.current;
+            if (!btn || !menu) return;
+
+            if (btn.contains(e.target)) return;
+            if (menu.contains(e.target)) return;
+
+            close();
+        };
+
+        const onKeyDown = (e) => {
+            if (e.key === "Escape") close();
+        };
+
+        document.addEventListener("mousedown", onMouseDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [open]);
+
+    // spočítat pozici po otevření + při scroll/resize
+    useLayoutEffect(() => {
+        if (!open) return;
+
+        const update = () => {
+            const btn = btnRef.current;
+            if (!btn) return;
+
+            const r = btn.getBoundingClientRect();
+            // menu zarovnané doprava k tlačítku, pod tlačítkem
+            setPos({
+                left: r.right + window.scrollX,
+                top: r.bottom + window.scrollY,
+            });
+        };
+
+        update();
+
+        window.addEventListener("resize", update);
+        // scroll na capture, aby to fungovalo i při scrollu uvnitř wrapperů
+        window.addEventListener("scroll", update, true);
+
+        return () => {
+            window.removeEventListener("resize", update);
+            window.removeEventListener("scroll", update, true);
+        };
+    }, [open]);
+
+    const menu = open ? (
+        <div
+            ref={menuRef}
+            style={{
+                position: "absolute",
+                left: pos.left,
+                top: pos.top,
+                transform: "translateX(-100%)", // right align
+                background: "white",
+                border: "1px solid #ddd",
+                borderRadius: 4,
+                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                zIndex: 2000,
+                minWidth: 140,
+            }}
+            role="menu"
+        >
+            {actions.map((action, i) => {
+                const children = action?.children;
+                if (children) return <div key={i}>{children}</div>;
+
+                return (
+                    <button
+                        key={i}
+                        type="button"
+                        className="btn btn-sm btn-outline-secondary border-0 text-start w-100"
+                        onClick={() => {
+                            close();
+                            action?.onClick?.();
+                        }}
+                        style={{
+                            padding: "8px 12px",
+                            textDecoration: "none",
+                        }}
+                        role="menuitem"
+                    >
+                        {action?.label}
+                    </button>
+                );
+            })}
+        </div>
+    ) : null;
+
+    return (
+        <>
+            <button
+                ref={btnRef}
+                className="btn btn-sm btn-outline-secondary border-1"
+                onClick={() => setOpen((o) => !o)}
+                aria-expanded={open}
+                aria-haspopup="menu"
+                aria-label="Menu"
+                type="button"
+            >
+                ⋮
+            </button>
+
+            {open ? createPortal(menu, document.body) : null}
+        </>
+    );
+};
+
+export const TableRow = ({ row, table_def }) => {
+    return (
+        <tr>
+            {Object.keys(table_def).map((name) => {
+                const Cell = table_def[name].component
+                return <Cell key={name} row={row} name={name} />
+            })}
+        </tr>
+    )
+}
+
+const TableRow_ = TableRow
+// 3) Table už jen používá definici
+export const TableBody = ({ data, table_def, TableRow = TableRow_ }) => {
+    return (
+        <tbody>
+            {data.map((row) => <TableRow key={row?.id} row={row} table_def={table_def} />)}
+        </tbody>
+    )
+}
+
+const TableBody_ = TableBody
+
+export const Table = ({ data, table_def = null, TableBody = TableBody_ }) => {
+    if (!data || data.length === 0) return null
+
+    const _table_def = useMemo(() => table_def || buildTableDef(data), [data, table_def])
+    const colnames = useMemo(() => Object.keys(_table_def).map((k) => _table_def[k].label), [_table_def])
+    // console.log(_table_def)
+    return (
+        <div className="table-responsive">
+            <table className="table table-stripped">
+                <thead>
+                    <tr>
+                        {colnames.map((name) => (
+                            <th key={name}>{`${name}`}</th>
+                        ))}
+                    </tr>
+                </thead>
+
+                <TableBody data={data} table_def={_table_def} />
+            </table>
+        </div>
+    )
+}

package/src/Base/Components/index.js

@@ -0,0 +1,14 @@
+export * from './Attribute'
+export * from './CardCapsule'
+export * from './Col'
+export * from './ConfirmEdit'
+export * from './CopyButton'
+export * from './LargeCard'
+export * from './Link'
+export * from './MediumCard'
+export * from './MediumContent'
+export * from './MediumEditableContent'
+export * from './ProxyLink'
+export * from './Row'
+export * from './LiveEdit'
+export * from './Table'