fix: propagate filament search pagination fix from PR846

- Multi-field debounced fetch replaces single-field server search
- Remove redundant matchesSearch() and visibleDataSource local filter
- Consolidate to localSearchTerm + allSearchResults state
- Consistent with PR846 filament selector fix (e2388ac)

Author: akira69

client/src/pages/printing/filamentSelectModal.tsx

@@ -6,6 +6,7 @@ import { useNavigate } from "react-router";
 import { FilteredQueryColumn, SortedColumn, SpoolIconColumn } from "../../components/column";
 import { useSpoolmanFilamentNames, useSpoolmanMaterials, useSpoolmanVendors } from "../../components/otherModels";
 import { removeUndefined } from "../../utils/filtering";
+import { getAPIURL } from "../../utils/url";
 import { TableState } from "../../utils/saveload";
 import { IFilament } from "../filaments/model";
 
@@ -25,15 +26,6 @@ function collapseFilament(element: IFilament): IFilamentCollapsed {
 }
 
 // Keep the quick search local to the currently loaded page instead of changing the server-side query contract.
-function matchesSearch(filament: IFilamentCollapsed, searchTerm: string): boolean {
-  const needle = searchTerm.trim().toLowerCase();
-  if (needle.length === 0) {
-    return true;
-  }
-
-  const haystacks = [String(filament.id), filament["vendor.name"] ?? "", filament.name ?? "", filament.material ?? ""];
-  return haystacks.some((value) => value.toLowerCase().includes(needle));
-}
 
 const MIN_TABLE_SCROLL_Y = 180;
 const TABLE_BOTTOM_GAP = 16;
@@ -43,20 +35,16 @@ const FilamentSelectModal = ({ description, onPrint, searchPlaceholder }: Props)
   const [selectedItems, setSelectedItems] = useState<number[]>([]);
   const [messageApi, contextHolder] = message.useMessage();
   const navigate = useNavigate();
-  const [searchValue, setSearchValue] = useState("");
-  const [serverSearchValue, setServerSearchValue] = useState("");
   const [tableScrollY, setTableScrollY] = useState<number>(300);
