Fixed pagination of folders and UI.

Author: Imiss-U1025

client/packages/lowcoder/src/api/folderApi.ts

@@ -48,6 +48,7 @@ export class FolderApi extends Api {
   static fetchFolderElementsPagination(
       request: fetchFolderRequestType
   ): AxiosPromise<GenericApiPaginationResponse<(ApplicationMeta | FolderMeta)[]>> {
-    return Api.get(FolderApi.url + `/elements`, { ...request });
+    const {id, ...res} = request
+    return request.id ? Api.get(FolderApi.url + `/elements`,{id: id, ...res}) : Api.get(FolderApi.url + `/elements`, { ...request });
   }
 }

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

@@ -2,12 +2,13 @@ import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { HomeBreadcrumbType, HomeLayout } from "./HomeLayout";
 import {useEffect, useState} from "react";
-import { fetchFolderElements } from "../../redux/reduxActions/folderActions";
-import { FolderMeta } from "../../constants/applicationConstants";
+import {ApplicationMeta, FolderMeta} from "../../constants/applicationConstants";
 import { buildFolderUrl } from "../../constants/routesURL";
 import { folderElementsSelector, foldersSelector } from "../../redux/selectors/folderSelector";
 import { Helmet } from "react-helmet";
 import { trans } from "i18n";
+import {ApplicationPaginationType} from "@lowcoder-ee/util/pagination/type";
+import {fetchFolderElements} from "@lowcoder-ee/util/pagination/axios";
 
 function getBreadcrumbs(
   folder: FolderMeta,
@@ -30,13 +31,25 @@ function getBreadcrumbs(
   return breadcrumb;
 }
 
+interface ElementsState {
+  elements: ApplicationMeta[];
+  total: number;
+}
+
 export function FolderView() {
   const { folderId } = useParams<{ folderId: string }>();
 
+  const [elements, setElements] = useState<ElementsState>({ elements: [], total: 0 });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchValues, setSearchValues] = useState("");
+  const [typeFilter, setTypeFilter] = useState<number>(0);
+  const [modify, setModify] = useState(true);
+  const [searchValue, setSearchValue] = useState("");
+
   const dispatch = useDispatch();
-  const [searchValue, setSearchValue] = useState("")
 
-  const elements = useSelector(folderElementsSelector);
+  const element = useSelector(folderElementsSelector);
   const allFolders = useSelector(foldersSelector);
 
   const folder = allFolders.filter((f) => f.folderId === folderId)[0] || {};
@@ -47,16 +60,60 @@ export function FolderView() {
     },
   ]);
 
-  useEffect(() => {
-    setTimeout(() => {
-      dispatch(fetchFolderElements({ folderId: folderId }));
-    }, 100);
-  }, [folderId]);
+  useEffect( () => {
+        try{
+          fetchFolderElements({
+            id: folderId,
+            pageNum:currentPage,
+            pageSize:pageSize,
+            applicationType: ApplicationPaginationType[typeFilter],
+            name: searchValues,
+          }).then(
+              (data: any) => {
+                if (data.success) {
+                  setElements({elements: data.data || [], total: data.total || 1})
+                }
+                else
+                  console.error("ERROR: fetchFolderElements", data.error)
+              }
+          );
+        } catch (error) {
+          console.error('Failed to fetch data:', error);
+        }
+      }, [currentPage, pageSize, searchValues, typeFilter, modify]);
+
+    useEffect( () => {
+            if (searchValues !== "")
+                setCurrentPage(1);
+        }, [searchValues]
+    );
+
+    useEffect(()=> {
+        const timer = setTimeout(() => {
+            if (searchValue.length > 2 || searchValue === "")
+                setSearchValues(searchValue)
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [searchValue])
 
   return (
     <>
       <Helmet>{<title>{trans("home.yourFolders")}</title>}</Helmet>
-      <HomeLayout elements={elements[folderId]} mode={"folder"} breadcrumb={breadcrumbs} setSearchValue={setSearchValue} searchValue={searchValue} />
+      <HomeLayout
+          elements={elements.elements}
+          mode={"folder"}
+          breadcrumb={breadcrumbs}
+          currentPage ={currentPage}
+          setCurrentPage={setCurrentPage}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
+          total={elements.total}
+          setSearchValue={setSearchValue}
+          searchValue={searchValue}
+          setTypeFilterPagination={setTypeFilter}
+          setModify={setModify}
+          modify={modify}
+      />
     </>
   );
 }

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

@@ -203,7 +203,7 @@ const EmptyView = styled.div`
 const PaginationLayout = styled.div`
   display: flex;
   justify-content: center;
-  margin-top: -20px;
+  margin-top: 20px;
   margin-bottom: 20px;  
 `
 
@@ -363,7 +363,7 @@ 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 [visibility, setVisibility] = useState(mode === "view" || mode === "trash");
+  const [visibility, setVisibility] = useState(mode === "view" || mode === "trash" || mode === "folder");
   const [layout, setLayout] = useState<HomeLayoutType>(
     checkIsMobile(window.innerWidth) ? "card" : getHomeLayout()
   );

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

@@ -79,7 +79,7 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
   return (
     <>
       <Table
-        style={{ padding: "0 24px 80px", color: "#8B8FA3" }}
+        style={{ padding: "0 24px 60px", color: "#8B8FA3" }}
         tableLayout={"auto"}
         scroll={{ x: "100%" }}
         pagination={false}

client/packages/lowcoder/src/util/pagination/type.ts

@@ -56,6 +56,7 @@ export interface fetchAppRequestType {
 }
 
 export interface fetchFolderRequestType {
+    id?: string;
     pageNum?: number;
     pageSize?: number;
     name?: string;