@compill/admin 1.0.102 → 1.0.104

package/dist/lib/json/TabbedView.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { useParams } from "react-router-dom";
+import { PageQueryStateContainer } from "../page/PageQueryStateContainer.js";
+import { PageTabbedTopBar, PageTabbedTopBarProvider } from "../page/PageTopBar.js";
+import { TabContainer } from "@compill/components";
+import { runIfFn } from "@soperio/react";
+import { ScreenRenderer } from "./ScreenRenderer.js";
+export function TabbedView({ queryField, api, screen, ...props }) {
+    const { [queryField]: id } = useParams();
+    return (_jsx(PageQueryStateContainer, { queryId: id, api: api, apiFn: "get", p: "5", children: (city) => {
+            const { breadcrumbs, tabs } = runIfFn(screen, city);
+            return (_jsxs(PageTabbedTopBarProvider, { children: [_jsx(PageTabbedTopBar, { breadcrumbs: breadcrumbs, mb: "-3" }), _jsx(TabContainer, { tabs: tabs.map(tab => tab.label), saveKey: `tab-${id}`, mt: "-3", mb: "3", id: "fff", children: tabs.map((tab, index) => _jsx(TabView, { tab: tab }, index)) })] }));
+        } }));
+}
+function TabView({ tab }) {
+    if (!tab.component && !tab.config)
+        throw new Error(`Screen config for tabbed view: one of your tabs does not have a component or config declared: ${tab.label}`);
+    if (tab.component)
+        return tab.component();
+    return _jsx(ScreenRenderer, { config: tab.config, tabbed: true, p: "0" });
+}

