@compill/admin 1.0.100 → 1.0.102

package/dist/lib/json/buttons/ConfirmationActionButton.jsx

@@ -0,0 +1,37 @@
+import { useApiMutation, useInvalidateParentMutation, useMutate } from "@compill/api";
+import { ModalLoadingOverlay } from "@compill/components";
+import { Button, Icon, Modal, ModalBody, ModalFooter, ModalHeader } from "@valerya/ui";
+export function ConfirmationActionButton({ label, buttonProps, icon, queryKey, queryFn, successMsg, errorMsg, invalidateParent }) {
+    const mutation = invalidateParent ? useInvalidateParentMutation(queryFn, queryKey) : useApiMutation(queryFn, queryKey);
+    const mutate = useMutate(mutation, {
+        successMsg,
+        errorMsg
+    });
+    return (<Button display="flex" alignItems="center" gap="3" {...buttonProps} onClick={mutate} disabled={mutation.isLoading}>
+            {icon && <Icon path={icon}/>}
+            {label}
+        </Button>);
+}
+export function ConfirmationDialog({ title, text, positiveButtonLabel, negativeButtonLabel, queryKey, queryFn, successMsg, errorMsg, invalidateParent, show, onClose }) {
+    const mutation = invalidateParent ? useInvalidateParentMutation(queryFn, queryKey) : useApiMutation(queryFn, queryKey);
+    const mutate = useMutate(mutation, {
+        successMsg,
+        errorMsg
+    });
+    return (<Modal show={show} onClose={onClose}>
+            <ModalHeader>
+                <div textSize="xl" fontWeight="600">{title}</div>
+            </ModalHeader>
+
+            <ModalBody>
+                {text}
+            </ModalBody>
+
+            <ModalFooter dflex gap="3" alignItems="center" placeContent="end">
+                <Button>{negativeButtonLabel || "Cancel"}</Button>
+                <Button onClick={mutate}>{positiveButtonLabel || "OK"}</Button>
+            </ModalFooter>
+
+            {mutation.isLoading && <ModalLoadingOverlay />}
+        </Modal>);
+}

package/{src → dist}/lib/json/dialog/DialogRenderer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EditItemDialogConfig } from "../types/EditItemDialog";
 import { QueryWrapperDialogConfig } from "../types/QueryWrapperDialog";
 import { MultiQueryWrapperDialogConfig } from "../types/MultiQueryWrapperDialog";

package/dist/lib/json/dialog/DialogRenderer.jsx

@@ -0,0 +1,13 @@
+import { ItemEditDialog } from "./ItemEditDialog";
+import { QueryWrapperDialog } from "./QueryWrapperDialog";
+import { MultiQueryWrapperDialog } from "./MultiQueryWrapperDialog";
+export function DialogRenderer({ config, onClose, invalidateQueryKey, queryId }) {
+    const { type, ...props } = config;
+    if (config.type === "dialog")
+        return <ItemEditDialog {...props} queryId={queryId} invalidateQueryKey={invalidateQueryKey} show onClose={onClose}/>;
+    if (config.type === "query")
+        return <QueryWrapperDialog {...props} queryId={queryId} invalidateQueryKey={invalidateQueryKey} onClose={onClose}/>;
+    if (config.type === "multiQuery")
+        return <MultiQueryWrapperDialog {...props} queryId={queryId} invalidateQueryKey={invalidateQueryKey} onClose={onClose}/>;
+    return null;
+}

package/dist/lib/json/dialog/ItemDeleteDialog.jsx

