@arqel-dev/ui 0.8.1 → 0.9.1

package/dist/pages.d.ts

@@ -29,6 +29,19 @@ declare function ArqelEditPage<TRecord extends RecordType = RecordType>(): JSX.E
  * `<ResourceIndex>`. Apps can override per-resource by registering
  * their own page component at `Pages/Arqel/{Slug}/Index.tsx` (the
  * lookup falls through to user pages first inside `createArqelApp`).
+ *
+ * Wires the standard table interactions — search / filter / sort /
+ * pagination — into Inertia partial `router.get` visits so the
+ * server can re-run TableQueryBuilder with the new query string.
+ *
+ * Query-string contract (matches `Arqel\Table\TableQueryBuilder`):
+ *   - `?search=foo`              global search
+ *   - `?sort=column&direction=asc|desc`
+ *   - `?page=N&per_page=M`
+ *   - `?filter[name]=value`      one entry per filter
+ *
+ * `search` is debounced (300ms) so typing doesn't hammer the
+ * backend; the rest fire immediately.
  */
 
 declare function ArqelIndexPage<TRecord extends RecordType = RecordType>(): JSX.Element;

package/dist/pages.js

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { useRef, useMemo, useCallback, useId, useState } from 'react';
+import { useMemo, useState, useRef, useEffect, useCallback, useId } from 'react';
 import { cva } from 'class-variance-authority';
 import { Slot } from 'radix-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -1566,10 +1566,123 @@ var ArqelIndexPage_exports = {};
 __export(ArqelIndexPage_exports, {
   default: () => ArqelIndexPage
 });
+function pruneEmptyFilters(values) {
+  const out = {};
+  for (const [k, v] of Object.entries(values)) {
+    if (v === void 0 || v === null || v === "") continue;
+    if (Array.isArray(v) && v.length === 0) continue;
+    out[k] = v;
+  }
+  return out;
+}
+function buildQuery(params) {
+  const data = {};
+  const filters = pruneEmptyFilters(params.filters);
+  if (Object.keys(filters).length > 0) data["filter"] = filters;
+  if (params.search) data["search"] = params.search;
+  if (params.sort?.column) {
+    data["sort"] = params.sort.column;
+    if (params.sort.direction) data["direction"] = params.sort.direction;
+  }
+  if (params.page && params.page > 1) data["page"] = params.page;
+  if (params.perPage) data["per_page"] = params.perPage;
+  return data;
+}
 function ArqelIndexPage() {
   const page = usePage();
   const props = page.props;
-  return /* @__PURE__ */ jsx(ResourceIndex, { ...props });
+  const initialFilters = useMemo(() => {
+    if (typeof window === "undefined") return {};
+    const sp = new URLSearchParams(window.location.search);
+    const fromUrl = {};
+    for (const [key, value] of sp.entries()) {
+      const m = key.match(/^filter\[([^\]]+)\]$/);
+      if (m?.[1]) fromUrl[m[1]] = value;
+    }
+    return fromUrl;
+  }, []);
+  const [filterValues, setFilterValues] = useState(initialFilters);
+  const [searchValue, setSearchValue] = useState(props.search ?? "");
+  const searchDebounceRef = useRef(null);
+  const visit = (data) => {
+    const url = typeof window !== "undefined" ? window.location.pathname : page.url.split("?")[0];
+    router.get(url ?? "/", data, {
+      preserveState: true,
+      preserveScroll: true,
+      replace: true
+    });
+  };
+  const currentSort = props.sort ?? null;
+  const handleFilterChange = (name, value) => {
+    const nextFilters = { ...filterValues };
+    if (value === void 0 || value === null || value === "") {
+      delete nextFilters[name];
+    } else {
+      nextFilters[name] = value;
+    }
+    setFilterValues(nextFilters);
+    visit(buildQuery({ filters: nextFilters, search: searchValue, sort: currentSort }));
+  };
+  const handleClearFilters = () => {
+    setFilterValues({});
+    visit(buildQuery({ filters: {}, search: searchValue, sort: currentSort }));
+  };
+  const handleSearchChange = (value) => {
+    setSearchValue(value);
+    if (searchDebounceRef.current) clearTimeout(searchDebounceRef.current);
+    searchDebounceRef.current = setTimeout(() => {
+      visit(buildQuery({ filters: filterValues, search: value, sort: currentSort }));
+    }, 300);
+  };
+  useEffect(
+    () => () => {
+      if (searchDebounceRef.current) clearTimeout(searchDebounceRef.current);
+    },
+    []
+  );
+  const handleSortChange = (column, direction) => {
+    visit(
+      buildQuery({
+        filters: filterValues,
+        search: searchValue,
+        sort: { column, direction }
+      })
+    );
+  };
+  const handlePageChange = (pageNum) => {
+    visit(
+      buildQuery({
+        filters: filterValues,
+        search: searchValue,
+        sort: currentSort,
+        page: pageNum
+      })
+    );
+  };
+  const handlePerPageChange = (perPage) => {
+    visit(
+      buildQuery({
+        filters: filterValues,
+        search: searchValue,
+        sort: currentSort,
+        perPage
+      })
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    ResourceIndex,
+    {
+      ...props,
+      filterValues,
+      onFilterChange: handleFilterChange,
+      onClearFilters: handleClearFilters,
+      onSearchChange: handleSearchChange,
+      onSortChange: handleSortChange,
+      onPageChange: handlePageChange,
+      onPerPageChange: handlePerPageChange,
+      search: searchValue
+    }
+  );
 }
 var init_ArqelIndexPage = __esm({
   "src/pages/ArqelIndexPage.tsx"() {