@moontra/moonui-pro 2.3.8 → 2.4.1

package/src/components/data-table/data-table-filter-drawer.tsx

@@ -0,0 +1,442 @@
+"use client"
+
+import React, { useState, useMemo } from 'react'
+import { Column, Table } from '@tanstack/react-table'
+import { X, Filter, Trash2, Plus } from 'lucide-react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Switch } from '../ui/switch'
+import { Separator } from '../ui/separator'
+import { cn } from '../../lib/utils'
+import { motion, AnimatePresence } from 'framer-motion'
+
+export interface FilterCondition {
+  column: string
+  operator: FilterOperator
+  value: any
+}
+
+export type FilterOperator = 
+  | 'equals' 
+  | 'notEquals' 
+  | 'contains' 
+  | 'notContains' 
+  | 'startsWith' 
+  | 'endsWith'
+  | 'greaterThan'
+  | 'lessThan'
+  | 'greaterThanOrEqual'
+  | 'lessThanOrEqual'
+  | 'between'
+  | 'in'
+  | 'notIn'
+  | 'isNull'
+  | 'isNotNull'
+
+export interface DataTableFilterDrawerProps<TData> {
+  table: Table<TData>
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  position?: 'left' | 'right'
+  width?: string
+  filters?: FilterCondition[]
+  onFiltersChange?: (filters: FilterCondition[]) => void
+  customFilters?: React.ReactNode
+}
+
+const operatorLabels: Record<FilterOperator, string> = {
+  equals: 'Equals',
+  notEquals: 'Not equals',
+  contains: 'Contains',
+  notContains: 'Not contains',
+  startsWith: 'Starts with',
+  endsWith: 'Ends with',
+  greaterThan: 'Greater than',
+  lessThan: 'Less than',
+  greaterThanOrEqual: 'Greater than or equal',
+  lessThanOrEqual: 'Less than or equal',
+  between: 'Between',
+  in: 'In',
+  notIn: 'Not in',
+  isNull: 'Is empty',
+  isNotNull: 'Is not empty',
+}
+
+function getOperatorsForColumnType(columnType?: string): FilterOperator[] {
+  switch (columnType) {
+    case 'number':
+      return ['equals', 'notEquals', 'greaterThan', 'lessThan', 'greaterThanOrEqual', 'lessThanOrEqual', 'between', 'isNull', 'isNotNull']
+    case 'date':
+      return ['equals', 'notEquals', 'greaterThan', 'lessThan', 'greaterThanOrEqual', 'lessThanOrEqual', 'between', 'isNull', 'isNotNull']
+    case 'boolean':
+      return ['equals', 'notEquals', 'isNull', 'isNotNull']
+    case 'select':
+      return ['equals', 'notEquals', 'in', 'notIn', 'isNull', 'isNotNull']
+    default: // string
+      return ['equals', 'notEquals', 'contains', 'notContains', 'startsWith', 'endsWith', 'isNull', 'isNotNull']
+  }
+}
+
+export function DataTableFilterDrawer<TData>({
+  table,
+  open,
+  onOpenChange,
+  position = 'right',
+  width = '400px',
+  filters: externalFilters,
+  onFiltersChange,
+  customFilters,
+}: DataTableFilterDrawerProps<TData>) {
+  const [internalFilters, setInternalFilters] = useState<FilterCondition[]>([])
+  const [matchAll, setMatchAll] = useState(true)
+
+  const filters = externalFilters || internalFilters
+  const setFilters = onFiltersChange || setInternalFilters
+
+  // Get filterable columns
+  const filterableColumns = useMemo(() => {
+    return table.getAllColumns().filter(column => {
+      // Skip special columns
+      if (column.id === 'select' || column.id === 'actions' || column.id === 'expander') {
+        return false
+      }
+      // Only include columns that can be filtered
+      return column.getCanFilter()
+    })
+  }, [table])
+
+  const addFilter = () => {
+    const firstColumn = filterableColumns[0]
+    if (!firstColumn) return
+
+    const newFilter: FilterCondition = {
+      column: firstColumn.id,
+      operator: 'contains',
+      value: '',
+    }
+    setFilters([...filters, newFilter])
+  }
+
+  const updateFilter = (index: number, updates: Partial<FilterCondition>) => {
+    const newFilters = [...filters]
+    newFilters[index] = { ...newFilters[index], ...updates }
+    setFilters(newFilters)
+  }
+
+  const removeFilter = (index: number) => {
+    setFilters(filters.filter((_, i) => i !== index))
+  }
+
+  const clearAllFilters = () => {
+    setFilters([])
+    table.resetColumnFilters()
+  }
+
+  const applyFilters = () => {
+    // Reset all column filters first
+    table.resetColumnFilters()
+
+    // Apply each filter
+    filters.forEach(filter => {
+      const column = table.getColumn(filter.column)
+      if (!column) return
+
+      // Apply filter based on operator
+      switch (filter.operator) {
+        case 'equals':
+          column.setFilterValue(filter.value)
+          break
+        case 'notEquals':
+          column.setFilterValue((value: any) => value !== filter.value)
+          break
+        case 'contains':
+          column.setFilterValue((value: any) => 
+            String(value).toLowerCase().includes(String(filter.value).toLowerCase())
+          )
+          break
+        case 'notContains':
+          column.setFilterValue((value: any) => 
+            !String(value).toLowerCase().includes(String(filter.value).toLowerCase())
+          )
+          break
+        case 'startsWith':
+          column.setFilterValue((value: any) => 
+            String(value).toLowerCase().startsWith(String(filter.value).toLowerCase())
+          )
+          break
+        case 'endsWith':
+          column.setFilterValue((value: any) => 
+            String(value).toLowerCase().endsWith(String(filter.value).toLowerCase())
+          )
+          break
+        case 'greaterThan':
+          column.setFilterValue((value: any) => Number(value) > Number(filter.value))
+          break
+        case 'lessThan':
+          column.setFilterValue((value: any) => Number(value) < Number(filter.value))
+          break
+        case 'greaterThanOrEqual':
+          column.setFilterValue((value: any) => Number(value) >= Number(filter.value))
+          break
+        case 'lessThanOrEqual':
+          column.setFilterValue((value: any) => Number(value) <= Number(filter.value))
+          break
+        case 'isNull':
+          column.setFilterValue((value: any) => value == null || value === '')
+          break
+        case 'isNotNull':
+          column.setFilterValue((value: any) => value != null && value !== '')
+          break
+        // Add more operators as needed
+      }
+    })
+
+    onOpenChange(false)
+  }
+
+  return (
+    <>
+      {/* Backdrop */}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/20 z-40"
+            onClick={() => onOpenChange(false)}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Drawer */}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ x: position === 'right' ? '100%' : '-100%' }}
+            animate={{ x: 0 }}
+            exit={{ x: position === 'right' ? '100%' : '-100%' }}
+            transition={{ type: 'spring', damping: 30, stiffness: 300 }}
+            className={cn(
+              "fixed top-0 bottom-0 z-50 bg-background border-l shadow-xl",
+              position === 'right' ? 'right-0' : 'left-0'
+            )}
+            style={{ width }}
+          >
+            <div className="flex flex-col h-full">
+              {/* Header */}
+              <div className="flex items-center justify-between p-4 border-b">
+                <div className="flex items-center gap-2">
+                  <Filter className="h-5 w-5" />
+                  <h2 className="text-lg font-semibold">Filters</h2>
+                  {filters.length > 0 && (
+                    <span className="text-sm text-muted-foreground">
+                      ({filters.length} active)
+                    </span>
+                  )}
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => onOpenChange(false)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 overflow-y-auto p-4">
+                {/* Match mode */}
+                <div className="mb-6">
+                  <Label className="text-sm font-medium mb-2 block">
+                    Match conditions
+                  </Label>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant={matchAll ? 'primary' : 'outline'}
+                      size="sm"
+                      onClick={() => setMatchAll(true)}
+                      className="flex-1"
+                    >
+                      Match all
+                    </Button>
+                    <Button
+                      variant={!matchAll ? 'primary' : 'outline'}
+                      size="sm"
+                      onClick={() => setMatchAll(false)}
+                      className="flex-1"
+                    >
+                      Match any
+                    </Button>
+                  </div>
+                </div>
+
+                <Separator className="mb-6" />
+
+                {/* Custom filters */}
+                {customFilters && (
+                  <>
+                    {customFilters}
+                    <Separator className="my-6" />
+                  </>
+                )}
+
+                {/* Filter conditions */}
+                <div className="space-y-4">
+                  {filters.map((filter, index) => (
+                    <FilterConditionRow
+                      key={index}
+                      filter={filter}
+                      columns={filterableColumns}
+                      onUpdate={(updates) => updateFilter(index, updates)}
+                      onRemove={() => removeFilter(index)}
+                    />
+                  ))}
+                </div>
+
+                {/* Add filter button */}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={addFilter}
+                  className="w-full mt-4"
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  Add filter
+                </Button>
+              </div>
+
+              {/* Footer */}
+              <div className="p-4 border-t space-y-2">
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={clearAllFilters}
+                    disabled={filters.length === 0}
+                    className="flex-1"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Clear all
+                  </Button>
+                  <Button onClick={applyFilters} className="flex-1">
+                    Apply filters
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}
+
+interface FilterConditionRowProps<TData> {
+  filter: FilterCondition
+  columns: Column<TData, any>[]
+  onUpdate: (updates: Partial<FilterCondition>) => void
+  onRemove: () => void
+}
+
+function FilterConditionRow<TData>({
+  filter,
+  columns,
+  onUpdate,
+  onRemove,
+}: FilterConditionRowProps<TData>) {
+  const selectedColumn = columns.find(col => col.id === filter.column)
+  const columnDef = selectedColumn?.columnDef as any
+  const columnType = columnDef?.meta?.filterType || 'string'
+  const availableOperators = getOperatorsForColumnType(columnType)
+
+  const needsValue = filter.operator !== 'isNull' && filter.operator !== 'isNotNull'
+
+  return (
+    <div className="space-y-2 p-3 border rounded-lg bg-muted/30">
+      {/* Column selector */}
+      <div className="flex items-center gap-2">
+        <Select
+          value={filter.column}
+          onValueChange={(value) => onUpdate({ column: value })}
+        >
+          <SelectTrigger className="flex-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {columns.map(column => {
+              const header = column.columnDef.header
+              const label = typeof header === 'function' ? column.id : header || column.id
+              
+              return (
+                <SelectItem key={column.id} value={column.id}>
+                  {label}
+                </SelectItem>
+              )
+            })}
+          </SelectContent>
+        </Select>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onRemove}
+          className="h-8 w-8"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Operator selector */}
+      <Select
+        value={filter.operator}
+        onValueChange={(value) => onUpdate({ operator: value as FilterOperator })}
+      >
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {availableOperators.map(operator => (
+            <SelectItem key={operator} value={operator}>
+              {operatorLabels[operator]}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* Value input */}
+      {needsValue && (
+        <div>
+          {columnType === 'boolean' ? (
+            <Select
+              value={String(filter.value)}
+              onValueChange={(value) => onUpdate({ value: value === 'true' })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="true">True</SelectItem>
+                <SelectItem value="false">False</SelectItem>
+              </SelectContent>
+            </Select>
+          ) : columnType === 'number' ? (
+            <Input
+              type="number"
+              value={filter.value || ''}
+              onChange={(e) => onUpdate({ value: e.target.value })}
+              placeholder="Enter value..."
+            />
+          ) : (
+            <Input
+              value={filter.value || ''}
+              onChange={(e) => onUpdate({ value: e.target.value })}
+              placeholder="Enter value..."
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}