@asteby/metacore-runtime-react 21.0.0 → 22.0.0

package/src/dynamic-table.tsx

@@ -66,6 +66,7 @@ import { useMetadataCache } from './metadata-cache'
 import { useApi, useCurrentBranch } from './api-context'
 import type { ColumnFilterConfig, GetDynamicColumns } from './dynamic-columns-shim'
 import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns'
+import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders'
 import { OptionsContext } from './options-context'
 import type { TableMetadata, ApiResponse } from './types'
 import { getSearchableColumnKeys } from './column-visibility'
@@ -530,15 +531,28 @@ export function DynamicTable({
         setPagination((prev: PaginationState) => ({ ...prev, pageIndex: 0 }))
     }, [])
 
+    // Same facet loader machinery the board uses, so a text column filters
+    // identically in the table header and the kanban Sheet (the host's
+    // getDynamicColumns forwards `loadOptions` into the column meta). Facets base
+    // derived off the list endpoint exactly like the aggregate endpoint below.
+    const facetsBase = endpoint ? `${endpoint}/facets` : model ? `/data/${model}/facets` : null
+    const getFacetLoader = useFacetLoaders(facetsBase)
+
     const columnFilterConfigs = useMemo(() => {
         const map = new Map<string, ColumnFilterConfig>()
         if (!metadata) return map
+        const stageOptions = (metadata.stages ?? []).map((s) => ({
+            label: s.label,
+            value: s.key,
+            color: s.color,
+        }))
+        const groupBy = metadata.group_by
         // Explicit `metadata.filters` wins. When the backend does not emit
         // them, derive a filter chip from every column flagged
         // `filterable: true` — keeps the kernel API minimal (one flag on the
         // column) while still rendering the FilterableColumnHeader.
         for (const f of metadata.filters ?? []) {
-            const fType = f.type as ColumnFilterConfig['filterType']
+            let fType = f.type as ColumnFilterConfig['filterType']
             let options: { label: string; value: string; icon?: string; color?: string }[] = []
             if (f.options && f.options.length > 0) {
                 options = f.options.map(o => ({ label: o.label, value: String(o.value), icon: o.icon, color: o.color }))
@@ -546,6 +560,22 @@ export function DynamicTable({
             if (f.searchEndpoint && filterOptionsMap.has(f.searchEndpoint)) {
                 options = filterOptionsMap.get(f.searchEndpoint) || []
             }
+            // (A) A stage column with no options of its own inherits the
+            // pipeline stages (with their colors) as a real select.
+            if (options.length === 0 && !f.searchEndpoint && (f.column || f.key) === groupBy && stageOptions.length > 0) {
+                fType = 'select'
+                options = stageOptions
+            }
+            // (B) A plain text filter becomes a facet value-picker when a facets
+            // endpoint is available (degrades to "Contiene..." if it yields nothing).
+            let loadOptions: ColumnFilterConfig['loadOptions']
+            if (fType === 'text' && facetsBase) {
+                const loader = getFacetLoader(f.column || f.key)
+                if (loader) {
+                    fType = 'facet'
+                    loadOptions = loader
+                }
+            }
             if (fType === 'select' && options.length === 0 && !f.searchEndpoint) continue
             map.set(f.key, {
                 filterType: fType,
@@ -555,6 +585,7 @@ export function DynamicTable({
                 onFilterChange: handleDynamicFilterChange,
                 loading: f.searchEndpoint ? !filterOptionsMap.has(f.searchEndpoint) : false,
                 searchEndpoint: f.searchEndpoint,
+                loadOptions,
             })
         }
         for (const c of metadata.columns ?? []) {
@@ -571,8 +602,11 @@ export function DynamicTable({
             //   - number / number_range / numeric → number range
             //   - date → date range picker (start/end calendar)
             //   - everything else (text, email, phone, tags…) → text contains
+            // (A) Stage column with no options of its own → colored select.
+            const isStageColumn = c.key === groupBy && !hasStaticOptions && !hasEndpoint && !c.filterType && stageOptions.length > 0
             let filterType: ColumnFilterConfig['filterType']
-            if (c.filterType) filterType = c.filterType
+            if (isStageColumn) filterType = 'select'
+            else if (c.filterType) filterType = c.filterType
             else if (isRelation && hasEndpoint) filterType = 'dynamic_select'
             else if (hasStaticOptions || hasEndpoint) filterType = 'select'
             else if (c.type === 'boolean') filterType = 'boolean'
@@ -581,7 +615,7 @@ export function DynamicTable({
                 filterType = 'date_range'
             else filterType = 'text'
 
-            const options = hasStaticOptions
+            let options = hasStaticOptions
                 ? c.options!.map(o => ({
                       label: o.label,
                       value: String(o.value),
@@ -591,6 +625,19 @@ export function DynamicTable({
                 : hasEndpoint && filterOptionsMap.has(c.searchEndpoint!)
                   ? filterOptionsMap.get(c.searchEndpoint!) || []
                   : []
+            if (isStageColumn) options = stageOptions
+
+            // (B) Upgrade a plain text filter to a facet value-picker unless it's
+            // a long-text/body column (too many unique values to enumerate).
+            let loadOptions: ColumnFilterConfig['loadOptions']
+            if (filterType === 'text' && facetsBase && !isLongTextColumn(c)) {
+                const loader = getFacetLoader(c.key)
+                if (loader) {
+                    filterType = 'facet'
+                    loadOptions = loader
+                }
+            }
+
             map.set(c.key, {
                 filterType,
                 filterKey: c.key,
@@ -599,10 +646,11 @@ export function DynamicTable({
                 onFilterChange: handleDynamicFilterChange,
                 loading: hasEndpoint && !filterOptionsMap.has(c.searchEndpoint!),
                 searchEndpoint: c.searchEndpoint,
+                loadOptions,
             })
         }
         return map
-    }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange])
+    }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange, facetsBase, getFacetLoader])
 
     const columns = useMemo(() => {
         if (!viewMetadata) return []

package/src/use-dynamic-filters.ts

@@ -14,6 +14,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useApi } from './api-context'
 import { DATE_CELL_TYPES } from './dynamic-columns'
 import { getSearchableColumnKeys } from './column-visibility'
+import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders'
 import type { ColumnFilterConfig, FilterOption } from './dynamic-columns-shim'
 import type { TableMetadata } from './types'
 
@@ -23,6 +24,25 @@ export interface UseDynamicFiltersOptions {
    * Mirrors DynamicTable's `defaultFilters` — e.g. scoping a board to one owner.
    */
   defaultFilters?: Record<string, any>
+  /**
+   * Model key — the fallback base for the per-field `facets` endpoint when no
+   * `endpoint` is given. Omit all of `endpoint`/`model`/`facetsEndpoint` to keep
+   * text filters as bare "Contiene..." boxes.
+   */
+  model?: string
+  /**
+   * The org-scoped LIST endpoint (e.g. `/data/<model>/me`). The facets base is
+   * derived from it EXACTLY like DynamicTable derives the aggregate endpoint —
+   * `<endpoint>/facets` — so the board and its table sibling hit the same route
+   * (the backend registers both `/data/:model/facets` and
+   * `/data/:model/me/facets`).
+   */
+  endpoint?: string
+  /**
+   * Explicit `facets` endpoint override — wins over `endpoint`/`model`. The
+   * loader appends `?field=<key>&q=<text>&limit=50`.
+   */
+  facetsEndpoint?: string
 }
 
 export interface UseDynamicFiltersResult {
@@ -57,7 +77,7 @@ export function useDynamicFilters(
   metadata: TableMetadata | null,
   opts: UseDynamicFiltersOptions = {},
 ): UseDynamicFiltersResult {
-  const { defaultFilters } = opts
+  const { defaultFilters, model, endpoint, facetsEndpoint } = opts
   const api = useApi()
 
   const [dynamicFilters, setDynamicFilters] = useState<Record<string, string[]>>({})
@@ -66,6 +86,18 @@ export function useDynamicFilters(
     Map<string, FilterOption[]>
   >(new Map())
 
+  // Where a `facet` filter loads its distinct values from. Explicit override
+  // wins; otherwise `<endpoint>/facets` (same derivation as the aggregate
+  // endpoint), falling back to the model. Null → text filters stay plain.
+  const facetsBase =
+    facetsEndpoint ??
+    (endpoint
+      ? `${endpoint}/facets`
+      : model
+        ? `/data/${model}/facets`
+        : null)
+  const getFacetLoader = useFacetLoaders(facetsBase)
+
   // Prefetch the option lists for relation/select filters (once per model). The
   // combobox needs these before the user opens it; mirrors DynamicTable's
   // metadata-init option prefetch, narrowed to the FILTER endpoints only (the
@@ -151,8 +183,18 @@ export function useDynamicFilters(
   const columnFilterConfigs = useMemo(() => {
     const map = new Map<string, ColumnFilterConfig>()
     if (!metadata) return map
+    const stages = metadata.stages ?? []
+    const groupBy = metadata.group_by
+    // Stage options derived once from the pipeline machine, reused wherever a
+    // stage column has no inline options of its own (A).
+    const stageOptions: FilterOption[] = stages.map((s) => ({
+      label: s.label,
+      value: s.key,
+      color: s.color,
+    }))
+
     for (const f of metadata.filters ?? []) {
-      const fType = f.type as ColumnFilterConfig['filterType']
+      let fType = f.type as ColumnFilterConfig['filterType']
       let options: FilterOption[] = []
       if (f.options && f.options.length > 0) {
         options = f.options.map((o) => ({
@@ -165,6 +207,28 @@ export function useDynamicFilters(
       if (f.searchEndpoint && filterOptionsMap.has(f.searchEndpoint)) {
         options = filterOptionsMap.get(f.searchEndpoint) || []
       }
+      // (A) Stage column with no options of its own → project the pipeline
+      // stages (with their colors) into a real select instead of leaving it as
+      // a text box.
+      if (
+        options.length === 0 &&
+        !f.searchEndpoint &&
+        (f.column || f.key) === groupBy &&
+        stageOptions.length > 0
+      ) {
+        fType = 'select'
+        options = stageOptions
+      }
+      // (B) A plain text filter becomes a facet value-picker when a facets
+      // endpoint is available.
+      let loadOptions: ColumnFilterConfig['loadOptions']
+      if (fType === 'text' && facetsBase) {
+        const loader = getFacetLoader(f.column || f.key)
+        if (loader) {
+          fType = 'facet'
+          loadOptions = loader
+        }
+      }
       if (fType === 'select' && options.length === 0 && !f.searchEndpoint) continue
       map.set(f.key, {
         filterType: fType,
@@ -174,6 +238,7 @@ export function useDynamicFilters(
         onFilterChange: handleDynamicFilterChange,
         loading: f.searchEndpoint ? !filterOptionsMap.has(f.searchEndpoint) : false,
         searchEndpoint: f.searchEndpoint,
+        loadOptions,
       })
     }
     for (const c of metadata.columns ?? []) {
@@ -181,8 +246,17 @@ export function useDynamicFilters(
       const hasStaticOptions = (c.options?.length ?? 0) > 0
       const hasEndpoint = !!c.searchEndpoint
       const isRelation = !!c.ref || c.filterType === 'dynamic_select'
+      // (A) A stage column with no options of its own inherits the pipeline's
+      // stages — so "Stage" becomes a colored select, not a text box.
+      const isStageColumn =
+        c.key === groupBy &&
+        !hasStaticOptions &&
+        !hasEndpoint &&
+        !c.filterType &&
+        stageOptions.length > 0
       let filterType: ColumnFilterConfig['filterType']
-      if (c.filterType) filterType = c.filterType
+      if (isStageColumn) filterType = 'select'
+      else if (c.filterType) filterType = c.filterType
       else if (isRelation && hasEndpoint) filterType = 'dynamic_select'
       else if (hasStaticOptions || hasEndpoint) filterType = 'select'
       else if (c.type === 'boolean') filterType = 'boolean'
@@ -191,7 +265,7 @@ export function useDynamicFilters(
         filterType = 'date_range'
       else filterType = 'text'
 
-      const options = hasStaticOptions
+      let options = hasStaticOptions
         ? c.options!.map((o) => ({
             label: o.label,
             value: String(o.value),
@@ -201,6 +275,19 @@ export function useDynamicFilters(
         : hasEndpoint && filterOptionsMap.has(c.searchEndpoint!)
           ? filterOptionsMap.get(c.searchEndpoint!) || []
           : []
+      if (isStageColumn) options = stageOptions
+
+      // (B) Upgrade a plain text filter to a facet value-picker (unless it's a
+      // long-text/body column — too many unique values to enumerate).
+      let loadOptions: ColumnFilterConfig['loadOptions']
+      if (filterType === 'text' && facetsBase && !isLongTextColumn(c)) {
+        const loader = getFacetLoader(c.key)
+        if (loader) {
+          filterType = 'facet'
+          loadOptions = loader
+        }
+      }
+
       map.set(c.key, {
         filterType,
         filterKey: c.key,
@@ -209,10 +296,18 @@ export function useDynamicFilters(
         onFilterChange: handleDynamicFilterChange,
         loading: hasEndpoint && !filterOptionsMap.has(c.searchEndpoint!),
         searchEndpoint: c.searchEndpoint,
+        loadOptions,
       })
     }
     return map
-  }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange])
+  }, [
+    metadata,
+    filterOptionsMap,
+    dynamicFilters,
+    handleDynamicFilterChange,
+    facetsBase,
+    getFacetLoader,
+  ])
 
   const searchableKeys = useMemo(
     () => (metadata ? getSearchableColumnKeys(metadata) : null),

package/src/use-facet-loaders.ts

@@ -0,0 +1,79 @@
+// useFacetLoaders — the shared machinery that turns a plain text filter into a
+// `facet` value-picker. Both DynamicKanban (via useDynamicFilters) and
+// DynamicTable derive their filter configs independently, so the lazy
+// per-field option loader + result cache lives here to guarantee they facet
+// identically (one board and its table sibling hit the same `/facets` endpoint
+// with the same caching).
+import { useCallback, useEffect, useRef } from 'react'
+import { useApi } from './api-context'
+import type { FilterOption } from './dynamic-columns-shim'
+
+/**
+ * Long-text / body columns aren't worth faceting (thousands of unique values,
+ * each a paragraph). Heuristic on the metadata, not a hardcoded name list:
+ * a truncate-text/widget cell or a json/long-text SQL type are the strong
+ * signals; the name pattern is only a last-resort fallback.
+ */
+export function isLongTextColumn(c: {
+  key: string
+  type?: string
+  cellStyle?: string
+}): boolean {
+  if (c.cellStyle === 'truncate-text' || c.cellStyle === 'widget') return true
+  const t = (c.type || '').toLowerCase()
+  if (t === 'json' || t === 'long_text' || t === 'text_long' || t === 'widget')
+    return true
+  return /^(body|description|content|notes?|comment|message|summary)$/i.test(
+    c.key,
+  )
+}
+
+/**
+ * Returns `getFacetLoader(field)` — a stable per-field loader that resolves the
+ * column's distinct values + counts from `<facetsBase>?field=&q=&limit=`. Loader
+ * identity is memoized per field (so it doesn't churn the config memo that
+ * depends on it) and results are cached per `field+query`. Both caches reset
+ * when `facetsBase` changes (model switch). A null `facetsBase` returns a
+ * factory that yields `undefined` — the caller keeps the column as plain text.
+ */
+export function useFacetLoaders(facetsBase: string | null) {
+  const api = useApi()
+  const loaderCache = useRef<
+    Map<string, (q?: string) => Promise<FilterOption[]>>
+  >(new Map())
+  const resultCache = useRef<Map<string, FilterOption[]>>(new Map())
+
+  useEffect(() => {
+    loaderCache.current.clear()
+    resultCache.current.clear()
+  }, [facetsBase])
+
+  return useCallback(
+    (field: string) => {
+      if (!facetsBase) return undefined
+      const existing = loaderCache.current.get(field)
+      if (existing) return existing
+      const loader = async (q?: string): Promise<FilterOption[]> => {
+        const term = q?.trim() || ''
+        const cacheKey = `${field}::${term}`
+        const cached = resultCache.current.get(cacheKey)
+        if (cached) return cached
+        const res = await api.get(facetsBase, {
+          params: { field, q: term || undefined, limit: 50 },
+        })
+        const body = (res as { data: any }).data
+        const rows: any[] = body?.success ? body.data || [] : []
+        const opts: FilterOption[] = rows.map((r) => ({
+          value: String(r.value ?? ''),
+          label: String(r.label ?? r.value ?? ''),
+          count: typeof r.count === 'number' ? r.count : undefined,
+        }))
+        resultCache.current.set(cacheKey, opts)
+        return opts
+      }
+      loaderCache.current.set(field, loader)
+      return loader
+    },
+    [api, facetsBase],
+  )
+}