@asteby/metacore-runtime-react 20.1.7 → 21.1.0

package/src/__tests__/dynamic-kanban.test.tsx

@@ -11,7 +11,7 @@
 //      and the destination payload is `{ <group_by>: <dest> }`; an invalid
 //      transition is rejected before any PUT.
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, render, screen } from '@testing-library/react'
+import { cleanup, render, screen, fireEvent, waitFor } from '@testing-library/react'
 
 // react-i18next: identity translator returning the defaultValue so card field
 // labels and lane labels surface verbatim. The `t`/`i18n` references are STABLE
@@ -276,3 +276,59 @@ describe('optimistic drag contract', () => {
         // handler returns early — no applyOptimisticMove, no PUT.
     })
 })
+
+// ---------------------------------------------------------------------------
+// 4. Filter bar — the DynamicKanban parity with DynamicTable column filters.
+//    The bar renders a search box + one chip per filterable field, and any
+//    control refetches the board server-side through useDynamicFilters
+//    (debounced), carrying the same `f_<key>` / `search` params.
+// ---------------------------------------------------------------------------
+
+describe('DynamicKanban filter bar', () => {
+    it('renders a search box and groups filters behind a Filtros sheet', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        render(
+            <ApiProvider client={fakeApi()}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        // search box stays inline
+        expect(await screen.findByPlaceholderText('Buscar...')).toBeTruthy()
+        // filters are grouped behind a "Filtros" button (no longer spilling as
+        // inline chips), so "Stage" is NOT in the DOM until the sheet opens.
+        const filtersBtn = screen.getByText('Filtros')
+        expect(filtersBtn).toBeTruthy()
+        expect(screen.queryByText('Stage')).toBeNull()
+        // opening the sheet reveals the "Stage" filter (the only filterable column)
+        fireEvent.click(filtersBtn)
+        expect(await screen.findByText('Stage')).toBeTruthy()
+    })
+
+    it('typing in the search box refetches the board with the search param', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const get = vi.fn(async (url: string) => {
+            if (url.startsWith('/metadata/table/'))
+                return { data: { success: true, data: meta() } }
+            return { data: { success: true, data: CARDS } }
+        })
+        render(
+            <ApiProvider client={fakeApi({ get })}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        const box = await screen.findByPlaceholderText('Buscar...')
+        fireEvent.change(box, { target: { value: 'login' } })
+        await waitFor(() =>
+            expect(get).toHaveBeenCalledWith(
+                '/data/issue',
+                expect.objectContaining({
+                    params: expect.objectContaining({
+                        search: 'login',
+                        // `title` is the only `searchable: true` column in the fixture.
+                        search_columns: 'title',
+                    }),
+                }),
+            ),
+        )
+    })
+})

package/src/dynamic-kanban.tsx

@@ -38,7 +38,7 @@ import {
     type DragStartEvent,
     type DragEndEvent,
 } from '@dnd-kit/core'