@@ -0,0 +1,36 @@
+import { useApiMutation, useInvalidateParentMutation, useMutate } from "@compill/api";
+import { ModalLoadingOverlay } from "@compill/components";
+import { runIfFn } from "@soperio/react";
+import { Button, Modal } from "@valerya/ui";
+import React from "react";
+export function ItemDeleteDialog({ title, actionButtonLabel, closeActionButtonLabel = "Cancel", itemLabel, queryId = "", api, apiFn, invalidateQueriesOnSuccess = true, invalidateQueryKey, size = "lg", md_boxSizing, msg, show, onClose, onSuccess, ...props }) {
+    const fn = apiFn ? api[apiFn] : api.delete;
+    const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(fn, invalidateQueryKey ?? api.queryKey)
+        : useApiMutation(fn, api.queryKey);
+    const mutate = useMutate(mutation, { onSuccess: () => { onClose?.(); onSuccess?.(); } });
+    const handleDelete = React.useCallback(() => mutate(queryId), [mutate, queryId]);
+    return (<Modal size={size} show={show} onClose={onClose} scheme="danger" variant="glass" transition 
+    // closeOnMaskClick={false}
+    {...props}>
+            <Modal.Header>
+                {title || `Delete ${itemLabel}`}
+            </Modal.Header>
+
+
+            <Modal.Body pb="6">
+                {!msg && `Do you really want to delete ${itemLabel}?`}
+                {msg && runIfFn(msg, itemLabel)}
+            </Modal.Body>
+
+            <Modal.Footer dflex placeContent="end" spaceX="3">
+                <Button disabled={mutation.isPending} onClick={onClose} variant="borderless" scheme="dark" me="2">
+                    {closeActionButtonLabel}
+                </Button>
+                <Button scheme="danger" disabled={mutation.isPending} onClick={handleDelete}>
+                    {actionButtonLabel || "Delete"}
+                </Button>
+            </Modal.Footer>
+
+            {mutation.isPending && <ModalLoadingOverlay />}
+        </Modal>);
+}

package/dist/lib/json/dialog/ItemEditDialog.jsx