package/dist/lib/json/buttons/{ActionButton.jsx → ActionButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { useApiMutation, useInvalidateParentMutation, useMutate } from "@compill/api";
 import { Button, Icon } from "@valerya/ui";
 export function ActionButton({ label, buttonProps, icon, queryKey, queryFn, successMsg, errorMsg, invalidateParent }) {
@@ -6,8 +7,5 @@ export function ActionButton({ label, buttonProps, icon, queryKey, queryFn, succ
         successMsg,
         errorMsg
     });
-    return (<Button display="flex" alignItems="center" gap="3" {...buttonProps} onClick={mutate} disabled={mutation.isLoading}>
-            {icon && <Icon path={icon}/>}
-            {label}
-        </Button>);
+    return (_jsxs(Button, { display: "flex", alignItems: "center", gap: "3", ...buttonProps, onClick: mutate, disabled: mutation.isLoading, children: [icon && _jsx(Icon, { path: icon }), label] }));
 }

package/dist/lib/json/buttons/{ConfirmationActionButton.jsx → ConfirmationActionButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { useApiMutation, useInvalidateParentMutation, useMutate } from "@compill/api";
 import { ModalLoadingOverlay } from "@compill/components";
 import { Button, Icon, Modal, ModalBody, ModalFooter, ModalHeader } from "@valerya/ui";
@@ -7,10 +8,7 @@ export function ConfirmationActionButton({ label, buttonProps, icon, queryKey, q
         successMsg,
         errorMsg
     });
-    return (<Button display="flex" alignItems="center" gap="3" {...buttonProps} onClick={mutate} disabled={mutation.isLoading}>
-            {icon && <Icon path={icon}/>}
-            {label}
-        </Button>);
+    return (_jsxs(Button, { display: "flex", alignItems: "center", gap: "3", ...buttonProps, onClick: mutate, disabled: mutation.isLoading, children: [icon && _jsx(Icon, { path: icon }), label] }));
 }
 export function ConfirmationDialog({ title, text, positiveButtonLabel, negativeButtonLabel, queryKey, queryFn, successMsg, errorMsg, invalidateParent, show, onClose }) {
     const mutation = invalidateParent ? useInvalidateParentMutation(queryFn, queryKey) : useApiMutation(queryFn, queryKey);
@@ -18,20 +16,5 @@ export function ConfirmationDialog({ title, text, positiveButtonLabel, negativeB
         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>);
+    return (_jsxs(Modal, { show: show, onClose: onClose, children: [_jsx(ModalHeader, { children: _jsx("div", { textSize: "xl", fontWeight: "600", children: title }) }), _jsx(ModalBody, { children: text }), _jsxs(ModalFooter, { dflex: true, gap: "3", alignItems: "center", placeContent: "end", children: [_jsx(Button, { children: negativeButtonLabel || "Cancel" }), _jsx(Button, { onClick: mutate, children: positiveButtonLabel || "OK" })] }), mutation.isLoading && _jsx(ModalLoadingOverlay, {})] }));
 }

package/dist/lib/json/dialog/DialogRenderer.d.ts

@@ -1,6 +1,6 @@
-import { EditItemDialogConfig } from "../types/EditItemDialog";
-import { QueryWrapperDialogConfig } from "../types/QueryWrapperDialog";
-import { MultiQueryWrapperDialogConfig } from "../types/MultiQueryWrapperDialog";
+import { EditItemDialogConfig } from "../types/EditItemDialog.js";
+import { QueryWrapperDialogConfig } from "../types/QueryWrapperDialog.js";
+import { MultiQueryWrapperDialogConfig } from "../types/MultiQueryWrapperDialog.js";
 interface DialogRendererProps {
     config: EditItemDialogConfig | QueryWrapperDialogConfig<any> | MultiQueryWrapperDialogConfig;
     onClose: () => void;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { ItemEditDialog } from "./ItemEditDialog.js";
+import { QueryWrapperDialog } from "./QueryWrapperDialog.js";
+import { MultiQueryWrapperDialog } from "./MultiQueryWrapperDialog.js";
+export function DialogRenderer({ config, onClose, invalidateQueryKey, queryId }) {
+    const { type, ...props } = config;
+    if (config.type === "dialog")
+        return _jsx(ItemEditDialog, { ...props, queryId: queryId, invalidateQueryKey: invalidateQueryKey, show: true, onClose: onClose });
+    if (config.type === "query")
+        return _jsx(QueryWrapperDialog, { ...props, queryId: queryId, invalidateQueryKey: invalidateQueryKey, onClose: onClose });
+    if (config.type === "multiQuery")
+        return _jsx(MultiQueryWrapperDialog, { ...props, queryId: queryId, invalidateQueryKey: invalidateQueryKey, onClose: onClose });
+    return null;
+}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+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 (_jsxs(Modal, { size: size, show: show, onClose: onClose, scheme: "danger", variant: "glass", transition: true, ...props, children: [_jsx(Modal.Header, { children: title || `Delete ${itemLabel}` }), _jsxs(Modal.Body, { pb: "6", children: [!msg && `Do you really want to delete ${itemLabel}?`, msg && runIfFn(msg, itemLabel)] }), _jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [_jsx(Button, { disabled: mutation.isPending, onClick: onClose, variant: "borderless", scheme: "dark", me: "2", children: closeActionButtonLabel }), _jsx(Button, { scheme: "danger", disabled: mutation.isPending, onClick: handleDelete, children: actionButtonLabel || "Delete" })] }), mutation.isPending && _jsx(ModalLoadingOverlay, {})] }));
+}

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

@@ -0,0 +1,77 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+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 (_jsxs(Modal, { size: size, show: show, onClose: onClose, scheme: "light", transition: true, ...props, children: [_jsxs(Modal.Header, { children: [!isInitialLoading && queryId && `Edit ${title ? title(data) : data?.["name"] ?? data?.["title"] ?? data?.["name"] ?? ""}`, !queryId && `Create new ${itemLabel ?? "item"}`, Array.isArray(form) && (_jsx(_Fragment, {})
+                    // <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>
+                    )] }), isInitialLoading && (_jsx(Modal.Body, { children: _jsx(QueryLoadingState, { minW: "72" }) })), isError && (_jsx(Modal.Body, { children: _jsx(RetryOnError, { label: `${fetchErrorMsg} ${error}`, onClick: retry }) })), !isInitialLoading && !isError &&
+                (_jsx(_Fragment, { children: _jsx(Formik
+                    // initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(data) ?? initialValues(data) ?? {}}
+                    , { 
+                        // initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(data) ?? initialValues(data) ?? {}}
+                        initialValues: fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(initialValues(data)) ?? {}, onSubmit: saveItem, ...formikProps, children: ({ setFieldValue, dirty, handleSubmit, isValid, values }) => (_jsxs(_Fragment, { children: [_jsx(Modal.Body, { pb: "6", children: _jsxs(Form, { children: [React.isValidElement(form) && form, Array.isArray(form) && _jsx(FormRenderer, { form: form }), isFunction(form) && _jsx(FormRenderer, { form: form(data ?? values) })] }) }), _jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [_jsx(Button, { disabled: mutation.isLoading, onClick: onClose, variant: "borderless", me: "2", children: cancelLabel }), _jsx(Button, { type: "submit", disabled: !dirty || mutation.isLoading /* || !isValid*/, onClick: () => handleSubmit(), children: saveLabel ? saveLabel : (queryId ? "Update" : "Create") })] })] })) }) })), mutation.isLoading && _jsx(ModalLoadingOverlay, {})] }));
+}

