Merge pull request #1374 from lowcoder-org/feature-pagination

Feature pagination
lowcoder-org · Dec 4, 2024 · 18e2917 · 18e2917
2 parents 3defa5c + 8354a3a
commit 18e2917
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 38 deletions.
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx
@@ -2,7 +2,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { HomeBreadcrumbType, HomeLayout } from "./HomeLayout";
 import {useEffect, useState} from "react";
-import {ApplicationMeta, FolderMeta} from "../../constants/applicationConstants";
+import {ApplicationCategoriesEnum, ApplicationMeta, FolderMeta} from "../../constants/applicationConstants";
 import { buildFolderUrl } from "../../constants/routesURL";
 import { folderElementsSelector, foldersSelector } from "../../redux/selectors/folderSelector";
 import { Helmet } from "react-helmet";
@@ -46,6 +46,7 @@ export function FolderView() {
   const [typeFilter, setTypeFilter] = useState<number>(0);
   const [modify, setModify] = useState(true);
   const [searchValue, setSearchValue] = useState("");
+  const [categoryFilter, setCategoryFilter] = useState<ApplicationCategoriesEnum | "All">("All");
 
   const dispatch = useDispatch();
 
@@ -68,6 +69,7 @@ export function FolderView() {
             pageSize:pageSize,
             applicationType: ApplicationPaginationType[typeFilter],
             name: searchValues,
+            category: categoryFilter === "All" ? "" : categoryFilter
           }).then(
               (data: any) => {
                 if (data.success) {
@@ -80,7 +82,7 @@ export function FolderView() {
         } catch (error) {
           console.error('Failed to fetch data:', error);
         }
-      }, [currentPage, pageSize, searchValues, typeFilter, modify]);
+      }, [currentPage, pageSize, searchValues, typeFilter, modify, categoryFilter]);
 
     useEffect( () => {
             if (searchValues !== "")
@@ -113,6 +115,7 @@ export function FolderView() {
           setTypeFilterPagination={setTypeFilter}
           setModify={setModify}
           modify={modify}
+          setCategoryFilterPagination={setCategoryFilter}
       />
     </>
   );

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -316,6 +316,9 @@ export interface HomeLayoutProps {
   searchValue?: string;
   setSearchValue?: any;
   setTypeFilterPagination?: any;
+  setCategoryFilterPagination?: any;
+  setIsCreated?: any;
+  isCreated?: boolean;
   setModify?: any;
   modify?: boolean;
 }
@@ -334,10 +337,15 @@ export function HomeLayout(props: HomeLayoutProps) {
     setSearchValue,
     total,
     setTypeFilterPagination,
+    setCategoryFilterPagination,
     setModify,
-    modify
+    modify,
+    setIsCreated,
+    isCreated
 
   } = props;
+
+
   const handlePageChange = (page: number) => {
     setCurrentPage(page);
   };
@@ -429,15 +437,6 @@ export function HomeLayout(props: HomeLayoutProps) {
       }
       return true;
       })
-    .filter((e) => {
-      // If "All" is selected, do not filter out any elements based on category
-      if (categoryFilter === 'All' || !categoryFilter) {
-        return true;
-      }
-      // Otherwise, filter elements based on the selected category
-      return !e.folder && e.category === categoryFilter.toString();
-    })
-
     .map((e) =>
       e.folder
         ? {
@@ -469,7 +468,6 @@ export function HomeLayout(props: HomeLayoutProps) {
           }
     );
 
-
   const getFilterMenuItem = (type: HomeResTypeEnum) => {
     const Icon = HomeResInfo[type].icon;
     return {
@@ -546,17 +544,22 @@ export function HomeLayout(props: HomeLayoutProps) {
                     getFilterMenuItem(HomeResTypeEnum.Application),
                     getFilterMenuItem(HomeResTypeEnum.Module),
                     ...(mode !== "marketplace" ? [getFilterMenuItem(HomeResTypeEnum.Navigation), getFilterMenuItem(HomeResTypeEnum.MobileTabLayout)] : []),
-                    ...(mode !== "trash" && mode !== "marketplace" ? [getFilterMenuItem(HomeResTypeEnum.Folder)] : []),
+                    ...(mode !== "trash" && mode !== "marketplace" && mode !== "folder" ? [getFilterMenuItem(HomeResTypeEnum.Folder)] : []),
                   ]}
                   getPopupContainer={(node: any) => node}
                   suffixIcon={<ArrowSolidIcon />} />
               )}