+  const [localSearchTerm, setLocalSearchTerm] = useState("");
+  const [allSearchResults, setAllSearchResults] = useState<IFilamentCollapsed[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
   const rootRef = useRef<HTMLDivElement | null>(null);
   const tableContainerRef = useRef<HTMLDivElement | null>(null);
 
   const { tableProps, sorters, filters, setFilters, currentPage, pageSize, setCurrentPage, setPageSize } =
     useTable<IFilamentCollapsed>({
       resource: "filament",
-      meta: {
-        queryParams: {
-          ...(serverSearchValue.trim().length > 0 ? { search: serverSearchValue.trim() } : {}),
-        },
-      },
       syncWithLocation: false,
       pagination: {
         mode: "server",
@@ -85,17 +73,26 @@ const FilamentSelectModal = ({ description, onPrint, searchPlaceholder }: Props)
     pagination: { currentPage, pageSize },
   };
 
-  const dataSource: IFilamentCollapsed[] = useMemo(
-    () => (tableProps.dataSource || []).map((record) => ({ ...record })),
-    [tableProps.dataSource],
-  );
-  // Keep typing responsive by narrowing the current page immediately even while the backend query is in flight.
-  const visibleDataSource = useMemo(
-    () => dataSource.filter((filament) => matchesSearch(filament, searchValue)),
-    [dataSource, searchValue],
-  );
+  const dataSource: IFilamentCollapsed[] = useMemo(() => {
+    if (localSearchTerm.trim()) {
+      // Paginate search results
+      const startIndex = (currentPage - 1) * pageSize;
+      const endIndex = startIndex + pageSize;
+      return allSearchResults.slice(startIndex, endIndex);
+    }
+    return (tableProps.dataSource || []).map((record) => ({ ...record }));
+  }, [localSearchTerm, allSearchResults, currentPage, pageSize, tableProps.dataSource]);
+
+  const currentSearchValue = localSearchTerm;
   const selectedSet = useMemo(() => new Set(selectedItems), [selectedItems]);
 
+  const paginationTotal = useMemo(() => {
+    if (localSearchTerm.trim()) {
+      return allSearchResults.length;
+    }
+    return tableProps.pagination ? (tableProps.pagination.total ?? 0) : 0;
+  }, [localSearchTerm, allSearchResults.length, tableProps.pagination]);
+
   useEffect(() => {
     const computeScrollHeight = () => {
       if (!tableContainerRef.current) {
@@ -131,7 +128,6 @@ const FilamentSelectModal = ({ description, onPrint, searchPlaceholder }: Props)
     };
   }, []);
 
-  const paginationTotal = tableProps.pagination ? (tableProps.pagination.total ?? 0) : 0;
   const handlePageChange = useCallback(
     (page: number, nextPageSize?: number) => {
       if (typeof nextPageSize === "number" && nextPageSize !== pageSize) {
@@ -145,17 +141,67 @@ const FilamentSelectModal = ({ description, onPrint, searchPlaceholder }: Props)
     setPageSize(size);
     setCurrentPage(1);
   }, []);
-  const applySearchFilter = useCallback((nextSearch: string) => {
-    setServerSearchValue(nextSearch.trim());
-    setCurrentPage(1);
-  }, []);
+  // When search term changes, fetch from multiple fields and combine results
+  useEffect(() => {
+    if (!localSearchTerm.trim()) {
+      setAllSearchResults([]);
+      setFilters(
+        (filters ?? []).filter(
+          (f) => !("field" in f) || !["name", "vendor.name", "material", "article_number"].includes(f.field as string),
+        ),
+        "replace",
+      );
+      return;
+    }
+
+    const fetchMultiFieldResults = async () => {
+      setIsSearching(true);
+      try {
+        const searchTerm = localSearchTerm.trim();
+        const fields = ["name", "vendor.name", "material", "article_number"];
+        const results = new Map<number, IFilamentCollapsed>();
+
+        // Fetch from each field with a reasonable limit per field
+        // Using 150 per field balances performance with coverage
+        for (const field of fields) {
+          try {
+            const params = new URLSearchParams({
+              [field]: searchTerm,
+              limit: "150",
+              offset: "0",
+            });
+            const response = await fetch(`${getAPIURL()}/filament?${params}`);
+            if (response.ok) {
+              const data = (await response.json()) as IFilament[];
+              data.forEach((item) => {
+                if (!results.has(item.id)) {
+                  results.set(item.id, collapseFilament(item));
+                }
+              });
+            }
+          } catch (error) {
+            console.error(`Search failed for field ${field}:`, error);
+          }
+        }
+
+        setAllSearchResults(Array.from(results.values()));
+        setCurrentPage(1);
+      } finally {
+        setIsSearching(false);
+      }
+    };
+
+    // Debounce search to avoid excessive API calls while typing
+    const timer = setTimeout(fetchMultiFieldResults, 300);
+    return () => clearTimeout(timer);
+  }, [localSearchTerm, setFilters, setCurrentPage]);
 
-  // Bulk toggles only touch the rows currently visible after search and paging.
+  // Bulk toggles only touch the rows currently visible after paging and server-side filtering.
   const selectUnselectFiltered = useCallback(
     (select: boolean) => {
       setSelectedItems((prevSelected) => {
         const nextSelected = new Set(prevSelected);
-        visibleDataSource.forEach((filament) => {
+        dataSource.forEach((filament) => {
           if (select) {
             nextSelected.add(filament.id);
           } else {
@@ -165,7 +211,7 @@ const FilamentSelectModal = ({ description, onPrint, searchPlaceholder }: Props)
         return Array.from(nextSelected);
       });
     },
-    [visibleDataSource],
+    [dataSource],
   );
 
   const handleSelectItem = useCallback((item: number) => {
@@ -174,10 +220,9 @@ const FilamentSelectModal = ({ description, onPrint, searchPlaceholder }: Props)
     );
   }, []);
 
-  const isAllFilteredSelected =
-    visibleDataSource.length > 0 && visibleDataSource.every((filament) => selectedSet.has(filament.id));
+  const isAllFilteredSelected = dataSource.length > 0 && dataSource.every((filament) => selectedSet.has(filament.id));
   const isSomeButNotAllFilteredSelected =
-    visibleDataSource.some((filament) => selectedSet.has(filament.id)) && !isAllFilteredSelected;
+    dataSource.some((filament) => selectedSet.has(filament.id)) && !isAllFilteredSelected;
 
   const commonProps = {
     t,
@@ -227,17 +272,16 @@ const FilamentSelectModal = ({ description, onPrint, searchPlaceholder }: Props)
           <Col xs={24} md={12}>
             <Input.Search
               placeholder={resolvedSearchPlaceholder}
-              value={searchValue}
+              value={currentSearchValue}
               allowClear
               enterButton
+              loading={isSearching}
               onChange={(event) => {
                 const value = event.target.value;
-                setSearchValue(value);
-                applySearchFilter(value);
+                setLocalSearchTerm(value);
               }}
               onSearch={(value) => {
-                setSearchValue(value);
-                applySearchFilter(value);
+                setLocalSearchTerm(value);
               }}
             />
           </Col>
@@ -246,8 +290,7 @@ const FilamentSelectModal = ({ description, onPrint, searchPlaceholder }: Props)
           <Col flex="none">
             <Button
               onClick={() => {
-                setSearchValue("");
-                setServerSearchValue("");
+                setLocalSearchTerm("");
                 setFilters([], "replace");
                 setCurrentPage(1);
               }}