package/dist/lib/json/dialog/MultiQueryWrapperDialog.d.ts

@@ -1,4 +1,4 @@
-import { MultiQueryWrapperDialogConfig } from "../types/MultiQueryWrapperDialog";
+import { MultiQueryWrapperDialogConfig } from "../types/MultiQueryWrapperDialog.js";
 export type MultiQueryWrapperDialogProps = Omit<MultiQueryWrapperDialogConfig, "type"> & {
     queryId?: string;
     onClose: () => void;

package/dist/lib/json/dialog/{MultiQueryWrapperDialog.jsx → MultiQueryWrapperDialog.js}

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useApiQueries } from "@compill/api";
 import React from "react";
-import { ItemEditDialog } from "./ItemEditDialog";
+import { ItemEditDialog } from "./ItemEditDialog.js";
 export function MultiQueryWrapperDialog({ queries, config, onClose, queryId, invalidateQueryKey }) {
     const { data, isFetching, isError } = useApiQueries(queries.map(q => ({
         queryKey: q.api.queryKey,
@@ -18,5 +19,5 @@ export function MultiQueryWrapperDialog({ queries, config, onClose, queryId, inv
     // if (isFetching)
     //     return null
     // @ts-ignore
-    return <ItemEditDialog isPreloading={isFetching} {...config(...transformedData)} queryId={queryId} invalidateQueryKey={invalidateQueryKey} show onClose={onClose}/>;
+    return _jsx(ItemEditDialog, { isPreloading: isFetching, ...config(...transformedData), queryId: queryId, invalidateQueryKey: invalidateQueryKey, show: true, onClose: onClose });
 }

package/dist/lib/json/dialog/QueryWrapperDialog.d.ts

@@ -1,6 +1,6 @@
 import { CRUDAPI, CRUD_MODEL } from "@compill/api";
-import { QueryWrapperDialogConfig } from "../types/QueryWrapperDialog";
-import { EditItemDialogConfig } from "../types/EditItemDialog";
+import { QueryWrapperDialogConfig } from "../types/QueryWrapperDialog.js";
+import { EditItemDialogConfig } from "../types/EditItemDialog.js";
 export type QueryWrapperDialogProps<T extends CRUD_MODEL, U> = Omit<QueryWrapperDialogConfig<T, U>, "type"> & {
     api: CRUDAPI<any>;
     fn: "get" | "getTransformed" | "getAll" | "getAllTransformed";

package/dist/lib/json/dialog/{QueryWrapperDialog.jsx → QueryWrapperDialog.js}

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useApiQuery } from "@compill/api";
 import React from "react";
-import { ItemEditDialog } from "./ItemEditDialog";
+import { ItemEditDialog } from "./ItemEditDialog.js";
 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(() => {
@@ -15,5 +16,5 @@ export function QueryWrapperDialog({ api, fn, transformFn, config, onClose, quer
     if (isFetching)
         return null;
     // @ts-ignore
-    return <ItemEditDialog {...config(transformedData)} queryId={queryId} invalidateQueryKey={invalidateQueryKey} show onClose={onClose}/>;
+    return _jsx(ItemEditDialog, { ...config(transformedData), queryId: queryId, invalidateQueryKey: invalidateQueryKey, show: true, onClose: onClose });
 }

package/dist/lib/json/table/{RefreshButton.jsx → RefreshButton.js}

@@ -1,12 +1,11 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useInvalidateQuery } from "@compill/api";
 import { mdiRefresh } from "@mdi/js";
 import { Icon } from "@valerya/ui";
-import { ButtonBarButton } from "../../layout/ButtonBar";
+import { ButtonBarButton } from "../../layout/ButtonBar.js";
 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>);
+    return (_jsx(ButtonBarButton, { scheme: "dark", size: "sm", aspectRatio: "square", variant: "borderless", onClick: invalidate, children: _jsx(Icon, { path: mdiRefresh }) }));
 }

package/dist/lib/json/table/TableRowActionsView.d.ts

@@ -1,4 +1,4 @@
-import { TableRowAction } from "../types/TableView";
+import { TableRowAction } from "../types/TableView.js";
 import { API } from "@compill/admin-api";
 interface TableRowActionViewProps {
     row: any;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { mdiDelete, mdiEye, mdiOpenInNew, mdiPencil } from "@mdi/js";
+import { Icon } from "@valerya/ui";
+import { TableRowPublishPostButton } from "./TableRowPublishPostButton.js";
+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 (_jsx("div", { dflex: true, w: "full", alignItems: "stretch", placeContent: "end", h: "full", children: runIfFn(rowActions, item)?.map((action, index) => (_jsxs(React.Fragment, { children: [action.type === "publish" && _jsx(TableRowPublishPostButton, { id: item.id, api: action.api ?? api, status: item.status, invalidateQueryKey: queryKey }), action.type == "custom" && _jsx(_Fragment, { children: action.component(item, queryKey, action.icon, action.label) }), !["publish", "custom"].includes(action.type) &&
+                    (_jsx(ActionButton, { onClick: () => onAction(action, item), scheme: schemes[action.type], children: _jsx(Icon, { path: icons[action.type], size: "sm" }) }))] }, index))) }));
+}
+function ActionButton({ onClick, ...props }) {
+    const handleClick = React.useCallback((event) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        onClick?.(event);
+    }, [onClick]);
+    return (_jsx(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/dist/lib/json/table/{TableRowPublishPostButton.jsx → TableRowPublishPostButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { Icon } from "@valerya/ui";
 import { mdiPublish, mdiPublishOff } from "@mdi/js";
 import { Button } from "@valerya/ui";
@@ -15,7 +16,5 @@ export function TableRowPublishPostButton({ id, api, status, invalidateQueryKey,
             .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>);
+    return (_jsx(Button, { variant: "borderless", corners: "square", scheme: "dark", onClick: publish, ...props, children: _jsx(Icon, { path: isDraft ? mdiPublish : mdiPublishOff, size: "sm" }) }));
 }

package/dist/lib/json/table/TableView.d.ts

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

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+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.js";
+import { PageContainer } from "../../page/PageContainer.js";
+import { TableContainer } from "../../table/TableContainer.js";
+import { TableCreateButton } from "../../table/TableCreateButton.js";
+import { TableFilterButton } from "../../table/TableFilterButton.js";
+import { TableTopBar } from "../../table/TableTopBar.js";
+import { ButtonBar } from "../../layout/ButtonBar.js";
+import { TableFilters } from "../../table/TableFilters.js";
+import { TableMassActions } from "../../table/TableMassActions.js";
+import { DialogRenderer } from "../dialog/DialogRenderer.js";
+import { RefreshButton } from "./RefreshButton.js";
+import { TableViewProvider, useTableViewContext } from "./TableViewContext.js";
+import { useTableProps } from "./useTableProps.js";
+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 (_jsx(PageContainer, { bgColor: "white", ...props, children: _jsx(TableContainer, { columns: _screen.table.columns, initialVisibleColumns: _screen.table.initialVisibleColumns, filtersMethod: _screen.table.filtersMethod, children: _jsx(TT, { id: id, title: title, subtitle: subtitle, screen: _screen }) }) }));
+}
+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 (_jsxs(_Fragment, { children: [_jsx(TableTopBar, { title: title, breadcrumbs: breadcrumbs, children: _jsx(TableButtonBar, { buttonBar: buttonBar, createView: createView, editView: editView, api: tableApi, queryKey: tableApi.queryKey, children: filters && _jsx(TableFilterButton, {}) }) }), filters &&
+                (_jsx(TableFilters, { form: filters.form, initialValues: filters.initialValues, schema: filters.schema, processInput: filters.processInput })), massActions && _jsx(TableMassActions, { actions: massActions.items }), _jsxs(TableViewProvider, { queryKey: tableApi.queryKey, editView: editView, deleteItem: deleteItem, children: [_jsx(TableWrapper, { table: { ...table, onSelectionChange: setRowSelection }, rowActions: rowActions, api: tableApi, subtitle: subtitle, queryParams: screen.queryParams }), _jsx(TableDialogManager, {})] })] }));
+}
+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 _jsx(DialogRenderer, { config: view, onClose: onClose, invalidateQueryKey: api.queryKey });
+        };
+    }, [createView, editView, api]);
+    return (_jsxs(ButtonBar, { children: [_jsx(RefreshButton, { queryKey: queryKey }), buttonBar && buttonBar.map((button, index) => _jsxs(React.Fragment, { children: [button.type === "create" && editView &&
+                        (_jsx(TableCreateButton, { buildDialog: createDialogFn(button.data), icon: button.icon, children: button.label })), button.type === "invalidate" && _jsx(InvalidateButton, { pathOrPermalink: button.pathOrPermalink }), button.type === "custom" && button.render()] }, index)), children] }));
+}
+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 (_jsx("div", { textSize: "lg", textColor: "#475569", fontWeight: "600", children: isFunction(subtitle) ? subtitle(data) : subtitle }));
+        };
+    }, [subtitle]);
+    return _jsx(Table, { ...tableProps, p: "8", title: _subtitle });
+}
+function TableDialogManager() {
+    const { dialog } = useTableViewContext();
+    return dialog;
+}

