@hrbolek/uoisfrontend-template 0.6.0

package/src/Base/Components/Link.jsx

@@ -0,0 +1,42 @@
+// import { URIRoot } from "../../uriroot";
+import { ProxyLink } from "./ProxyLink";
+
+const RegisterofLinks = {};
+export const registerLink = (__typename, Link) => {
+    const registeredLink = RegisterofLinks[__typename];
+    if (!registeredLink) {
+        RegisterofLinks[__typename] = Link;
+    } else {
+        // throw new Error(`Link for typename ${__typename} is already registered.`);
+        console.warn(`Link for typename ${__typename} is already registered.`);
+    }
+}
+
+export const GenericURIRoot = "/generic";
+export const LinkURI = GenericURIRoot + "/view/";
+export const VectorItemsURI = GenericURIRoot + "/list/";
+
+export const Link = ({ item, action="view", children, ...others }) => {
+    const SpecificLink = item?.__typename ? RegisterofLinks[item.__typename] : null;
+    if (SpecificLink && SpecificLink !== Link) {
+        // console.log('Using specific link for typename:', item.__typename);
+        return <SpecificLink item={item} action={action} {...others}>{children}</SpecificLink>;
+    }
+    
+    const label =
+        children || item?.fullname || item?.name || item?.id || "Missing";
+
+    const to = item?.__typename && item?.id
+        ? `${GenericURIRoot}/${item.__typename}/${action}/${item.id}`
+        : "#";
+
+    return <ProxyLink to={to} {...others}>{label}</ProxyLink>;
+};
+
+export const makeMutationURI = (linkURI, action, { withId = false } = {}) => {
+    const viewSegmentRe = /\/view(\/|$)/;
+    if (!viewSegmentRe.test(linkURI)) throw new Error(`LinkURI must contain '/view'. Got: ${linkURI}`);
+
+    const base = linkURI.replace(viewSegmentRe, `/${action}$1`).replace(/\/?$/, "/");
+    return withId ? `${base}:id` : base.replace(/\/$/, "");
+};

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
+      )}
+    />
+  );
+}