Implemented pagination in trash.

Author: Imiss-U1025

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

@@ -5,14 +5,15 @@ import {
   DeleteApplicationPayload,
   DeleteAppPermissionPayload,
   FetchAppInfoPayload,
+  FetchApplicationElementsPaginationPayload,
   HomeDataPayload,
   PublishApplicationPayload,
   RecycleApplicationPayload,
   RestoreApplicationPayload,
   SetAppEditingStatePayload,
   UpdateAppPermissionPayload,
 } from "redux/reduxActions/applicationActions";
-import { ApiResponse, GenericApiResponse } from "./apiResponses";
+import {ApiResponse, GenericApiPaginationResponse, GenericApiResponse} from "./apiResponses";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import {
   ApplicationDetail,
@@ -108,6 +109,10 @@ class ApplicationApi extends Api {
     return Api.get(ApplicationApi.newURLPrefix + "/list", { ...request, withContainerSize: false });
   }
 
+  static fetchAllApplicationsPagination(request: FetchApplicationElementsPaginationPayload): AxiosPromise<GenericApiPaginationResponse<ApplicationMeta[]>> {
+    return Api.get(ApplicationApi.newURLPrefix + "/list", { ...request, withContainerSize: false, applicationStatus: "RECYCLED" });
+  }
+
   static fetchAllModules(request: HomeDataPayload): AxiosPromise<ApplicationMeta[]> {
     return Api.get(ApplicationApi.newURLPrefix + "/list", {
       applicationType: AppTypeEnum.Module,

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

@@ -0,0 +1,4 @@
+export const BackButton = () =>{
+    return
+    <div>123</div>
+}

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

@@ -313,9 +313,9 @@ export interface HomeLayoutProps {
   currentPage?: number;
   pageSize?: number;
   total?: number;
+  searchValues?: number;
   setSearchValues?: any;
-  typeFilter?: number;
-  setTypeFilter?: any;
+  setTypeFilterPagination?: any;
 }
 
 export function HomeLayout(props: HomeLayoutProps) {
@@ -328,10 +328,11 @@ export function HomeLayout(props: HomeLayoutProps) {
     setPageSize,
     pageSize,
     currentPage,
+    searchValues,
     setSearchValues,
     total,
-    typeFilter,
-    setTypeFilter,
+    setTypeFilterPagination,
+
   } = props;
   console.log("elements", elements, total);
   const handlePageChange = (page: number) => {
@@ -357,9 +358,10 @@ 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(mode !== "marketplace");
+  const [visibility, setVisibility] = useState(mode === "view" || mode === "trash");
   const [layout, setLayout] = useState<HomeLayoutType>(
     checkIsMobile(window.innerWidth) ? "card" : getHomeLayout()
   );
@@ -379,11 +381,11 @@ export function HomeLayout(props: HomeLayoutProps) {
 
   var displayElements = elements.sort((a, b) => {
     if (a.folder && !b.folder) {
-      return -1; // a is a folder and should come first
+      return -1;
     } else if (!a.folder && b.folder) {
-      return 1; // b is a folder and should come first
+      return 1;
     } else {
-      return 0; // both are folders or both are not, keep original order
+      return 0;
     }
   });
 
@@ -398,6 +400,33 @@ export function HomeLayout(props: HomeLayoutProps) {
     displayElements = [...markedLocalApps];
   }
   const resList: HomeRes[] = displayElements
+    .filter((e) => {
+      if (!visibility) {
+        if (searchValue) {
+          const lowerCaseSearchValue = searchValue.toLocaleLowerCase();
+          return e.name?.toLocaleLowerCase().includes(lowerCaseSearchValue) ||
+              e.createBy?.toLocaleLowerCase().includes(lowerCaseSearchValue);
+        }
+        return true;
+      }
+      return true;
+    })
+    .filter((e) => {
+      if(!visibility) {
+        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;
+        }
+      }
+      return true;
+      })
     .filter((e) => {
       // If "All" is selected, do not filter out any elements based on category
       if (categoryFilter === 'All' || !categoryFilter) {
@@ -503,10 +532,12 @@ export function HomeLayout(props: HomeLayoutProps) {
               {mode !== "folders" && mode !== "module" && (
                 <FilterDropdown
                   variant="borderless"
-                  value={HomeResTypeEnum[typeFilter || 0]}
+                  value={typeFilter}
                   onChange={(value: any) => {
-                    console.log(HomeResTypeEnum[value])
-                    setTypeFilter(HomeResTypeEnum[value])}
+                    setTypeFilter(value as HomeResKey);
+                    if(visibility)
+                      setTypeFilterPagination(HomeResTypeEnum[value])
+                  }
                   }
                   options={[
                     getFilterMenuItem(HomeResTypeEnum.All),

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

@@ -21,15 +21,13 @@ export function HomeView() {
     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})
                       }
@@ -63,8 +61,7 @@ export function HomeView() {
         setPageSize={setPageSize}
         total={elements.total}
         setSearchValues={setSearchValues}
-        typeFilter={typeFilter}
-        setTypeFilter={setTypeFilter}
+        setTypeFilterPagination={setTypeFilter}
       />
     </>
   );

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

@@ -1,27 +1,61 @@
 import { HomeLayout } from "./HomeLayout";
-import { useDispatch, useSelector } from "react-redux";
-import { recycleListSelector } from "../../redux/selectors/applicationSelector";
 import { TRASH_URL } from "../../constants/routesURL";
-import { useEffect } from "react";
-import { fetchApplicationRecycleList } from "../../redux/reduxActions/applicationActions";
+import {useEffect, useState} from "react";
 import { trans } from "../../i18n";
 import { Helmet } from "react-helmet";
+import {fetchApplicationElements} from "@lowcoder-ee/util/pagination/axios";
+
+interface ElementsState {
+    elements: any;
+    total: number;
+}
 
 export function TrashView() {
-  const dispatch = useDispatch();
-  const recycleList = useSelector(recycleListSelector);
+    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(() => {
-    dispatch(fetchApplicationRecycleList());
-  }, [dispatch]);
+      useEffect( () => {
+          if (typeFilter === 7) // Application of Navigation is 3 in API.
+              setTypeFilter(3);
+            try{
+                fetchApplicationElements({
+                    pageNum:currentPage,
+                    pageSize:pageSize,
+                    applicationType: typeFilter,
+                    name: searchValues,
+                }).then(
+                    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]
+    );
 
   return (
     <>
       <Helmet>{<title>{trans("home.trash")}</title>}</Helmet>
       <HomeLayout
-      elements={recycleList}
+      elements={elements.elements}
       breadcrumb={[{ text: trans("home.trash"), path: TRASH_URL }]}
-      mode={"trash"} />
+      mode={"trash"}
+      currentPage ={currentPage}
+      setCurrentPage={setCurrentPage}
+      pageSize={pageSize}
+      setPageSize={setPageSize}
+      total={elements.total}
+      setSearchValues={setSearchValues}
+      setTypeFilterPagination={setTypeFilter}
+      />
     </>
   );
 }

client/packages/lowcoder/src/redux/reduxActions/applicationActions.ts

@@ -140,6 +140,13 @@ export type SetAppEditingStatePayload = {
   editingFinished: boolean;
 };
 
+export interface FetchApplicationElementsPaginationPayload {
+  pageNum?: number;
+  pageSize?: number;
+  name?: string;
+  applicationType?: number;
+}
+
 export const fetchApplicationInfo = (payload: FetchAppInfoPayload) => ({
   type: ReduxActionTypes.FETCH_APPLICATION_DETAIL,
   payload: payload,

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

@@ -1,5 +1,9 @@
 import { FolderApi } from "@lowcoder-ee/api/folderApi";
 import { FetchFolderElementsPaginationPayload } from "@lowcoder-ee/redux/reduxActions/folderActions";
+import {
+    FetchApplicationElementsPaginationPayload,
+} from "@lowcoder-ee/redux/reduxActions/applicationActions";
+import ApplicationApi from "@lowcoder-ee/api/applicationApi";
 
 export const fetchFolderElements = async (request: FetchFolderElementsPaginationPayload) => {
     try {
@@ -17,3 +21,21 @@ export const fetchFolderElements = async (request: FetchFolderElementsPagination
         };
     }
 }
+
+
+export const fetchApplicationElements = async (request: FetchApplicationElementsPaginationPayload)=> {
+    try {
+        const response = await ApplicationApi.fetchAllApplicationsPagination(request);
+        return {
+            success: true,
+            data: response.data.data,
+            total: response.data.total
+        }
+    } catch (error: any) {
+        console.error('Failed to fetch data:', error);
+        return {
+            success: false,
+            error: error
+        };
+    }
+}