package/dist/lib/json/table/TableViewContext.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TableRowAction, TableViewDeleteItem, TableViewEditView } from "../types/TableView";
+import { TableRowAction, TableViewDeleteItem, TableViewEditView } from "../types/TableView.js";
 type TableViewContextProps = {
     onAction: (action: TableRowAction, item: any) => void;
     dialog?: React.ReactNode;

package/dist/lib/json/table/{TableViewContext.jsx → TableViewContext.js}

@@ -1,9 +1,10 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 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 { DialogRenderer } from "../dialog/DialogRenderer.js";
+import { ItemDeleteDialog } from "../dialog/ItemDeleteDialog.js";
 import { AppEnv } from "@compill/env";
 const [provider, useContext] = createContext();
 function TableViewProvider({ editView, deleteItem, queryKey, children }) {
@@ -31,7 +32,7 @@ function TableViewProvider({ editView, deleteItem, queryKey, children }) {
                             setDialog(editConfig.render({ show: true, onClose: onCloseDialog }));
                         }
                         else {
-                            setDialog(<DialogRenderer onClose={onCloseDialog} config={editConfig} queryId={item.id} invalidateQueryKey={queryKey}/>);
+                            setDialog(_jsx(DialogRenderer, { onClose: onCloseDialog, config: editConfig, queryId: item.id, invalidateQueryKey: queryKey }));
                         }
                     }
                     break;
@@ -39,7 +40,7 @@ function TableViewProvider({ editView, deleteItem, queryKey, children }) {
             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)}/>);