-              {mode === "view" &&
+              {(mode === "view" || mode === "folder") &&
                   <FilterDropdown
                       style={{ minWidth: "220px" }}
                       variant="borderless"
                       value={categoryFilter}
-                      onChange={(value: any) => setCategoryFilter(value as ApplicationCategoriesEnum)}
+                      onChange={(value: any) => {
+                        setCategoryFilter(value as ApplicationCategoriesEnum)
+                        setCategoryFilterPagination(value as ApplicationCategoriesEnum);
+                        }
+
+                      }
                       options={categoryOptions}
                     // getPopupContainer={(node) => node}
                       suffixIcon={<ArrowSolidIcon />}
@@ -580,7 +583,7 @@ export function HomeLayout(props: HomeLayoutProps) {
                   style={{ width: "192px", height: "32px", margin: "0" }}
                 />
                 {mode !== "trash" && mode !== "marketplace" && user.orgDev && (
-                  <CreateDropdown defaultVisible={showNewUserGuide(user)} mode={mode} setModify={setModify} modify={modify!} />
+                  <CreateDropdown defaultVisible={showNewUserGuide(user)} mode={mode} setModify={setIsCreated} modify={isCreated!} />
                 )}
               </OperationRightWrapper>
             </OperationWrapper>
@@ -667,7 +670,7 @@ export function HomeLayout(props: HomeLayoutProps) {
                           ? trans("home.projectEmptyCanAdd")
                           : trans("home.projectEmpty")}
                       </div>
-                      {mode !== "trash" && mode !== "marketplace" && user.orgDev && <CreateDropdown mode={mode} setModify={setModify} modify={modify!}/>}
+                      {mode !== "trash" && mode !== "marketplace" && user.orgDev && <CreateDropdown mode={mode} setModify={setIsCreated} modify={isCreated!}/>}
                     </EmptyView>
                   )}
                 </>

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx
@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet";
 import { trans } from "i18n";
 import {useState, useEffect } from "react";
 import {fetchFolderElements} from "@lowcoder-ee/util/pagination/axios";
-import {ApplicationMeta, FolderMeta} from "@lowcoder-ee/constants/applicationConstants";
+import {ApplicationCategoriesEnum, ApplicationMeta, FolderMeta} from "@lowcoder-ee/constants/applicationConstants";
 import {ApplicationPaginationType} from "@lowcoder-ee/util/pagination/type";
 
 interface ElementsState {
@@ -21,26 +21,30 @@ export function HomeView() {
     const [searchValues, setSearchValues] = useState("");
     const [typeFilter, setTypeFilter] = useState<number>(0);
     const [modify, setModify] = useState(true);
+    const [isCreated, setIsCreated] = useState(true);
+    const [categoryFilter, setCategoryFilter] = useState<ApplicationCategoriesEnum | "All">("All");
+
       useEffect( () => {
-          try{
-              fetchFolderElements({
-                  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]
+        try{
+          fetchFolderElements({
+            pageNum:currentPage,
+            pageSize:pageSize,
+            applicationType: ApplicationPaginationType[typeFilter],
+            name: searchValues,
+            category: categoryFilter === "All" ? "" : categoryFilter
+          }).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, categoryFilter, isCreated]
       );
 
     useEffect( () => {
@@ -79,6 +83,9 @@ export function HomeView() {
         setTypeFilterPagination={setTypeFilter}
         setModify={setModify}
         modify={modify}
+        setCategoryFilterPagination={setCategoryFilter}
+        setIsCreated={setIsCreated}
+        isCreated={isCreated}
       />
     </>
   );

diff --git a/client/packages/lowcoder/src/util/pagination/type.ts b/client/packages/lowcoder/src/util/pagination/type.ts
@@ -61,6 +61,7 @@ export interface fetchFolderRequestType {
     pageSize?: number;
     name?: string;
     applicationType?: string;
+    category?: string
 }
 
 export interface fetchDBRequestType {