@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/data-display/data-table/data-table-toolbar.tsx

@@ -0,0 +1,353 @@
+"use client";
+
+import { useState } from "react";
+import { Filter, LayoutGrid, RefreshCw, Search, Table2, X } from "lucide-react";
+import type { ReactNode } from "react";
+import type { Table } from "@tanstack/react-table";
+
+import { Button } from "../../primitives";
+import { Input } from "../../primitives";
+import { Separator } from "../../primitives";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../primitives/client";
+import { DataTableViewOptions } from "../data-table-view-options";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface ActiveFilter {
+  name: string;
+  value: unknown;
+  operator: string;
+}
+
+export interface FilterConfig {
+  name: string;
+  label: string;
+  type: "text" | "select" | "checkbox" | "radio" | "datetime" | "custom";
+  field: string;
+  options?: Array<{ label: string; value: string | number | boolean }>;
+  renderFilter?: (props: {
+    value: unknown;
+    onChange: (value: unknown) => void;
+  }) => ReactNode;
+}
+
+export interface DataTableToolbarProps<TData> {
+  /**
+   * Table instance for column visibility options
+   */
+  table?: Table<TData>;
+
+  /**
+   * Enable search input
+   * @default true
+   */
+  searchEnabled?: boolean;
+
+  /**
+   * Current search value
+   */
+  searchValue?: string;
+
+  /**
+   * Search change callback
+   */
+  onSearchChange?: (value: string) => void;
+
+  /**
+   * Search placeholder text
+   * @default "Search..."
+   */
+  searchPlaceholder?: string;
+
+  /**
+   * Filter configurations
+   */
+  filters?: FilterConfig[];
+
+  /**
+   * Active filters
+   */
+  activeFilters?: ActiveFilter[];
+
+  /**
+   * Filter change callback
+   */
+  onFiltersChange?: (filters: ActiveFilter[]) => void;
+
+  /**
+   * Current view mode
+   */
+  viewMode?: "table" | "card";
+
+  /**
+   * View mode change callback
+   */
+  onViewModeChange?: (mode: "table" | "card") => void;
+
+  /**
+   * Custom content for left side (before search)
+   */
+  leftSlot?: ReactNode;
+
+  /**
+   * Custom content for right side (after view options)
+   */
+  rightSlot?: ReactNode;
+
+  /**
+   * Custom filter builder component
+   */
+  filterBuilder?: ReactNode;
+
+  /**
+   * Enable column visibility toggle
+   * @default true
+   */
+  enableColumnToggle?: boolean;
+
+  /**
+   * Enable view mode toggle (table/card)
+   * @default false
+   */
+  enableViewModeToggle?: boolean;
+
+  /**
+   * Reset all callback
+   */
+  onReset?: () => void;
+}
+
+// ============================================================================
+// DataTableToolbar Component
+// ============================================================================
+
+export function DataTableToolbar<TData>({
+  table,
+  searchEnabled = true,
+  searchValue = "",
+  onSearchChange,
+  searchPlaceholder = "Tìm kiếm...",
+  filters = [],
+  activeFilters = [],
+  onFiltersChange,
+  viewMode = "table",
+  onViewModeChange,
+  leftSlot,
+  rightSlot,
+  filterBuilder,
+  enableColumnToggle = true,
+  enableViewModeToggle = false,
+  onReset,
+}: DataTableToolbarProps<TData>) {
+  const [filterOpen, setFilterOpen] = useState(false);
+
+  const hasActiveFilters = activeFilters.length > 0;
+  const hasFilters = filters.length > 0;
+  const hasActiveSearch = searchValue && searchValue.trim().length > 0;
+  const hasAnyActive = hasActiveFilters || hasActiveSearch;
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onSearchChange?.(e.target.value);
+  };
+
+  const handleClearFilters = () => {
+    onFiltersChange?.([]);
+    setFilterOpen(false);
+  };
+
+  const handleReset = () => {
+    onSearchChange?.("");
+    onFiltersChange?.([]);
+    setFilterOpen(false);
+    onReset?.();
+  };
+
+  return (
+    <div className="space-y-2">
+      {/* Main toolbar row */}
+      <div className="flex items-center gap-3 flex-wrap">
+        {/* Left slot */}
+        {leftSlot}
+
+        {/* Search */}
+        {searchEnabled && (
+          <>
+            <div className="flex-1 min-w-[200px] sm:min-w-[250px] w-full sm:w-auto relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={searchPlaceholder}
+                value={searchValue}
+                onChange={handleSearchChange}
+                className="pl-9 pr-9 h-9 text-xs"
+              />
+              {hasActiveSearch && (
+                <button
+                  onClick={() => onSearchChange?.("")}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                  aria-label="Clear search"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+            {(hasFilters || enableViewModeToggle || enableColumnToggle) && (
+              <Separator
+                orientation="vertical"
+                className="h-6 hidden sm:block"
+              />
+            )}
+          </>
+        )}
+
+        {/* Filters */}
+        {hasFilters && (
+          <>
+            <Popover open={filterOpen} onOpenChange={setFilterOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant={hasActiveFilters ? "default" : "outline"}
+                  size="sm"
+                  className="gap-2 shrink-0"
+                >
+                  <Filter className="h-4 w-4" />
+                  <span className="hidden sm:inline">Bộ lọc</span>
+                  {hasActiveFilters && (
+                    <span className="ml-1 rounded-full bg-primary-foreground/20 px-1.5 py-0.5 text-xs">
+                      {activeFilters.length}
+                    </span>
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-80 p-4" align="start">
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <h4 className="font-medium text-sm">Bộ lọc</h4>
+                    {hasActiveFilters && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={handleClearFilters}
+                        className="h-7 text-xs"
+                      >
+                        <X className="h-3 w-3 mr-1" />
+                        Xóa tất cả
+                      </Button>
+                    )}
+                  </div>
+                  <div className="space-y-4 max-h-[400px] overflow-y-auto -mx-2 px-2">
+                    {filterBuilder}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+
+            {/* Reset button */}
+            {hasAnyActive && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleReset}
+                className="gap-2 shrink-0"
+                title="Đặt lại tìm kiếm và bộ lọc"
+              >
+                <RefreshCw className="h-4 w-4" />
+                <span className="hidden sm:inline">Đặt lại</span>
+              </Button>
+            )}
+          </>
+        )}
+
+        {/* View Options Group */}
+        <div className="flex items-center gap-2 shrink-0 ml-auto">
+          {/* View Mode Toggle */}
+          {enableViewModeToggle && onViewModeChange && (
+            <>
+              <Separator
+                orientation="vertical"
+                className="h-6 hidden sm:block"
+              />
+              <div className="flex items-center gap-1 border rounded-md p-0.5">
+                <Button
+                  variant={viewMode === "table" ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => onViewModeChange("table")}
+                  className="h-7 px-2"
+                  aria-label="Table view"
+                  title="Xem dạng bảng"
+                >
+                  <Table2 className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant={viewMode === "card" ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => onViewModeChange("card")}
+                  className="h-7 px-2"
+                  aria-label="Card view"
+                  title="Xem dạng thẻ"
+                >
+                  <LayoutGrid className="h-4 w-4" />
+                </Button>
+              </div>
+            </>
+          )}
+
+          {/* Column Toggle */}
+          {table && enableColumnToggle && viewMode === "table" && (
+            <>
+              <Separator
+                orientation="vertical"
+                className="h-6 hidden sm:block"
+              />
+              <DataTableViewOptions table={table} />
+            </>
+          )}
+
+          {/* Right slot */}
+          {rightSlot}
+        </div>
+      </div>
+
+      {/* Active filter chips */}
+      {hasActiveFilters && (
+        <div className="flex flex-wrap gap-2">
+          {activeFilters.map((filter) => {
+            const filterConfig = filters.find((f) => f.name === filter.name);
+            const label = filterConfig?.label || filter.name;
+            const displayValue =
+              typeof filter.value === "object"
+                ? JSON.stringify(filter.value)
+                : String(filter.value);
+
+            return (
+              <div
+                key={filter.name}
+                className="inline-flex items-center gap-1 px-2 py-1 bg-muted rounded-md text-xs"
+              >
+                <span className="text-muted-foreground">{label}:</span>
+                <span className="font-medium">{displayValue}</span>
+                <button
+                  onClick={() => {
+                    const newFilters = activeFilters.filter(
+                      (f) => f.name !== filter.name,
+                    );
+                    onFiltersChange?.(newFilters);
+                  }}
+                  className="ml-1 text-muted-foreground hover:text-foreground"
+                  aria-label="Clear filter"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}