+                    setDialog(_jsx(ItemDeleteDialog, { show: true, 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} />)
@@ -52,6 +53,6 @@ function TableViewProvider({ editView, deleteItem, queryKey, children }) {
         dialog,
         onAction
     };
-    return <Provider value={value}>{children}</Provider>;
+    return _jsx(Provider, { value: value, children: children });
 }
 export { TableViewProvider, useContext as useTableViewContext };

package/dist/lib/json/table/useTableProps.d.ts

@@ -1,3 +1,3 @@
 import { API } from "@compill/admin-api";
-import { TableRowAction, TableViewTable } from "../types/TableView";
+import { TableRowAction, TableViewTable } from "../types/TableView.js";
 export declare function useTableProps(api: API<any>, table: TableViewTable, rowActions?: TableRowAction[] | ((item?: any) => TableRowAction[]), queryParams?: any): any;

package/dist/lib/json/table/{useTableProps.jsx → useTableProps.js}

@@ -1,10 +1,11 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 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 { TableRowActionsView } from "./TableRowActionsView.js";
+import { useTableViewContext } from "./TableViewContext.js";
 import { useRouter } from "next/router";
 import { AppEnv } from "@compill/env";
 export function useTableProps(api, table, rowActions, queryParams) {
@@ -41,7 +42,7 @@ export function useTableProps(api, table, rowActions, queryParams) {
             columns.push(createColumnHelper().display({
                 id: "actions",
                 header: "Actions",
-                cell: props => <TableRowActionsView row={props.row} onAction={onAction} rowActions={rowActions} api={api} queryKey={api.queryKey}/>
+                cell: props => _jsx(TableRowActionsView, { row: props.row, onAction: onAction, rowActions: rowActions, api: api, queryKey: api.queryKey })
             }));
         }
         return columns;

package/dist/lib/json/types/DetailsView.d.ts

@@ -1,6 +1,6 @@
 import { API } from "@compill/admin-api";
 import * as Yup from "yup";
-import { Breadcrumb } from "../../breadcrumbs/BreadCrumbs";
+import { Breadcrumb } from "../../breadcrumbs/BreadCrumbs.js";
 import { FormRendererConfig } from "@compill/form";
 import { CRUDAPI } from "@compill/api";
 export type DetailsViewConfig<T = any> = {

package/dist/lib/json/types/EditItemDialog.d.ts

@@ -1,4 +1,4 @@
-import { ItemEditDialogProps } from "../dialog/ItemEditDialog";
+import { ItemEditDialogProps } from "../dialog/ItemEditDialog.js";
 export type EditItemDialogConfig = Omit<ItemEditDialogProps, "show" | "onClose"> & {
     type: "dialog";
 };

package/dist/lib/json/types/MultiQueryWrapper.d.ts

@@ -1,7 +1,7 @@
 import { CRUDAPI } from "@compill/api";
-import { DetailsViewConfig } from "./DetailsView";
-import { TabbedViewConfig } from "./TabbedView";
-import { TableViewConfig } from "./TableView";
+import { DetailsViewConfig } from "./DetailsView.js";
+import { TabbedViewConfig } from "./TabbedView.js";
+import { TableViewConfig } from "./TableView.js";
 type SubScreen = TableViewConfig | DetailsViewConfig | TabbedViewConfig;
 export type QueryDef = {
     api: CRUDAPI<any> | ((id: string) => CRUDAPI<any>);

package/dist/lib/json/types/MultiQueryWrapperDialog.d.ts

@@ -1,5 +1,5 @@
 import { CRUDAPI } from "@compill/api";
-import { EditItemDialogConfig } from "./EditItemDialog";
+import { EditItemDialogConfig } from "./EditItemDialog.js";
 export type QueryDef = {
     api: CRUDAPI<any>;
     fn: "get" | "getAll";

package/dist/lib/json/types/QueryWrapper.d.ts

@@ -1,7 +1,7 @@
 import { CRUDAPI, CRUD_MODEL } from "@compill/api";
-import { DetailsViewConfig } from "./DetailsView";
-import { TabbedViewConfig } from "./TabbedView";
-import { TableViewConfig } from "./TableView";
+import { DetailsViewConfig } from "./DetailsView.js";
+import { TabbedViewConfig } from "./TabbedView.js";
+import { TableViewConfig } from "./TableView.js";
 type SubScreen<T extends CRUD_MODEL, U> = TableViewConfig | DetailsViewConfig | TabbedViewConfig | QueryWrapperConfig<T, U>;
 export type QueryWrapperConfig<T extends CRUD_MODEL, U = T> = {
     type: "query";

package/dist/lib/json/types/QueryWrapperDialog.d.ts

@@ -1,5 +1,5 @@
 import { CRUDAPI, CRUD_MODEL } from "@compill/api";
-import { EditItemDialogConfig } from "./EditItemDialog";
+import { EditItemDialogConfig } from "./EditItemDialog.js";
 export type QueryWrapperDialogConfig<T extends CRUD_MODEL, U = T> = {
     type: "query";
     api: CRUDAPI<any>;

package/dist/lib/json/types/ScreenConfig.d.ts

@@ -1,8 +1,8 @@
-import { ItemEditDialogProps } from "../dialog/ItemEditDialog";
-import { DetailsViewConfig } from "./DetailsView";
-import { MultiQueryWrapperConfig } from "./MultiQueryWrapper";
-import { QueryWrapperConfig } from "./QueryWrapper";
-import { TabbedViewConfig } from "./TabbedView";
-import { TableViewConfig } from "./TableView";
+import { ItemEditDialogProps } from "../dialog/ItemEditDialog.js";
+import { DetailsViewConfig } from "./DetailsView.js";
+import { MultiQueryWrapperConfig } from "./MultiQueryWrapper.js";
+import { QueryWrapperConfig } from "./QueryWrapper.js";
+import { TabbedViewConfig } from "./TabbedView.js";
+import { TableViewConfig } from "./TableView.js";
 export type ScreenConfig = TableViewConfig | DetailsViewConfig | TabbedViewConfig | QueryWrapperConfig<any, any> | MultiQueryWrapperConfig;
 export type TableViewEditItem = Omit<ItemEditDialogProps, "show" | "onClose">;

package/dist/lib/json/types/TabbedView.d.ts

@@ -1,9 +1,9 @@
 import { CRUDAPI } from "@compill/api";
-import { Breadcrumb } from "../../breadcrumbs/BreadCrumbs";
-import { DetailsViewConfig } from "./DetailsView";
-import { QueryWrapperConfig } from "./QueryWrapper";
-import { TableViewConfig } from "./TableView";
-import { MultiQueryWrapperConfig } from "./MultiQueryWrapper";
+import { Breadcrumb } from "../../breadcrumbs/BreadCrumbs.js";
+import { DetailsViewConfig } from "./DetailsView.js";
+import { QueryWrapperConfig } from "./QueryWrapper.js";
+import { TableViewConfig } from "./TableView.js";
+import { MultiQueryWrapperConfig } from "./MultiQueryWrapper.js";
 export type TabbedViewConfig<T extends any = any> = {
     type: "tabbed";
     queryField: string;

package/dist/lib/json/types/TableView.d.ts

@@ -2,10 +2,10 @@ import { API } from "@compill/admin-api";
 import { FormRendererConfig } from "@compill/form";
 import { TableProps } from "@compill/table";
 import { ButtonProps, ModalProps } from "@valerya/ui";
-import { Breadcrumb, QueryBreadcrumbs } from "../../breadcrumbs/BreadCrumbs";
-import { ItemDeleteDialogProps } from "../dialog/ItemDeleteDialog";
-import { EditItemDialogConfig } from "./EditItemDialog";
-import { QueryWrapperDialogConfig } from "./QueryWrapperDialog";
+import { Breadcrumb, QueryBreadcrumbs } from "../../breadcrumbs/BreadCrumbs.js";
+import { ItemDeleteDialogProps } from "../dialog/ItemDeleteDialog.js";
+import { EditItemDialogConfig } from "./EditItemDialog.js";
+import { QueryWrapperDialogConfig } from "./QueryWrapperDialog.js";
 import * as Yup from "yup";
 import { MutationQueryFn, MutationQueryKey } from "@compill/api";
 export type TableViewScreen = {

package/dist/lib/layout/AdminLayout.d.ts

@@ -1,5 +1,5 @@
 import { Color, ParentComponent, SoperioComponent } from "@soperio/react";
-import { MenuConfig } from "./menu/MenuConfig";
+import { MenuConfig } from "./menu/MenuConfig.js";
 interface LayoutProps extends SoperioComponent, ParentComponent {
     color: Color;
     darkMode?: boolean;