@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/DataTable/DataTableFilterBuilder.tsx

@@ -0,0 +1,519 @@
+"use client"
+
+import * as React from "react"
+import { Plus, Trash2, GripVertical, Save, Download, Upload, RotateCcw } from "lucide-react"
+import { Button } from "../button"
+import { Input } from "../input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select"
+import { Popover, PopoverContent, PopoverTrigger } from "../popover"
+import { Badge } from "../badge"
+import { Separator } from "../separator"
+import { Switch } from "../switch"
+import { cn } from "../../utils/cn"
+import { OPERATOR_LABELS } from "./hooks/useDataTableAdvancedFilters"
+import type {
+  FilterOperator,
+  FilterRule,
+  FilterGroup,
+  FilterPreset,
+  FilterableColumn,
+  AdvancedFiltersState,
+  AdvancedFiltersActions,
+} from "./types"
+
+interface DataTableFilterBuilderProps<TData> {
+  state: AdvancedFiltersState<TData>
+  actions: AdvancedFiltersActions<TData>
+  columns: FilterableColumn<TData>[]
+  getOperatorsForColumn: (column: keyof TData | string) => FilterOperator[]
+  className?: string
+  maxNestingDepth?: number
+}
+
+/**
+ * Composant de construction de filtres avancés
+ */
+export function DataTableFilterBuilder<TData>({
+  state,
+  actions,
+  columns,
+  getOperatorsForColumn,
+  className,
+  maxNestingDepth = 3,
+}: DataTableFilterBuilderProps<TData>) {
+  const [presetName, setPresetName] = React.useState("")
+  const [showPresetInput, setShowPresetInput] = React.useState(false)
+
+  const handleSavePreset = () => {
+    if (presetName.trim()) {
+      actions.saveAsPreset(presetName.trim())
+      setPresetName("")
+      setShowPresetInput(false)
+    }
+  }
+
+  const handleExport = () => {
+    const json = actions.exportFilters()
+    const blob = new Blob([json], { type: "application/json" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = "filters.json"
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const handleImport = () => {
+    const input = document.createElement("input")
+    input.type = "file"
+    input.accept = ".json"
+    input.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0]
+      if (file) {
+        const text = await file.text()
+        actions.importFilters(text)
+      }
+    }
+    input.click()
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Header avec presets */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium">Filtres avancés</span>
+          {state.isDirty && (
+            <Badge variant="secondary" className="text-xs">
+              Modifié
+            </Badge>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          {/* Presets dropdown */}
+          {state.presets.length > 0 && (
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" size="sm">
+                  {state.activePresetId
+                    ? state.presets.find((p) => p.id === state.activePresetId)?.name || "Presets"
+                    : "Presets"}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-64 p-2" align="end">
+                <div className="space-y-1">
+                  {state.presets.map((preset) => (
+                    <div
+                      key={preset.id}
+                      className={cn(
+                        "flex items-center justify-between p-2 rounded hover:bg-muted cursor-pointer",
+                        state.activePresetId === preset.id && "bg-muted"
+                      )}
+                      onClick={() => actions.applyPreset(preset.id)}
+                    >
+                      <div>
+                        <div className="text-sm font-medium">{preset.name}</div>
+                        {preset.description && (
+                          <div className="text-xs text-muted-foreground">{preset.description}</div>
+                        )}
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          actions.deletePreset(preset.id)
+                        }}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>
+          )}
+
+          {/* Actions */}
+          <Button variant="ghost" size="icon" onClick={handleImport} title="Importer">
+            <Upload className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={handleExport} title="Exporter">
+            <Download className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={actions.resetFilters} title="Réinitialiser">
+            <RotateCcw className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* Filter groups */}
+      <FilterGroupComponent
+        group={state.currentFilter}
+        actions={actions}
+        columns={columns}
+        getOperatorsForColumn={getOperatorsForColumn}
+        depth={0}
+        maxNestingDepth={maxNestingDepth}
+        isRoot
+      />
+
+      <Separator />
+
+      {/* Footer avec actions */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          {showPresetInput ? (
+            <>
+              <Input
+                value={presetName}
+                onChange={(e) => setPresetName(e.target.value)}
+                placeholder="Nom du preset..."
+                className="w-40 h-8"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleSavePreset()
+                  if (e.key === "Escape") setShowPresetInput(false)
+                }}
+              />
+              <Button size="sm" onClick={handleSavePreset}>
+                <Save className="h-3 w-3 mr-1" />
+                Sauvegarder
+              </Button>
+              <Button size="sm" variant="ghost" onClick={() => setShowPresetInput(false)}>
+                Annuler
+              </Button>
+            </>
+          ) : (
+            <Button size="sm" variant="outline" onClick={() => setShowPresetInput(true)}>
+              <Save className="h-3 w-3 mr-1" />
+              Sauvegarder comme preset
+            </Button>
+          )}
+        </div>
+        <Button size="sm" onClick={actions.applyFilters}>
+          Appliquer
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Composant de groupe de filtres (récursif)
+ */
+function FilterGroupComponent<TData>({
+  group,
+  actions,
+  columns,
+  getOperatorsForColumn,
+  depth,
+  maxNestingDepth,
+  isRoot = false,
+}: {
+  group: FilterGroup<TData>
+  actions: AdvancedFiltersActions<TData>
+  columns: FilterableColumn<TData>[]
+  getOperatorsForColumn: (column: keyof TData | string) => FilterOperator[]
+  depth: number
+  maxNestingDepth: number
+  isRoot?: boolean
+}) {
+  const canAddGroup = depth < maxNestingDepth
+
+  return (
+    <div
+      className={cn(
+        "space-y-2",
+        !isRoot && "pl-4 ml-2 border-l-2 border-muted"
+      )}
+    >
+      {/* Connecteur du groupe */}
+      {!isRoot && (
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1 bg-muted rounded-md p-1">
+            <Button
+              variant={group.connector === "AND" ? "default" : "ghost"}
+              size="sm"
+              className="h-6 px-2"
+              onClick={() => actions.setGroupConnector(group.id, "AND")}
+            >
+              ET
+            </Button>
+            <Button
+              variant={group.connector === "OR" ? "default" : "ghost"}
+              size="sm"
+              className="h-6 px-2"
+              onClick={() => actions.setGroupConnector(group.id, "OR")}
+            >
+              OU
+            </Button>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 text-muted-foreground hover:text-destructive"
+            onClick={() => actions.removeGroup(group.id)}
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        </div>
+      )}
+
+      {/* Règles */}
+      {group.rules.map((rule) => (
+        <FilterRuleComponent
+          key={rule.id}
+          rule={rule}
+          actions={actions}
+          columns={columns}
+          getOperatorsForColumn={getOperatorsForColumn}
+        />
+      ))}
+
+      {/* Sous-groupes */}
+      {group.groups.map((subGroup) => (
+        <FilterGroupComponent
+          key={subGroup.id}
+          group={subGroup}
+          actions={actions}
+          columns={columns}
+          getOperatorsForColumn={getOperatorsForColumn}
+          depth={depth + 1}
+          maxNestingDepth={maxNestingDepth}
+        />
+      ))}
+
+      {/* Boutons d'ajout */}
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            actions.addRule(group.id, {
+              column: columns[0]?.key || "",
+              operator: "equals",
+              value: "",
+            })
+          }
+        >
+          <Plus className="h-3 w-3 mr-1" />
+          Ajouter une règle
+        </Button>
+        {canAddGroup && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => actions.addGroup(group.id, "AND")}
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            Ajouter un groupe
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Composant de règle de filtre
+ */
+function FilterRuleComponent<TData>({
+  rule,
+  actions,
+  columns,
+  getOperatorsForColumn,
+}: {
+  rule: FilterRule<TData>
+  actions: AdvancedFiltersActions<TData>
+  columns: FilterableColumn<TData>[]
+  getOperatorsForColumn: (column: keyof TData | string) => FilterOperator[]
+}) {
+  const column = columns.find((c) => c.key === rule.column)
+  const operators = getOperatorsForColumn(rule.column)
+  const needsValue = !["isEmpty", "isNotEmpty", "isNull", "isNotNull"].includes(rule.operator)
+  const needsSecondValue = rule.operator === "between"
+
+  return (
+    <div className="flex items-center gap-2 group">
+      <GripVertical className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 cursor-grab" />
+
+      {/* Colonne */}
+      <Select
+        value={rule.column as string}
+        onValueChange={(value) => actions.updateRule(rule.id, { column: value })}
+      >
+        <SelectTrigger className="w-40 h-8">
+          <SelectValue placeholder="Colonne" />
+        </SelectTrigger>
+        <SelectContent>
+          {columns.map((col) => (
+            <SelectItem key={col.key as string} value={col.key as string}>
+              {col.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* Opérateur */}
+      <Select
+        value={rule.operator}
+        onValueChange={(value) => actions.updateRule(rule.id, { operator: value as FilterOperator })}
+      >
+        <SelectTrigger className="w-44 h-8">
+          <SelectValue placeholder="Opérateur" />
+        </SelectTrigger>
+        <SelectContent>
+          {operators.map((op) => (
+            <SelectItem key={op} value={op}>
+              {OPERATOR_LABELS[op]}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* Valeur */}
+      {needsValue && (
+        <>
+          {column?.type === "enum" && column.enumOptions ? (
+            rule.operator === "in" || rule.operator === "notIn" ? (
+              // Multi-select pour in/notIn
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" className="w-40 h-8 justify-start">
+                    {Array.isArray(rule.value) && rule.value.length > 0
+                      ? `${rule.value.length} sélectionné(s)`
+                      : "Sélectionner..."}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-56 p-2">
+                  <div className="space-y-1 max-h-48 overflow-auto">
+                    {column.enumOptions.map((opt) => (
+                      <label
+                        key={opt.value}
+                        className="flex items-center gap-2 p-1 hover:bg-muted rounded cursor-pointer"
+                      >
+                        <input
+                          type="checkbox"
+                          checked={(rule.value as string[])?.includes(opt.value) || false}
+                          onChange={(e) => {
+                            const current = (rule.value as string[]) || []
+                            const newValue = e.target.checked
+                              ? [...current, opt.value]
+                              : current.filter((v) => v !== opt.value)
+                            actions.updateRule(rule.id, { value: newValue })
+                          }}
+                          className="rounded"
+                        />
+                        <span className="text-sm">{opt.label}</span>
+                      </label>
+                    ))}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            ) : (
+              <Select
+                value={rule.value as string}
+                onValueChange={(value) => actions.updateRule(rule.id, { value })}
+              >
+                <SelectTrigger className="w-40 h-8">
+                  <SelectValue placeholder="Valeur" />
+                </SelectTrigger>
+                <SelectContent>
+                  {column.enumOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )
+          ) : column?.type === "boolean" ? (
+            <Select
+              value={String(rule.value)}
+              onValueChange={(value) => actions.updateRule(rule.id, { value: value === "true" })}
+            >
+              <SelectTrigger className="w-32 h-8">
+                <SelectValue placeholder="Valeur" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="true">Oui</SelectItem>
+                <SelectItem value="false">Non</SelectItem>
+              </SelectContent>
+            </Select>
+          ) : column?.type === "number" ? (
+            <>
+              <Input
+                type="number"
+                value={rule.value as string}
+                onChange={(e) => actions.updateRule(rule.id, { value: e.target.valueAsNumber })}
+                placeholder="Valeur"
+                className="w-32 h-8"
+              />
+              {needsSecondValue && (
+                <>
+                  <span className="text-sm text-muted-foreground">et</span>
+                  <Input
+                    type="number"
+                    value={rule.valueTo as string}
+                    onChange={(e) => actions.updateRule(rule.id, { valueTo: e.target.valueAsNumber })}
+                    placeholder="Valeur max"
+                    className="w-32 h-8"
+                  />
+                </>
+              )}
+            </>
+          ) : column?.type === "date" || column?.type === "datetime" ? (
+            <>
+              <Input
+                type={column.type === "datetime" ? "datetime-local" : "date"}
+                value={rule.value as string}
+                onChange={(e) => actions.updateRule(rule.id, { value: e.target.value })}
+                className="w-40 h-8"
+              />
+              {needsSecondValue && (
+                <>
+                  <span className="text-sm text-muted-foreground">et</span>
+                  <Input
+                    type={column.type === "datetime" ? "datetime-local" : "date"}
+                    value={rule.valueTo as string}
+                    onChange={(e) => actions.updateRule(rule.id, { valueTo: e.target.value })}
+                    className="w-40 h-8"
+                  />
+                </>
+              )}
+            </>
+          ) : (
+            <Input
+              value={rule.value as string}
+              onChange={(e) => actions.updateRule(rule.id, { value: e.target.value })}
+              placeholder="Valeur"
+              className="w-40 h-8"
+            />
+          )}
+        </>
+      )}
+
+      {/* Toggle enabled */}
+      <Switch
+        checked={rule.enabled !== false}
+        onCheckedChange={(checked) => actions.updateRule(rule.id, { enabled: checked })}
+        className="h-4 w-7"
+      />
+
+      {/* Delete */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-6 w-6 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100"
+        onClick={() => actions.removeRule(rule.id)}
+      >
+        <Trash2 className="h-3 w-3" />
+      </Button>
+    </div>
+  )
+}
+
+export default DataTableFilterBuilder