@m5kdev/web-ui 0.1.3 → 0.1.5

package/src/modules/table/components/NuqsTable.tsx

@@ -1,396 +0,0 @@
-import { Checkbox, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
-import type { QueryFilters } from "@m5kdev/commons/modules/schemas/query.schema";
-import type { FilterMethods } from "@m5kdev/commons/modules/table/filter.types";
-import type { TableParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsTable";
-import type { ColumnDef } from "@tanstack/react-table";
-import {
-  type ColumnOrderState,
-  flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  type Table as ReactTable,
-  useReactTable,
-  type VisibilityState,
-} from "@tanstack/react-table";
-import { ChevronDown, ChevronUp } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { Button } from "#components/ui/button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "#components/ui/table";
-import { ColumnOrderAndVisibility } from "./ColumnOrderAndVisibility";
-import { TableFiltering } from "./TableFiltering";
-import { TablePagination } from "./TablePagination";
-import type { ColumnDataType, ColumnItem } from "./table.types";
-
-function getStorageKey(columnIds: string[]): string {
-  const sortedIds = [...columnIds].sort().join(",");
-  return `table-column-layout-${sortedIds}`;
-}
-
-function loadLayoutFromStorage(
-  columnIds: string[]
-): { order: string[]; visibility: Record<string, boolean> } | null {
-  if (typeof window === "undefined") return null;
-  try {
-    const key = getStorageKey(columnIds);
-    const stored = localStorage.getItem(key);
-    if (!stored) return null;
-    const parsed = JSON.parse(stored) as { order: string[]; visibility: Record<string, boolean> };
-    return parsed;
-  } catch {
-    return null;
-  }
-}
-
-function saveLayoutToStorage(
-  columnIds: string[],
-  order: string[],
-  visibility: Record<string, boolean>
-): void {
-  if (typeof window === "undefined") return;
-  try {
-    const key = getStorageKey(columnIds);
-    localStorage.setItem(key, JSON.stringify({ order, visibility }));
-  } catch {
-    // Ignore storage errors
-  }
-}
-
-export type NuqsTableColumn<T> = ColumnDef<T> & {
-  visible?: boolean;
-  type?: ColumnDataType;
-  options?: { label: string; value: string }[];
-  endColumnId?: string;
-};
-
-type NuqsTableParams<T> = {
-  data: T[];
-  total?: number;
-  columns: NuqsTableColumn<T>[];
-  tableProps: TableParams;
-  singleFilter?: boolean;
-  filterMethods?: Partial<FilterMethods>;
-};
-
-function applyOrder(prev: ColumnItem[], nextOrder: string[]): ColumnItem[] {
-  const byId = new Map(prev.map((i) => [i.id, i]));
-  const ordered = nextOrder.map((id) => byId.get(id)).filter(Boolean) as ColumnItem[];
-  // append any newly added columns (if any appear later)
-  for (const item of prev) if (!nextOrder.includes(item.id)) ordered.push(item);
-  return ordered;
-}
-
-function applyVisibility(prev: ColumnItem[], visibility: VisibilityState): ColumnItem[] {
-  return prev.map((column) => ({
-    ...column,
-    visibility: visibility[String(column.id)] ?? column.visibility,
-  }));
-}
-
-export const NuqsTable = <T,>({
-  data,
-  total,
-  columns,
-  tableProps,
-  singleFilter = false,
-  filterMethods,
-}: NuqsTableParams<T>) => {
-  const columnIds = useMemo(() => columns.map((col) => String(col.id)), [columns]);
-  console.log("data", data);
-  // const columnsWithId = useMemo(() => {
-  //   const idColumn: NuqsTableColumn<T> = {
-  //     id: "__row_id",
-  //     accessorKey: "id",
-  //     header: "",
-  //     enableSorting: false,
-  //     enableHiding: false,
-  //     visible: false,
-  //   };
-  //   return [idColumn, ...columns];
-  // }, [columns]);
-
-  const initialLayout = useMemo(() => {
-    const defaultLayout = columns.map((column) => ({
-      id: String(column.id),
-      label: column.header as string,
-      visibility: column.visible !== undefined ? column.visible : true,
-      options: column.options ?? [],
-      type: column.type ?? undefined,
-    }));
-
-    const saved = loadLayoutFromStorage(columnIds);
-    if (!saved) return defaultLayout;
-
-    // Merge saved layout with default layout
-    const savedById = new Map<string, { order: number; visibility: boolean }>();
-    saved.order.forEach((id, index) => {
-      savedById.set(id, { order: index, visibility: saved.visibility[id] ?? true });
-    });
-
-    const merged: ColumnItem[] = [];
-    const processedIds = new Set<string>();
-
-    // Add columns in saved order
-    saved.order.forEach((id) => {
-      const defaultCol = defaultLayout.find((col) => col.id === id);
-      if (defaultCol) {
-        merged.push({
-          ...defaultCol,
-          visibility: saved.visibility[id] ?? defaultCol.visibility,
-        });
-        processedIds.add(id);
-      }
-    });
-
-    // Add any new columns that weren't in saved layout
-    defaultLayout.forEach((col) => {
-      if (!processedIds.has(col.id)) {
-        merged.push(col);
-      }
-    });
-
-    return merged;
-  }, [columns, columnIds]);
-
-  const [layout, setLayout] = useState<ColumnItem[]>(initialLayout);
-
-  // Sync layout when columns change
-  useEffect(() => {
-    setLayout(initialLayout);
-  }, [initialLayout]);
-
-  // Save to localStorage whenever layout changes
-  useEffect(() => {
-    const order = layout.map((col) => col.id);
-    const visibility = Object.fromEntries(layout.map((col) => [col.id, col.visibility]));
-    saveLayoutToStorage(columnIds, order, visibility);
-  }, [layout, columnIds]);
-
-  const columnOrder = useMemo(() => layout.map((column) => column.id), [layout]);
-  const columnVisibility = useMemo(
-    () => Object.fromEntries(layout.map((column) => [column.id, column.visibility])),
-    [layout]
-  );
-
-  const {
-    limit = 10,
-    page = 1,
-    sorting,
-    setSorting,
-    setPagination,
-    pagination,
-    rowSelection,
-    setRowSelection,
-    setFilters,
-    filters,
-  } = tableProps;
-
-  // Redirect back if we're on an empty page (past the last page)
-  useEffect(() => {
-    if (data.length === 0 && page > 1 && total !== undefined) {
-      setPagination?.({ pageIndex: page - 2, pageSize: limit });
-    }
-  }, [data.length, page, limit, total, setPagination]);
-
-  // Calculate pageCount from total if available, otherwise use heuristic
-  const pageCount =
-    total !== undefined
-      ? Math.ceil(total / limit) || 1
-      : data.length === limit
-        ? page + 1
-        : Math.max(page, Math.ceil(data.length / limit));
-
-  const table = useReactTable({
-    data,
-    columns,
-    getRowId: (row) => String((row as { id: string | number }).id),
-    manualSorting: true,
-    manualPagination: true,
-    state: { pagination, sorting, rowSelection, columnOrder, columnVisibility },
-    pageCount,
-    manualFiltering: true,
-    onSortingChange: setSorting,
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onColumnOrderChange: (updater) => {
-      setLayout((prev) =>
-        applyOrder(prev, typeof updater === "function" ? updater(prev.map((i) => i.id)) : updater)
-      );
-    },
-    onColumnVisibilityChange: (updater) => {
-      setLayout((prev) =>
-        applyVisibility(
-          prev,
-          typeof updater === "function"
-            ? updater(Object.fromEntries(prev.map((i) => [i.id, i.visibility])))
-            : updater
-        )
-      );
-    },
-  }) as ReactTable<T>;
-
-  const onChangeOrder = (order: ColumnOrderState) => {
-    setLayout((prev) => applyOrder(prev, order));
-  };
-  const onChangeVisibility = (visibility: VisibilityState) => {
-    setLayout((prev) => applyVisibility(prev, visibility));
-  };
-
-  const onFiltersChange = (filters: QueryFilters) => {
-    setFilters?.(filters);
-  };
-
-  const filterableColumns = useMemo(() => {
-    const baseColumns = columns
-      .filter((column) => Boolean(column.type))
-      .map((column) => ({
-        id: String(column.id),
-        label: String(column.header),
-        type: column.type,
-        options: column.options ?? [],
-        endColumnId: column.endColumnId,
-        periodStartColumnId: null,
-        periodEndColumnId: null,
-      }));
-
-    // Add Period pseudo-columns for date columns with endColumnId
-    const periodColumns = columns
-      .filter((column) => column.type === "date" && column.endColumnId)
-      .map((column) => ({
-        id: `${String(column.id)}__period`,
-        label: "Period",
-        type: "date" as ColumnDataType,
-        options: [],
-        endColumnId: null,
-        periodStartColumnId: String(column.id),
-        periodEndColumnId: column.endColumnId,
-      }));
-
-    return [...baseColumns, ...periodColumns];
-  }, [columns]);
-
-  const [isFiltersOpen, setIsFiltersOpen] = useState(false);
-  const [isColumnsOpen, setIsColumnsOpen] = useState(false);
-
-  return (
-    <>
-      <div className="flex w-full items-center gap-2 justify-end">
-        <Popover
-          placement="bottom"
-          isOpen={isFiltersOpen}
-          onOpenChange={setIsFiltersOpen}
-          portalContainer={document.body}
-        >
-          <PopoverTrigger>
-            <Button variant="outline" size="sm">
-              <div className="flex items-center gap-2">
-                Filters
-                <ChevronDown className="h-4 w-4" />
-              </div>
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent>
-            <TableFiltering
-              columns={filterableColumns}
-              onFiltersChange={onFiltersChange}
-              filters={filters ?? []}
-              onClose={() => setIsFiltersOpen(false)}
-              singleFilter={singleFilter}
-              filterMethods={filterMethods}
-            />
-          </PopoverContent>
-        </Popover>
-        <Popover
-          placement="bottom"
-          isOpen={isColumnsOpen}
-          onOpenChange={setIsColumnsOpen}
-          portalContainer={document.body}
-        >
-          <PopoverTrigger>
-            <Button variant="outline" size="sm">
-              <div className="flex items-center gap-2">
-                Columns
-                <ChevronDown className="h-4 w-4" />
-              </div>
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent>
-            <ColumnOrderAndVisibility
-              layout={layout}
-              onChangeOrder={onChangeOrder}
-              onChangeVisibility={onChangeVisibility}
-              onClose={() => setIsColumnsOpen(false)}
-            />
-          </PopoverContent>
-        </Popover>
-      </div>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>
-              <Checkbox
-                isSelected={table.getIsAllRowsSelected()}
-                onValueChange={(checked) => {
-                  table.toggleAllRowsSelected(checked);
-                }}
-              />
-            </TableHead>
-            {table.getHeaderGroups()[0].headers.map((header) => (
-              <TableHead
-                onClick={
-                  header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined
-                }
-                key={header.id}
-              >
-                {flexRender(header.column.columnDef.header, header.getContext())}
-                {header.column.getCanSort() && (
-                  <>
-                    {header.column.getIsSorted() === "asc" && (
-                      <ChevronUp className="h-4 w-4 inline ml-1" />
-                    )}
-                    {header.column.getIsSorted() === "desc" && (
-                      <ChevronDown className="h-4 w-4 inline ml-1" />
-                    )}
-                  </>
-                )}
-              </TableHead>
-            ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows.map((row) => (
-            <TableRow key={row.id}>
-              <TableCell>
-                <Checkbox
-                  isSelected={row.getIsSelected()}
-                  onValueChange={(checked) => {
-                    row.toggleSelected(checked);
-                  }}
-                />
-              </TableCell>
-              {row.getVisibleCells().map((cell) => (
-                <TableCell key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-      <TablePagination
-        pageCount={pageCount}
-        page={page}
-        limit={limit}
-        setPagination={setPagination}
-      />
-    </>
-  );
-};