@postxl/generators 1.11.6 → 1.12.0

package/dist/frontend-core/template/src/components/admin/table-filter.tsx

@@ -4,6 +4,7 @@ import {
   FieldValueType,
   FilterConfig,
   FilterFieldName,
+  FilterOption,
   FilterState,
   FilterValue,
   NumberFilter,
@@ -11,7 +12,7 @@ import {
 } from '@types'
 
 import { CalendarIcon, FilterX, TrashIcon } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { cn } from '@lib/utils'
 import {
@@ -23,6 +24,8 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  SlicerHierarchyItem,
+  SlicerFilterOption,
   testId,
 } from '@postxl/ui-components'
 
@@ -46,6 +49,9 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
   const fieldConfig = config[field]
   const { filterKey, valueType: fieldType } = fieldConfig
 
+  // Check if this is a hierarchy filter
+  const isHierarchyFilter = fieldConfig.kind === 'hierarchy'
+
   // We exclude the current field from the filters passed to the query.
   // This prevents the options from refetching (and resetting scroll position) when the user selects an item within the same filter.
   const queryFilters = useMemo(() => {
@@ -101,20 +107,40 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
     enabled: open,
   })
 
-  const options = useMemo(
-    () =>
-      optionsData && Array.isArray(optionsData)
-        ? optionsData.filter(
-            (opt): opt is { value: string; label: string; hasMatches: boolean } => opt != null && 'value' in opt,
-          )
-        : [],
-    [optionsData],
-  )
+  // Options from backend - same type for both flat and hierarchy (hierarchy has children)
+  const options = useMemo<FilterOption[]>(() => {
+    if (!optionsData || !Array.isArray(optionsData)) {
+      return []
+    }
+    return optionsData.filter((opt): opt is FilterOption => opt != null && 'value' in opt)
+  }, [optionsData])
 
   const [searchQuery, setSearchQuery] = useState('')
 
+  // Expanded state for hierarchy filter
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+
+  // Auto-expand single top-level item when hierarchy options load
+  useEffect(() => {
+    if (isHierarchyFilter && options.length === 1 && options[0].children?.length) {
+      setExpandedIds(new Set([options[0].value]))
+    }
+  }, [isHierarchyFilter, options])
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }, [])
+
   // Check if this field uses StringFilter (all string-type fields including ID, relation, enum, discriminatedUnion)
-  const isStringFilter = fieldType === 'string'
+  const isStringFilter = fieldType === 'string' && !isHierarchyFilter
 
   const filteredOptions = useMemo(() => {
     if (!searchQuery) {
@@ -139,13 +165,17 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
     if (fieldType === 'boolean') {
       return (val as boolean[]).map(String)
     }
+    if (fieldType === 'hierarchy') {
+      // Hierarchy filters use StringFilter format
+      return ((val as StringFilter).values || []).map(String)
+    }
     if (isStringFilter) {
       return ((val as StringFilter).values || []).map(String)
     }
     return val as string[]
   }, [fieldConfig.filterKey, fieldType, filters, isStringFilter])
 
-  const selectedValues = new Set(value)
+  const selectedValues = useMemo(() => new Set(value), [value])
   const areAllSelected = options.length > 0 && options.every((option) => selectedValues.has(option.value))
 
   const areAllFilteredSelected =
@@ -185,48 +215,58 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
     }
   }, [open, filters, fieldType, fieldConfig.filterKey, isStringFilter])
 
-  const handleNumberChange = (newValues: string[], newMin: string, newMax: string) => {
-    const values = newValues.length > 0 ? newValues.map((v) => (v === '' ? '' : Number(v))) : undefined
-    const min = newMin === '' ? null : Number(newMin)
-    const max = newMax === '' ? null : Number(newMax)
+  const handleNumberChange = useCallback(
+    (newValues: string[], newMin: string, newMax: string) => {
+      const values = newValues.length > 0 ? newValues.map((v) => (v === '' ? '' : Number(v))) : undefined
+      const min = newMin === '' ? null : Number(newMin)
+      const max = newMax === '' ? null : Number(newMax)
 
-    if (!values && min === null && max === null) {
-      onChange(undefined)
-    } else {
-      onChange({ values, min, max })
-    }
-  }
-  const handleDateChange = (newValues: string[], newStart: string, newEnd: string) => {
-    const values = newValues.length > 0 ? newValues : undefined
-    const start = newStart === '' ? null : newStart
-    const end = newEnd === '' ? null : newEnd
-
-    if (!values && start === null && end === null) {
-      onChange(undefined)
-    } else {
-      onChange({ values, start, end })
-    }
-  }
+      if (!values && min === null && max === null) {
+        onChange(undefined)
+      } else {
+        onChange({ values, min, max })
+      }
+    },
+    [onChange],
+  )
 
