@asteby/metacore-runtime-react 21.1.0 → 23.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,19 @@ 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, prefetchFacets, facetOptions } =
+    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 +184,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 +208,31 @@ 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
+          // Prewarmed values (from prefetchFacets) → the popover opens with the
+          // list already there, no "Cargando…" flash.
+          options = facetOptions.get(f.column || f.key) ?? []
+        }
+      }
       if (fType === 'select' && options.length === 0 && !f.searchEndpoint) continue
       map.set(f.key, {
         filterType: fType,
@@ -174,6 +242,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 +250,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 +269,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 +279,21 @@ 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
+          // Prewarmed values (from prefetchFacets) → instant open.
+          options = facetOptions.get(c.key) ?? []
+        }
+      }
+
       map.set(c.key, {
         filterType,
         filterKey: c.key,
@@ -209,10 +302,37 @@ 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,
+    facetOptions,
+  ])
+
+  // Prewarm every facet field in one burst once the configs settle, so the
+  // Sheet popover and the lane value-picker open instantly (values + counts)
+  // instead of flashing "Cargando…". Deduped inside prefetchFacets by field set.
+  const facetFieldsSig = useMemo(() => {
+    const keys: string[] = []
+    // Key on `filterKey` (the column the loader queries), not the config map key
+    // — they differ when an explicit filter sets a distinct `column`.
+    for (const config of columnFilterConfigs.values()) {
+      if (config.filterType === 'facet') keys.push(config.filterKey)
+    }
+    return keys.join('|')
+  }, [columnFilterConfigs])
+
+  useEffect(() => {
+    if (!facetFieldsSig) return
+    prefetchFacets(facetFieldsSig.split('|'))
+  }, [facetFieldsSig, prefetchFacets])
 
   const searchableKeys = useMemo(
     () => (metadata ? getSearchableColumnKeys(metadata) : null),

package/src/use-facet-loaders.ts

@@ -0,0 +1,146 @@
+// 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, useState } from 'react'
+import { useApi } from './api-context'
+import type { FilterOption } from './dynamic-columns-shim'
+
+export interface UseFacetLoadersResult {
+  /**
+   * Stable per-field loader → `<facetsBase>?field=&q=&limit=`. Cached per
+   * `field+query`. Null `facetsBase` → yields `undefined` (column stays text).
+   */
+  getFacetLoader: (
+    field: string,
+  ) => ((q?: string) => Promise<FilterOption[]>) | undefined
+  /**
+   * Warms the caches for a set of facet fields in ONE parallel burst (called
+   * when metadata resolves), so a popover opens instantly with values + counts
+   * instead of showing "Cargando…". Deduped by the field set; a field whose
+   * request fails is simply omitted (it degrades to lazy/text — the rest are
+   * unaffected). Resolved options also land in `facetOptions`.
+   */
+  prefetchFacets: (fields: string[]) => void
+  /** Prefetched options per field (empty until `prefetchFacets` resolves). */
+  facetOptions: Map<string, FilterOption[]>
+}
+
+/**
+ * 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,
+  )
+}
+
+/**
+ * Facet option machinery: a stable per-field lazy loader (`getFacetLoader`, with
+ * a `field+query` result cache) plus `prefetchFacets` to warm every facet
+ * field's values up front and `facetOptions` holding those prewarmed results.
+ * Loader identity is memoized per field (so it doesn't churn the config memo
+ * that depends on it). Caches reset when `facetsBase` changes (model switch).
+ */
+export function useFacetLoaders(facetsBase: string | null): UseFacetLoadersResult {
+  const api = useApi()
+  const loaderCache = useRef<
+    Map<string, (q?: string) => Promise<FilterOption[]>>
+  >(new Map())
+  const resultCache = useRef<Map<string, FilterOption[]>>(new Map())
+  const prefetchSig = useRef<string | null>(null)
+  const mountedRef = useRef(true)
+  const [facetOptions, setFacetOptions] = useState<Map<string, FilterOption[]>>(
+    new Map(),
+  )
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  useEffect(() => {
+    loaderCache.current.clear()
+    resultCache.current.clear()
+    prefetchSig.current = null
+    setFacetOptions(new Map())
+  }, [facetsBase])
+
+  const getFacetLoader = 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],
+  )
+
+  const prefetchFacets = useCallback(
+    (fields: string[]) => {
+      if (!facetsBase || fields.length === 0) return
+      const sig = [...fields].sort().join('|')
+      if (prefetchSig.current === sig) return
+      prefetchSig.current = sig
+      // One parallel burst; the loader seeds its own `${field}::` cache so the
+      // subsequent lazy open (q === '') is a cache hit. allSettled so one bad
+      // field never blocks the others.
+      void Promise.allSettled(
+        fields.map(async (field) => {
+          const loader = getFacetLoader(field)
+          if (!loader) return null
+          const opts = await loader()
+          return { field, opts }
+        }),
+      ).then((results) => {
+        if (!mountedRef.current) return
+        setFacetOptions((prev) => {
+          const next = new Map(prev)
+          for (const r of results) {
+            if (r.status === 'fulfilled' && r.value) {
+              next.set(r.value.field, r.value.opts)
+            }
+          }
+          return next
+        })
+      })
+    },
+    [facetsBase, getFacetLoader],
+  )
+
+  return { getFacetLoader, prefetchFacets, facetOptions }
+}