@hrbolek/uoisfrontend-template 0.6.0

package/src/Base/Helpers/index.js

@@ -0,0 +1,5 @@
+export * from "./AsyncStateIndicator"
+export * from "./generateQuery"
+export * from "./GQLEntityProvider"
+export * from "./NavigationHistoryProvider"
+export * from "./PlaceChild"

package/src/Base/Mutations/Create.jsx

@@ -0,0 +1,152 @@
+import { PermissionGate, usePermissionGateContext } from "../../../../dynamic/src/Hooks/useRoles"
+import { LinkURI, MediumEditableContent } from "../Components"
+import { useState } from "react"
+import { useCreateSession } from "../../../../dynamic/src/Hooks/useCreateSession"
+import { InsertAsyncAction } from "../Queries"
+import { AsyncStateIndicator } from "../../../../_template/src/Base/Helpers/AsyncStateIndicator"
+import { Dialog } from "../../../../_template/src/Base/FormControls/Dialog"
+import { ProxyLink } from "../../../../_template/src/Base/Components/ProxyLink"
+import { makeMutationURI } from "./helpers"
+import { Lock } from "react-bootstrap-icons"
+import { GeneralButton, GeneralDialog, GeneralLink } from "./General"
+
+
+export const CreateURI = makeMutationURI(LinkURI, "create", { withId: false });
+const ReadItemURI = `${LinkURI}:id`
+
+export const CreateLink = ({
+    uriPattern = CreateURI,
+    children,
+    ...props
+}) => (
+    <GeneralLink uriPattern={uriPattern} {...props}>
+        {children}
+    </GeneralLink>
+);
+
+
+const DefaultContent = MediumEditableContent
+
+export const CreateDialog = ({
+    title = "Nové oprávnění",
+    oklabel = "Ok",
+    cancellabel = "Zrušit",
+    DefaultContent: DefaultContent_ = DefaultContent,
+    item,
+    onOk,
+    onCancel,
+    children,
+    ...props
+}) => (
+    <GeneralDialog
+        title={title}
+        oklabel={oklabel}
+        cancellabel={cancellabel}
+        DefaultContent={DefaultContent_}
+        item={item}
+        onOk={onOk}
+        onCancel={onCancel}
+        {...props}
+    >
+        {children}
+    </GeneralDialog>
+);
+export const CreateButton = ({
+    mutationAsyncAction = InsertAsyncAction,
+    CreateDialog: CreateDialog_ = CreateDialog,
+    DefaultContent: DefaultContent_ = DefaultContent,
+    readItemURI = ReadItemURI,
+    uriPattern,          // pokud chceš allow override
+    children,
+    ...props
+}) => (
+    <GeneralButton
+        mutationAsyncAction={mutationAsyncAction}
+        Dialog={CreateDialog_}
+        DefaultContent={DefaultContent_}
+        uriPattern={uriPattern ?? readItemURI}
+        {...props}
+    >
+        {children}
+    </GeneralButton>
+);
+
+export const CreateBody = ({
+    children,
+    rbacitem,
+    mutationAsyncAction = InsertAsyncAction,
+    onOk,
+    onCancel,
+    DefaultContent: DefaultContent_ = DefaultContent,
+    readItemURI = ReadItemURI,
+    oneOfRoles = ["superadmin"],
+    mode = "absolute",
+    ...props
+}) => {
+    return (
+        <PermissionGate oneOfRoles={oneOfRoles} mode={mode} item={rbacitem}>
+            <CreateBodyBody
+                children={children}
+                mutationAsyncAction={mutationAsyncAction}
+                onOk={onOk} 
+                onCancel={onCancel}
+                DefaultContent={DefaultContent_}
+                readItemURI={readItemURI}
+                {...props}
+            />
+        </PermissionGate>
+    );
+};
+
+const CreateBodyBody = ({
+    children,
+    mutationAsyncAction = InsertAsyncAction,
+    onOk,
+    onCancel,
+    DefaultContent: DefaultContent_ = DefaultContent,
+    readItemURI = ReadItemURI,
+    ...props
+}) => {
+    const session = useCreateSession({
+        readUri: readItemURI,
+        mutationAsyncAction,
+        onAfterConfirm: async (result, draft) => {
+            if (onOk) return onOk(result, draft);
+            // když onOk není, session udělá default navigaci
+        },
+        onAfterCancel: async () => {
+            if (onCancel) return onCancel();
+            // když onCancel není, session udělá default navigate(-1)
+        }
+    });
+
+    return (
+        <>
+            <DefaultContent_
+                item={session.draft}
+                onChange={session.onChange}
+                onBlur={session.onBlur}
+                {...props}
+            >
+                <AsyncStateIndicator error={session.error} loading={session.saving} />
+                {children}
+
+                <button
+                    className="btn btn-warning form-control"
+                    onClick={session.handleCancel}
+                // disabled={!session.dirty || session.saving}
+                >
+                    Zrušit změny
+                </button>
+
+                <button
+                    className="btn btn-primary form-control"
+                    onClick={session.handleConfirm}
+                // disabled={!session.dirty || session.saving}
+                >
+                    Uložit změny
+                </button>
+            </DefaultContent_>
+        </>
+    );
+};