-  const handleStringFilterChange = (
-    newValues: string[],
-    contains: string,
-    startsWith: string,
-    endsWith: string,
-    exclude: string,
-  ) => {
-    const values = newValues.length > 0 ? newValues : undefined
-    const containsVal = contains === '' ? null : contains
-    const startsWithVal = startsWith === '' ? null : startsWith
-    const endsWithVal = endsWith === '' ? null : endsWith
-    const excludeVal = exclude === '' ? null : exclude
-
-    if (!values && !containsVal && !startsWithVal && !endsWithVal && !excludeVal) {
-      onChange(undefined)
-    } else {
-      onChange({ values, contains: containsVal, startsWith: startsWithVal, endsWith: endsWithVal, exclude: excludeVal })
-    }
-  }
+  const handleDateChange = useCallback(
+    (newValues: string[], newStart: string, newEnd: string) => {
+      const values = newValues.length > 0 ? newValues : undefined
+      const start = newStart === '' ? null : newStart
+      const end = newEnd === '' ? null : newEnd
+
+      if (!values && start === null && end === null) {
+        onChange(undefined)
+      } else {
+        onChange({ values, start, end })
+      }
+    },
+    [onChange],
+  )
+
+  const handleStringFilterChange = useCallback(
+    (newValues: string[], contains: string, startsWith: string, endsWith: string, exclude: string) => {
+      const values = newValues.length > 0 ? newValues : undefined
+      const containsVal = contains === '' ? null : contains
+      const startsWithVal = startsWith === '' ? null : startsWith
+      const endsWithVal = endsWith === '' ? null : endsWith
+      const excludeVal = exclude === '' ? null : exclude
+
+      if (!values && !containsVal && !startsWithVal && !endsWithVal && !excludeVal) {
+        onChange(undefined)
+      } else {
+        onChange({
+          values,
+          contains: containsVal,
+          startsWith: startsWithVal,
+          endsWith: endsWithVal,
+          exclude: excludeVal,
+        })
+      }
+    },
+    [onChange],
+  )
 
   const commitMinMax = () => {
     let nextMin = minVal
@@ -259,18 +299,51 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
   }
 
   // Unified callback for FilterItem to handle value changes
-  const handleValueChange = (newSelected: Set<string>) => {
-    const newVals = Array.from(newSelected).map(String)
-    if (fieldType === 'number') {
-      handleNumberChange(newVals, minVal, maxVal)
-    } else if (fieldType === 'date') {
-      handleDateChange(newVals, minVal, maxVal)
-    } else if (isStringFilter) {
-      handleStringFilterChange(newVals, containsVal, startsWithVal, endsWithVal, excludeVal)
-    } else {
-      onChange(newVals)
-    }
-  }
+  const handleValueChange = useCallback(
+    (newSelected: Set<string>) => {
+      const newVals = Array.from(newSelected).map(String)
+      if (fieldType === 'number') {
+        handleNumberChange(newVals, minVal, maxVal)
+      } else if (fieldType === 'date') {
+        handleDateChange(newVals, minVal, maxVal)
+      } else if (fieldType === 'hierarchy') {
+        // Hierarchy uses StringFilter format but without text filters
+        onChange(newVals.length > 0 ? { values: newVals } : undefined)
+      } else if (isStringFilter) {
+        handleStringFilterChange(newVals, containsVal, startsWithVal, endsWithVal, excludeVal)
+      } else {
+        onChange(newVals)
+      }
+    },
+    [
+      fieldType,
+      isStringFilter,
+      minVal,
+      maxVal,
+      containsVal,
+      startsWithVal,
+      endsWithVal,
+      excludeVal,
+      handleNumberChange,
+      handleDateChange,
+      handleStringFilterChange,
+      onChange,
+    ],
+  )
+
+  // Handle hierarchy option toggle
+  const handleHierarchySelect = useCallback(
+    (value: string) => {
+      const newSelected = new Set(selectedValues)
+      if (newSelected.has(value)) {
+        newSelected.delete(value)
+      } else {
+        newSelected.add(value)
+      }
+      handleValueChange(newSelected)
+    },
+    [selectedValues, handleValueChange],
+  )
 
   return (
     <div className="w-full flex flex-col" data-test-id={__e2e_test_id__}>
@@ -297,6 +370,8 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
             } else if (fieldType === 'date') {
               handleDateChange([], '', '')
             }