@@ -0,0 +1,124 @@
+import { useApiMutation, useApiQuery, useInvalidateParentMutation } from "@compill/api";
+import { ModalLoadingOverlay, QueryLoadingState, RetryOnError } from "@compill/components";
+import { FormRenderer } from "@compill/form";
+import { isFunction } from "@soperio/react";
+import { Button, Modal } from "@valerya/ui";
+import { Form, Formik } from "formik";
+import React from "react";
+import { toast } from "react-toastify";
+const defaultErrorMsg = "Oops, something went wrong...";
+function nonNullValues(data) {
+    if (data) {
+        const nonNullData = { ...data };
+        for (const key in data)
+            nonNullData[key] = nonNullData[key] ?? "";
+        return nonNullData;
+    }
+    return data;
+}
+export function ItemEditDialog({ initialValues, itemLabel, queryId = "", api, queryFetchOptions, querySaveOptions, onSuccess, onFetchError, fetchErrorMsg = defaultErrorMsg, onSaveError, saveErrorMsg = defaultErrorMsg, fetchToFormData, formToQueryData, invalidateQueriesOnSuccess = true, invalidateQueryKey, retryText = "Retry", cancelLabel = "Cancel", saveLabel, size = "lg", title, form, show, onClose, formikProps, ...props }) {
+    const { isInitialLoading, isFetching, data, isError, error /*, error*/, refetch } = useApiQuery(api.queryKey, api.get, queryId, {
+        enabled: !( /*queryId == 0 || */queryId == "" || queryId == null || queryId == undefined), // means than this query is only enabled if the id is defined
+        onError: onFetchError,
+        ...queryFetchOptions
+    });
+    // const [activeTab, setActiveTab] = React.useState(form && Array.isArray(form) ? form[0].key : "");
+    // const [showTab, setShowTab] = React.useState(true);
+    const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(api.upsert, invalidateQueryKey ?? api.queryKey, querySaveOptions)
+        : useApiMutation(api.upsert, api.queryKey, queryId, querySaveOptions);
+    const retry = React.useCallback(() => refetch(), [refetch]);
+    const saveItem = React.useCallback(async (item, actions) => {
+        // Clear mutation error if any
+        mutation.reset();
+        const formItem = formToQueryData ? formToQueryData(item) : { ...item };
+        await mutation.mutateAsync(formItem)
+            .then((response) => {
+            if (onSuccess)
+                onSuccess(formItem, response);
+            else
+                toast.success(`${title ? title(formItem) : formItem.name ?? formItem.title} ${queryId ? "saved" : "created"}`);
+            // closing delete modal
+            onClose?.();
+        })
+            .catch(error => {
+            console.error("on error", error);
+            if (onSaveError)
+                onSaveError(item);
+            else
+                toast.error(`Couldn't save ${title ? title(formItem) : formItem.name ?? formItem.title}`);
+            actions.setSubmitting(false);
+        });
+    }, [mutation, formToQueryData, onSuccess, onSaveError, onClose]);
+    // const switchTab = React.useCallback((tab: string) =>
+    // {
+    // setActiveTab(tab);
+    // setShowTab(false);
+    // setTimeout(function ()
+    // {
+    //     setActiveTab(tab);
+    //     setShowTab(true);
+    // }, 150);
+    // }, [setActiveTab])
+    return (<Modal size={size} show={show} onClose={onClose} scheme="light" transition 
+    // closeOnMaskClick={false}
+    {...props}>
+            <Modal.Header>
+                {!isInitialLoading && queryId && `Edit ${title ? title(data) : data?.["name"] ?? data?.["title"] ?? data?.["name"] ?? ""}`}
+
+                {!queryId && `Create new ${itemLabel ?? "item"}`}
+
+                {Array.isArray(form) && (<></>
+        // <ul className="nav nav-bold nav-pills">
+        //     {form.map(item =>
+        //         <li key={item.key} className="nav-item cursor-pointer bg-hover-light rounded" onClick={() => switchTab(item.key)}>
+        //             <span className={clsx("nav-link", activeTab === item.key && "active")} data-toggle="tab">{item.label}</span>
+        //         </li>
+        //     )}
+        // </ul>
+        )}
+                {/* <ModalCloseButton /> */}
+            </Modal.Header>
+
+            {isInitialLoading && (<Modal.Body>
+                    <QueryLoadingState minW="72"/>
+                </Modal.Body>)}
+
+            {isError && (<Modal.Body>
+                    <RetryOnError label={`${fetchErrorMsg} ${error}`} onClick={retry}/>
+                </Modal.Body>)}
+
+            {!isInitialLoading && !isError &&
+            (<>
+                        <Formik 
+            // initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(data) ?? initialValues(data) ?? {}}
+            initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(initialValues(data)) ?? {}} onSubmit={saveItem} {...formikProps}>
+                            {({ setFieldValue, dirty, handleSubmit, isValid, values }) => (<>
+                                    <Modal.Body pb="6">
+                                        <Form>
+                                            {React.isValidElement(form) && form}
+
+                                            {Array.isArray(form) && <FormRenderer form={form}/>}
+                                            {isFunction(form) && <FormRenderer form={form(data ?? values)}/>}
+                                            {/* {Array.isArray(form) && form.map(item =>
+                        <div key={item.key} className={clsx("tab-pane fade", showTab && "show", activeTab === item.key && "active")}>
+                            {item.form}
+                        </div>
+                    )} */}
+                                        </Form>
+                                    </Modal.Body>
+
+                                    <Modal.Footer dflex placeContent="end" spaceX="3">
+                                        <Button disabled={mutation.isLoading} onClick={onClose} variant="borderless" me="2">
+                                            {cancelLabel}
+                                        </Button>
+                                        <Button type="submit" disabled={!dirty || mutation.isLoading /* || !isValid*/} onClick={() => handleSubmit()}>
+                                            {saveLabel ? saveLabel : (queryId ? "Update" : "Create")}
+                                        </Button>
+                                    </Modal.Footer>
+                                </>)}
+                        </Formik>
+                    </>)}
+
+            {mutation.isLoading && <ModalLoadingOverlay />}
+        </Modal>);
+}

package/{src → dist}/lib/json/dialog/MultiQueryWrapperDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MultiQueryWrapperDialogConfig } from "../types/MultiQueryWrapperDialog";
 export type MultiQueryWrapperDialogProps = Omit<MultiQueryWrapperDialogConfig, "type"> & {
     queryId?: string;

package/dist/lib/json/dialog/MultiQueryWrapperDialog.jsx

@@ -0,0 +1,22 @@
+import { useApiQueries } from "@compill/api";
+import React from "react";
+import { ItemEditDialog } from "./ItemEditDialog";
+export function MultiQueryWrapperDialog({ queries, config, onClose, queryId, invalidateQueryKey }) {
+    const { data, isFetching, isError } = useApiQueries(queries.map(q => ({
+        queryKey: q.api.queryKey,
+        queryFn: q.fn == "get" ? q.api.get : q.api.getAll,
+        queryOptions: {
+            cacheTime: q.cache === false ? 0 : undefined,
+            staleTime: q.cache === false ? 0 : undefined
+        }
+    })));
+    const transformedData = React.useMemo(() => {
+        return data?.map((d, index) => queries[index]?.transformFn ? queries[index]?.transformFn?.(d) : d);
+    }, [data, queries]);
+    // TODO This is not really good
+    // So instead, add a isPreloading and isPreloadingError to ItemEditDialog to handle the cases
+    // if (isFetching)
+    //     return null
+    // @ts-ignore
+    return <ItemEditDialog isPreloading={isFetching} {...config(...transformedData)} queryId={queryId} invalidateQueryKey={invalidateQueryKey} show onClose={onClose}/>;
+}

package/{src → dist}/lib/json/dialog/QueryWrapperDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CRUDAPI, CRUD_MODEL } from "@compill/api";
 import { QueryWrapperDialogConfig } from "../types/QueryWrapperDialog";
 import { EditItemDialogConfig } from "../types/EditItemDialog";