package/src/Base/Mutations/Delete.jsx

@@ -0,0 +1,237 @@
+import { useNavigate } from "react-router-dom";
+import { useGQLEntityContext } from "../../../../_template/src/Base/Helpers/GQLEntityProvider";
+import { PermissionGate, usePermissionGateContext } from "../../../../dynamic/src/Hooks/useRoles"
+import { useEditAction } from "../../../../dynamic/src/Hooks/useEditAction";
+import { LinkURI, MediumContent } from "../Components";
+import { DeleteAsyncAction } from "../Queries";
+import { AsyncStateIndicator } from "../../../../_template/src/Base/Helpers/AsyncStateIndicator";
+import { useState } from "react";
+import { useCallback } from "react";
+import { useMemo } from "react";
+import { makeMutationURI } from "./helpers";
+import { GeneralButton, GeneralDialog, GeneralLink } from "./General";
+
+
+export const DeleteURI = makeMutationURI(LinkURI, "delete", { withId: true });
+const VectorItemsURI = makeMutationURI(LinkURI, "list", { withId: false });
+const DefaultContent = MediumContent
+
+export const DeleteLink = ({
+    item,
+    preserveHash = true,
+    preserveSearch = true,
+    oneOfRoles = ["superadmin"],
+    mode = "absolute",
+    uriPattern = DeleteURI,
+    children,
+    ...props
+}) => {
+    const to = useMemo(() => {
+        const id = item?.id ?? "";
+        return uriPattern.replace(":id", String(id));
+    }, [uriPattern, item?.id]);
+
+    return (
+        <GeneralLink
+            rbacitem={item}
+            oneOfRoles={oneOfRoles}
+            mode={mode}
+            uriPattern={to}
+            preserveHash={preserveHash}
+            preserveSearch={preserveSearch}
+            {...props}
+        >
+            {children}
+        </GeneralLink>
+    );
+};
+
+
+export const DeleteButton = ({
+    children,
+    item,
+    mutationAsyncAction = DeleteAsyncAction,
+    oneOfRoles = ["superadmin"],
+    mode = "absolute",
+    vectorItemsURI = VectorItemsURI,
+    Dialog, // možnost override
+    onOk,
+    ...props
+}) => {
+    return (
+        <GeneralButton
+            rbacitem={item}
+            oneOfRoles={oneOfRoles}
+            mode={mode}
+            mutationAsyncAction={mutationAsyncAction}
+            Dialog={Dialog}              // default dáme níže
+            item={item}
+            uriPattern={vectorItemsURI}  // po úspěchu přesměruj na list
+            onOk={onOk}
+            {...props}
+        >
+            {children || "Odstranit"}
+        </GeneralButton>
+    );
+};
+
+export const DeleteDialog = ({
+    title = "Odstranit",
+    item,
+    oklabel = "Odstranit",
+    cancellabel = "Zrušit",
+    onOk,
+    onCancel,
+    DefaultContent: DefaultContent_ = DefaultContent,
+}) => {
+    // GeneralDialog očekává "item" + bude volat onOk(draft)
+    // Draft tady = item, nemění se.
+    const [draft] = useState(item);
+
+    const handleOk_ = useCallback(async () => {
+        // zavoláme onOk s itemem (draftem)
+        return onOk?.(draft);
+    }, [onOk, draft]);
+
+    return (
+        <GeneralDialog
+            title={title}
+            oklabel={oklabel}
+            cancellabel={cancellabel}
+            item={draft}
+            onOk={handleOk_}
+            onCancel={onCancel}
+            // DefaultContent u delete je jen "read-only"
+            DefaultContent={({ item }) => (
+                <>
+                    {/* <AsyncStateIndicator error={error} loading={saving} text={"Odstraňuji"} /> */}
+                    <DefaultContent_ item={item} />
+                </>
+            )}
+        />
+    );
+};
+
+export const DeleteDialogContext = ({
+    title = "Odstranit",
+
+    oklabel = "Odstranit",
+    cancellabel = "Zrušit",
+    onOk: handleOk,
+    onCancel: handleCancel,
+    mutationAsyncAction = DeleteAsyncAction,
+    vectorItemsURI = VectorItemsURI,
+    DefaultContent: DefaultContent_ = DefaultContent
+}) => {
+    const {
+        item,
+        // onChange: contextOnChange 
+    } = useGQLEntityContext()
+
+    return (
+        <DeleteDialog
+            title={title}
+            item={item}
+            oklabel={oklabel}
+            cancellabel={cancellabel}
+            onCancel={handleCancel}
+            onOk={handleOk}
+            vectorItemsURI={vectorItemsURI}
+            mutationAsyncAction={mutationAsyncAction}
+        >
+            {/* <AsyncStateIndicator error={error} loading={saving} text={"Odstraňuji"} /> */}
+            <DefaultContent_ item={item} />
+        </DeleteDialog>
+    )
+}
+
+export const DeleteBody = ({
+    children,
+    mutationAsyncAction = DeleteAsyncAction,
+    DefaultContent: DefaultContent_ = DefaultContent,
+    oneOfRoles = ["superadmin"],
+    mode = "absolute",
+    vectorItemsURI = VectorItemsURI,
+}) => {
+    return (
+        <PermissionGate oneOfRoles={oneOfRoles} mode={mode}>
+            <DeleteBodyBody
+                mutationAsyncAction={mutationAsyncAction}
+                DefaultContent={DefaultContent_}
+                vectorItemsURI={vectorItemsURI}
+                children={children}
+            />
+        </PermissionGate>
+    )
+}
+
+export const DeleteBodyBody = ({
+    children,
+    mutationAsyncAction = DeleteAsyncAction,
+    DefaultContent: DefaultContent_ = DefaultContent,
+    vectorItemsURI = VectorItemsURI,
+}) => {
+    const { allowed } = usePermissionGateContext()
+    const navigate = useNavigate();
+    const { item } = useGQLEntityContext()
+
+    const {
+        loading: saving,
+        error: savingError,
+        commitNow
+    } = useEditAction(mutationAsyncAction, item, {
+        mode: "confirm",
+        // onCommit: contextOnChange
+    })
+
+    const handleConfirm = useCallback(async () => {
+        const result = await commitNow(item)
+        console.log("handleConfirm", result)
+        if (result && navigate) {
+            navigate(vectorItemsURI, { replace: true })
+        }
+    }, [navigate, commitNow])
+
+    const handleCancel = () => {
+        navigate(-1)
+    }
+
+    if (!item) return null
+    if (allowed) {
+        return (
+            <>
+                <DefaultContent_ item={item} >
+                    <AsyncStateIndicator error={savingError} loading={saving} text={"Odstraňuji"} />
+                    {children}
+                    <button
+                        className="btn btn-warning form-control"
+                        onClick={handleCancel}
+                        disabled={saving}
+                    >
+                        Zrušit
+                    </button>
+                    <button
+                        className="btn btn-primary form-control"
+                        onClick={handleConfirm}
+                        disabled={saving}
+                    >
+                        Smazat
+                    </button>
+
+                </DefaultContent_>
+            </>
+        )
+    } else {
+        return (
+            <div>
+                <button
+                    className="btn btn-warning form-control"
+                    onClick={handleCancel}
+                    disabled={saving}
+                >
+                    Nemáte oprávnění
+                </button>
+            </div>
+        )
+    }
+}

