@ramesesinc/platform-core 0.1.0

package/dist/components/table/DataList.tsx

@@ -0,0 +1,782 @@
+import { Columns, Eye, RefreshCcw, Search, Trash } from "lucide-react";
+import React, { 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 { ColumnDefinition, DataTable } from "./DataTable";
+import ListHandler, { ListActionHandler, ListHandlerConfig } from "./ListHandler";
+import { DataConfig, TableProvider, useTableContext } from "./TableContext";
+// import "./DataList.css";
+
+// ============================================================================
+// TYPE DEFINITIONS
+// ============================================================================
+
+export interface FilterDefinition {
+  name: string;
+  component: string;
+  attr?: Record<string, any>;
+}
+
+export interface ActionDefinition {
+  label?: string;
+  icon?: string | React.ReactNode;
+  component: string;
+  attr: Record<string, any>;
+  variant?: "default" | "primary" | "danger";
+  show?: (row: any) => boolean;
+}
+
+export interface BulkActionDefinition {
+  label: string;
+  icon?: string;
+  onClick: (selectedRows: any[]) => void;
+  variant?: "default" | "primary" | "danger";
+}
+
+export interface ToolbarActionDefinition {
+  label: string;
+  icon?: string;
+  component: string;
+  attr: Record<string, any>;
+  variant?: "default" | "primary";
+}
+
+// ============================================================================
+// ATTR — the only prop DataList accepts
+// ============================================================================
+
+export interface DataListAttr {
+  // Required
+  cols: ColumnDefinition[];
+  data: DataConfig;
+
+  // Pagination / fetch config
+  rowsPerPage?: number;
+  disableTotalCount?: boolean;
+
+  // Display
+  title?: string;
+  emptyMessage?: string;
+  errorMessage?: string;
+  striped?: boolean;
+  bordered?: boolean;
+  hover?: boolean;
+  dense?: boolean;
+
+  showPagination?: boolean;
+  paginationPosition?: "top" | "bottom" | "both";
+  showPageInfo?: boolean;
+  showTotalCount?: boolean;
+  showRowsPerPage?: boolean;
+  rowsPerPageOptions?: number[];
+
+  // Search
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  searchDebounce?: number;
+  onSearchChange?: (text: string) => void;
+
+  // Filters
+  filters?: FilterDefinition[] | FilterDefinition[][];
+  showFilterPanel?: boolean;
+  onFilterChange?: (filters: Record<string, any>) => void;
+
+  // Sorting
+  sortable?: boolean;
+  defaultSort?: { column: string; direction: "asc" | "desc" };
+  showSortIndicator?: boolean;
+
+  // Selection
+  selectable?: boolean;
+  selectionMode?: "single" | "multiple";
+  onSelectionChange?: (selectedRows: any[]) => void;
+  selectOnRowClick?: boolean;
+
+  // Row / action callbacks
+  onRowClick?: (row: any, rowIndex: number) => void;
+  onRowDoubleClick?: (row: any, rowIndex: number) => void;
+  rowActions?: ActionDefinition[];
+  bulkActions?: BulkActionDefinition[];
+  showBulkActions?: boolean;
+  toolbarActions?: ToolbarActionDefinition[];
+  commonActions?: Record<string, any>;
+
+  // Toolbar
+  showToolbar?: boolean;
+  toolbarTitle?: string;
+  showRefreshButton?: boolean;
+  showExportButton?: boolean;
+
+  // Lifecycle callbacks
+  onLoad?: () => void;
+  onError?: (error: any) => void;
+  onRefresh?: () => void;
+  onExport?: () => void;
+
+  // Styling
+  className?: string;
+  rowClassName?: (row: any, rowIndex: number) => string;
+
+  depends?: string;
+}
+
+// ============================================================================
+// PUBLIC DATALIST PROPS — only attr, nothing else
+// ============================================================================
+
+export interface DataListProps {
+  attr: DataListAttr;
+}
+
+// ============================================================================
+// INNER DATALIST — lives inside TableProvider, consumes context
+// ============================================================================
+
+type InnerProps = Omit<DataListAttr, "data" | "rowsPerPage" | "disableTotalCount">;
+
+const InnerDataList: React.FC<InnerProps> = ({
+  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<string | null>(null);
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout | null>(null);
+  const [activeFilters, setActiveFilters] = useState<Record<string, any>>({});
+  const [showColumnToggle, setShowColumnToggle] = useState(false);
+  const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
+
+  const isLoading = ctxLoading || internalLoading;
+
+  const pageContext = usePageContext();
+
+  const refreshHandler = async () => {
+    // console.log("refresh via notify depends", pageContext?.uuid);
+    await handleRefresh();
+  };
+
+  useDependHandler({
+    name: 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?.();
+    } catch (err: any) {
+      setError(err?.message || "Failed to load data");
+      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: string) => {
+    setSearchText(text);
+    if (searchTimeout) clearTimeout(searchTimeout);
+    const timeout = setTimeout(async () => {
+      if (!listHandler) return;
+      await listHandler.doSearch(text);
+      await loadData();
+      onSearchChange?.(text);
+    }, searchDebounce);
+    setSearchTimeout(timeout);
+  };
+
+  // ============================================================================
+  // FILTER
+  // ============================================================================
+
+  const handleFilterChange = async (field: string, value: any) => {
+    if (!listHandler) return;
+    const newFilters = { ...activeFilters, [field]: value };
+    setActiveFilters(newFilters);
+    await listHandler.setFilter(newFilters);
+    await loadData();
+    onFilterChange?.(newFilters);
+  };
+
+  const handleResetFilters = async () => {
+    if (!listHandler) return;
+    setActiveFilters({});
+    await listHandler.resetFilter();
+    await loadData();
+    onFilterChange?.({});
+  };
+
+  // ============================================================================
+  // SORT
+  // ============================================================================
+
+  const handleSort = async (columnId: string) => {
+    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: number) => {
+    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: number) => {
+    if (!listHandler) return;
+    await listHandler.setRowsPerPage(n);
+    await loadData();
+  };
+
+  // ============================================================================
+  // SELECTION
+  // ============================================================================
+
+  const handleSelectionChange = (keys: string[]) => {
+    setSelectedRows(keys);
+    if (onSelectionChange) {
+      const selectedData = rows.filter((row) => keys.includes(row.id || JSON.stringify(row)));
+      onSelectionChange(selectedData);
+    }
+  };
+
+  // ============================================================================
+  // ROW CLICK
+  // ============================================================================
+
+  const handleRowClick = (row: any, rowIndex: number) => {
+    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?.(row, rowIndex);
+  };
+
+  // ============================================================================
+  // REFRESH
+  // ============================================================================
+
+  const handleRefresh = async () => {
+    await loadData();
+    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: any, rowIndex: number) => {
+    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 (
+      <div className="dl-actions flex justify-center items-center">
+        {visible.map((action, i) => (
+          <div key={`${uuid}-${i}`}>
+            <DynamicComponent
+              config={{
+                component: action.component,
+                attr: { ...action.attr, opt: { data: row } },
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const displayColumns: ColumnDefinition[] =
+    rowActions.length > 0 && visibleUserColumns.length > 0
+      ? [
+          ...visibleUserColumns,
+          {
+            id: "_actions",
+            title: <div className="text-center w-full">Actions</div>,
+            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 {
+      ...col,
+      title: (
+        <div
+          className="dl-sortable-header"
+          onClick={() => col.id && col.id !== "_actions" && handleSort(col.id)}
+          style={{ cursor: col.id !== "_actions" ? "pointer" : "default" }}
+        >
+          {col.title}
+          {currentSort === col.id && <span className={`dl-sort-icon dl-sort-${currentDirection}`}>{currentDirection === "asc" ? "▲" : "▼"}</span>}
+        </div>
+      ),
+    };
+  });
+
+  // ============================================================================
+  // RENDER TOOLBAR
+  // ============================================================================
+
+  const renderToolbar = () => {
+    if (!showToolbar) return null;
+    const uuid = Math.random().toString(36).slice(2);
+    return (
+      <div className="dl-toolbar">
+        <div className="dl-toolbar-left">
+          {toolbarTitle && <h3 className="dl-toolbar-title">{toolbarTitle}</h3>}
+          <div className="dl-toolbar-right">
+            {showBulkActions &&
+              selectedRows.length > 0 &&
+              bulkActions.map((action, i) => (
+                <button
+                  key={action.label || i}
+                  className={`dl-btn dl-btn-${action.variant || "default"}`}
+                  onClick={() => {
+                    const selectedData = rows.filter((row) => selectedRows.includes(row.id || JSON.stringify(row)));
+                    action.onClick(selectedData);
+                  }}
+                >
+                  {action.icon && <span>{action.icon}</span>}
+                  {action.label}
+                </button>
+              ))}
+            {toolbarActions.map((action, i) => (
+              <div key={`${uuid}-${i}`}>
+                <DynamicComponent config={{ component: action.component, attr: action.attr || {} }} />
+              </div>
+            ))}
+            {showExportButton && (
+              <button className="dl-btn" onClick={onExport}>
+                <span>📥</span> Export
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center">
+          <RefreshButton show={showRefreshButton} onClick={handleRefresh} />
+
+          <ColumnToggle columns={columns} hiddenColumns={hiddenColumns} setHiddenColumns={setHiddenColumns} />
+
+          <SearchBox searchable={searchable} searchPlaceholder={searchPlaceholder} searchText={searchText} onSearch={handleSearch} />
+        </div>
+      </div>
+    );
+  };
+
+  // ============================================================================
+  // RENDER FILTER PANEL
+  // ============================================================================
+
+  const renderFilterPanel = () => {
+    if (!filters) return null;
+    return <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 (
+      <div className="dl-pagination">
+        <div className="dl-pagination-info">
+          {showPageInfo && showTotalCount && (
+            <span>
+              Showing {startRecord}-{endRecord} of {totalRecords} records
+            </span>
+          )}
+          {showPageInfo && !showTotalCount && <span>Page {currentPage}</span>}
+        </div>
+        <div className="dl-pagination-controls">
+          {showRowsPerPage && (
+            <div className="dl-rows-per-page">
+              <span>Rows per page:</span>
+              <select value={rowsPerPage} onChange={(e) => handleRowsPerPage(Number(e.target.value))}>
+                {rowsPerPageOptions.map((o) => (
+                  <option key={o} value={o}>
+                    {o}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          <button className="dl-page-btn" disabled={!hasPrev} onClick={handleFirstPage}>
+            First
+          </button>
+          <button className="dl-page-btn" disabled={!hasPrev} onClick={handlePrevPage}>
+            ← Prev
+          </button>
+          {totalPages > 0 &&
+            [...Array(Math.min(totalPages, 5))].map((_, i) => {
+              const page = i + 1;
+              return (
+                <button key={page} className={`dl-page-btn ${currentPage === page ? "active" : ""}`} onClick={() => handlePageChange(page)}>
+                  {page}
+                </button>
+              );
+            })}
+          <button className="dl-page-btn" disabled={!hasNext} onClick={handleNextPage}>
+            Next →
+          </button>
+          <button className="dl-page-btn" disabled={!hasNext} onClick={handleLastPage}>
+            Last
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  // ============================================================================
+  // ERROR STATE
+  // ============================================================================
+
+  if (error && errorMessage) {
+    return (
+      <div className="dl-error">
+        <p>{errorMessage}</p>
+        <button onClick={handleRefresh}>Retry</button>
+      </div>
+    );
+  }
+
+  // ============================================================================
+  // MAIN RENDER
+  // ============================================================================
+
+  return (
+    <div className={`data-list ${className}`}>
+      {renderToolbar()}
+      {renderFilterPanel()}
+      {(paginationPosition === "both" || paginationPosition === "top") && renderPagination()}
+      <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()}
+    </div>
+  );
+};
+
+// ============================================================================
+// 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: React.FC<DataListProps> = ({ attr }) => {
+  const { cols, data, rowsPerPage, disableTotalCount, commonActions, rowActions, toolbarActions, ...rest } = attr;
+
+  // 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: ListHandlerConfig): ListActionHandler => 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 = (): Record<string, any> | undefined => {
+    if (!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?.viewPage) {
+    newRowActions.unshift({
+      component: "ViewPage",
+      attr: {
+        ...commonActions.viewPage,
+        title: "View",
+        icon: <Eye size={20} />,
+        iconOnly: true,
+      },
+    });
+  }
+
+  if (commonActions?.deleteData) {
+    newRowActions.push({
+      component: "DeleteData",
+      attr: {
+        ...commonActions.deleteData,
+        title: "Delete",
+        icon: <Trash size={20} />,
+        iconOnly: true,
+      },
+    });
+  }
+
+  const newToolbarActions = [...(toolbarActions || [])];
+  if (commonActions?.newPage) {
+    newToolbarActions.unshift({
+      label: "New",
+      component: "ViewPage",
+      attr: {
+        ...commonActions.newPage,
+        title: "New",
+      },
+    });
+  }
+
+  if (commonActions?.filterPage) {
+    newToolbarActions.push({
+      label: "Filter",
+      component: "LookupPage",
+      attr: {
+        ...commonActions.filterPage,
+        title: "Filter",
+      },
+    });
+  }
+
+  return (
+    <TableProvider
+      data={data}
+      columns={cols}
+      rowsPerPage={rowsPerPage}
+      disableTotalCount={disableTotalCount}
+      listHandlerFactory={listHandlerFactory}
+      tenant={tenant ?? ""}
+      module={module ?? ""}
+      resolvedParams={resolveParams()}
+    >
+      <InnerDataList {...rest} cols={cols} rowActions={newRowActions} toolbarActions={newToolbarActions} />
+    </TableProvider>
+  );
+};
+
+export default DataList;
+
+interface RefreshButtonProps {
+  show: boolean;
+  onClick: () => void;
+  size?: number;
+}
+
+const RefreshButton = ({ show, onClick, size = 18 }: RefreshButtonProps) => {
+  if (!show) return null;
+
+  return (
+    <span className="text-gray-600 hover:bg-gray-200 rounded p-2">
+      <RefreshCcw size={size} onClick={onClick} className="cursor-pointer" />
+    </span>
+  );
+};
+
+interface ColumnToggleProps {
+  columns: ColumnDefinition[];
+  hiddenColumns: string[];
+  setHiddenColumns: (fn: (prev: string[]) => string[]) => void;
+}
+
+const ColumnToggle = ({ columns, hiddenColumns, setHiddenColumns }: ColumnToggleProps) => {
+  const [showColumnToggle, setShowColumnToggle] = useState(false);
+
+  return (
+    <div className="relative">
+      <span
+        className="text-gray-600 hover:bg-gray-200 rounded p-2 cursor-pointer flex items-center"
+        onClick={() => setShowColumnToggle(!showColumnToggle)}
+      >
+        <Columns size={18} />
+      </span>
+      {showColumnToggle && (
+        <div className="absolute right-0 top-8 z-50 bg-white border border-gray-200 rounded-lg shadow-lg p-3 min-w-[180px]">
+          <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Columns</p>
+          {columns.map((col) => {
+            const colId = col.id || String(col.title);
+            const isHidden = hiddenColumns.includes(colId);
+            return (
+              <label key={colId} className="flex items-center gap-2 py-1 cursor-pointer hover:bg-gray-50 px-1 rounded">
+                <input
+                  type="checkbox"
+                  checked={!isHidden}
+                  onChange={() => setHiddenColumns((prev) => (isHidden ? prev.filter((id) => id !== colId) : [...prev, colId]))}
+                />
+                <span className="text-sm text-gray-700">{String(col.title || col.id)}</span>
+              </label>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface SearchBoxProps {
+  searchable: boolean;
+  searchPlaceholder?: string;
+  searchText: string;
+  onSearch: (value: string) => void;
+}
+
+const SearchBox = ({ searchable, searchPlaceholder, searchText, onSearch }: SearchBoxProps) => {
+  if (!searchable) return null;
+
+  return (
+    <div className="dl-search-box ml-2">
+      <span>
+        <Search size={16} />
+      </span>
+      <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"
+      />
+    </div>
+  );
+};