package/dist/lib/json/dialog/QueryWrapperDialog.jsx

@@ -0,0 +1,19 @@
+import { useApiQuery } from "@compill/api";
+import React from "react";
+import { ItemEditDialog } from "./ItemEditDialog";
+export function QueryWrapperDialog({ api, fn, transformFn, config, onClose, queryId, invalidateQueryKey }) {
+    const { data, isFetching } = useApiQuery(api.queryKey, fn === "get" || fn === "getTransformed" ? api.get : api.getAll, undefined, { retryOnMount: false, refetchOnMount: false, refetchOnWindowFocus: false });
+    const transformedData = React.useMemo(() => {
+        if (data && (fn === "getTransformed" || fn === "getAllTransformed")) {
+            if (!transformFn)
+                console.warn(`QueryWrapperDialog: you forgot to pass transformFn as parameter for fn ${fn}`);
+            // @ts-ignore
+            return transformFn?.(data);
+        }
+        return data;
+    }, [data, fn, transformFn]);
+    if (isFetching)
+        return null;
+    // @ts-ignore
+    return <ItemEditDialog {...config(transformedData)} queryId={queryId} invalidateQueryKey={invalidateQueryKey} show onClose={onClose}/>;
+}

package/{src → dist}/lib/json/table/RefreshButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function RefreshButton({ queryKey }: {
     queryKey: string[];
 }): JSX.Element;

package/dist/lib/json/table/RefreshButton.jsx

@@ -0,0 +1,12 @@
+import { useInvalidateQuery } from "@compill/api";
+import { mdiRefresh } from "@mdi/js";
+import { Icon } from "@valerya/ui";
+import { ButtonBarButton } from "../../layout/ButtonBar";
+import { useHotkeys } from "react-hotkeys-hook";
+export function RefreshButton({ queryKey }) {
+    const invalidate = useInvalidateQuery(queryKey);
+    useHotkeys('ctrl+r', () => invalidate(), { preventDefault: true }, [invalidate]);
+    return (<ButtonBarButton scheme="dark" size="sm" aspectRatio="square" variant="borderless" onClick={invalidate}>
+            <Icon path={mdiRefresh}/>
+        </ButtonBarButton>);
+}

package/{src → dist}/lib/json/table/TableRowActionsView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TableRowAction } from "../types/TableView";
 import { API } from "@compill/admin-api";
 interface TableRowActionViewProps {

package/dist/lib/json/table/TableRowActionsView.jsx

@@ -0,0 +1,45 @@
+import { mdiDelete, mdiEye, mdiOpenInNew, mdiPencil } from "@mdi/js";
+import { Icon } from "@valerya/ui";
+import { TableRowPublishPostButton } from "./TableRowPublishPostButton";
+import React from "react";
+import { TableRowActionButton } from "@compill/admin";
+import { runIfFn } from "@soperio/react";
+export function TableRowActionsView({ row, onAction, rowActions, api, queryKey }) {
+    const item = row.original;
+    return (<div dflex w="full" alignItems="stretch" placeContent="end" h="full">
+            {runIfFn(rowActions, item)?.map((action, index) => (<React.Fragment key={index}>
+                            {action.type === "publish" && <TableRowPublishPostButton id={item.id} api={action.api ?? api} status={item.status} invalidateQueryKey={queryKey}/>}
+
+                            {action.type == "custom" && <>{action.component(item, queryKey, action.icon, action.label)}</>}
+
+                            {!["publish", "custom"].includes(action.type) &&
+                (<ActionButton onClick={() => onAction(action, item)} scheme={schemes[action.type]}>
+                                        <Icon path={icons[action.type]} size="sm"/>
+                                    </ActionButton>)}
+                        </React.Fragment>))}
+        </div>);
+}
+function ActionButton({ onClick, ...props }) {
+    const handleClick = React.useCallback((event) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        onClick?.(event);
+    }, [onClick]);
+    return (<TableRowActionButton onClick={handleClick} {...props}/>);
+}
+const icons = {
+    "link": mdiOpenInNew,
+    "view": mdiEye,
+    "edit": mdiPencil,
+    "delete": mdiDelete,
+    "publish": mdiDelete,
+    "custom": ""
+};
+const schemes = {
+    "link": "dark",
+    "view": "dark",
+    "edit": "dark",
+    "delete": "dark",
+    "publish": "dark",
+    "custom": "dark"
+};