package/src/Base/Mutations/General.jsx

@@ -0,0 +1,241 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useCallback } from "react";
+import { useState } from "react";
+
+import { Lock } from "react-bootstrap-icons"
+
+import { useAsyncThunkAction } from "../../../../dynamic/src/Hooks";
+import { MediumEditableContent } from "../Components";
+import { Dialog } from "../FormControls/Dialog";
+import { PermissionGate, usePermissionGateContext } from "../../../../dynamic/src/Hooks/useRoles";
+import { AsyncStateIndicator } from "../Helpers/AsyncStateIndicator";
+import { ProxyLink } from "../Components/ProxyLink";
+
+const DefaultContent = (props) => <MediumEditableContent {...props} />
+// const DummyAsyncAction = (vars, gqlClient) => async (dispatch, getState) => {}
+const safeId = () => (
+    globalThis.crypto?.randomUUID?.() ??
+  `${Date.now()}-${Math.random().toString(16).slice(2)}`);
+
+
+export const GeneralLink = ({
+    rbacitem = {},
+    oneOfRoles=["superadmin"],
+    mode="absolute",
+    uriPattern,
+    children,
+    ...props
+}) => (
+    <PermissionGate oneOfRoles={oneOfRoles} mode={mode} item={rbacitem}>
+        <GeneralLinkBody
+            uriPattern={uriPattern}
+            children={children}
+            {...props}
+        />
+    </PermissionGate>
+);
+
+const GeneralLinkBody = ({
+    uriPattern,
+    children,
+    ...props
+}) => {
+    const { allowed } = usePermissionGateContext()
+    if (allowed) {
+        return (
+            <ProxyLink to={uriPattern} {...props}>{children || "Vytvořit"}</ProxyLink>
+        );
+    } else {
+        return (
+            <ProxyLink 
+                to={uriPattern} 
+                disabled={true}
+                {...props}
+            >
+                <Lock /> {children || "Vytvořit"}
+            </ProxyLink>
+        )
+    }
+}
+
+export const GeneralButton = ({
+    children,
+    rbacitem,
+    mutationAsyncAction,
+    oneOfRoles=["superadmin"],
+    mode="absolute",
+    Dialog: Dialog_,
+    DefaultContent: DefaultContent_=DefaultContent,
+    onOk: handleOk,
+    onCancel: handleCancel,
+    uriPattern,
+    item,
+    ...props 
+}) => {
+    if (typeof mutationAsyncAction !== "function")
+        throw Error("GeneralButton.mutationAsyncAction cannot be undefined")
+
+    return (
+        <PermissionGate oneOfRoles={oneOfRoles} mode={mode} item={rbacitem}>
+            {/* {handleOk && <>O</>} */}
+            {/* {JSON.stringify(item)} */}
+            <GeneralButtonBody 
+                children={children}
+                mutationAsyncAction={mutationAsyncAction}
+                Dialog={Dialog_}
+                DefaultContent={DefaultContent_}
+                item={item}
+                uriPattern={uriPattern}
+                rbacitem={rbacitem}
+                onOk={handleOk}
+                onCancel={handleCancel}
+                {...props}
+            />
+        </PermissionGate>
+    )
+}
+
+export const GeneralDialog = ({
+    title = "Nov(é/ý/á)",
+    oklabel = "Ok",
+    cancellabel = "Zrušit",
+    onOk: handleOk,
+    onCancel: handleCancel,
+    DefaultContent: DefaultContent_ = DefaultContent,
+    item,
+    children,
+    ...props
+}) => {
+
+    const [draftItem, setDraftItem] = useState(item);
+
+    useEffect(() => {
+        setDraftItem((prev) => {
+            console.log("GeneralDialog.useEffect", item)
+            const base = item ?? {};
+            return { ...base, id: base.id ?? safeId() };
+        })
+        
+    }, [item, setDraftItem])
+
+
+    const handleChange = useCallback((e) => {
+        const fieldId = e?.target?.id;
+        const value = e?.target?.value;
+        if (!fieldId) {
+            console.warn("GeneralDialog.handleChange fired event has no e?.target?.id", e)
+            return;
+        }
+        setDraftItem(prev => ({ ...(prev || {}), [fieldId]: value }))
+
+    }, [setDraftItem])
+
+    const handleBlur = (e) => {
+        handleChange(e)
+    }
+
+    const handleOk_ = () => handleOk?.(draftItem);
+
+    return (
+        <Dialog
+            title={title}
+            oklabel={oklabel}
+            cancellabel={cancellabel}
+            onCancel={handleCancel}
+            onOk={handleOk_}
+            {...props}
+        >
+            <DefaultContent_ item={draftItem} onChange={handleChange} onBlur={handleBlur}>
+                {children}
+                
+            </DefaultContent_>
+                {/* <hr/>
+                item: {JSON.stringify(item)}
+                <hr/>
+                draftItem: {JSON.stringify(draftItem)} */}
+        </Dialog>
+    );
+};
+
+
+export const GeneralButtonBody = ({ 
+    children,
+    rbacitem,
+    mutationAsyncAction,
+    Dialog: Dialog_,
+    DefaultContent: DefaultContent_=DefaultContent,
+    uriPattern,
+    item,
+    onOk: handleOk,
+    onCancel: handleCancel,
+    ...props 
+}) => {
+
+    const { allowed } = usePermissionGateContext()
+
+    const [visible, setVisible] = useState(false)
+    const handleShow = useCallback(() => setVisible(true), [])
+    const handleHide = useCallback(() => setVisible(false), [])
+
+    const {
+        loading: saving,
+        error,
+        // entity,
+        run
+    } = useAsyncThunkAction(mutationAsyncAction, item, { deferred: true });
+    
+    const navigate = useNavigate()
+
+    const handleOk_ = useCallback(async (item) => {
+        const result = await run(item)
+        if (handleOk) {
+            handleOk(item)
+        } else if (uriPattern) {
+            navigate(`${uriPattern}`.replace(':id', item.id))
+        }
+        handleHide()
+    }, [handleHide, handleOk, navigate, uriPattern, run])
+
+    const handleCancel_ = useCallback((item) => {
+        if (handleCancel) {
+            handleCancel(item)
+        }
+        handleHide()
+    }, [handleHide, handleCancel])
+
+    if (allowed) {
+        return (
+            <>
+                <AsyncStateIndicator error={error} loading={saving} text={"Ukládám"} />
+                {/* {JSON.stringify(item?.id)} */}
+                {/* {props?.onOk && <>O</>} */}
+                <button {...props} onClick={handleShow}>{children || "Vytvořit nový"}</button>
+                {visible && Dialog_ &&(
+                    <Dialog_
+                        onOk={handleOk_}
+                        onCancel={handleCancel_}
+                        mutationAsyncAction={mutationAsyncAction}
+                        uriPattern={uriPattern}
+                        item={item}
+                    />
+                )}
+                {visible && !Dialog_ && (
+                    <Dialog
+                        onOk={handleOk_}
+                        onCancel={handleCancel_}
+                        mutationAsyncAction={mutationAsyncAction}
+                        DefaultContent={DefaultContent_}
+                        uriPattern={uriPattern}
+                        item={item}
+                    />
+                )}
+            </>
+        )    
+    } else {
+        return (
+            <button {...props} disabled><Lock /> {children || "Vytvořit nový"}</button>
+        )
+
+    }
+}

