@ramesesinc/platform-core 0.1.0

package/dist/components/table/DataList.js

@@ -0,0 +1,361 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Columns, Eye, RefreshCcw, Search, Trash } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useApp } from "../../core/AppContext";
+import { DynamicComponent } from "../../core/DynamicComponent";
+import { usePageContext } from "../../core/PageContext";
+import Panel from "../../core/Panel";
+import useDependHandler from "../../core/UIDependHandler";
+import { replaceValues } from "../../lib/utils/BeanUtils";
+import { getUrlPageParams } from "../../lib/utils/PageUtils";
+import { DataTable } from "./DataTable";
+import ListHandler from "./ListHandler";
+import { TableProvider, useTableContext } from "./TableContext";
+const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage, striped = false, bordered = false, hover = true, dense = false, showPagination = true, paginationPosition = "bottom", showPageInfo = true, showTotalCount = true, showRowsPerPage = true, rowsPerPageOptions = [5, 10, 20, 50, 100], searchable = false, searchPlaceholder = "Search...", searchDebounce = 300, onSearchChange, filters = [], showFilterPanel = false, onFilterChange, sortable = true, showSortIndicator = true, selectable = false, selectionMode = "multiple", onSelectionChange, selectOnRowClick = false, onRowClick, rowActions = [], bulkActions = [], showBulkActions = true, toolbarActions = [], showToolbar = true, toolbarTitle, showRefreshButton = true, showExportButton = false, onLoad, onError, onRefresh, onExport, className = "", rowClassName, depends, }) => {
+    const { listHandler, columns, rows, setRows, loading: ctxLoading, setLoading } = useTableContext();
+    // ============================================================================
+    // STATE
+    // ============================================================================
+    const [internalLoading, setInternalLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [searchText, setSearchText] = useState("");
+    const [searchTimeout, setSearchTimeout] = useState(null);
+    const [activeFilters, setActiveFilters] = useState({});
+    const [showColumnToggle, setShowColumnToggle] = useState(false);
+    const [hiddenColumns, setHiddenColumns] = useState([]);
+    const isLoading = ctxLoading || internalLoading;
+    const pageContext = usePageContext();
+    const refreshHandler = async () => {
+        // console.log("refresh via notify depends", pageContext?.uuid);
+        await handleRefresh();
+    };
+    useDependHandler({
+        name: depends !== null && depends !== void 0 ? depends : "datalist",
+        onRefresh: refreshHandler,
+    });
+    // ============================================================================
+    // LOAD DATA
+    // ============================================================================
+    const loadData = useCallback(async () => {
+        if (!listHandler)
+            return;
+        setInternalLoading(true);
+        setLoading(true);
+        setError(null);
+        try {
+            await listHandler.load();
+            setRows([...listHandler.getData()]);
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+        }
+        catch (err) {
+            setError((err === null || err === void 0 ? void 0 : err.message) || "Failed to load data");
+            onError === null || onError === void 0 ? void 0 : onError(err);
+        }
+        finally {
+            setInternalLoading(false);
+            setLoading(false);
+        }
+    }, [listHandler, onLoad, onError, setRows, setLoading]);
+    // NOTE: TableProvider already fires the initial load — no double-fetch here.
+    // ============================================================================
+    // SEARCH
+    // ============================================================================
+    const handleSearch = (text) => {
+        setSearchText(text);
+        if (searchTimeout)
+            clearTimeout(searchTimeout);
+        const timeout = setTimeout(async () => {
+            if (!listHandler)
+                return;
+            await listHandler.doSearch(text);
+            await loadData();
+            onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(text);
+        }, searchDebounce);
+        setSearchTimeout(timeout);
+    };
+    // ============================================================================
+    // FILTER
+    // ============================================================================
+    const handleFilterChange = async (field, value) => {
+        if (!listHandler)
+            return;
+        const newFilters = Object.assign(Object.assign({}, activeFilters), { [field]: value });
+        setActiveFilters(newFilters);
+        await listHandler.setFilter(newFilters);
+        await loadData();
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(newFilters);
+    };
+    const handleResetFilters = async () => {
+        if (!listHandler)
+            return;
+        setActiveFilters({});
+        await listHandler.resetFilter();
+        await loadData();
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange({});
+    };
+    // ============================================================================
+    // SORT
+    // ============================================================================
+    const handleSort = async (columnId) => {
+        if (!sortable || !listHandler)
+            return;
+        const currentSort = listHandler.getCurrentSortedColumn();
+        const currentDirection = listHandler.getCurrentSortDirection();
+        if (currentSort === columnId && currentDirection === "asc") {
+            await listHandler.sortDesc(columnId);
+        }
+        else {
+            await listHandler.sortAsc(columnId);
+        }
+        await loadData();
+    };
+    // ============================================================================
+    // PAGINATION
+    // ============================================================================
+    const handlePageChange = async (page) => {
+        if (!listHandler)
+            return;
+        await listHandler.moveToPage(page);
+        await loadData();
+    };
+    const handleNextPage = async () => {
+        if (!listHandler)
+            return;
+        await listHandler.moveNextPage();
+        await loadData();
+    };
+    const handlePrevPage = async () => {
+        if (!listHandler)
+            return;
+        await listHandler.movePrevPage();
+        await loadData();
+    };
+    const handleFirstPage = async () => {
+        if (!listHandler)
+            return;
+        await listHandler.moveFirstPage();
+        await loadData();
+    };
+    const handleLastPage = async () => {
+        if (!listHandler)
+            return;
+        await listHandler.moveLastPage();
+        await loadData();
+    };
+    const handleRowsPerPage = async (n) => {
+        if (!listHandler)
+            return;
+        await listHandler.setRowsPerPage(n);
+        await loadData();
+    };
+    // ============================================================================
+    // SELECTION
+    // ============================================================================
+    const handleSelectionChange = (keys) => {
+        setSelectedRows(keys);
+        if (onSelectionChange) {
+            const selectedData = rows.filter((row) => keys.includes(row.id || JSON.stringify(row)));
+            onSelectionChange(selectedData);
+        }
+    };
+    // ============================================================================
+    // ROW CLICK
+    // ============================================================================
+    const handleRowClick = (row, rowIndex) => {
+        if (selectOnRowClick && selectable) {
+            const key = row.id || JSON.stringify(row);
+            if (selectionMode === "single") {
+                handleSelectionChange([key]);
+            }
+            else {
+                const newSelection = selectedRows.includes(key) ? selectedRows.filter((k) => k !== key) : [...selectedRows, key];
+                handleSelectionChange(newSelection);
+            }
+        }
+        onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, rowIndex);
+    };
+    // ============================================================================
+    // REFRESH
+    // ============================================================================
+    const handleRefresh = async () => {
+        await loadData();
+        onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh();
+    };
+    // ============================================================================
+    // COLUMN VISIBILITY
+    // ============================================================================
+    const visibleUserColumns = columns.filter((col) => {
+        const colId = col.id || String(col.title);
+        return !hiddenColumns.includes(colId);
+    });
+    // ============================================================================
+    // DISPLAY COLUMNS — actions + sort indicators
+    // ============================================================================
+    const renderActionCell = (row, rowIndex) => {
+        const visible = rowActions.filter((a) => !a.show || a.show(row));
+        if (visible.length === 0)
+            return null;
+        const uuid = Math.random().toString(36).slice(2);
+        return (_jsx("div", { className: "dl-actions flex justify-center items-center", children: visible.map((action, i) => (_jsx("div", { children: _jsx(DynamicComponent, { config: {
+                        component: action.component,
+                        attr: Object.assign(Object.assign({}, action.attr), { opt: { data: row } }),
+                    } }) }, `${uuid}-${i}`))) }));
+    };
+    const displayColumns = rowActions.length > 0 && visibleUserColumns.length > 0
+        ? [
+            ...visibleUserColumns,
+            {
+                id: "_actions",
+                title: _jsx("div", { className: "text-center w-full", children: "Actions" }),
+                align: "center",
+                render: (_, row, rowIndex) => renderActionCell(row, rowIndex),
+            },
+        ]
+        : visibleUserColumns;
+    const sortableColumns = displayColumns.map((col) => {
+        if (!sortable || !showSortIndicator || !listHandler)
+            return col;
+        const currentSort = listHandler.getCurrentSortedColumn();
+        const currentDirection = listHandler.getCurrentSortDirection();
+        return Object.assign(Object.assign({}, col), { title: (_jsxs("div", { className: "dl-sortable-header", onClick: () => col.id && col.id !== "_actions" && handleSort(col.id), style: { cursor: col.id !== "_actions" ? "pointer" : "default" }, children: [col.title, currentSort === col.id && _jsx("span", { className: `dl-sort-icon dl-sort-${currentDirection}`, children: currentDirection === "asc" ? "▲" : "▼" })] })) });
+    });
+    // ============================================================================
+    // RENDER TOOLBAR
+    // ============================================================================
+    const renderToolbar = () => {
+        if (!showToolbar)
+            return null;
+        const uuid = Math.random().toString(36).slice(2);
+        return (_jsxs("div", { className: "dl-toolbar", children: [_jsxs("div", { className: "dl-toolbar-left", children: [toolbarTitle && _jsx("h3", { className: "dl-toolbar-title", children: toolbarTitle }), _jsxs("div", { className: "dl-toolbar-right", children: [showBulkActions &&
+                                    selectedRows.length > 0 &&
+                                    bulkActions.map((action, i) => (_jsxs("button", { className: `dl-btn dl-btn-${action.variant || "default"}`, onClick: () => {
+                                            const selectedData = rows.filter((row) => selectedRows.includes(row.id || JSON.stringify(row)));
+                                            action.onClick(selectedData);
+                                        }, children: [action.icon && _jsx("span", { children: action.icon }), action.label] }, action.label || i))), toolbarActions.map((action, i) => (_jsx("div", { children: _jsx(DynamicComponent, { config: { component: action.component, attr: action.attr || {} } }) }, `${uuid}-${i}`))), showExportButton && (_jsxs("button", { className: "dl-btn", onClick: onExport, children: [_jsx("span", { children: "\uD83D\uDCE5" }), " Export"] }))] })] }), _jsxs("div", { className: "flex items-center", children: [_jsx(RefreshButton, { show: showRefreshButton, onClick: handleRefresh }), _jsx(ColumnToggle, { columns: columns, hiddenColumns: hiddenColumns, setHiddenColumns: setHiddenColumns }), _jsx(SearchBox, { searchable: searchable, searchPlaceholder: searchPlaceholder, searchText: searchText, onSearch: handleSearch })] })] }));
+    };
+    // ============================================================================
+    // RENDER FILTER PANEL
+    // ============================================================================
+    const renderFilterPanel = () => {
+        if (!filters)
+            return null;
+        return _jsx(Panel, { content: filters });
+    };
+    // ============================================================================
+    // RENDER PAGINATION
+    // ============================================================================
+    const renderPagination = () => {
+        if (!showPagination || !listHandler)
+            return null;
+        const currentPage = listHandler.getCurrentPage();
+        const totalPages = listHandler.getTotalPageCount();
+        const totalRecords = listHandler.getTotalRecordCount();
+        const rowsPerPage = listHandler.getRowsPerPage();
+        const hasNext = listHandler.hasNextPage();
+        const hasPrev = listHandler.hasPrevPage();
+        const startRecord = (currentPage - 1) * rowsPerPage + 1;
+        const endRecord = Math.min(currentPage * rowsPerPage, totalRecords);
+        return (_jsxs("div", { className: "dl-pagination", children: [_jsxs("div", { className: "dl-pagination-info", children: [showPageInfo && showTotalCount && (_jsxs("span", { children: ["Showing ", startRecord, "-", endRecord, " of ", totalRecords, " records"] })), showPageInfo && !showTotalCount && _jsxs("span", { children: ["Page ", currentPage] })] }), _jsxs("div", { className: "dl-pagination-controls", children: [showRowsPerPage && (_jsxs("div", { className: "dl-rows-per-page", children: [_jsx("span", { children: "Rows per page:" }), _jsx("select", { value: rowsPerPage, onChange: (e) => handleRowsPerPage(Number(e.target.value)), children: rowsPerPageOptions.map((o) => (_jsx("option", { value: o, children: o }, o))) })] })), _jsx("button", { className: "dl-page-btn", disabled: !hasPrev, onClick: handleFirstPage, children: "First" }), _jsx("button", { className: "dl-page-btn", disabled: !hasPrev, onClick: handlePrevPage, children: "\u2190 Prev" }), totalPages > 0 &&
+                            [...Array(Math.min(totalPages, 5))].map((_, i) => {
+                                const page = i + 1;
+                                return (_jsx("button", { className: `dl-page-btn ${currentPage === page ? "active" : ""}`, onClick: () => handlePageChange(page), children: page }, page));
+                            }), _jsx("button", { className: "dl-page-btn", disabled: !hasNext, onClick: handleNextPage, children: "Next \u2192" }), _jsx("button", { className: "dl-page-btn", disabled: !hasNext, onClick: handleLastPage, children: "Last" })] })] }));
+    };
+    // ============================================================================
+    // ERROR STATE
+    // ============================================================================
+    if (error && errorMessage) {
+        return (_jsxs("div", { className: "dl-error", children: [_jsx("p", { children: errorMessage }), _jsx("button", { onClick: handleRefresh, children: "Retry" })] }));
+    }
+    // ============================================================================
+    // MAIN RENDER
+    // ============================================================================
+    return (_jsxs("div", { className: `data-list ${className}`, children: [renderToolbar(), renderFilterPanel(), (paginationPosition === "both" || paginationPosition === "top") && renderPagination(), _jsx(DataTable, { data: rows, columns: sortableColumns, loading: isLoading, emptyMessage: emptyMessage, striped: striped, bordered: bordered, hover: hover, dense: dense, rowKey: "id", onRowClick: handleRowClick, selectedRows: selectedRows, onSelectionChange: handleSelectionChange, selectable: selectable, rowClassName: rowClassName }), (paginationPosition === "both" || paginationPosition === "bottom") && rows.length > 0 && renderPagination()] }));
+};
+// ============================================================================
+// PUBLIC DATALIST
+// - Only accepts attr
+// - All hooks (useApp, usePageContext) called here
+// - factory defined here
+// - resolves dynamic filter params before passing to TableProvider
+// ============================================================================
+export const DataList = ({ attr }) => {
+    const { cols, data, rowsPerPage, disableTotalCount, commonActions, rowActions, toolbarActions } = attr, rest = __rest(attr, ["cols", "data", "rowsPerPage", "disableTotalCount", "commonActions", "rowActions", "toolbarActions"]);
+    // All hooks called here — this is a React component so hooks are valid
+    const { tenant, module } = useApp();
+    const pageContext = usePageContext();
+    // Factory defined here — ListHandler is a local import, no prop needed
+    const listHandlerFactory = (config) => ListHandler(config);
+    // Resolve dynamic placeholders in filter before ListHandler is constructed.
+    // Merges pageContext.getAllData() (page state) and pageContext.getUrlParams()
+    // (URL/route params) as the source so both {pageParams.x} and {urlParams.x}
+    // style tokens are resolved.
+    const resolveParams = () => {
+        if (!(data === null || data === void 0 ? void 0 : data.params))
+            return undefined;
+        //clone the filter
+        const cloned = JSON.parse(JSON.stringify(data.params));
+        const { params } = getUrlPageParams();
+        return replaceValues(cloned, params);
+    };
+    const newRowActions = [...(rowActions || [])];
+    if (commonActions === null || commonActions === void 0 ? void 0 : commonActions.viewPage) {
+        newRowActions.unshift({
+            component: "ViewPage",
+            attr: Object.assign(Object.assign({}, commonActions.viewPage), { title: "View", icon: _jsx(Eye, { size: 20 }), iconOnly: true }),
+        });
+    }
+    if (commonActions === null || commonActions === void 0 ? void 0 : commonActions.deleteData) {
+        newRowActions.push({
+            component: "DeleteData",
+            attr: Object.assign(Object.assign({}, commonActions.deleteData), { title: "Delete", icon: _jsx(Trash, { size: 20 }), iconOnly: true }),
+        });
+    }
+    const newToolbarActions = [...(toolbarActions || [])];
+    if (commonActions === null || commonActions === void 0 ? void 0 : commonActions.newPage) {
+        newToolbarActions.unshift({
+            label: "New",
+            component: "ViewPage",
+            attr: Object.assign(Object.assign({}, commonActions.newPage), { title: "New" }),
+        });
+    }
+    if (commonActions === null || commonActions === void 0 ? void 0 : commonActions.filterPage) {
+        newToolbarActions.push({
+            label: "Filter",
+            component: "LookupPage",
+            attr: Object.assign(Object.assign({}, commonActions.filterPage), { title: "Filter" }),
+        });
+    }
+    return (_jsx(TableProvider, { data: data, columns: cols, rowsPerPage: rowsPerPage, disableTotalCount: disableTotalCount, listHandlerFactory: listHandlerFactory, tenant: tenant !== null && tenant !== void 0 ? tenant : "", module: module !== null && module !== void 0 ? module : "", resolvedParams: resolveParams(), children: _jsx(InnerDataList, Object.assign({}, rest, { cols: cols, rowActions: newRowActions, toolbarActions: newToolbarActions })) }));
+};
+export default DataList;
+const RefreshButton = ({ show, onClick, size = 18 }) => {
+    if (!show)
+        return null;
+    return (_jsx("span", { className: "text-gray-600 hover:bg-gray-200 rounded p-2", children: _jsx(RefreshCcw, { size: size, onClick: onClick, className: "cursor-pointer" }) }));
+};
+const ColumnToggle = ({ columns, hiddenColumns, setHiddenColumns }) => {
+    const [showColumnToggle, setShowColumnToggle] = useState(false);
+    return (_jsxs("div", { className: "relative", children: [_jsx("span", { className: "text-gray-600 hover:bg-gray-200 rounded p-2 cursor-pointer flex items-center", onClick: () => setShowColumnToggle(!showColumnToggle), children: _jsx(Columns, { size: 18 }) }), showColumnToggle && (_jsxs("div", { className: "absolute right-0 top-8 z-50 bg-white border border-gray-200 rounded-lg shadow-lg p-3 min-w-[180px]", children: [_jsx("p", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2", children: "Columns" }), columns.map((col) => {
+                        const colId = col.id || String(col.title);
+                        const isHidden = hiddenColumns.includes(colId);
+                        return (_jsxs("label", { className: "flex items-center gap-2 py-1 cursor-pointer hover:bg-gray-50 px-1 rounded", children: [_jsx("input", { type: "checkbox", checked: !isHidden, onChange: () => setHiddenColumns((prev) => (isHidden ? prev.filter((id) => id !== colId) : [...prev, colId])) }), _jsx("span", { className: "text-sm text-gray-700", children: String(col.title || col.id) })] }, colId));
+                    })] }))] }));
+};
+const SearchBox = ({ searchable, searchPlaceholder, searchText, onSearch }) => {
+    if (!searchable)
+        return null;
+    return (_jsxs("div", { className: "dl-search-box ml-2", children: [_jsx("span", { children: _jsx(Search, { size: 16 }) }), _jsx("input", { type: "text", placeholder: searchPlaceholder, value: searchText, onChange: (e) => onSearch(e.target.value), className: "focus:outline-none focus:ring-0 focus:shadow-none focus:bg-white" })] }));
+};