Adding filter capacities to api client and server

gui/app/src/common/crud/widgets/crud-text-widget.tsx

@@ -10,6 +10,6 @@ export default function CrudTextWidget<T = any, S extends StrictRJSFSchema = RJS
   if (props.schema.hasOwnProperty("foreign_key")) {
     return (<ForeignKeyWidget {...props} />);
   }else {
-    return (<CrudTextWidget {...props} />);
+    return (<TextWidget {...props} />);
   }
-}
+}

gui/app/src/common/crud/widgets/foreign-key.tsx

@@ -11,38 +11,24 @@ import {useList} from "@refinedev/core";
 export const ForeignKeyWidget = (props: WidgetProps) => {
   const [inputValue, setInputValue] = useState("");
   const [selectedValue, setSelectedValue] = useState<string | null>(null);
+  const [debouncedInputValue, setDebouncedInputValue] = useState(inputValue);
 
   const resource = props.schema.foreign_key.reference.resource
 
+  useEffect(() => {
+    const handler = setTimeout(() => setDebouncedInputValue(inputValue), 300); // Adjust debounce delay as needed
+    return () => clearTimeout(handler);
+  }, [inputValue]);
+
   const { data, isLoading } = useList({
     resource: resource,
     pagination: { current: 1, pageSize: 10 },
+    filters: [{ field: "name", operator: "contains", value: debouncedInputValue }],
     sorters: [{ field: "name", order: "asc" }],
-    filters: [{ field: "name", operator: "contains", value: "input" }],
   });
 
   const options = data?.data || [];
 
-  // const fetchOptions = async (input: string) => {
-  //   try {
-  //
-  //   } catch (error) {
-  //     console.error("Error fetching options:", error);
-  //   }
-  // };
-
-  // // Debounced version of the fetch function
-  // const debouncedFetch = useCallback(debounce(fetchOptions, 300), []);
-  // // Trigger fetch whenever the inputValue changes
-  // useEffect(() => {
-  //   if (inputValue) {
-  //     debouncedFetch(inputValue);
-  //   } else {
-  //     setOptions([]); // Clear options when input is empty
-  //   }
-  // }, [inputValue, debouncedFetch]);
-
-
   return (
     <Autocomplete
       value={selectedValue}

gui/app/src/providers/data-provider.tsx

@@ -55,9 +55,8 @@ export const dataProvider: DataProvider = {
 
     if (filters && filters.length > 0) {
       filters.forEach((filter) => {
-        if ("field" in filter && filter.operator === "eq") {
-          // Our fake API supports "eq" operator by simply appending the field name and value to the query string.
-          params.append(filter.field, filter.value);
+        if ("field" in filter && filter.value.length > 0 && filter.operator === "contains") {
+          params.append(filter.field + "__like", "%" + filter.value + "%");
         }
       });
     }