@asteby/metacore-runtime-react 23.0.0 → 23.2.0

package/src/dynamic-kanban.tsx

@@ -77,9 +77,15 @@ import {
     Skeleton,
 } from '@asteby/metacore-ui/primitives'
 import { ColumnFilterControl, FilterValueCombobox, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
-import { generateBadgeStyles, optionColor, resolveColorCss } from '@asteby/metacore-ui/lib'
+import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib'
 import { useApi } from './api-context'
 import { useDynamicFilters } from './use-dynamic-filters'
+import {
+    FilterChipsRow,
+    summarizeFilterValues,
+    translateOptionLabels,
+} from './filter-chips'
+import { dedupeById, useInfiniteScrollSentinel } from './use-infinite-scroll'
 import { useMetadataCache } from './metadata-cache'
 import { ActivityValueRenderer } from './activity-value-renderer'
 import { DynamicIcon } from './dynamic-icon'
@@ -96,6 +102,10 @@ import type {
     StageTransition,
 } from './types'
 
+// Re-exported for tests + backward-compat: these live in ./filter-chips now
+// (shared with DynamicTable) but were historically imported from here.
+export { summarizeFilterValues, translateOptionLabels }
+
 // ---------------------------------------------------------------------------
 // Pure helpers (exported for unit tests — no React, no transport)
 // ---------------------------------------------------------------------------
@@ -204,6 +214,30 @@ export function applyOptimisticMove(
     return next
 }
 
+/**
+ * Returns a NEW per-lane pagination map with the server totals adjusted for a
+ * card moving `fromStage` → `toStage`: the source loses one, the destination
+ * gains one. Lanes whose `total` is still unknown (`null`, not yet topped up)
+ * are left alone. Pure — backs the optimistic drag so a partial lane's
+ * `count/total` header stays truthful, and can be restored on PUT failure.
+ */
+export function applyLaneTotalsOnMove<T extends { total: number | null }>(
+    pagination: Record<string, T>,
+    fromStage: string,
+    toStage: string,
+): Record<string, T> {
+    const next = { ...pagination }
+    const bump = (key: string, delta: number) => {
+        const st = next[key]
+        if (st && st.total != null) {
+            next[key] = { ...st, total: Math.max(0, st.total + delta) }
+        }
+    }
+    bump(fromStage, -1)
+    bump(toStage, +1)
+    return next
+}
+
 /**
  * Picks the columns shown on a card: a `title` column (first searchable column,
  * else first text-ish column) and up to `maxFields` secondary columns. Excludes
@@ -233,71 +267,6 @@ export function selectCardColumns(
     return { title, fields }
 }
 
-/**
- * Human-readable summary of a field's selected filter values for the removable
- * chip row. Resolves option labels, unwraps the wire operators
- * (`IN:`/`ILIKE:`/`RANGE:`/`GTE:`/`LTE:`/date `from_to`), and caps the list at
- * `maxShown` values with a `+n` overflow. Pure — exported for unit tests.
- */
-export function summarizeFilterValues(
-    values: string[] | undefined,
-    options: { label: string; value: string }[] | undefined,
-    maxShown = 2,
-): string {
-    if (!values || values.length === 0) return ''
-    const opts = options ?? []
-    const labelFor = (v: string) =>
-        opts.find((o) => o.value === v)?.label ?? v
-    const first = values[0]
-    if (values.length === 1) {
-        if (first.startsWith('ILIKE:')) return `"${first.slice(6)}"`
-        if (first.startsWith('IN:')) {
-            return summarizeList(first.slice(3).split(','), labelFor, maxShown)
-        }
-        if (first.startsWith('RANGE:')) {
-            const [min, max] = first.slice(6).split(',')
-            return `${min || '…'} – ${max || '…'}`
-        }
-        if (/^\d{4}-\d{2}-\d{2}_/.test(first)) return first.replace('_', ' – ')
-    }
-    if (first.startsWith('GTE:') || first.startsWith('LTE:')) {
-        const min = values.find((v) => v.startsWith('GTE:'))?.slice(4) ?? ''
-        const max = values.find((v) => v.startsWith('LTE:'))?.slice(4) ?? ''
-        return `${min || '…'} – ${max || '…'}`
-    }
-    return summarizeList(values, labelFor, maxShown)
-}
-
-function summarizeList(
-    items: string[],
-    labelFor: (v: string) => string,
-    maxShown: number,
-): string {
-    const labels = items.map(labelFor)
-    if (labels.length <= maxShown) return labels.join(', ')
-    return `${labels.slice(0, maxShown).join(', ')} +${labels.length - maxShown}`
-}
-
-/**
- * The color of a filter's first selected value (for the chip's dot) — e.g. a
- * stage's palette color. Returns a resolved CSS color, or undefined for
- * operator/range/free-text values that carry no option color.
- */
-function chipValueColor(config: {
-    selectedValues: string[]
-    options: { value: string; color?: string }[]
-}): string | undefined {
-    const sel = config.selectedValues
-    if (!sel || sel.length === 0) return undefined
-    const first = sel[0]
-    let value = first
-    if (first.startsWith('IN:')) value = first.slice(3).split(',')[0]
-    else if (/^(ILIKE|RANGE|GTE|LTE):/.test(first)) return undefined
-    else if (/^\d{4}-\d{2}-\d{2}_/.test(first)) return undefined
-    const opt = config.options.find((o) => o.value === value)
-    return opt?.color ? resolveColorCss(opt.color) : undefined
-}
-
 /**
  * Whether a card passes a lane funnel. Picked select/facet `values` match by
  * equality (IN — the card's field value must be one of them); a free-text
@@ -320,14 +289,16 @@ export function cardMatchesLaneFunnel(
 }
 
 /**
- * Translates option labels through the app translator (manifest i18n keys →
- * localized text). A raw value with no matching key falls through to itself via
- * `defaultValue`. Pure — exported for unit tests.
+ * Count of applied criteria on a lane funnel: the number of picked select/facet
+ * `values`, else 1 for a free-text `text`, else 0. Drives the funnel's count
+ * badge. Pure — exported for unit tests.
  */
-export function translateOptionLabels<
-    T extends { label: string },
->(options: T[], translate: (key: string) => string): T[] {
-    return options.map((o) => ({ ...o, label: translate(o.label) }))
+export function laneFunnelCount(
+    value: { values?: string[]; text?: string } | undefined,
+): number {
+    if (value?.values?.length) return value.values.length
+    if (value?.text?.trim()) return 1
+    return 0
 }
 
 /**
@@ -391,6 +362,18 @@ interface LaneFilterState {
     query?: string
 }
 
+/** Incremental pagination bookkeeping for one lane/stage. */
+interface LanePageState {
+    /** Next stage-scoped page to request. */
+    nextPage: number
+    /** Server total for the stage (from response meta), or null if unknown. */
+    total: number | null
+    /** A top-up request is in flight. */
+    loading: boolean
+    /** No more pages for this stage. */
+    done: boolean
+}
+
 export interface DynamicKanbanProps {
     /** Model key as registered on the backend (e.g. "issue"). */
     model: string
@@ -411,10 +394,16 @@ export interface DynamicKanbanProps {
      */
     onAction?: (action: string, row: any) => void
     /**
-     * Max cards fetched per lane render. Kanban shows all cards at once (no
-     * pagination UI), so it requests a single large page. Defaults to 200.
+     * Size of the INITIAL board page (one request, grouped into lanes). Each
+     * lane then tops up incrementally on scroll (see `lanePageSize`). Defaults
+     * to 50 — enough to fill the visible lanes without loading the whole board.
      */
     pageSize?: number
+    /**
+     * Page size for a lane's incremental top-up fetch (scoped by
+     * `f_<group_by>=<stage>`). Defaults to 25.
+     */
+    lanePageSize?: number
     /** IANA timezone for datetime card fields (org config). */
     timeZone?: string
     /** ISO 4217 currency for money card fields (org config). */
@@ -432,7 +421,8 @@ export function DynamicKanban({
     refreshTrigger,
     onCardClick,
     onAction,
-    pageSize = 200,
+    pageSize = 50,
+    lanePageSize = 25,
     timeZone,
     currency,
     defaultFilters,
@@ -448,6 +438,14 @@ export function DynamicKanban({
     const [records, setRecords] = useState<any[]>([])
     const [loading, setLoading] = useState(!cachedMeta)
     const [loadingData, setLoadingData] = useState(true)
+    // Per-stage incremental pagination for infinite scroll. The initial board
+    // page (grouped into lanes) is fetched once; each lane then tops up its OWN
+    // stage via `f_<group_by>=<stage>&page=n`, appended (deduped by id) into the
+    // shared `records`. `total` is the stage's server count when the response
+    // meta carries it. Reset whenever the filters/search change.
+    const [lanePagination, setLanePagination] = useState<
+        Record<string, LanePageState>
+    >({})
 
     // Active drag card id (for the DragOverlay + drop-zone highlighting).
     const [activeId, setActiveId] = useState<string | null>(null)
@@ -503,7 +501,10 @@ export function DynamicKanban({
         clearAll,
     } = useDynamicFilters(metadata, { defaultFilters, model, endpoint })
 
-    // ---- records fetch (same path as DynamicTable, single large page) ----
+    // ---- initial board page (one request, grouped into lanes) ----
+    // Resets the per-lane pagination so every lane restarts its incremental
+    // top-up from scratch — called on mount, refresh, and any filter/search
+    // change (fetchData's identity changes with filterParams).
     const fetchData = useCallback(async () => {
         if (!metadata) return
         setLoadingData(true)
@@ -517,8 +518,67 @@ export function DynamicKanban({
         } finally {
             setLoadingData(false)
         }
+        setLanePagination({})
     }, [api, endpoint, model, metadata, pageSize, filterParams])
 
+    // Load the next page for ONE lane/stage and append it (deduped by id) into
+    // the shared records. Scoped by `f_<group_by>=<stage>` on top of the active
+    // filterParams (the stage scope wins over any global group_by filter).
+    const groupByKey = metadata?.group_by || ''
+    const loadMoreLane = useCallback(
+        async (stageKey: string) => {
+            if (!metadata || !groupByKey) return
+            const current = lanePagination[stageKey]
+            if (current?.loading || current?.done) return
+            const nextPage = current?.nextPage ?? 1
+            setLanePagination((p) => ({
+                ...p,
+                [stageKey]: {
+                    nextPage,
+                    total: current?.total ?? null,
+                    loading: true,
+                    done: false,
+                },
+            }))
+            try {
+                const res = (await api.get(endpoint || `/data/${model}`, {
+                    params: {
+                        ...filterParams,
+                        page: nextPage,
+                        per_page: lanePageSize,
+                        [`f_${groupByKey}`]: stageKey,
+                    },
+                })) as { data: ApiResponse<any[]> & { meta?: any } }
+                const rows = res.data.success ? res.data.data || [] : []
+                const total =
+                    res.data.meta?.total ?? res.data.meta?.count ?? null
+                setRecords((prev) => dedupeById(prev, rows))
+                setLanePagination((p) => ({
+                    ...p,
+                    [stageKey]: {
+                        nextPage: nextPage + 1,
+                        total,
+                        loading: false,
+                        // Exhausted when the server returned a short page.
+                        done: rows.length < lanePageSize,
+                    },
+                }))
+            } catch (err) {
+                console.error(`Error al cargar más tarjetas de ${stageKey}`, err)
+                setLanePagination((p) => ({
+                    ...p,
+                    [stageKey]: {
+                        nextPage,
+                        total: current?.total ?? null,
+                        loading: false,
+                        done: false,
+                    },
+                }))
+            }
+        },
+        [api, endpoint, model, metadata, groupByKey, filterParams, lanePageSize, lanePagination],
+    )
+
     // 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
@@ -620,7 +680,6 @@ export function DynamicKanban({
         () => (metadata ? deriveStages(metadata) : []),
         [metadata],
     )
-    const groupByKey = metadata?.group_by || ''
     const transitions = metadata?.transitions
 
     const grouped = useMemo(
@@ -705,11 +764,16 @@ export function DynamicKanban({
 
             // OPTIMISTIC: move the card in local state immediately.
             const prevRecords = records
+            const prevPagination = lanePagination
             setRecords((rs) =>
                 rs.map((r) =>
                     String(r.id) === cardId ? { ...r, [groupByKey]: destStage } : r,
                 ),
             )
+            // Keep the server totals consistent with the moved card so a lane's
+            // `count/total` header stays truthful with partial lanes: one leaves
+            // the source stage, one joins the destination.
+            setLanePagination((p) => applyLaneTotalsOnMove(p, srcStage, destStage))
 
             try {
                 const base = endpoint || `/data/${model}`
@@ -726,6 +790,7 @@ export function DynamicKanban({
             } catch (err: any) {
                 // REVERT + toast on failure.
                 setRecords(prevRecords)
+                setLanePagination(prevPagination)
                 toast.error(
                     t('kanban.moveFailed', {
                         defaultValue: 'No se pudo mover la tarjeta',
@@ -736,7 +801,7 @@ export function DynamicKanban({
                 )
             }
         },
-        [api, endpoint, groupByKey, model, records, stageOfCard, t, transitions],
+        [api, endpoint, groupByKey, lanePagination, model, records, stageOfCard, t, transitions],
     )
 
     if (loading) {
@@ -878,64 +943,13 @@ export function DynamicKanban({
                 )}
             </div>
 
-            {/* Removable chip row — one chip per active field filter, plus a
-                "Limpiar todo" at the end. Instant feedback without opening the
-                Sheet; clicking a chip's X clears that field server-side. */}
-            {activeFields.length > 0 && (
-                <div
-                    className="flex flex-wrap items-center gap-1.5"
-                    data-testid="kanban-filter-chips"
-                >
-                    {activeFields.map((field) => {
-                        const summary = summarizeFilterValues(
-                            field.config.selectedValues,
-                            field.config.options,
-                        )
-                        const dot = chipValueColor(field.config)
-                        return (
-                            <Badge
-                                key={field.key}
-                                variant="secondary"
-                                className="h-6 gap-1.5 rounded-md pl-2 pr-1 text-xs font-normal"
-                            >
-                                {dot && (
-                                    <span
-                                        className="size-2 shrink-0 rounded-full"
-                                        style={{ backgroundColor: dot }}
-                                    />
-                                )}
-                                <span className="font-medium">{field.label}:</span>
-                                <span className="max-w-[180px] truncate text-muted-foreground">
-                                    {summary}
-                                </span>
-                                <button
-                                    type="button"
-                                    onClick={() =>
-                                        field.config.onFilterChange(
-                                            field.config.filterKey,
-                                            [],
-                                        )
-                                    }
-                                    className="ml-0.5 rounded-sm p-0.5 transition-colors hover:bg-muted-foreground/20"
-                                    aria-label={t('kanban.removeFilter', {
-                                        defaultValue: 'Quitar filtro',
-                                    })}
-                                >
-                                    <X className="h-3 w-3" />
-                                </button>
-                            </Badge>
-                        )
-                    })}
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 gap-1 px-2 text-xs text-muted-foreground"
-                        onClick={clearAll}
-                    >
-                        {t('kanban.clearAll', { defaultValue: 'Limpiar todo' })}
-                    </Button>
-                </div>
-            )}
+            {/* Removable chip row — shared with DynamicTable. Instant feedback
+                without opening the Sheet; a chip's X clears that field. */}
+            <FilterChipsRow
+                fields={activeFields}
+                onClearAll={clearAll}
+                data-testid="kanban-filter-chips"
+            />
 
             <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
                 <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
@@ -960,12 +974,21 @@ export function DynamicKanban({
                         !activeId ||
                         stage.key === activeStage ||
                         isTransitionAllowed(transitions, activeStage, stage.key)
+                    // Infinite scroll is per declared stage; the synthetic
+                    // "unassigned" lane can't be stage-scoped, so it never tops up.
+                    const laneState = lanePagination[stage.key]
+                    const isUnassigned = stage.key === UNASSIGNED_LANE
+                    const laneHasMore = !isUnassigned && !laneState?.done
                     return (
                         <KanbanLane
                             key={stage.key}
                             stage={stage}
                             count={cards.length}
                             totalCount={allCards.length}
+                            serverTotal={laneState?.total ?? null}
+                            hasMore={laneHasMore}
+                            loadingMore={!!laneState?.loading}
+                            onLoadMore={() => loadMoreLane(stage.key)}
                             filterFields={filterFields}
                             laneFilter={laneFilter}
                             onFunnelChange={(f) =>
@@ -1134,6 +1157,14 @@ interface KanbanLaneProps {
     stage: StageMeta
     count: number
     totalCount: number
+    /** Server-reported total for the stage (from response meta), or null. */
+    serverTotal: number | null
+    /** More server pages available for this stage. */
+    hasMore: boolean
+    /** A top-up request for this stage is in flight. */
+    loadingMore: boolean
+    /** Request the next page for this stage. */
+    onLoadMore: () => void
     filterFields: LaneFilterField[]
     laneFilter: LaneFilterState | undefined
     onFunnelChange: (filter: LaneFunnelValue | null) => void
@@ -1148,6 +1179,10 @@ function KanbanLane({
     stage,
     count,
     totalCount,
+    serverTotal,
+    hasMore,
+    loadingMore,
+    onLoadMore,
     filterFields,
     laneFilter,
     onFunnelChange,
@@ -1159,6 +1194,12 @@ function KanbanLane({
 }: KanbanLaneProps) {
     const { t } = useTranslation()
     const { setNodeRef, isOver } = useDroppable({ id: stage.key, disabled })
+    // Infinite scroll: the sentinel lives at the bottom of the lane's own scroll
+    // container; a load in flight or an exhausted stage disables it.
+    const { rootRef, sentinelRef } = useInfiniteScrollSentinel({
+        onLoadMore,
+        disabled: !hasMore || loadingMore,
+    })
     const headerStyle = generateBadgeStyles(stage.color || optionColor(stage.key), {
         isDark,
     })
@@ -1216,21 +1257,21 @@ function KanbanLane({
                         {t(stage.label, { defaultValue: stage.label })}
                     </Badge>
                     <span className="text-xs font-medium tabular-nums text-muted-foreground">
-                        {laneActive ? `${count}/${totalCount}` : count}
+                        {laneActive
+                            ? `${count}/${totalCount}`
+                            : serverTotal != null
+                              ? `${count}/${serverTotal}`
+                              : count}
                     </span>
                 </div>
-                {/* Lane actions — dimmed until the lane (or the board row) is
-                    hovered/focused, so an idle board stays clean. Stay lit when a
-                    lane filter is active. */}
-                <div
-                    className={`flex items-center gap-0.5 transition-opacity focus-within:opacity-100 group-hover/lane:opacity-100 ${
-                        laneActive || searchOpen ? 'opacity-100' : 'opacity-0'
-                    }`}
-                >
+                {/* Lane actions — always visible in muted (a hidden hover-reveal
+                    was undiscoverable); active state is a primary tint + a count
+                    badge on the funnel. */}
+                <div className="flex items-center gap-0.5">
                     <button
                         type="button"
                         onClick={() => setSearchOpen((o) => !o)}
-                        className={`flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
+                        className={`relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
                             queryActive ? 'text-primary' : 'text-muted-foreground'
                         }`}
                         aria-label={t('kanban.searchLane', {
@@ -1238,6 +1279,9 @@ function KanbanLane({
                         })}
                     >
                         <Search className="h-3.5 w-3.5" />
+                        {queryActive && (
+                            <span className="absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-primary" />
+                        )}
                     </button>
                     <LaneFilterButton
                         fields={filterFields}
@@ -1295,8 +1339,18 @@ function KanbanLane({
                 text wraps freely (no line-clamp) the cards grew past the lane
                 and spilled out of the stage. A normal `overflow-y-auto` block
                 constrains every card to the lane width so text wraps inside it. */}
-            <div className="flex min-h-[55vh] max-h-[70vh] min-w-0 flex-col gap-2 overflow-y-auto px-2 pb-3">
+            <div
+                ref={rootRef}
+                className="flex min-h-[55vh] max-h-[70vh] min-w-0 flex-col gap-2 overflow-y-auto px-2 pb-3"
+            >
                 {children}
+                {loadingMore && (
+                    <Skeleton className="h-16 w-full shrink-0" data-testid="lane-loading-more" />
+                )}
+                {/* Sentinel: entering view triggers the next stage page. */}
+                {hasMore && (
+                    <div ref={sentinelRef} className="h-1 w-full shrink-0" aria-hidden />
+                )}
             </div>
         </div>
     )
@@ -1332,6 +1386,8 @@ function LaneFilterButton({
         value &&
         ((value.values && value.values.length > 0) || value.text?.trim())
     )
+    // Number of applied criteria on this lane's funnel (drives the count badge).
+    const activeCount = laneFunnelCount(value)
     // The value step mirrors the sheet: when the chosen field is a select or a
     // facet (static options OR a lazy loader), render the SAME pro combobox —
     // multi-select, searchable, with counts. Only a genuinely free-text field
@@ -1357,7 +1413,7 @@ function LaneFilterButton({
             <PopoverTrigger asChild>
                 <button
                     type="button"
-                    className={`flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
+                    className={`relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
                         active ? 'text-primary' : 'text-muted-foreground'
                     }`}
                     aria-label={t('kanban.filterLane', {
@@ -1365,6 +1421,11 @@ function LaneFilterButton({
                     })}
                 >
                     <ListFilter className="h-3.5 w-3.5" />
+                    {activeCount > 0 && (
+                        <span className="absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[9px] font-bold leading-none text-primary-foreground tabular-nums">
+                            {activeCount}
+                        </span>
+                    )}
                 </button>
             </PopoverTrigger>
             <PopoverContent