package/{src → dist}/lib/json/table/TableRowPublishPostButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from "@valerya/ui";
 import { API } from "@compill/admin-api";
 export declare function TableRowPublishPostButton({ id, api, status, invalidateQueryKey, ...props }: {

package/dist/lib/json/table/TableRowPublishPostButton.jsx

@@ -0,0 +1,21 @@
+import { Icon } from "@valerya/ui";
+import { mdiPublish, mdiPublishOff } from "@mdi/js";
+import { Button } from "@valerya/ui";
+import React from "react";
+import { useInvalidateParentMutation } from "@compill/api";
+import { toast } from "react-toastify";
+export function TableRowPublishPostButton({ id, api, status, invalidateQueryKey, ...props }) {
+    const isDraft = status == "draft";
+    const mutation = useInvalidateParentMutation(isDraft ? api.publish : api.unpublish, invalidateQueryKey ?? api.queryKey, { networkMode: "always" });
+    const publish = React.useCallback((event) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        mutation.reset();
+        mutation.mutateAsync(id)
+            .then(() => toast.success(isDraft ? "Published!" : "Unpublished!"))
+            .catch(error => toast.error(`Error: ${error}`));
+    }, [mutation, id]);
+    return (<Button variant="borderless" corners="square" scheme="dark" onClick={publish} {...props}>
+            <Icon path={isDraft ? mdiPublish : mdiPublishOff} size="sm"/>
+        </Button>);
+}

package/{src → dist}/lib/json/table/TableView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SoperioComponent } from "@soperio/react";
 import { TableViewConfig } from "../types/TableView";
 export declare function TableView({ queryField, title, subtitle, screen, ...props }: Omit<TableViewConfig, "type"> & SoperioComponent): JSX.Element;

package/dist/lib/json/table/TableView.jsx