package/src/Base/Mutations/InteractiveMutations.jsx

@@ -0,0 +1,32 @@
+import { CardCapsule } from "../Components"
+import { VectorItemsURI } from "../Components"
+import { CreateButton, CreateLink } from "./Create"
+import { UpdateButton, UpdateLink } from "./Update"
+import { ProxyLink } from "../../../../_template/src/Base/Components/ProxyLink"
+import { DeleteButton } from "./Delete"
+
+export const PageLink = ({ children, preserveHash = true, preserveSearch = true, ...props }) => {
+    return (
+        <ProxyLink
+            to={VectorItemsURI}
+            preserveHash={preserveHash}
+            preserveSearch={preserveSearch}
+            {...props}
+        >
+            {children}
+        </ProxyLink>
+    );
+};
+
+export const InteractiveMutations = ({ item }) => {
+    return (
+        <CardCapsule item={item} title="Nástroje">
+            <PageLink className="btn btn-outline-success">Stránka</PageLink>
+            <UpdateLink className="btn btn-outline-success" item={item}>Upravit</UpdateLink>
+            <UpdateButton className="btn btn-outline-success" item={item}>Upravit Dialog</UpdateButton>
+            <CreateButton className="btn btn-outline-success">Vytvořit nový</CreateButton>
+            <DeleteButton className="btn btn-outline-danger" >Odstranit</DeleteButton>
+            
+        </CardCapsule>
+    )
+}