+          } else if (fieldType === 'hierarchy') {
+            onChange(undefined)
           } else if (isStringFilter) {
             setContainsVal('')
             setStartsWithVal('')
@@ -421,68 +496,92 @@ export const TableFilter = <TField extends FilterFieldName, TFilters extends Fil
         <div className="w-full border-b border-b-border/70" />
       </div>
 
-      {/* Select all / all search results button */}
-      <Button
-        variant="ghost"
-        size="xs"
-        className="w-full justify-start px-2 py-1 rounded-sm text-sm font-normal"
-        __e2e_test_id__={testId(__e2e_test_id__, 'select-all')}
-        onClick={() => {
-          let newVals: string[] = []
-          if (searchQuery.length > 0) {
-            const newSelected = new Set(selectedValues)
-            if (areAllFilteredSelected) {
-              filteredOptions.forEach((o) => newSelected.delete(o.value))
+      {/* Select all / all search results button - hidden for hierarchy mode because "select all"
+          is ambiguous: would it select all items at every level, only top-level items (implicitly
+          selecting everything underneath), only visible/expanded items, or only leaf nodes? Each
+          interpretation has different filtering effects, so we omit it to avoid confusion. */}
+      {!isHierarchyFilter && (
+        <Button
+          variant="ghost"
+          size="xs"
+          className="w-full justify-start px-2 py-1 rounded-sm text-sm font-normal"
+          __e2e_test_id__={testId(__e2e_test_id__, 'select-all')}
+          onClick={() => {
+            let newVals: string[] = []
+            if (searchQuery.length > 0) {
+              const newSelected = new Set(selectedValues)
+              if (areAllFilteredSelected) {
+                filteredOptions.forEach((o) => newSelected.delete(o.value))
+              } else {
+                filteredOptions.forEach((o) => newSelected.add(o.value))
+              }
+              newVals = Array.from(newSelected)
+            } else if (areAllSelected) {
+              newVals = []
             } else {
-              filteredOptions.forEach((o) => newSelected.add(o.value))
+              newVals = options.map((o) => o.value)
             }
-            newVals = Array.from(newSelected)
-          } else if (areAllSelected) {
-            newVals = []
-          } else {
-            newVals = options.map((o) => o.value)
-          }
 
-          if (fieldType === 'number') {
-            handleNumberChange(newVals, minVal, maxVal)
-          } else if (fieldType === 'date') {
-            handleDateChange(newVals, minVal, maxVal)
-          } else if (isStringFilter) {
-            handleStringFilterChange(newVals, containsVal, startsWithVal, endsWithVal, excludeVal)
-          } else {
-            onChange(newVals)
-          }
-        }}
-      >
-        {searchQuery.length > 0 ? (
-          <Checkbox
-            readOnly
-            checked={isAnyFilteredSelected}
-            disabled={filteredOptions.length === 0}
-            label="Select Search Results"
-            className="pointer-events-none"
-            checkboxSize="sm"
-            variant={areAllFilteredSelected ? 'simple' : 'default'}
-            iconStyle={areAllFilteredSelected ? 'simple' : 'solo'}
-            checkIcon={areAllFilteredSelected ? 'check' : 'square'}
-          />
-        ) : (
-          <Checkbox
-            readOnly
-            checked={selectedValues.size > 0}
-            disabled={options.length === 0}
-            label="Select All"
-            className="pointer-events-none"
-            checkboxSize="sm"
-            variant={areAllSelected ? 'simple' : 'default'}
-            iconStyle={areAllSelected ? 'simple' : 'solo'}
-            checkIcon={areAllSelected ? 'check' : 'square'}
-          />
-        )}
-      </Button>
+            if (fieldType === 'number') {
+              handleNumberChange(newVals, minVal, maxVal)
+            } else if (fieldType === 'date') {
+              handleDateChange(newVals, minVal, maxVal)
+            } else if (isStringFilter) {
+              handleStringFilterChange(newVals, containsVal, startsWithVal, endsWithVal, excludeVal)
+            } else {
+              onChange(newVals)
+            }
+          }}
+        >
+          {searchQuery.length > 0 ? (
+            <Checkbox
+              readOnly
+              checked={isAnyFilteredSelected}
+              disabled={filteredOptions.length === 0}
+              label="Select Search Results"
+              className="pointer-events-none"
+              checkboxSize="sm"
+              variant={areAllFilteredSelected ? 'simple' : 'default'}
+              iconStyle={areAllFilteredSelected ? 'simple' : 'solo'}
+              checkIcon={areAllFilteredSelected ? 'check' : 'square'}
+            />
+          ) : (
+            <Checkbox
+              readOnly
+              checked={selectedValues.size > 0}
+              disabled={options.length === 0}
+              label="Select All"
+              className="pointer-events-none"
+              checkboxSize="sm"
+              variant={areAllSelected ? 'simple' : 'default'}
+              iconStyle={areAllSelected ? 'simple' : 'solo'}
+              checkIcon={areAllSelected ? 'check' : 'square'}
+            />
+          )}
+        </Button>
+      )}
 
-      {/* Options list */}
-      {filteredOptions.length === 0 ? (
+      {/* Options list - hierarchy tree view or flat list */}
+      {isHierarchyFilter ? (
+        options.length === 0 ? (
+          <div className="py-6 text-center text-sm">No options available.</div>
+        ) : (
+          <div className="px-1 py-1 max-h-[200px] overflow-auto">
+            {options.map((option) => (
+              <SlicerHierarchyItem
+                key={option.value}
+                option={option as SlicerFilterOption<string>}
+                selectedValues={selectedValues}
+                inheritedSelected={false}
+                expandedIds={expandedIds}
+                onToggleExpand={toggleExpand}
+                onSelect={handleHierarchySelect}
+                searchTerm={searchQuery}
+              />
+            ))}
+          </div>
+        )
+      ) : filteredOptions.length === 0 ? (
         <div className="py-6 text-center text-sm">No results found.</div>
       ) : (
         <div className="px-2 py-1 max-h-[200px] overflow-auto">
@@ -676,13 +775,14 @@ const FilterItem = ({
   selectedValues,
   onValueChange,
 }: {
-  option: { label: string; value: string; hasMatches: boolean }
+  option: FilterOption
   isSelected: boolean
   fieldType: FieldValueType
   selectedValues: Set<string>
   onValueChange: (newSelected: Set<string>) => void
 }) => {
   let displayLabel = option.label
+  const hasMatches = option.hasMatches ?? true
 
   // needs to happen in frontend (and can't be directly provided by backend) because of localization
   if (option.value !== '') {
@@ -708,11 +808,7 @@ const FilterItem = ({
       }}
       checkIcon="check"
       checkboxSize="sm"
-      className={cn(
-        'whitespace-nowrap py-px text-sm',
-        !option.hasMatches && 'opacity-50',
-        option.value === '' && 'italic',
-      )}
+      className={cn('whitespace-nowrap py-px text-sm', !hasMatches && 'opacity-50', option.value === '' && 'italic')}
       label={displayLabel}
     />
   )

package/dist/frontend-core/template/src/components/admin/table-view-panel.tsx

@@ -0,0 +1,159 @@
+import type { Table } from '@tanstack/react-table'
+
+import { useCallback, useEffect, useRef } from 'react'
+import { toast } from 'sonner'
+
+import { useTableViewConfig, type TableViewState } from '@hooks/use-table-view-config'
+import { DataGridViewMenu } from '@postxl/ui-components'
+
+export type TableViewPanelProps<TData> = {
+  /** The model/table name to scope views to (e.g. 'user', 'publication'). */
+  model: string
+  /** The TanStack Table instance (from useDataGrid). */
+  table: Table<TData>
+  /** The current user's ID. */
+  currentUserId?: string
+  /** Whether the current user has admin privileges. */
+  isAdmin?: boolean
+  /** Current filter state — included when saving a view. */
+  filters?: Record<string, unknown>
+  /** Current sort state — included when saving a view. */
+  sort?: { field: string; direction: 'asc' | 'desc' }[]
+  /** Called when a view is applied and its filters should be restored. */
+  onFiltersChange?: (filters: Record<string, unknown>) => void
+  /** Called when a view is applied and its sort should be restored. */
+  onSortChange?: (sort: { field: string; direction: 'asc' | 'desc' }[]) => void
+}
+
+/**
+ * Connects the table view config hook to the DataGridViewMenu component.
+ *
+ * Handles:
+ * - Collecting current table state (filters, sort, column visibility/order/pinning)
+ * - Saving/updating views with automatic JSON serialization
+ * - Applying loaded views back to the table and page filter/sort state
+ * - Auto-restoring the previously active view on mount
+ * - Rename and delete operations
+ */
+export function TableViewPanel<TData>({
+  model,
+  table,
+  currentUserId,
+  isAdmin,
+  filters,
+  sort,
+  onFiltersChange,
+  onSortChange,
+}: TableViewPanelProps<TData>) {
+  const viewConfig = useTableViewConfig({ model, currentUserId })
+  const hasAutoAppliedRef = useRef(false)
+
+  const applyViewState = useCallback(
+    (viewId: string) => {
+      const view = viewConfig.views.find((v) => v.id === viewId)
+      if (!view) return
+      const state = viewConfig.parseViewState(view)
+      if (onFiltersChange) {
+        onFiltersChange(state.filters ?? {})
+      }
+      if (onSortChange) {
+        onSortChange(state.sorting ?? [])
+      }
+      if (state.columnVisibility) {
+        table.setColumnVisibility(state.columnVisibility)
+      }
+      if (state.columnOrder) {
+        table.setColumnOrder(state.columnOrder)
+      }
+      if (state.columnPinning) {
+        table.setColumnPinning(state.columnPinning)
+      }
+      if (state.columnSizing) {
+        table.setColumnSizing(state.columnSizing)
+      }
+    },
+    [viewConfig, onFiltersChange, onSortChange, table],
+  )
+
+  // Auto-apply persisted view once views have loaded
+  useEffect(() => {
+    if (!viewConfig.isLoaded || hasAutoAppliedRef.current) return
+    hasAutoAppliedRef.current = true
+
+    if (viewConfig.activeViewId && viewConfig.views.find((v) => v.id === viewConfig.activeViewId)) {
+      applyViewState(viewConfig.activeViewId)
+    }
+  }, [viewConfig.isLoaded, viewConfig.activeViewId, viewConfig.views, applyViewState])
+
+  const collectTableState = useCallback(
+    (): TableViewState => ({
+      filters: filters,
+      sorting: sort,
+      columnVisibility: table.getState().columnVisibility,
+      columnOrder: table.getState().columnOrder,
+      columnPinning: table.getState().columnPinning as { left?: string[]; right?: string[] },
+      columnSizing: table.getState().columnSizing,
+    }),
+    [filters, sort, table],
+  )
+
+  const handleSaveView = useCallback(
+    ({ name, isGlobal }: { name: string; isGlobal: boolean }) => {
+      void viewConfig.saveView({ name, isGlobal, state: collectTableState() }).then((view) => {
+        toast.success(`View "${view.name}" saved`)
+      })
+    },
+    [viewConfig, collectTableState],
+  )
+
+  const handleUpdateView = useCallback(
+    (viewId: string) => {
+      void viewConfig.updateView(viewId, collectTableState()).then(() => {
+        toast.success('View updated')
+      })
+    },
+    [viewConfig, collectTableState],
+  )
+
+  const handleApplyView = useCallback(
+    (viewId: string) => {
+      applyViewState(viewId)
+      viewConfig.setActiveViewId(viewId)
+    },
+    [applyViewState, viewConfig],
+  )
+
+  const handleRenameView = useCallback(
+    (viewId: string, name: string) => {
+      void viewConfig.renameView(viewId, name).then(() => {
+        toast.success(`View renamed to "${name}"`)
+      })
+    },
+    [viewConfig],
+  )
+
+  const handleDeleteView = useCallback(
+    (viewId: string) => {
+      void viewConfig.deleteView(viewId).then(() => {
+        toast.success('View deleted')
+      })
+    },
+    [viewConfig],
+  )
+
+  return (
+    <DataGridViewMenu
+      table={table}
+      savedViews={viewConfig.savedViews}
+      activeViewId={viewConfig.activeViewId}
+      currentUserId={currentUserId}
+      isAdmin={isAdmin}
+      onApplyView={handleApplyView}
+      onSaveView={handleSaveView}
+      onUpdateView={handleUpdateView}
+      onRenameView={handleRenameView}
+      onDeleteView={handleDeleteView}
+      onClearView={viewConfig.clearActiveView}
+    />
+  )
+}