Change search method in query library.

Author: Imiss-U1025

client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx

@@ -1,7 +1,7 @@
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { HomeBreadcrumbType, HomeLayout } from "./HomeLayout";
-import { useEffect } from "react";
+import {useEffect, useState} from "react";
 import { fetchFolderElements } from "../../redux/reduxActions/folderActions";
 import { FolderMeta } from "../../constants/applicationConstants";
 import { buildFolderUrl } from "../../constants/routesURL";
@@ -34,6 +34,7 @@ export function FolderView() {
   const { folderId } = useParams<{ folderId: string }>();
 
   const dispatch = useDispatch();
+  const [searchValue, setSearchValue] = useState("")
 
   const elements = useSelector(folderElementsSelector);
   const allFolders = useSelector(foldersSelector);
@@ -55,7 +56,7 @@ export function FolderView() {
   return (
     <>
       <Helmet>{<title>{trans("home.yourFolders")}</title>}</Helmet>
-      <HomeLayout elements={elements[folderId]} mode={"folder"} breadcrumb={breadcrumbs} />
+      <HomeLayout elements={elements[folderId]} mode={"folder"} breadcrumb={breadcrumbs} setSearchValue={setSearchValue} searchValue={searchValue} />
     </>
   );
 }

client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx

@@ -313,8 +313,8 @@ export interface HomeLayoutProps {
   currentPage?: number;
   pageSize?: number;
   total?: number;
-  searchValues?: number;
-  setSearchValues?: any;
+  searchValue?: string;
+  setSearchValue?: any;
   setTypeFilterPagination?: any;
   setModify?: any;
   modify?: boolean;
@@ -330,8 +330,8 @@ export function HomeLayout(props: HomeLayoutProps) {
     setPageSize,
     pageSize,
     currentPage,
-    searchValues,
-    setSearchValues,
+    searchValue,
+    setSearchValue,
     total,
     setTypeFilterPagination,
     setModify,
@@ -363,7 +363,6 @@ export function HomeLayout(props: HomeLayoutProps) {
   const isSelfHost = window.location.host !== 'app.lowcoder.cloud';
   const [typeFilter, setTypeFilter] = useState<HomeResKey>("All");
   const [categoryFilter, setCategoryFilter] = useState<ApplicationCategoriesEnum | "All">("All");
-  const [searchValue, setSearchValue] = useState("");
   const [visibility, setVisibility] = useState(mode === "view" || mode === "trash");
   const [layout, setLayout] = useState<HomeLayoutType>(
     checkIsMobile(window.innerWidth) ? "card" : getHomeLayout()
@@ -566,9 +565,8 @@ export function HomeLayout(props: HomeLayoutProps) {
               <OperationRightWrapper>
                 <Search
                   placeholder={trans("search")}
-                  value={searchValue}
+                  value={searchValue || ""}
                   onChange={(e) => setSearchValue(e.target.value)}
-                  onEnterPress={(value) => setSearchValues(value)}
                   style={{ width: "192px", height: "32px", margin: "0" }}
                 />
                 {mode !== "trash" && mode !== "marketplace" && user.orgDev && (

client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx

@@ -17,6 +17,7 @@ export function HomeView() {
     const [elements, setElements] = useState<ElementsState>({ elements: [], total: 1 });
     const [currentPage, setCurrentPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
+    const [searchValue, setSearchValue] = useState("");
     const [searchValues, setSearchValues] = useState("");
     const [typeFilter, setTypeFilter] = useState<number>(0);
     const [modify, setModify] = useState(true);
@@ -26,7 +27,7 @@ export function HomeView() {
                   pageNum:currentPage,
                   pageSize:pageSize,
                   applicationType: ApplicationPaginationType[typeFilter],
-                  name: searchValues,
+                  name: searchValue,
               }).then(
                   data => {
                       if (data.success) {
@@ -42,6 +43,13 @@ export function HomeView() {
           }, [currentPage, pageSize, searchValues, typeFilter, modify]
       );
 
+      useEffect(()=> {
+          setTimeout(() => {
+              if (searchValue.length > 2 || searchValue === "")
+                  setSearchValues(searchValue)
+          }, 500);
+      })
+
   const user = useSelector(getUser);
 
   if (!user.currentOrgId) {
@@ -59,7 +67,8 @@ export function HomeView() {
         pageSize={pageSize}
         setPageSize={setPageSize}
         total={elements.total}
-        setSearchValues={setSearchValues}
+        setSearchValue={setSearchValue}
+        searchValue={searchValue}
         setTypeFilterPagination={setTypeFilter}
         setModify={setModify}
         modify={modify}

client/packages/lowcoder/src/pages/ApplicationV2/TrashView.tsx

@@ -15,9 +15,10 @@ export function TrashView() {
     const [currentPage, setCurrentPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [searchValues, setSearchValues] = useState("");
+    const [searchValue, setSearchValue] = useState("");
     const [typeFilter, setTypeFilter] = useState<number>(0);
 
-      useEffect( () => {
+    useEffect( () => {
           if (typeFilter === 7) // Application of Navigation is 3 in API.
               setTypeFilter(3);
             try{
@@ -41,6 +42,13 @@ export function TrashView() {
         }, [currentPage, pageSize, searchValues, typeFilter]
     );
 
+    useEffect(()=> {
+        setTimeout(() => {
+            if (searchValue.length > 2 || searchValue === "")
+                setSearchValues(searchValue)
+        }, 500);
+    })
+
   return (
     <>
       <Helmet>{<title>{trans("home.trash")}</title>}</Helmet>
@@ -53,9 +61,11 @@ export function TrashView() {
           pageSize={pageSize}
           setPageSize={setPageSize}
           total={elements.total}
-          setSearchValues={setSearchValues}
+          setSearchValue={setSearchValue}
+          searchValue={searchValue}
           setTypeFilterPagination={setTypeFilter}
       />
     </>
   );
 }
+

client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import {useEffect, useState} from "react";
 import styled, { css } from "styled-components";
 import {
   BluePlusIcon,
@@ -164,12 +164,21 @@ export const LeftNav = (props: {
   currentPage: number;
   pageSize: number;
   total: number;
+  setSearchValues: any;
+  searchValues: string;
 }) => {
-  const {currentPage, setCurrentPage, pageSize, setPageSize, total } = props
+  const {currentPage, setCurrentPage, pageSize, setPageSize, total , setSearchValues, searchValues} = props
   const dispatch = useDispatch();
   const [searchValue, setSearchValue] = useState("");
   const datasourceTypes = useSelector(getDataSourceTypesMap);
 
+  useEffect(()=> {
+    setTimeout(() => {
+      if (searchValue.length > 2 || searchValue === "")
+        setSearchValues(searchValue)
+    }, 500);
+  })
+
   return (
     <ReadOnlyMask readOnly={!!props.readOnly}>
       <Wrapper $readOnly={props.readOnly}>
@@ -196,12 +205,6 @@ export const LeftNav = (props: {
                     let datasourceTypeName =
                       datasourceTypes[q.libraryQueryDSL?.query?.compType as DatasourceType]?.name ??
                       "";
-                    if (searchValue) {
-                      return (
-                        q.name.toLowerCase().includes(searchValue) ||
-                        datasourceTypeName.toLowerCase().includes(searchValue)
-                      );
-                    }
                     return true;
                   })
                   .map((q) => (

client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx

@@ -91,6 +91,7 @@ export const QueryLibraryEditor = () => {
   const [queryLibrary, setQueryLibrary] = useState<any>({});
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
+  const [searchValues, setSearchValues] = useState("")
 
   const selectedRecords = queryLibraryRecords[selectedQuery] ?? {};
   const libraryQuery = queryLibrary[selectedQuery];
@@ -119,7 +120,7 @@ export const QueryLibraryEditor = () => {
         try {
             fetchQLPaginationByOrg(
                 {
-                    name: "",
+                    name: searchValues,
                     pageNum: currentPage,
                     pageSize: pageSize,
                 }
@@ -132,7 +133,7 @@ export const QueryLibraryEditor = () => {
         } catch (error) {
             console.error(error)
         }
-    }, [currentPage, pageSize])
+    }, [currentPage, pageSize, searchValues, setSearchValues])
 
   useEffect(() => {
     if (orgId) {
@@ -231,6 +232,8 @@ export const QueryLibraryEditor = () => {
           currentPage={currentPage}
           pageSize={pageSize}
           total={elements.total}
+          setSearchValues={setSearchValues}
+          searchValues={searchValues}
         />
         <RightContent>
           {!selectedQuery || !comp?.children.query.children.id.getView() ? (