Implemented pagination in Your App.

lowcoder-org · FalkWolsky · Dec 4, 2024 · Nov 14, 2024 · Nov 26, 2024 · Nov 26, 2024
commit a602426f85b3c89ed1ef571ceecbb3d5247090ae
diff --git a/client/packages/lowcoder-design/src/components/Search.tsx b/client/packages/lowcoder-design/src/components/Search.tsx
@@ -62,24 +62,35 @@ interface ISearch {
   placeholder: string;
   value: string;
   onChange: (value: React.ChangeEvent<HTMLInputElement>) => void;
+  onEnterPress?: (value: string) => void; // Added for capturing Enter key press
   disabled?: boolean;
 }
 
 export const Search = (props: ISearch & InputProps) => {
-  const { value, onChange, style, disabled, placeholder, ...others } = props;
+  const { value, onChange, style, disabled, placeholder, onEnterPress, ...others } = props;
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange && onChange(e);
   };
+
+  // Handling Enter key press
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && onEnterPress) {
+      onEnterPress(value);
+    }
+  };
+
   return (
-    <SearchDiv style={style}>
-      <SearchInput
-        disabled={disabled}
-        placeholder={placeholder}
-        onChange={handleChange}
-        value={value}
-        prefix={<SearchIcon />}
-        {...others}
-      />
-    </SearchDiv>
+      <SearchDiv style={style}>
+        <SearchInput
+            disabled={disabled}
+            placeholder={placeholder}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown} // Listening for key down events
+            value={value}
+            prefix={<SearchIcon />}
+            {...others}
+        />
+      </SearchDiv>
   );
-};
+};
diff --git a/client/packages/lowcoder/src/api/apiResponses.ts b/client/packages/lowcoder/src/api/apiResponses.ts
@@ -12,6 +12,14 @@ export interface GenericApiResponse<T> {
   data: T;
 }
 
