@sqrzro/admin 2.1.0-bz.37 → 2.1.0-bz.39

package/dist/components/DateFilter/index.js

@@ -1,10 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CalendarInput } from '@sqrzro/components';
+import { formatDate } from '@sqrzro/utility';
+function parseValueUp(value) {
+    if (!value) {
+        return '';
+    }
+    if (Array.isArray(value)) {
+        return value.map((item) => formatDate(item, 'YYYY-MM-DD')).join(',');
+    }
+    return formatDate(value, 'YYYY-MM-DD');
+}
+function parseValueDown(value) {
+    if (!value) {
+        return null;
+    }
+    if (value.includes(',')) {
+        const [start, end] = value.split(',').map((item) => new Date(item));
+        return [start, end];
+    }
+    return new Date(value);
+}
 function DateFilter({ name, onChange, value }) {
     function handleChange(event) {
-        onChange({ target: { name, value: String(event.target.value) } });
+        onChange({ target: { name, value: parseValueUp(event.target.value) } });
     }
-    return (_jsx(CalendarInput, { name: name, onChange: handleChange, value: new Date(value), isPanelOnly: true, isRange: true }));
+    return (_jsx(CalendarInput, { name: name, onChange: handleChange, value: parseValueDown(value), isPanelOnly: true, isRange: true }));
 }
 export function transformDateValue(value) {
     return value || '';

package/dist/components/FilterBarItem/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
 import { tw } from '@sqrzro/components';
+import { useClickOutside } from '@sqrzro/hooks';
 import BooleanFilter, { renderBooleanValue } from '../BooleanFilter';
 import DateFilter, { renderDateValue, transformDateValue } from '../DateFilter';
 import DropdownFilter, { renderDropdownValue } from '../DropdownFilter';
@@ -18,15 +18,15 @@ const map = {
 };
 const DEFAULT_SIZE = 'w-56';
 function FilterBarItem({ data, label, name, onChange, type, value, }) {
-    const panel = useRef(null);
+    const [isOpen, setIsOpen, node] = useClickOutside();
     function handleChange(event) {
         onChange(name, event.target.value);
-        panel.current?.hidePopover();
+        setIsOpen(false);
     }
     function handleClear() {
         onChange(name, '');
     }
     const { component: FilterComponent, renderValue, size, transformValue } = map[type];
-    return (_jsxs("li", { className: tw('relative inline-flex h-8 items-center gap-2 rounded-full border px-5 text-xs text-white', value ? 'border-solid border-slate-400' : 'border-dashed border-slate-400', value ? 'bg-slate-700 pr-10' : 'text-slate-300'), children: [_jsx("p", { className: "", children: label }), value ? (_jsx("p", { className: "border-l border-l-slate-300 pl-2 font-semibold", children: renderValue(value, data) })) : null, _jsx("button", { className: tw('absolute left-0 top-0 h-full select-none text-transparent', value ? 'right-10' : 'right-0'), id: `${name}-control`, popovertarget: `${name}-target`, type: "button", children: "Edit" }), value ? _jsx(FilterBarClearButton, { onClick: handleClear }) : null, _jsx("div", { ref: panel, anchor: `${name}-control`, className: tw('show left-[anchor(left)] top-[anchor(bottom)] -ml-px mt-2 origin-top-left origin-top-left rounded bg-white shadow-lg', size || DEFAULT_SIZE), id: `${name}-target`, popover: "auto", children: _jsx("div", { className: "py-1", role: "none", children: _jsx(FilterComponent, { data: data, name: name, onChange: handleChange, value: transformValue ? transformValue(value) : value }) }) })] }));
+    return (_jsxs("li", { ref: node, className: tw('relative inline-flex h-8 items-center gap-2 rounded-full border px-5 text-xs text-white', value ? 'border-solid border-slate-400' : 'border-dashed border-slate-400', value ? 'bg-slate-700 pr-10' : 'text-slate-300'), children: [_jsx("p", { className: "", children: label }), value ? (_jsx("p", { className: "border-l border-l-slate-300 pl-2 font-semibold", children: renderValue(value, data) })) : null, _jsx("button", { className: tw('absolute left-0 top-0 h-full select-none text-transparent', value ? 'right-10' : 'right-0'), onClick: () => setIsOpen(!isOpen), type: "button", children: "Edit" }), value ? _jsx(FilterBarClearButton, { onClick: handleClear }) : null, _jsx("div", { className: tw('show absolute left-0 top-full z-10 -ml-px mt-2 origin-top-left origin-top-left rounded bg-white shadow-lg', size || DEFAULT_SIZE, isOpen ? 'block' : 'hidden'), children: _jsx("div", { className: "py-1", role: "none", children: _jsx(FilterComponent, { data: data, name: name, onChange: handleChange, value: transformValue ? transformValue(value) : value }) }) })] }));
 }
 export default FilterBarItem;

package/dist/components/RootLayout/index.js

@@ -8,7 +8,7 @@ function RootLayout({ children, config, font, logo, }) {
     if (config) {
         setConfig(config, logo);
     }
-    return (_jsxs("html", { lang: "en", children: [_jsx("head", {}), _jsxs("body", { className: tw(font, 'overflow-x-hidden overflow-y-scroll bg-slate-50 font-sans text-sm text-slate-800 has-[[data-modal][open]]:overflow-hidden'), children: [_jsx("script", { dangerouslySetInnerHTML: {
+    return (_jsxs("html", { lang: "en", children: [_jsx("head", { children: _jsx("link", { href: "/images/favicon.svg", rel: "icon" }) }), _jsxs("body", { className: tw(font, 'overflow-x-hidden overflow-y-scroll bg-slate-50 font-sans text-sm text-slate-800 has-[[data-modal][open]]:overflow-hidden'), children: [_jsx("script", { dangerouslySetInnerHTML: {
                             __html: "(function(d){var v=d.createElement('div'),t=d.createElement('style'),s=v.style;s.overflowY='scroll';s.width='50';s.height='50';d.body.append(v);t.innerHTML='body:has([data-modal][open]){padding-right:'+(v.offsetWidth-v.clientWidth)+'px}';d.body.append(t);v.remove()}(document))",
                         } }), _jsx(Config, { data: config }), _jsx(ClassNames, { data: classNames }), children, _jsx(Toaster, {})] })] }));
 }

package/dist/components/Table/index.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="react" />
-import type { Errorable } from '@sqrzro/interfaces';
-import type { TableClientComponentProps, TableItemObject } from '../TableClientComponent';
-export interface TableProps<Item, Params> extends Omit<TableClientComponentProps, 'data'> {
-    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Item[]>>;
-    params?: Params;
-    searchParams?: URLSearchParams;
-    transformer?: (item: Item) => TableItemObject;
+import type { FilterObject } from '../FilterBar';
+import type { TableComponentProps } from '../TableComponent';
+export interface TableProps<Item extends object, Params> extends Omit<TableComponentProps<Item, Params>, 'actions'> {
+    actions?: (data: Record<string, unknown>) => React.ReactNode;
+    filters?: FilterObject[];
 }
-declare function Table<Item extends object, Params>({ columns, fn, params, searchParams, transformer, }: Readonly<TableProps<Item, Params>>): Promise<React.ReactElement>;
+declare function Table<Item extends object, Params>({ filters, hasSearch, ...props }: Readonly<TableProps<Item, Params>>): Promise<React.ReactElement>;
 export default Table;

package/dist/components/Table/index.js

@@ -1,17 +1,19 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import TableClientComponent from '../TableClientComponent';
-function defaultTransformer(item) {
-    return {
-        id: item.id,
-        ...item,
-    };
-}
-async function Table({ columns, fn, params, searchParams, transformer, }) {
-    const [response, error] = await fn(params, searchParams);
-    if (error) {
-        return _jsxs("div", { children: ["Error - ", error.message] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, Suspense } from 'react';
+import { getLayout } from '../../services/SettingsService';
+import FilterBar from '../FilterBar';
+import Panel from '../Panel';
+import TableComponent from '../TableComponent';
+async function Table({ filters, hasSearch, ...props }) {
+    const layout = await getLayout();
+    let searchParams; // eslint-disable-line @typescript-eslint/init-declarations
+    try {
+        const { headers } = await import('next/headers');
+        searchParams = new URLSearchParams((await headers()).get('x-search-params') || '');
+    }
+    catch (err) {
+        searchParams = new URLSearchParams();
     }
-    const data = response.map(transformer || defaultTransformer);
-    return _jsx(TableClientComponent, { columns: columns, data: data });
+    return (_jsxs(Fragment, { children: [filters || hasSearch ? (_jsx(FilterBar, { hasSearch: hasSearch, layout: layout, map: filters })) : null, _jsx(Panel, { children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(TableComponent, { ...props, searchParams: searchParams }) }) })] }));
 }
 export default Table;

package/dist/components/TableComponent/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { Errorable } from '@sqrzro/interfaces';
+import type { TableClientComponentProps, TableItemObject } from '../TableClientComponent';
+export interface TableComponentProps<Item, Params> extends Omit<TableClientComponentProps, 'data'> {
+    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Item[]>>;
+    hasSearch?: boolean;
+    params?: Params;
+    searchParams?: URLSearchParams;
+    transformer?: (item: Item) => TableItemObject;
+}
+declare function TableComponent<Item extends object, Params>({ columns, fn, params, searchParams, transformer, }: Readonly<TableComponentProps<Item, Params>>): Promise<React.ReactElement>;
+export default TableComponent;

package/dist/components/TableComponent/index.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import TableClientComponent from '../TableClientComponent';
+function defaultTransformer(item) {
+    return {
+        id: item.id,
+        ...item,
+    };
+}
+async function TableComponent({ columns, fn, params, searchParams, transformer, }) {
+    const [response, error] = await fn(params, searchParams);
+    if (error) {
+        return _jsxs("div", { children: ["Error - ", error.message] });
+    }
+    const data = response.map(transformer || defaultTransformer);
+    return _jsx(TableClientComponent, { columns: columns, data: data });
+}
+export default TableComponent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/admin",
   "type": "module",
-  "version": "2.1.0-bz.37",
+  "version": "2.1.0-bz.39",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",