portal-mojo 0.2.22 → 0.2.23

package/docs/ModelTable.md

@@ -174,6 +174,17 @@ The table retains native row/cell semantics.
 (`__gte`), `daterange` (the `dr_*` triple). Applied filters render as
 editable pills; presets are param bundles with DERIVED active state.
 
+**The selected preset owns its keys.** While a preset matches, its params
+render no pill and don't count on the Filter button, and every Clear (the
+pill row's Clear all, the Filter menu's, the empty state's) keeps them —
+the segment is the one control for them. So a `defaultParams` default that
+matches a preset (`{ status: 'submitted' }` beside a "Submitted" preset)
+shows as the highlighted segment, never as a removable pill. Filters added
+on top still pill. The Filter menu keeps its check on an owned key's
+definition; editing it there changes the value, the preset stops matching,
+and the pill returns. A default with NO matching preset is still a plain
+removable pill; scope that must never be removable is `fixedParams`.
+
 ## Selection + batch
 
 `selectable` renders checkboxes independently of `batchActions` (decoupled

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "portal-mojo",
-    "version": "0.2.22",
+    "version": "0.2.23",
     "description": "React portal toolkit for django-mojo — typed client + params store, mission-control UI, dependency-free SVG charts, admin section bundles.",
     "type": "module",
     "license": "Apache-2.0",

package/src/client/params.ts

@@ -41,7 +41,8 @@ export interface TableParamsApi extends TableParams {
     removeFilter(f: ActiveFilter): void;
     applyPreset(params: Record<string, string>): void;
     presetActive(params: Record<string, string>): boolean;
-    clearFilters(): void;
+    /** Clears search and filters; `keep` survives (the selected preset's own keys). */
+    clearFilters(keep?: Readonly<Record<string, string>>): void;
     setPage(page: number): void;
     setSize(size: number): void;
     /**
@@ -295,7 +296,7 @@ export function useTableParams(
             if (keys.length === 0) return Object.keys(filters).length === 0;
             return keys.every((k) => filters[k] === params[k]);
         },
-        clearFilters: () => write({ ...state, search: '', page: 1 }, {}),
+        clearFilters: (keep) => write({ ...state, search: '', page: 1 }, { ...keep }),
         setPage: (page) => write({ ...state, page }, filters),
         setSize: (size) => write({ ...state, size, page: 1 }, filters),
         applySaved: (saved) => {

package/src/ui/FilterBar.tsx

@@ -2,12 +2,15 @@ import { ComboBox } from './ComboBox';
 // FilterBar — web-mojo's filter UX: an "Add filter" menu listing every
 // available filter with a per-type icon and a check on the active ones, each
 // opening a type-appropriate dialog; applied filters become editable pills.
-// Adding a filter to a page is one entry in a `filters` array.
+// Adding a filter to a page is one entry in a `filters` array. Keys owned by
+// the selected preset (`owned`) are the segment's to show: no pill, no count,
+// and Clear all keeps them (see preset-owned.ts).
 import { useEffect, useRef, useState } from 'react';
 import { modal } from './modal';
 import { DateRangePicker } from './date/DateRangePicker';
 import { formatFilterDisplay } from '../client/lookups';
 import type { ActiveFilter, TableParamsApi } from '../client/params';
+import { isPresetOwned } from './preset-owned';
 
 export type FilterType = 'text' | 'select' | 'multiselect' | 'number' | 'boolean' | 'date' | 'daterange';
 
@@ -168,7 +171,7 @@ async function openFilterDialog(def: FilterDef, current: ActiveFilter | undefine
 }
 
 // ── the bar ───────────────────────────────────────────────────────────
-export function FilterBar({ defs, params }: { defs: FilterDef[]; params: TableParamsApi }) {
+export function FilterBar({ defs, params, owned = {} }: { defs: FilterDef[]; params: TableParamsApi; owned?: Readonly<Record<string, string>> }) {
     const [open, setOpen] = useState(false);
     const wrapRef = useRef<HTMLDivElement>(null);
 
@@ -187,11 +190,14 @@ export function FilterBar({ defs, params }: { defs: FilterDef[]; params: TablePa
     }, [open]);
 
     const active = params.activeFilters;
+    // The menu's checks still show owned keys (they ARE filtering, and the
+    // dialog edits them); the count and Clear all are the pills' business.
+    const clearable = active.filter((f) => !isPresetOwned(f, owned));
 
     return (
         <div className="filter-menu-wrap" ref={wrapRef}>
             <button
-                className={`btn btn-compact${active.length ? ' btn-has-filters' : ''}`}
+                className={`btn btn-compact${clearable.length ? ' btn-has-filters' : ''}`}
                 onClick={() => setOpen((v) => !v)}
                 aria-expanded={open}
                 title="Filter"
@@ -199,7 +205,7 @@ export function FilterBar({ defs, params }: { defs: FilterDef[]; params: TablePa
                 {/* Label collapses on normal widths (tool-group icon mode);
                     the active-count badge stays visible either way. */}
                 <i className="bi bi-funnel" /> <span className="btn-label">Filter</span>
-                {active.length > 0 && <span className="filter-count">{active.length}</span>}
+                {clearable.length > 0 && <span className="filter-count">{clearable.length}</span>}
             </button>
             {open && (
                 <div className="filter-menu" role="menu">
@@ -221,12 +227,12 @@ export function FilterBar({ defs, params }: { defs: FilterDef[]; params: TablePa
                             </button>
                         );
                     })}
-                    {active.length > 0 && (
+                    {clearable.length > 0 && (
                         <>
                             <div className="filter-menu-sep" />
                             <button
                                 className="filter-menu-item filter-menu-clear"
-                                onClick={() => { setOpen(false); params.clearFilters(); }}
+                                onClick={() => { setOpen(false); params.clearFilters(owned); }}
                             >
                                 <i className="bi bi-x-circle" /> Clear all filters
                             </button>
@@ -238,9 +244,9 @@ export function FilterBar({ defs, params }: { defs: FilterDef[]; params: TablePa
     );
 }
 
-/** Active-filter pills — click to edit, × to remove. */
-export function FilterPills({ defs, params }: { defs: FilterDef[]; params: TableParamsApi }) {
-    const active = params.activeFilters;
+/** Active-filter pills — click to edit, × to remove. Preset-owned keys never pill. */
+export function FilterPills({ defs, params, owned = {} }: { defs: FilterDef[]; params: TableParamsApi; owned?: Readonly<Record<string, string>> }) {
+    const active = params.activeFilters.filter((f) => !isPresetOwned(f, owned));
     if (active.length === 0) return null;
     return (
         <div className="pill-row">
@@ -261,7 +267,7 @@ export function FilterPills({ defs, params }: { defs: FilterDef[]; params: Table
                     </span>
                 );
             })}
-            <button className="pill-clear" onClick={() => params.clearFilters()}>Clear all</button>
+            <button className="pill-clear" onClick={() => params.clearFilters(owned)}>Clear all</button>
         </div>
     );
 }

package/src/ui/ModelTable.tsx

@@ -30,6 +30,7 @@ import { busyWhile } from './loading';
 import { modal } from './modal';
 import { RenderGuard } from './safe-node';
 import { fixedParamKeys, mergeFixedParams } from './fixed-params';
+import { isPresetOwned, presetOwnedFilters } from './preset-owned';
 import { toast } from './toast';
 import * as fmt from './format';
 import { warnOnce } from './warn-once';
@@ -428,6 +429,9 @@ function ModelTableView<T extends { id: RowId }>(props: ModelTableProps<T> & {
     const firstRow = count === 0 ? 0 : (p.page - 1) * p.size + 1;
     const lastRow = Math.min(count, (p.page - 1) * p.size + rows.length);
     const isFiltered = p.activeFilters.length > 0 || (searchable && p.search !== '');
+    // The selected segment owns its keys: no pill, and every Clear keeps them.
+    const owned = presetOwnedFilters(presets, p.presetActive);
+    const clearable = p.activeFilters.some((f) => !isPresetOwned(f, owned)) || (searchable && p.search !== '');
 
     // Save the view on every params/visibility change (post-hydration only,
     // so the restore itself never writes back a half-applied state).
@@ -750,7 +754,7 @@ function ModelTableView<T extends { id: RowId }>(props: ModelTableProps<T> & {
                         toolbar). Icons + tooltips only; text labels appear
                         only on very wide screens via .btn-label. */}
                     <div className="tool-group">
-                        {filters.length > 0 && <FilterBar defs={filters} params={p} />}
+                        {filters.length > 0 && <FilterBar defs={filters} params={p} owned={owned} />}
                         {columnChooser && (
                             <MenuDropdown button={(open, toggle) => (
                                 <button className="btn btn-compact" onClick={toggle} aria-expanded={open} title="Choose columns">
@@ -838,7 +842,7 @@ function ModelTableView<T extends { id: RowId }>(props: ModelTableProps<T> & {
                 </div>
             )}
 
-            <FilterPills defs={filters} params={p} />
+            <FilterPills defs={filters} params={p} owned={owned} />
 
             {selectable && batchActions.length > 0 && selected.size > 0 && (
                 <div className="batch-bar" role="region" aria-label="Batch actions">
@@ -939,7 +943,7 @@ function ModelTableView<T extends { id: RowId }>(props: ModelTableProps<T> & {
                                     {isFiltered ? (
                                         <>
                                             <h3>No results match your filters</h3>
-                                            <button className="btn" onClick={() => p.clearFilters()}>Clear filters</button>
+                                            {clearable && <button className="btn" onClick={() => p.clearFilters(owned)}>Clear filters</button>}
                                         </>
                                     ) : (
                                         <h3>No {title.toLowerCase()} yet</h3>

package/src/ui/preset-owned.ts

@@ -0,0 +1,39 @@
+// presetOwnedFilters — the filter keys the selected segment already shows.
+//
+// A preset is a param bundle with DERIVED active state: its keys live in the
+// params store like any filter. Rendering them as pills as well says the
+// same thing twice, and the pill's × (or Clear all) flips the segment behind
+// the operator's back — a default "Staff" preset cleared to "All users", or
+// a raw lookup like `user__player_profiles__group__not` shown as a filter.
+// So the segment is the one control for the keys it owns: no pill, no count
+// on the Filter button, and Clear all keeps them. A filter the operator adds
+// on top still pills; editing an owned key through the Filter menu changes
+// the value, the preset stops matching, and the pill comes back.
+//
+// This module is intentionally NOT exported from ui/index.ts — it is
+// ModelTable plumbing, kept pure so the verify script can pin it without
+// loading ModelTable's router/query graph.
+import type { ActiveFilter } from '../client/params';
+
+interface PresetParams { params: Record<string, string> }
+
+/**
+ * Union of the params of every active preset. Matching is the params
+ * store's own `presetActive`, so a segment highlights exactly when it owns
+ * its keys. The empty "All" preset owns nothing.
+ */
+export function presetOwnedFilters(
+    presets: readonly PresetParams[],
+    isActive: (params: Record<string, string>) => boolean,
+): Record<string, string> {
+    const owned: Record<string, string> = {};
+    for (const { params } of presets) {
+        if (Object.keys(params).length > 0 && isActive(params)) Object.assign(owned, params);
+    }
+    return owned;
+}
+
+/** True when a segment owns this filter. A daterange is owned through its `dr_field`. */
+export function isPresetOwned(f: ActiveFilter, owned: Readonly<Record<string, string>>): boolean {
+    return f.kind === 'daterange' ? owned.dr_field === f.id : owned[f.id] !== undefined;
+}