@@ -0,0 +1,100 @@
+import { Table, useTableContext } from "@compill/table";
+import { isFunction, runIfFn } from "@soperio/react";
+import React from "react";
+import { useParams } from "react-router-dom";
+import { InvalidateButton } from "../../buttons/InvalidateButton";
+import { PageContainer } from "../../page/PageContainer";
+import { TableContainer } from "../../table/TableContainer";
+import { TableCreateButton } from "../../table/TableCreateButton";
+import { TableFilterButton } from "../../table/TableFilterButton";
+import { TableTopBar } from "../../table/TableTopBar";
+import { ButtonBar } from "../../layout/ButtonBar";
+import { TableFilters } from "../../table/TableFilters";
+import { TableMassActions } from "../../table/TableMassActions";
+import { DialogRenderer } from "../dialog/DialogRenderer";
+import { RefreshButton } from "./RefreshButton";
+import { TableViewProvider, useTableViewContext } from "./TableViewContext";
+import { useTableProps } from "./useTableProps";
+function useId(queryField) {
+    const params = useParams();
+    if (queryField === undefined)
+        return undefined;
+    const { [queryField]: id } = params;
+    return id;
+}
+export function TableView({ queryField, title, subtitle, screen, ...props }) {
+    const id = useId(queryField);
+    const _screen = runIfFn(screen, id);
+    return (<PageContainer bgColor="white" {...props}>
+            <TableContainer columns={_screen.table.columns} initialVisibleColumns={_screen.table.initialVisibleColumns} filtersMethod={_screen.table.filtersMethod}>
+                <TT id={id} title={title} subtitle={subtitle} screen={_screen}/>
+            </TableContainer>
+        </PageContainer>);
+}
+function TT({ id, title, subtitle, screen }) {
+    const { setRowSelection } = useTableContext();
+    const { api, table, filters, massActions, buttonBar, rowActions, createView, editView, deleteItem, breadcrumbs } = screen;
+    const tableApi = runIfFn(api, id ?? "");
+    return (<>
+            {/* {breadcrumbs && <PageTopBar breadcrumbs={breadcrumbs} />} */}
+            <TableTopBar title={title} breadcrumbs={breadcrumbs}>
+                <TableButtonBar buttonBar={buttonBar} createView={createView} editView={editView} api={tableApi} queryKey={tableApi.queryKey}>
+                    {filters && <TableFilterButton />}
+                </TableButtonBar>
+                {/* <TableColumnButton /> */}
+            </TableTopBar>
+
+            {filters &&
+            (<TableFilters form={filters.form} initialValues={filters.initialValues} schema={filters.schema} processInput={filters.processInput}/>)}
+            {massActions && <TableMassActions actions={massActions.items}/>}
+
+            <TableViewProvider queryKey={tableApi.queryKey} editView={editView} deleteItem={deleteItem}>
+                <TableWrapper table={{ ...table, onSelectionChange: setRowSelection }} rowActions={rowActions} api={tableApi} subtitle={subtitle} queryParams={screen.queryParams}/>
+                <TableDialogManager />
+            </TableViewProvider>
+        </>);
+}
+function TableButtonBar({ buttonBar, queryKey, createView, editView, api, children }) {
+    const createDialogFn = React.useCallback((data) => {
+        return (onClose) => {
+            const view = runIfFn(createView, data) ?? runIfFn(editView, null);
+            if (view.type == "customDialog")
+                return view.render({ show: true, onClose });
+            else
+                return <DialogRenderer config={view} onClose={onClose} invalidateQueryKey={api.queryKey}/>;
+        };
+    }, [createView, editView, api]);
+    return (<ButtonBar>
+            <RefreshButton queryKey={queryKey}/>
+
+            {buttonBar && buttonBar.map((button, index) => <React.Fragment key={index}>
+                        {button.type === "create" && editView &&
+                (<TableCreateButton buildDialog={createDialogFn(button.data)} icon={button.icon}>
+                                    {button.label}
+                                </TableCreateButton>)}
+
+                        {button.type === "invalidate" && <InvalidateButton pathOrPermalink={button.pathOrPermalink}/>}
+
+                        {button.type === "custom" && button.render()}
+                    </React.Fragment>)}
+
+            {children}
+        </ButtonBar>);
+}
+function TableWrapper({ table, subtitle, rowActions, api, queryParams }) {
+    const tableProps = useTableProps(api, table, rowActions, queryParams);
+    const _subtitle = React.useMemo(() => {
+        if (!subtitle)
+            return undefined;
+        return (data) => {
+            return (<div textSize="lg" textColor="#475569" fontWeight="600">
+                    {isFunction(subtitle) ? subtitle(data) : subtitle}
+                </div>);
+        };
+    }, [subtitle]);
+    return <Table {...tableProps} p="8" title={_subtitle}/>;
+}
+function TableDialogManager() {
+    const { dialog } = useTableViewContext();
+    return dialog;
+}

package/dist/lib/json/table/TableViewContext.jsx

