rastack 0.0.44 → 0.0.45

package/admin/useAdmin.ts

@@ -17,18 +17,25 @@ import type {
 import type { FieldOption } from "../hooks/form/interfaces";
 import {
   AdminResource,
+  FilterKind,
+  FilterOption,
   PAGE_SIZE,
+  boolFilterOptions,
   buildWriteBody,
   changelistHeaders,
   detailPath,
+  distinctValueOptions,
   errorDetail,
   fieldControlType,
+  filterableFields,
+  fkFilterOptions,
   formFields,
   initialFormValues,
   listPath,
   optionsFromRows,
   pageCount,
   readListEnvelope,
+  withFilters,
 } from "./adapters";
 
 interface EngineResult {
@@ -37,13 +44,29 @@ interface EngineResult {
 }
 const ok = (r: EngineResult) => r.status >= 200 && r.status < 300;
 
-/** Drive a `<DataTable>` for one resource, backed by the WASM engine. */
+/** What `useResourceTable` returns: a `TableQuery` plus changelist controls. */
+export interface ResourceTable {
+  query: TableQuery;
+  reload: () => void;
+  /** Active `field → value` equality filters (the filter-bar chips). */
+  filters: Record<string, string>;
+  setFilter: (field: string, value: string) => void;
+  removeFilter: (field: string) => void;
+  clearFilters: () => void;
+  /** Current search text and its setter (rendered in the filter bar). */
+  search: string | undefined;
+  setSearch: (value: string | undefined) => void;
+  itemCount: number;
+}
+
+/** Drive a `<DataTable>` for one resource, backed by any `RastackEngine`. */
 export function useResourceTable(
   engine: RastackEngine,
   resource: AdminResource,
-): { query: TableQuery; reload: () => void } {
+): ResourceTable {
   const [page, setPage] = useState(1);
-  const [search, setSearch] = useState<string | undefined>(undefined);
+  const [search, setSearchState] = useState<string | undefined>(undefined);
+  const [filters, setFilters] = useState<Record<string, string>>({});
   const [data, setData] = useState<Record<string, unknown>[] | undefined>(
     undefined,
   );
@@ -52,23 +75,30 @@ export function useResourceTable(
   const [error, setError] = useState<unknown>(undefined);
   const [tick, setTick] = useState(0);
 
-  // Reset paging/search when the resource changes.
+  // Reset paging/search/filters when the resource changes.
   useEffect(() => {
     setPage(1);
-    setSearch(undefined);
+    setSearchState(undefined);
+    setFilters({});
   }, [resource.key]);
 
+  const filterKey = JSON.stringify(filters);
   useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(undefined);
-    const query: Record<string, string> = {
+    const reserved: Record<string, string> = {
       page: String(page),
       page_size: String(PAGE_SIZE),
     };
-    if (search) query.search = search;
+    if (search) reserved.search = search;
     engine
-      .handle("GET", listPath(resource.app, resource.model), query, undefined)
+      .handle(
+        "GET",
+        listPath(resource.app, resource.model),
+        withFilters(reserved, filters),
+        undefined,
+      )
       .then((res: EngineResult) => {
         if (cancelled) return;
         if (ok(res)) {
@@ -90,7 +120,28 @@ export function useResourceTable(
     return () => {
       cancelled = true;
     };
-  }, [engine, resource.key, resource.app, resource.model, page, search, tick]);
+  }, [engine, resource.key, resource.app, resource.model, page, search, filterKey, tick]);
+
+  const setSearch = (v: string | undefined) => {
+    setSearchState(v && v.length ? v : undefined);
+    setPage(1);
+  };
+  const setFilter = (field: string, value: string) => {
+    setFilters((f) => ({ ...f, [field]: value }));
+    setPage(1);
+  };
+  const removeFilter = (field: string) => {
+    setFilters((f) => {
+      const next = { ...f };
+      delete next[field];
+      return next;
+    });
+    setPage(1);
+  };
+  const clearFilters = () => {
+    setFilters({});
+    setPage(1);
+  };
 
   const pagination: IPaginationActions = {
     currentPage: page,
@@ -106,10 +157,7 @@ export function useResourceTable(
   };
   const searching: ISearchingActions<Record<string, unknown>> = {
     searchText: search,
-    setSearchText: (v) => {
-      setSearch(v && v.length ? v : undefined);
-      setPage(1);
-    },
+    setSearchText: (v) => setSearch(v),
   };
 
   const query: TableQuery = {
@@ -122,7 +170,94 @@ export function useResourceTable(
     // No `sorting`: the store orders by id only, so sortable headers would lie.
     searching: resource.search.length ? searching : undefined,
   };
-  return { query, reload: () => setTick((t) => t + 1) };
+  return {
+    query,
+    reload: () => setTick((t) => t + 1),
+    filters,
+    setFilter,
+    removeFilter,
+    clearFilters,
+    search,
+    setSearch,
+    itemCount: count,
+  };
+}
+
+/** A filter facet ready for the filter bar: its label, kind and value options. */
+export interface FilterFieldModel {
+  name: string;
+  label: string;
+  kind: FilterKind;
+  options: FilterOption[];
+}
+
+/**
+ * Discover the changelist's filter facets and their value options from the
+ * engine: FK fields list their target table, `choice` (plain-string) fields are
+ * scanned for distinct values, booleans are True/False. Only facets that have
+ * at least one option are surfaced.
+ */
+export function useFilterModel(
+  engine: RastackEngine,
+  resource: AdminResource,
+): { fields: FilterFieldModel[]; loading: boolean } {
+  const specs = useMemo(() => filterableFields(resource), [resource.key]);
+  const [fields, setFields] = useState<FilterFieldModel[]>([]);
+  const [loading, setLoading] = useState(specs.length > 0);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!specs.length) {
+      setFields([]);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    (async () => {
+      // Distinct-value facets need a scan of this table's rows (once).
+      let rows: Record<string, unknown>[] = [];
+      if (specs.some((s) => s.kind === "choice")) {
+        const res: EngineResult = await engine.handle(
+          "GET",
+          listPath(resource.app, resource.model),
+          { page_size: "1000" },
+          undefined,
+        );
+        rows = readListEnvelope(res.body).results;
+      }
+      const built = await Promise.all(
+        specs.map(async (s): Promise<FilterFieldModel> => {
+          let options: FilterOption[] = [];
+          if (s.kind === "bool") options = boolFilterOptions();
+          else if (s.kind === "choice") options = distinctValueOptions(rows, s.name);
+          else if (s.kind === "fk" && s.relation) {
+            const res: EngineResult = await engine.handle(
+              "GET",
+              listPath(s.relation.app, s.relation.model),
+              { page_size: "1000" },
+              undefined,
+            );
+            options = fkFilterOptions(readListEnvelope(res.body).results);
+          }
+          return { name: s.name, label: s.label, kind: s.kind, options };
+        }),
+      );
+      if (!cancelled) {
+        setFields(built.filter((f) => f.options.length > 0));
+        setLoading(false);
+      }
+    })().catch(() => {
+      if (!cancelled) {
+        setFields([]);
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [engine, resource.key]);
+
+  return { fields, loading };
 }
 
 /** State a form screen needs beyond the `AutoFormLike` itself. */