+export interface GenericApiPaginationResponse<T> {
+  total: number;
+  success: boolean;
+  code: number;
+  message: string;
+  data: T;
+}
+
 export interface FetchGroupApiResponse<T> extends GenericApiResponse<T> {
   totalAdmins: number,
   totalAdminsAndDevelopers: number,

diff --git a/client/packages/lowcoder/src/api/folderApi.ts b/client/packages/lowcoder/src/api/folderApi.ts
@@ -1,9 +1,10 @@
 import Api from "./api";
 import { AxiosPromise } from "axios";
-import { GenericApiResponse } from "./apiResponses";
+import {GenericApiPaginationResponse, GenericApiResponse} from "./apiResponses";
 import {
   CreateFolderPayload,
   DeleteFolderPayload,
+  FetchFolderElementsPaginationPayload,
   FetchFolderElementsPayload,
   MoveToFolderPayload,
   UpdateFolderPayload,
@@ -40,4 +41,10 @@ export class FolderApi extends Api {
   ): AxiosPromise<GenericApiResponse<(ApplicationMeta | FolderMeta)[]>> {
     return Api.get(FolderApi.url + `/elements`, { id: request.folderId });
   }
+
+  static fetchFolderElementsPagination(
+      request: FetchFolderElementsPaginationPayload
+  ): AxiosPromise<GenericApiPaginationResponse<(ApplicationMeta | FolderMeta)[]>> {
+    return Api.get(FolderApi.url + `/elements`, { ...request });
+  }
 }
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/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: 40px;
+  margin-top: -20px;
   margin-bottom: 20px;  
 `
 
@@ -308,13 +308,39 @@ export interface HomeLayoutProps {
   localMarketplaceApps?: Array<ApplicationMeta>;
   globalMarketplaceApps?: Array<ApplicationMeta>;
   mode: HomeLayoutMode;
+  setCurrentPage?: any;
+  setPageSize?: any;
+  currentPage?: number;
+  pageSize?: number;
+  total?: number;
+  setSearchValues?: any;
+  typeFilter?: number;
+  setTypeFilter?: any;
 }
 
 export function HomeLayout(props: HomeLayoutProps) {
+  const { breadcrumb = [],
+    elements = [],
+    localMarketplaceApps = [],
+    globalMarketplaceApps = [],
+    mode ,
+    setCurrentPage,
+    setPageSize,
+    pageSize,
+    currentPage,
+    setSearchValues,
+    total,
+    typeFilter,
+    setTypeFilter,
+  } = props;
+  console.log("elements", elements, total);
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
 
-  const { breadcrumb = [], elements = [], localMarketplaceApps = [], globalMarketplaceApps = [], mode } = props;
-
-  console.log("folder", elements);
+  const handlePageSizeChange = (current: number, size: number) => {
+    setPageSize(size);
+  };
 
   const categoryOptions = [
     { label: <FilterMenuItem>{trans("home.allCategories")}</FilterMenuItem>, value: 'All' },
@@ -331,10 +357,9 @@ export function HomeLayout(props: HomeLayoutProps) {
   const user = useSelector(getUser);
   const isFetching = useSelector(isFetchingFolderElements);
   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(true);
+  const [visibility, setVisibility] = useState(mode !== "marketplace");
   const [layout, setLayout] = useState<HomeLayoutType>(
     checkIsMobile(window.innerWidth) ? "card" : getHomeLayout()
   );
@@ -352,7 +377,15 @@ export function HomeLayout(props: HomeLayoutProps) {
     return null;
   }
 
-  var displayElements = elements;
+  var displayElements = elements.sort((a, b) => {
+    if (a.folder && !b.folder) {
+      return -1; // a is a folder and should come first
+    } else if (!a.folder && b.folder) {
+      return 1; // b is a folder and should come first
+    } else {
+      return 0; // both are folders or both are not, keep original order
+    }
+  });
 
   if (mode === "marketplace" && isSelfHost) {
     const markedLocalApps = localMarketplaceApps.map(app => ({ ...app, isLocalMarketplace: true }));
@@ -364,27 +397,7 @@ export function HomeLayout(props: HomeLayoutProps) {
     const markedLocalApps = localMarketplaceApps.map(app => ({ ...app, isLocalMarketplace: true }));
     displayElements = [...markedLocalApps];
   }
-
   const resList: HomeRes[] = displayElements
-    .filter((e) =>
-      searchValue
-        ? e.name?.toLocaleLowerCase().includes(searchValue?.toLocaleLowerCase()) ||
-          e.createBy?.toLocaleLowerCase().includes(searchValue?.toLocaleLowerCase())
-        : true
-    )
-    .filter((e) => {
-      if (HomeResTypeEnum[typeFilter].valueOf() === HomeResTypeEnum.All) {
-        return true;
-      }
-      if (e.folder) {
-        return HomeResTypeEnum[typeFilter] === HomeResTypeEnum.Folder;
-      } else {
-        if (typeFilter === "Navigation") {
-          return NavigationTypes.map((t) => t.valueOf()).includes(e.applicationType);
-        }
-        return HomeResTypeEnum[typeFilter].valueOf() === e.applicationType;
-      }
-    })
     .filter((e) => {
       // If "All" is selected, do not filter out any elements based on category
       if (categoryFilter === 'All' || !categoryFilter) {
@@ -425,7 +438,6 @@ export function HomeLayout(props: HomeLayoutProps) {
           }
     );
 
-  console.log(resList);
 
   const getFilterMenuItem = (type: HomeResTypeEnum) => {
     const Icon = HomeResInfo[type].icon;
@@ -474,7 +486,7 @@ export function HomeLayout(props: HomeLayoutProps) {
 
       {showNewUserGuide(user) && <HomepageTourV2 />}
 
-        <HomeView>
+              <HomeView>
           <StyleHomeCover>
             <h1 style={{color: "#ffffff", marginTop : "12px"}}>
               {mode === "marketplace" && trans("home.appMarketplace")}
@@ -491,8 +503,11 @@ export function HomeLayout(props: HomeLayoutProps) {
               {mode !== "folders" && mode !== "module" && (
                 <FilterDropdown
                   variant="borderless"
-                  value={typeFilter}
-                  onChange={(value: any) => setTypeFilter(value as HomeResKey)}
+                  value={HomeResTypeEnum[typeFilter || 0]}
+                  onChange={(value: any) => {
+                    console.log(HomeResTypeEnum[value])
+                    setTypeFilter(HomeResTypeEnum[value])}
+                  }
                   options={[
                     getFilterMenuItem(HomeResTypeEnum.All),
                     getFilterMenuItem(HomeResTypeEnum.Application),
@@ -519,6 +534,7 @@ export function HomeLayout(props: HomeLayoutProps) {
                   placeholder={trans("search")}
                   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 && (
@@ -615,15 +631,21 @@ export function HomeLayout(props: HomeLayoutProps) {
                 </>
               )}
             </ContentWrapper>
-            {visibility ? <div>
-              <Divider />
+            {visibility && resList.length ? <div>
               <PaginationLayout>
-                <Pagination total={50} showSizeChanger />
+                <Pagination
+                    current={currentPage}
+                    pageSize={pageSize}
+                    onChange={handlePageChange}
+                    onShowSizeChange={handlePageSizeChange}
+                    total={total}
+                    showSizeChanger
+                />
               </PaginationLayout>
             </div> : null}
           </Card>  
 
-        </HomeView> 
+        </HomeView>
 
     </Wrapper>
   );

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx
@@ -1,12 +1,50 @@
 import { useSelector } from "react-redux";
 import { HomeLayout } from "./HomeLayout";
 import { getUser } from "../../redux/selectors/usersSelectors";
-import { folderElementsSelector } from "../../redux/selectors/folderSelector";
 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 {ApplicationPaginationType} from "@lowcoder-ee/util/pagination/type";
+
+interface ElementsState {
+    elements: (ApplicationMeta | FolderMeta)[];
+    total: number;
+}
 
 export function HomeView() {
-  const elements = useSelector(folderElementsSelector)[""];
+    const [elements, setElements] = useState<ElementsState>({ elements: [], total: 1 });
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [searchValues, setSearchValues] = useState("");
+    const [typeFilter, setTypeFilter] = useState<number>(0);
+      useEffect( () => {
+          try{
+
+              fetchFolderElements({
+                  pageNum:currentPage,
+                  pageSize:pageSize,
+                  applicationType: ApplicationPaginationType[typeFilter],
+                  name: searchValues,
+              }).then(
+                  data => {
+                      console.log(data)
+                      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]
+      );
+
+  console.log(currentPage, pageSize);
+
   const user = useSelector(getUser);
 
   if (!user.currentOrgId) {
@@ -16,9 +54,17 @@ export function HomeView() {
   return (
     <>
       <Helmet>{<title>{trans("productName")} {trans("home.home")}</title>}</Helmet>
-      <HomeLayout 
-        elements={elements} 
-        mode={"view"} 
+      <HomeLayout
+        elements={elements.elements}
+        mode={"view"}
+        currentPage ={currentPage}
+        setCurrentPage={setCurrentPage}
+        pageSize={pageSize}
+        setPageSize={setPageSize}
+        total={elements.total}
+        setSearchValues={setSearchValues}
+        typeFilter={typeFilter}
+        setTypeFilter={setTypeFilter}
       />
     </>
   );

diff --git a/client/packages/lowcoder/src/redux/reduxActions/folderActions.ts b/client/packages/lowcoder/src/redux/reduxActions/folderActions.ts
@@ -78,6 +78,13 @@ export interface FetchFolderElementsPayload {
   folderId?: string;
 }
 
+export interface FetchFolderElementsPaginationPayload {
+  pageNum?: number;
+  pageSize?: number;
+  name?: string;
+  applicationType?: string;
+}
+
 export const fetchFolderElements = (
   payload: FetchFolderElementsPayload
 ): ReduxAction<FetchFolderElementsPayload> => {