@@ -0,0 +1,57 @@
+import { useOpenLink } from "@compill/hooks";
+import { createContext, runIfFn } from "@soperio/react";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { DialogRenderer } from "../dialog/DialogRenderer";
+import { ItemDeleteDialog } from "../dialog/ItemDeleteDialog";
+import { AppEnv } from "@compill/env";
+const [provider, useContext] = createContext();
+function TableViewProvider({ editView, deleteItem, queryKey, children }) {
+    const openLink = useOpenLink();
+    const navigate = useNavigate();
+    const [dialog, setDialog] = React.useState(null);
+    const onCloseDialog = React.useCallback(() => setDialog(null), [setDialog]);
+    const onAction = React.useCallback((action, item) => {
+        switch (action.type) {
+            case "view":
+                {
+                    navigate(runIfFn(action.path, item));
+                    break;
+                }
+            case "link":
+                {
+                    openLink(`${AppEnv.websiteUrl()}/${runIfFn(action.path, item)}`);
+                    break;
+                }
+            case "edit":
+                {
+                    const editConfig = runIfFn(editView, item);
+                    if (editConfig) {
+                        if (editConfig.type == "customDialog") {
+                            setDialog(editConfig.render({ show: true, onClose: onCloseDialog }));
+                        }
+                        else {
+                            setDialog(<DialogRenderer onClose={onCloseDialog} config={editConfig} queryId={item.id} invalidateQueryKey={queryKey}/>);
+                        }
+                    }
+                    break;
+                }
+            case "delete":
+                {
+                    const deleteConfig = runIfFn(deleteItem, item);
+                    setDialog(<ItemDeleteDialog show onClose={onCloseDialog} queryId={item.id} invalidateQueryKey={queryKey} msg={item.msg} {...deleteConfig} itemLabel={runIfFn(deleteConfig.itemLabel, item)}/>);
+                    // TODO
+                    // const { initialValues, ...props } = editItem!!
+                    // setDialog(<ItemEditDialog {...props} initialValues={runIfFn(initialValues, item)} show queryId={item?.id} onClose={onCloseDialog} />)
+                    break;
+                }
+        }
+    }, [navigate, editView, deleteItem]);
+    const Provider = provider;
+    const value = {
+        dialog,
+        onAction
+    };
+    return <Provider value={value}>{children}</Provider>;
+}
+export { TableViewProvider, useContext as useTableViewContext };

package/dist/lib/json/table/useTableProps.jsx

@@ -0,0 +1,56 @@
+import { useOpenLink } from "@compill/hooks";
+import { runIfFn } from "@soperio/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { TableRowActionsView } from "./TableRowActionsView";
+import { useTableViewContext } from "./TableViewContext";
+import { useRouter } from "next/router";
+import { AppEnv } from "@compill/env";
+export function useTableProps(api, table, rowActions, queryParams) {
+    const navigate = useNavigate();
+    const nextRouter = useRouter();
+    const openLink = useOpenLink();
+    const { onAction } = useTableViewContext();
+    const { onRowClick, columns: c, ...props } = table;
+    const onRowClickHandler = React.useCallback((item) => {
+        const config = runIfFn(onRowClick, item);
+        if (config) {
+            switch (config.type) {
+                case "navigate":
+                    {
+                        navigate(runIfFn(config.path, item) ?? "");
+                        break;
+                    }
+                case "nextpush":
+                    {
+                        nextRouter.push(runIfFn(config.path, item));
+                        break;
+                    }
+                case "link":
+                    {
+                        openLink(`${AppEnv.websiteUrl()}/${runIfFn(config.path, item)}`);
+                        break;
+                    }
+            }
+        }
+    }, [navigate, onRowClick]);
+    const columns = React.useMemo(() => {
+        const columns = table.columns.concat([]);
+        if (rowActions) {
+            columns.push(createColumnHelper().display({
+                id: "actions",
+                header: "Actions",
+                cell: props => <TableRowActionsView row={props.row} onAction={onAction} rowActions={rowActions} api={api} queryKey={api.queryKey}/>
+            }));
+        }
+        return columns;
+    }, [table, onAction, rowActions, api]);
+    const tableProps = { ...props };
+    tableProps.columns = columns;
+    tableProps.onRowClick = onRowClickHandler;
+    tableProps.queryKey = api.queryKey;
+    tableProps.queryFilters = queryParams;
+    tableProps.queryFn = api.search;
+    return tableProps;
+}

package/{src → dist}/lib/json/types/DetailsView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { API } from "@compill/admin-api";
 import * as Yup from "yup";
 import { Breadcrumb } from "../../breadcrumbs/BreadCrumbs";

package/dist/lib/json/types/DetailsView.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/json/types/EditItemDialog.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/json/types/MultiQueryWrapper.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/json/types/MultiQueryWrapperDialog.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/json/types/QueryWrapper.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/json/types/QueryWrapperDialog.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/json/types/ScreenConfig.js

@@ -0,0 +1 @@
+export {};

package/{src → dist}/lib/json/types/TabbedView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CRUDAPI } from "@compill/api";
 import { Breadcrumb } from "../../breadcrumbs/BreadCrumbs";
 import { DetailsViewConfig } from "./DetailsView";

package/dist/lib/json/types/TabbedView.js

@@ -0,0 +1 @@
+export {};

package/{src → dist}/lib/json/types/TableView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { API } from "@compill/admin-api";
 import { FormRendererConfig } from "@compill/form";
 import { TableProps } from "@compill/table";