-import { MoreHorizontal } from 'lucide-react'
+import { ListFilter, MoreHorizontal, Search, X } from 'lucide-react'
 import { toast } from 'sonner'
 import {
     Badge,
@@ -49,10 +49,26 @@ import {
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
+    Input,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
     Skeleton,
 } from '@asteby/metacore-ui/primitives'
+import { ColumnFilterControl, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
 import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib'
 import { useApi } from './api-context'
+import { useDynamicFilters } from './use-dynamic-filters'
 import { useMetadataCache } from './metadata-cache'
 import { ActivityValueRenderer } from './activity-value-renderer'
 import { DynamicIcon } from './dynamic-icon'
@@ -262,6 +278,11 @@ export interface DynamicKanbanProps {
     timeZone?: string
     /** ISO 4217 currency for money card fields (org config). */
     currency?: string
+    /**
+     * Static equality filters always applied to the board (never shown as a
+     * removable chip). Same contract as DynamicTable's `defaultFilters`.
+     */
+    defaultFilters?: Record<string, any>
 }
 
 export function DynamicKanban({
@@ -273,6 +294,7 @@ export function DynamicKanban({
     pageSize = 200,
     timeZone,
     currency,
+    defaultFilters,
 }: DynamicKanbanProps) {
     const { t, i18n } = useTranslation()
     const api = useApi()
@@ -326,13 +348,25 @@ export function DynamicKanban({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [model])
 
+    // Shared metadata-driven filter engine — the SAME configs, option prefetch
+    // and `f_<key>` serialization DynamicTable uses, so the board filters
+    // identically to its table sibling.
+    const {
+        globalFilter,
+        setGlobalFilter,
+        columnFilterConfigs,
+        filterParams,
+        activeFilterCount,
+        clearAll,
+    } = useDynamicFilters(metadata, { defaultFilters })
+
     // ---- records fetch (same path as DynamicTable, single large page) ----
     const fetchData = useCallback(async () => {
         if (!metadata) return
         setLoadingData(true)
         try {
             const res = (await api.get(endpoint || `/data/${model}`, {
-                params: { page: 1, per_page: pageSize },
+                params: { page: 1, per_page: pageSize, ...filterParams },
             })) as { data: ApiResponse<any[]> }
             if (res.data.success) setRecords(res.data.data || [])
         } catch (err) {
@@ -340,12 +374,58 @@ export function DynamicKanban({
         } finally {
             setLoadingData(false)
         }
-    }, [api, endpoint, model, metadata, pageSize])
+    }, [api, endpoint, model, metadata, pageSize, filterParams])
 
+    // Refetch when metadata resolves, on an explicit refresh, or when the
+    // filters change. `fetchData` is stable while `filterParams` is unchanged
+    // (both memoized), so this only re-runs on real input changes. Debounced so
+    // typing in the search box doesn't fire a request per keystroke.
     useEffect(() => {
-        if (metadata) void fetchData()
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [metadata, refreshTrigger])
+        if (!metadata) return
+        const handle = setTimeout(() => {
+            void fetchData()
+        }, 200)
+        return () => clearTimeout(handle)
+    }, [fetchData, metadata, refreshTrigger])
+
+    // Filterable fields for the toolbar, in metadata order (explicit filters
+    // first, then filterable columns), each labeled from its metadata source.
+    const filterFields = useMemo(() => {
+        if (!metadata) return []
+        const out: {
+            key: string
+            label: string
+            config: NonNullable<ReturnType<typeof columnFilterConfigs.get>>
+        }[] = []
+        for (const [key, config] of columnFilterConfigs) {
+            const f = metadata.filters?.find((x) => x.key === key)
+            const c = metadata.columns.find((x) => x.key === key)
+            const rawLabel = f?.label || c?.label || key
+            out.push({ key, label: t(rawLabel, { defaultValue: rawLabel }), config })
+        }
+        return out
+    }, [metadata, columnFilterConfigs, t])
+
+    // Sheet (grouped global filters) open state + per-lane client-side filters.
+    // A lane filter narrows ONLY that stage's already-fetched cards by a field
+    // value — instant, no refetch — so a user can drill into one column without
+    // touching the rest of the board (the global filters, by contrast, refetch
+    // the whole board server-side).
+    const [filtersOpen, setFiltersOpen] = useState(false)
+    const [laneFilters, setLaneFilters] = useState<
+        Record<string, { field: string; value: string }>
+    >({})
+    const setLaneFilter = useCallback(
+        (stageKey: string, filter: { field: string; value: string } | null) => {
+            setLaneFilters((prev) => {
+                const next = { ...prev }
+                if (filter) next[stageKey] = filter
+                else delete next[stageKey]
+                return next
+            })
+        },
+        [],
+    )
 
     const stages = useMemo(
         () => (metadata ? deriveStages(metadata) : []),
@@ -503,10 +583,102 @@ export function DynamicKanban({
     }
 
     return (
-        <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
-            <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
+        <div className="flex flex-col gap-3">
+            {/* Filter bar — global search + one chip per filterable field, the
+                SAME set the DynamicTable exposes in its column headers. Changing
+                any control refetches the board server-side (debounced) via the
+                shared useDynamicFilters engine. */}
+            <div className="flex flex-wrap items-center gap-2" data-testid="kanban-filters">
+                <div className="relative">
+                    <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                        value={globalFilter}
+                        onChange={(e) => setGlobalFilter(e.target.value)}
+                        placeholder={t('kanban.searchPlaceholder', { defaultValue: 'Buscar...' })}
+                        className="h-8 w-52 pl-8 text-sm"
+                    />
+                </div>
+                {filterFields.length > 0 && (
+                    <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+                        <SheetTrigger asChild>
+                            <Button variant="outline" size="sm" className="h-8 gap-1.5">
+                                <ListFilter className="h-3.5 w-3.5" />
+                                {t('kanban.filters', { defaultValue: 'Filtros' })}
+                                {activeFilterCount > 0 && (
+                                    <Badge
+                                        variant="secondary"
+                                        className="ml-0.5 h-4 min-w-4 justify-center rounded-full px-1 text-[10px] tabular-nums"
+                                    >
+                                        {activeFilterCount}
+                                    </Badge>
+                                )}
+                            </Button>
+                        </SheetTrigger>
+                        <SheetContent
+                            side="right"
+                            className="flex w-80 flex-col gap-4 sm:max-w-sm"
+                        >
+                            <SheetHeader className="space-y-0">
+                                <SheetTitle>
+                                    {t('kanban.filters', { defaultValue: 'Filtros' })}
+                                </SheetTitle>
+                            </SheetHeader>
+                            {/* One labeled control per filterable field, stacked. Same
+                                configs / server-side engine as the inline chips were,
+                                just grouped so they never spill across the board. */}
+                            <div className="flex flex-1 flex-col gap-2 overflow-y-auto pr-1">
+                                {filterFields.map((field) => (
+                                    <ColumnFilterControl
+                                        key={field.key}
+                                        showLabel
+                                        label={field.label}
+                                        filterKey={field.config.filterKey}
+                                        filterType={
+                                            field.config.filterType as ColumnFilterType
+                                        }
+                                        filterOptions={field.config.options}
+                                        filterLoading={field.config.loading}
+                                        filterSearchEndpoint={field.config.searchEndpoint}
+                                        selectedValues={field.config.selectedValues}
+                                        onFilterChange={field.config.onFilterChange}
+                                    />
+                                ))}
+                            </div>
+                            {activeFilterCount > 0 && (
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="gap-1 text-xs text-muted-foreground"
+                                    onClick={clearAll}
+                                >
+                                    <X className="h-3.5 w-3.5" />
+                                    {t('kanban.clearFilters', { defaultValue: 'Limpiar' })}
+                                    {` (${activeFilterCount})`}
+                                </Button>
+                            )}
+                        </SheetContent>
+                    </Sheet>
+                )}
+            </div>
+
+            <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
+                <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
                 {lanes.map((stage) => {
-                    const cards = grouped.get(stage.key) ?? []
+                    const allCards = grouped.get(stage.key) ?? []
+                    // Per-lane client-side narrowing: substring match on the
+                    // chosen field over the already-fetched cards. Instant, and
+                    // scoped to this stage only.
+                    const laneFilter = laneFilters[stage.key]
+                    const cards =
+                        laneFilter && laneFilter.value.trim()
+                            ? allCards.filter((c) =>
+                                  String(c[laneFilter.field] ?? '')
+                                      .toLowerCase()
+                                      .includes(
+                                          laneFilter.value.trim().toLowerCase(),
+                                      ),
+                              )
+                            : allCards
                     const droppableAllowed =
                         !activeId ||
                         stage.key === activeStage ||
@@ -516,6 +688,12 @@ export function DynamicKanban({
                             key={stage.key}
                             stage={stage}
                             count={cards.length}
+                            totalCount={allCards.length}
+                            filterFields={filterFields}
+                            laneFilter={laneFilter}
+                            onLaneFilterChange={(f) =>
+                                setLaneFilter(stage.key, f)
+                            }
                             isDark={isDark}
                             dimmed={!!activeId && !droppableAllowed}
                             disabled={!!activeId && !droppableAllowed}
@@ -564,7 +742,8 @@ export function DynamicKanban({
             </DragOverlay>
 
             {rowActionDialogs}
-        </DndContext>
+            </DndContext>
+        </div>
     )
 }
 
@@ -575,18 +754,37 @@ export function DynamicKanban({
 interface KanbanLaneProps {
     stage: StageMeta
     count: number
+    totalCount: number
+    filterFields: { key: string; label: string }[]
+    laneFilter: { field: string; value: string } | undefined
+    onLaneFilterChange: (filter: { field: string; value: string } | null) => void
     isDark: boolean
     dimmed: boolean
     disabled: boolean
     children: React.ReactNode
 }
 
-function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: KanbanLaneProps) {
+function KanbanLane({
+    stage,
+    count,
+    totalCount,
+    filterFields,
+    laneFilter,
+    onLaneFilterChange,
+    isDark,
+    dimmed,
+    disabled,
+    children,
+}: KanbanLaneProps) {
     const { t } = useTranslation()
     const { setNodeRef, isOver } = useDroppable({ id: stage.key, disabled })
     const headerStyle = generateBadgeStyles(stage.color || optionColor(stage.key), {
         isDark,
     })
+    const laneActive = !!(laneFilter && laneFilter.value.trim())
+    const activeFieldLabel =
+        filterFields.find((f) => f.key === laneFilter?.field)?.label ??
+        laneFilter?.field
     return (
         <div
             ref={setNodeRef}
@@ -607,10 +805,35 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: Kanban
                 >
                     {t(stage.label, { defaultValue: stage.label })}
                 </Badge>
-                <span className="text-xs font-medium tabular-nums text-muted-foreground">
-                    {count}
-                </span>
+                <div className="flex items-center gap-1">
+                    <span className="text-xs font-medium tabular-nums text-muted-foreground">
+                        {laneActive ? `${count}/${totalCount}` : count}
+                    </span>
+                    <LaneFilterButton
+                        fields={filterFields}
+                        value={laneFilter}
+                        onChange={onLaneFilterChange}
+                    />
+                </div>
             </div>
+            {laneActive && (
+                <div className="flex items-center gap-1 px-3 pb-1.5 text-[11px] text-muted-foreground">
+                    <ListFilter className="h-3 w-3 shrink-0" />
+                    <span className="truncate">
+                        {activeFieldLabel}: {laneFilter!.value}
+                    </span>
+                    <button
+                        type="button"
+                        onClick={() => onLaneFilterChange(null)}
+                        className="ml-auto rounded p-0.5 hover:bg-muted"
+                        aria-label={t('kanban.clearFilters', {
+                            defaultValue: 'Limpiar',
+                        })}
+                    >
+                        <X className="h-3 w-3" />
+                    </button>
+                </div>
+            )}
             {/* Plain vertical-scroll column, NOT a Radix ScrollArea: the
                 ScrollArea viewport wraps its content in a `display:table`
                 element that shrink-to-fits the WIDEST card, so once the card
@@ -624,6 +847,95 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: Kanban
     )
 }
 
+// LaneFilterButton — the per-column funnel. Picks a field + a value and narrows
+// ONLY this lane's cards (client-side, in the parent). Draft state lives here so
+// typing doesn't refilter mid-keystroke; Apply/Enter commits, Limpiar clears.
+function LaneFilterButton({
+    fields,
+    value,
+    onChange,
+}: {
+    fields: { key: string; label: string }[]
+    value: { field: string; value: string } | undefined
+    onChange: (filter: { field: string; value: string } | null) => void
+}) {
+    const { t } = useTranslation()
+    const [open, setOpen] = useState(false)
+    const [field, setField] = useState(value?.field ?? fields[0]?.key ?? '')
+    const [text, setText] = useState(value?.value ?? '')
+    // Re-seed the draft from the committed filter each time the popover opens.
+    useEffect(() => {
+        if (open) {
+            setField(value?.field ?? fields[0]?.key ?? '')
+            setText(value?.value ?? '')
+        }
+    }, [open, value, fields])
+    if (fields.length === 0) return null
+    const active = !!(value && value.value.trim())
+    const apply = () => {
+        if (field && text.trim()) onChange({ field, value: text })
+        else onChange(null)
+        setOpen(false)
+    }
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <button
+                    type="button"
+                    className={`rounded p-1 transition-colors hover:bg-muted hover:text-foreground ${
+                        active ? 'text-primary' : 'text-muted-foreground'
+                    }`}
+                    aria-label={t('kanban.filterLane', {
+                        defaultValue: 'Filtrar columna',
+                    })}
+                >
+                    <ListFilter className="h-3.5 w-3.5" />
+                </button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-56 space-y-2 p-2">
+                <Select value={field} onValueChange={setField}>
+                    <SelectTrigger className="h-8 text-xs">
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {fields.map((f) => (
+                            <SelectItem key={f.key} value={f.key} className="text-xs">
+                                {f.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <Input
+                    autoFocus
+                    value={text}
+                    onChange={(e) => setText(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') apply()
+                    }}
+                    placeholder={t('kanban.filterValue', { defaultValue: 'Valor...' })}
+                    className="h-8 text-xs"
+                />
+                <div className="flex justify-between gap-2">
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 text-xs"
+                        onClick={() => {
+                            onChange(null)
+                            setOpen(false)
+                        }}
+                    >
+                        {t('kanban.clearFilters', { defaultValue: 'Limpiar' })}
+                    </Button>
+                    <Button size="sm" className="h-7 text-xs" onClick={apply}>
+                        {t('kanban.apply', { defaultValue: 'Aplicar' })}
+                    </Button>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}
+
 // ---------------------------------------------------------------------------
 // Card (draggable)
 // ---------------------------------------------------------------------------

package/src/index.ts

@@ -23,6 +23,11 @@ export {
     resolveActiveView,
     type DynamicViewProps,
 } from './dynamic-view'
+export {
+    useDynamicFilters,
+    type UseDynamicFiltersOptions,
+    type UseDynamicFiltersResult,
+} from './use-dynamic-filters'
 export * from './dynamic-form'
 export {
     ActionModalDispatcher,