@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/DataTable/hooks/useDataTableAdvancedFilters.ts

@@ -0,0 +1,637 @@
+import { useState, useMemo, useCallback, useEffect } from "react"
+import type {
+  FilterOperator,
+  FilterColumnType,
+  FilterRule,
+  FilterGroup,
+  FilterPreset,
+  FilterableColumn,
+  AdvancedFiltersConfig,
+  AdvancedFiltersState,
+  AdvancedFiltersActions,
+  AdvancedFiltersResult,
+} from "../types"
+
+/**
+ * Génère un ID unique
+ */
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
+}
+
+/**
+ * Opérateurs par type de colonne
+ */
+const OPERATORS_BY_TYPE: Record<FilterColumnType, FilterOperator[]> = {
+  string: [
+    "equals",
+    "notEquals",
+    "contains",
+    "notContains",
+    "startsWith",
+    "endsWith",
+    "isEmpty",
+    "isNotEmpty",
+    "isNull",
+    "isNotNull",
+  ],
+  number: [
+    "equals",
+    "notEquals",
+    "greaterThan",
+    "greaterThanOrEqual",
+    "lessThan",
+    "lessThanOrEqual",
+    "between",
+    "isNull",
+    "isNotNull",
+  ],
+  date: [
+    "equals",
+    "notEquals",
+    "greaterThan",
+    "greaterThanOrEqual",
+    "lessThan",
+    "lessThanOrEqual",
+    "between",
+    "isNull",
+    "isNotNull",
+  ],
+  datetime: [
+    "equals",
+    "notEquals",
+    "greaterThan",
+    "greaterThanOrEqual",
+    "lessThan",
+    "lessThanOrEqual",
+    "between",
+    "isNull",
+    "isNotNull",
+  ],
+  boolean: ["equals", "notEquals", "isNull", "isNotNull"],
+  enum: ["equals", "notEquals", "in", "notIn", "isNull", "isNotNull"],
+  array: ["contains", "notContains", "isEmpty", "isNotEmpty", "isNull", "isNotNull"],
+}
+
+/**
+ * Labels des opérateurs pour l'affichage
+ */
+export const OPERATOR_LABELS: Record<FilterOperator, string> = {
+  equals: "est égal à",
+  notEquals: "est différent de",
+  contains: "contient",
+  notContains: "ne contient pas",
+  startsWith: "commence par",
+  endsWith: "finit par",
+  greaterThan: "supérieur à",
+  greaterThanOrEqual: "supérieur ou égal à",
+  lessThan: "inférieur à",
+  lessThanOrEqual: "inférieur ou égal à",
+  between: "entre",
+  in: "est dans",
+  notIn: "n'est pas dans",
+  isEmpty: "est vide",
+  isNotEmpty: "n'est pas vide",
+  isNull: "est null",
+  isNotNull: "n'est pas null",
+}
+
+/**
+ * Évalue une règle de filtre sur une ligne de données
+ */
+function evaluateRule<TData>(
+  row: TData,
+  rule: FilterRule<TData>,
+  columns: FilterableColumn<TData>[]
+): boolean {
+  const column = columns.find((c) => c.key === rule.column)
+
+  // Si la colonne a une fonction de filtre personnalisée
+  if (column?.filterFn) {
+    return column.filterFn(row, rule)
+  }
+
+  const value = (row as Record<string, unknown>)[rule.column as string]
+  const filterValue = rule.value
+  const filterValueTo = rule.valueTo
+
+  // Opérateurs de nullité
+  if (rule.operator === "isNull") return value === null || value === undefined
+  if (rule.operator === "isNotNull") return value !== null && value !== undefined
+  if (rule.operator === "isEmpty") {
+    if (Array.isArray(value)) return value.length === 0
+    if (typeof value === "string") return value.trim() === ""
+    return value === null || value === undefined
+  }
+  if (rule.operator === "isNotEmpty") {
+    if (Array.isArray(value)) return value.length > 0
+    if (typeof value === "string") return value.trim() !== ""
+    return value !== null && value !== undefined
+  }
+
+  // Si la valeur est null/undefined, les autres opérateurs retournent false
+  if (value === null || value === undefined) return false
+
+  // Comparaisons de chaînes
+  if (typeof value === "string" || column?.type === "string") {
+    const strValue = String(value).toLowerCase()
+    const strFilter = String(filterValue ?? "").toLowerCase()
+
+    switch (rule.operator) {
+      case "equals":
+        return strValue === strFilter
+      case "notEquals":
+        return strValue !== strFilter
+      case "contains":
+        return strValue.includes(strFilter)
+      case "notContains":
+        return !strValue.includes(strFilter)
+      case "startsWith":
+        return strValue.startsWith(strFilter)
+      case "endsWith":
+        return strValue.endsWith(strFilter)
+      default:
+        return true
+    }
+  }
+
+  // Comparaisons numériques
+  if (typeof value === "number" || column?.type === "number") {
+    const numValue = Number(value)
+    const numFilter = Number(filterValue)
+    const numFilterTo = filterValueTo !== undefined ? Number(filterValueTo) : undefined
+
+    switch (rule.operator) {
+      case "equals":
+        return numValue === numFilter
+      case "notEquals":
+        return numValue !== numFilter
+      case "greaterThan":
+        return numValue > numFilter
+      case "greaterThanOrEqual":
+        return numValue >= numFilter
+      case "lessThan":
+        return numValue < numFilter
+      case "lessThanOrEqual":
+        return numValue <= numFilter
+      case "between":
+        return numFilterTo !== undefined && numValue >= numFilter && numValue <= numFilterTo
+      default:
+        return true
+    }
+  }
+
+  // Comparaisons de dates
+  if (value instanceof Date || column?.type === "date" || column?.type === "datetime") {
+    const dateValue = value instanceof Date ? value : new Date(value as string)
+    const dateFilter = filterValue instanceof Date ? filterValue : new Date(filterValue as string)
+    const dateFilterTo =
+      filterValueTo instanceof Date ? filterValueTo : filterValueTo ? new Date(filterValueTo as string) : undefined
+
+    switch (rule.operator) {
+      case "equals":
+        return dateValue.getTime() === dateFilter.getTime()
+      case "notEquals":
+        return dateValue.getTime() !== dateFilter.getTime()
+      case "greaterThan":
+        return dateValue.getTime() > dateFilter.getTime()
+      case "greaterThanOrEqual":
+        return dateValue.getTime() >= dateFilter.getTime()
+      case "lessThan":
+        return dateValue.getTime() < dateFilter.getTime()
+      case "lessThanOrEqual":
+        return dateValue.getTime() <= dateFilter.getTime()
+      case "between":
+        return dateFilterTo !== undefined && dateValue >= dateFilter && dateValue <= dateFilterTo
+      default:
+        return true
+    }
+  }
+
+  // Comparaisons booléennes
+  if (typeof value === "boolean" || column?.type === "boolean") {
+    const boolValue = Boolean(value)
+    const boolFilter = filterValue === true || filterValue === "true"
+
+    switch (rule.operator) {
+      case "equals":
+        return boolValue === boolFilter
+      case "notEquals":
+        return boolValue !== boolFilter
+      default:
+        return true
+    }
+  }
+
+  // Comparaisons de tableaux et enum (in/notIn)
+  if (rule.operator === "in") {
+    if (Array.isArray(filterValue)) {
+      return filterValue.includes(value)
+    }
+    return value === filterValue
+  }
+  if (rule.operator === "notIn") {
+    if (Array.isArray(filterValue)) {
+      return !filterValue.includes(value)
+    }
+    return value !== filterValue
+  }
+
+  // Contient pour les tableaux
+  if (Array.isArray(value)) {
+    switch (rule.operator) {
+      case "contains":
+        return value.includes(filterValue)
+      case "notContains":
+        return !value.includes(filterValue)
+      default:
+        return true
+    }
+  }
+
+  return true
+}
+
+/**
+ * Évalue un groupe de filtres (récursif)
+ */
+function evaluateGroup<TData>(
+  row: TData,
+  group: FilterGroup<TData>,
+  columns: FilterableColumn<TData>[]
+): boolean {
+  const enabledRules = group.rules.filter((r) => r.enabled !== false)
+  const results: boolean[] = []
+
+  // Évaluer les règles
+  for (const rule of enabledRules) {
+    results.push(evaluateRule(row, rule, columns))
+  }
+
+  // Évaluer les sous-groupes
+  for (const subGroup of group.groups) {
+    results.push(evaluateGroup(row, subGroup, columns))
+  }
+
+  // Si pas de résultats, considérer comme match
+  if (results.length === 0) return true
+
+  // Appliquer le connecteur
+  if (group.connector === "AND") {
+    return results.every(Boolean)
+  } else {
+    return results.some(Boolean)
+  }
+}
+
+/**
+ * Trouve une règle par ID dans un groupe (récursif)
+ */
+function findRuleById<TData>(
+  group: FilterGroup<TData>,
+  ruleId: string
+): { rule: FilterRule<TData>; parent: FilterGroup<TData> } | null {
+  for (const rule of group.rules) {
+    if (rule.id === ruleId) {
+      return { rule, parent: group }
+    }
+  }
+  for (const subGroup of group.groups) {
+    const found = findRuleById(subGroup, ruleId)
+    if (found) return found
+  }
+  return null
+}
+
+/**
+ * Trouve un groupe par ID (récursif)
+ */
+function findGroupById<TData>(
+  group: FilterGroup<TData>,
+  groupId: string,
+  parent: FilterGroup<TData> | null = null
+): { group: FilterGroup<TData>; parent: FilterGroup<TData> | null } | null {
+  if (group.id === groupId) {
+    return { group, parent }
+  }
+  for (const subGroup of group.groups) {
+    const found = findGroupById(subGroup, groupId, group)
+    if (found) return found
+  }
+  return null
+}
+
+/**
+ * Clone profondément un filtre
+ */
+function deepCloneFilter<TData>(filter: FilterGroup<TData>): FilterGroup<TData> {
+  return JSON.parse(JSON.stringify(filter))
+}
+
+/**
+ * Hook pour gérer les filtres avancés du DataTable
+ */
+export function useDataTableAdvancedFilters<TData extends Record<string, unknown>>({
+  data,
+  config,
+}: {
+  data: TData[]
+  config: AdvancedFiltersConfig<TData>
+}): AdvancedFiltersResult<TData> {
+  // État initial
+  const createEmptyFilter = useCallback((): FilterGroup<TData> => ({
+    id: generateId(),
+    connector: "AND",
+    rules: [],
+    groups: [],
+  }), [])
+
+  const [state, setState] = useState<AdvancedFiltersState<TData>>(() => ({
+    currentFilter: createEmptyFilter(),
+    presets: config.presets || [],
+    activePresetId: null,
+    isEditing: false,
+    isDirty: false,
+  }))
+
+  // Charger les presets depuis localStorage
+  useEffect(() => {
+    if (!config.persistPresets || typeof window === "undefined") return
+
+    const storageKey = config.storageKey || "datatable-filter-presets"
+    try {
+      const stored = localStorage.getItem(storageKey)
+      if (stored) {
+        const presets = JSON.parse(stored) as FilterPreset<TData>[]
+        setState((s) => ({
+          ...s,
+          presets: [...(config.presets || []), ...presets.filter(
+            (p) => !config.presets?.some((cp) => cp.id === p.id)
+          )],
+        }))
+      }
+    } catch {
+      // Ignore errors
+    }
+  }, [config.persistPresets, config.storageKey, config.presets])
+
+  // Sauvegarder les presets dans localStorage
+  const savePresetsToStorage = useCallback(
+    (presets: FilterPreset<TData>[]) => {
+      if (!config.persistPresets || typeof window === "undefined") return
+      const storageKey = config.storageKey || "datatable-filter-presets"
+      try {
+        // Ne sauvegarder que les presets créés par l'utilisateur
+        const userPresets = presets.filter(
+          (p) => !config.presets?.some((cp) => cp.id === p.id)
+        )
+        localStorage.setItem(storageKey, JSON.stringify(userPresets))
+      } catch {
+        // Ignore errors
+      }
+    },
+    [config.persistPresets, config.storageKey, config.presets]
+  )
+
+  // Opérateurs disponibles pour une colonne
+  const getOperatorsForColumn = useCallback(
+    (columnKey: keyof TData | string): FilterOperator[] => {
+      const column = config.columns.find((c) => c.key === columnKey)
+      if (!column) return OPERATORS_BY_TYPE.string
+      return column.operators || OPERATORS_BY_TYPE[column.type] || OPERATORS_BY_TYPE.string
+    },
+    [config.columns]
+  )
+
+  // Validation d'un filtre
+  const validateFilter = useCallback(
+    (filter: FilterGroup<TData>): { valid: boolean; errors: string[] } => {
+      const errors: string[] = []
+
+      const validateGroup = (group: FilterGroup<TData>, depth = 0) => {
+        // Vérifier la profondeur max
+        if (config.maxNestingDepth !== undefined && depth > config.maxNestingDepth) {
+          errors.push(`Profondeur maximale d'imbrication dépassée (${config.maxNestingDepth})`)
+        }
+
+        // Vérifier le nombre de règles
+        if (config.maxRulesPerGroup !== undefined && group.rules.length > config.maxRulesPerGroup) {
+          errors.push(`Nombre maximum de règles par groupe dépassé (${config.maxRulesPerGroup})`)
+        }
+
+        // Valider les règles
+        for (const rule of group.rules) {
+          const column = config.columns.find((c) => c.key === rule.column)
+          if (!column) {
+            errors.push(`Colonne inconnue: ${String(rule.column)}`)
+          }
+
+          const allowedOperators = getOperatorsForColumn(rule.column)
+          if (!allowedOperators.includes(rule.operator)) {
+            errors.push(`Opérateur invalide pour ${String(rule.column)}: ${rule.operator}`)
+          }
+        }
+
+        // Récursif pour les sous-groupes
+        for (const subGroup of group.groups) {
+          validateGroup(subGroup, depth + 1)
+        }
+      }
+
+      validateGroup(filter)
+      return { valid: errors.length === 0, errors }
+    },
+    [config.columns, config.maxNestingDepth, config.maxRulesPerGroup, getOperatorsForColumn]
+  )
+
+  // Actions
+  const actions: AdvancedFiltersActions<TData> = useMemo(() => ({
+    addRule: (groupId, rule) => {
+      setState((s) => {
+        const newFilter = deepCloneFilter(s.currentFilter)
+        const found = findGroupById(newFilter, groupId)
+        if (found) {
+          found.group.rules.push({
+            ...rule,
+            id: generateId(),
+            enabled: true,
+          } as FilterRule<TData>)
+        }
+        return { ...s, currentFilter: newFilter, isDirty: true }
+      })
+    },
+
+    updateRule: (ruleId, updates) => {
+      setState((s) => {
+        const newFilter = deepCloneFilter(s.currentFilter)
+        const found = findRuleById(newFilter, ruleId)
+        if (found) {
+          Object.assign(found.rule, updates)
+        }
+        return { ...s, currentFilter: newFilter, isDirty: true }
+      })
+    },
+
+    removeRule: (ruleId) => {
+      setState((s) => {
+        const newFilter = deepCloneFilter(s.currentFilter)
+        const found = findRuleById(newFilter, ruleId)
+        if (found) {
+          found.parent.rules = found.parent.rules.filter((r) => r.id !== ruleId)
+        }
+        return { ...s, currentFilter: newFilter, isDirty: true }
+      })
+    },
+
+    addGroup: (parentGroupId, connector = "AND") => {
+      setState((s) => {
+        const newFilter = deepCloneFilter(s.currentFilter)
+        const found = findGroupById(newFilter, parentGroupId)
+        if (found) {
+          found.group.groups.push({
+            id: generateId(),
+            connector,
+            rules: [],
+            groups: [],
+          })
+        }
+        return { ...s, currentFilter: newFilter, isDirty: true }
+      })
+    },
+
+    removeGroup: (groupId) => {
+      setState((s) => {
+        const newFilter = deepCloneFilter(s.currentFilter)
+        const found = findGroupById(newFilter, groupId)
+        if (found && found.parent) {
+          found.parent.groups = found.parent.groups.filter((g) => g.id !== groupId)
+        }
+        return { ...s, currentFilter: newFilter, isDirty: true }
+      })
+    },
+
+    setGroupConnector: (groupId, connector) => {
+      setState((s) => {
+        const newFilter = deepCloneFilter(s.currentFilter)
+        const found = findGroupById(newFilter, groupId)
+        if (found) {
+          found.group.connector = connector
+        }
+        return { ...s, currentFilter: newFilter, isDirty: true }
+      })
+    },
+
+    resetFilters: () => {
+      setState((s) => ({
+        ...s,
+        currentFilter: createEmptyFilter(),
+        activePresetId: null,
+        isDirty: false,
+      }))
+    },
+
+    applyFilters: () => {
+      setState((s) => {
+        config.onFilterChange?.(s.currentFilter)
+        return { ...s, isEditing: false }
+      })
+    },
+
+    saveAsPreset: (name, description) => {
+      setState((s) => {
+        const preset: FilterPreset<TData> = {
+          id: generateId(),
+          name,
+          description,
+          filter: deepCloneFilter(s.currentFilter),
+          createdAt: new Date(),
+        }
+        const newPresets = [...s.presets, preset]
+        savePresetsToStorage(newPresets)
+        config.onPresetSave?.(preset)
+        return {
+          ...s,
+          presets: newPresets,
+          activePresetId: preset.id,
+          isDirty: false,
+        }
+      })
+    },
+
+    applyPreset: (presetId) => {
+      setState((s) => {
+        const preset = s.presets.find((p) => p.id === presetId)
+        if (!preset) return s
+        const newFilter = deepCloneFilter(preset.filter)
+        config.onFilterChange?.(newFilter)
+        return {
+          ...s,
+          currentFilter: newFilter,
+          activePresetId: presetId,
+          isDirty: false,
+        }
+      })
+    },
+
+    deletePreset: (presetId) => {
+      setState((s) => {
+        const newPresets = s.presets.filter((p) => p.id !== presetId)
+        savePresetsToStorage(newPresets)
+        config.onPresetDelete?.(presetId)
+        return {
+          ...s,
+          presets: newPresets,
+          activePresetId: s.activePresetId === presetId ? null : s.activePresetId,
+        }
+      })
+    },
+
+    importFilters: (json) => {
+      try {
+        const filter = JSON.parse(json) as FilterGroup<TData>
+        const validation = validateFilter(filter)
+        if (!validation.valid) {
+          console.error("Invalid filter:", validation.errors)
+          return
+        }
+        setState((s) => ({
+          ...s,
+          currentFilter: filter,
+          activePresetId: null,
+          isDirty: true,
+        }))
+      } catch (e) {
+        console.error("Failed to import filters:", e)
+      }
+    },
+
+    exportFilters: () => {
+      return JSON.stringify(state.currentFilter, null, 2)
+    },
+  }), [config, createEmptyFilter, savePresetsToStorage, validateFilter, state.currentFilter])
+
+  // Données filtrées
+  const filteredData = useMemo(() => {
+    if (!config.enabled) return data
+
+    // Si le filtre est vide, retourner toutes les données
+    if (state.currentFilter.rules.length === 0 && state.currentFilter.groups.length === 0) {
+      return data
+    }
+
+    return data.filter((row) => evaluateGroup(row, state.currentFilter, config.columns))
+  }, [data, config.enabled, config.columns, state.currentFilter])
+
+  return {
+    state,
+    actions,
+    filteredData,
+    filteredCount: filteredData.length,
+    getOperatorsForColumn,
+    createEmptyFilter,
+    validateFilter,
+  }
+}
+
+export { OPERATORS_BY_TYPE }
+export default useDataTableAdvancedFilters