Skip to content

Commit 18e2917

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1374 from lowcoder-org/feature-pagination
Feature pagination
2 parents 3defa5c + 8354a3a commit 18e2917

File tree

4 files changed

+52
-38
lines changed

4 files changed

+52
-38
lines changed

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useDispatch, useSelector } from "react-redux";
22
import { useParams } from "react-router-dom";
33
import { HomeBreadcrumbType, HomeLayout } from "./HomeLayout";
44
import {useEffect, useState} from "react";
5-
import {ApplicationMeta, FolderMeta} from "../../constants/applicationConstants";
5+
import {ApplicationCategoriesEnum, ApplicationMeta, FolderMeta} from "../../constants/applicationConstants";
66
import { buildFolderUrl } from "../../constants/routesURL";
77
import { folderElementsSelector, foldersSelector } from "../../redux/selectors/folderSelector";
88
import { Helmet } from "react-helmet";
@@ -46,6 +46,7 @@ export function FolderView() {
4646
const [typeFilter, setTypeFilter] = useState<number>(0);
4747
const [modify, setModify] = useState(true);
4848
const [searchValue, setSearchValue] = useState("");
49+
const [categoryFilter, setCategoryFilter] = useState<ApplicationCategoriesEnum | "All">("All");
4950

5051
const dispatch = useDispatch();
5152

@@ -68,6 +69,7 @@ export function FolderView() {
6869
pageSize:pageSize,
6970
applicationType: ApplicationPaginationType[typeFilter],
7071
name: searchValues,
72+
category: categoryFilter === "All" ? "" : categoryFilter
7173
}).then(
7274
(data: any) => {
7375
if (data.success) {
@@ -80,7 +82,7 @@ export function FolderView() {
8082
} catch (error) {
8183
console.error('Failed to fetch data:', error);
8284
}
83-
}, [currentPage, pageSize, searchValues, typeFilter, modify]);
85+
}, [currentPage, pageSize, searchValues, typeFilter, modify, categoryFilter]);
8486

8587
useEffect( () => {
8688
if (searchValues !== "")
@@ -113,6 +115,7 @@ export function FolderView() {
113115
setTypeFilterPagination={setTypeFilter}
114116
setModify={setModify}
115117
modify={modify}
118+
setCategoryFilterPagination={setCategoryFilter}
116119
/>
117120
</>
118121
);

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

+19-16
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,9 @@ export interface HomeLayoutProps {
316316
searchValue?: string;
317317
setSearchValue?: any;
318318
setTypeFilterPagination?: any;
319+
setCategoryFilterPagination?: any;
320+
setIsCreated?: any;
321+
isCreated?: boolean;
319322
setModify?: any;
320323
modify?: boolean;
321324
}
@@ -334,10 +337,15 @@ export function HomeLayout(props: HomeLayoutProps) {
334337
setSearchValue,
335338
total,
336339
setTypeFilterPagination,
340+
setCategoryFilterPagination,
337341
setModify,
338-
modify
342+
modify,
343+
setIsCreated,
344+
isCreated
339345

340346
} = props;
347+
348+
341349
const handlePageChange = (page: number) => {
342350
setCurrentPage(page);
343351
};
@@ -429,15 +437,6 @@ export function HomeLayout(props: HomeLayoutProps) {
429437
}
430438
return true;
431439
})
432-
.filter((e) => {
433-
// If "All" is selected, do not filter out any elements based on category
434-
if (categoryFilter === 'All' || !categoryFilter) {
435-
return true;
436-
}
437-
// Otherwise, filter elements based on the selected category
438-
return !e.folder && e.category === categoryFilter.toString();
439-
})
440-
441440
.map((e) =>
442441
e.folder
443442
? {
@@ -469,7 +468,6 @@ export function HomeLayout(props: HomeLayoutProps) {
469468
}
470469
);
471470

472-
473471
const getFilterMenuItem = (type: HomeResTypeEnum) => {
474472
const Icon = HomeResInfo[type].icon;
475473
return {
@@ -546,17 +544,22 @@ export function HomeLayout(props: HomeLayoutProps) {
546544
getFilterMenuItem(HomeResTypeEnum.Application),
547545
getFilterMenuItem(HomeResTypeEnum.Module),
548546
...(mode !== "marketplace" ? [getFilterMenuItem(HomeResTypeEnum.Navigation), getFilterMenuItem(HomeResTypeEnum.MobileTabLayout)] : []),
549-
...(mode !== "trash" && mode !== "marketplace" ? [getFilterMenuItem(HomeResTypeEnum.Folder)] : []),
547+
...(mode !== "trash" && mode !== "marketplace" && mode !== "folder" ? [getFilterMenuItem(HomeResTypeEnum.Folder)] : []),
550548
]}
551549
getPopupContainer={(node: any) => node}
552550
suffixIcon={<ArrowSolidIcon />} />
553551
)}
554-
{mode === "view" &&
552+
{(mode === "view" || mode === "folder") &&
555553
<FilterDropdown
556554
style={{ minWidth: "220px" }}
557555
variant="borderless"
558556
value={categoryFilter}
559-
onChange={(value: any) => setCategoryFilter(value as ApplicationCategoriesEnum)}
557+
onChange={(value: any) => {
558+
setCategoryFilter(value as ApplicationCategoriesEnum)
559+
setCategoryFilterPagination(value as ApplicationCategoriesEnum);
560+
}
561+
562+
}
560563
options={categoryOptions}
561564
// getPopupContainer={(node) => node}
562565
suffixIcon={<ArrowSolidIcon />}
@@ -580,7 +583,7 @@ export function HomeLayout(props: HomeLayoutProps) {
580583
style={{ width: "192px", height: "32px", margin: "0" }}
581584
/>
582585
{mode !== "trash" && mode !== "marketplace" && user.orgDev && (
583-
<CreateDropdown defaultVisible={showNewUserGuide(user)} mode={mode} setModify={setModify} modify={modify!} />
586+
<CreateDropdown defaultVisible={showNewUserGuide(user)} mode={mode} setModify={setIsCreated} modify={isCreated!} />
584587
)}
585588
</OperationRightWrapper>
586589
</OperationWrapper>
@@ -667,7 +670,7 @@ export function HomeLayout(props: HomeLayoutProps) {
667670
? trans("home.projectEmptyCanAdd")
668671
: trans("home.projectEmpty")}
669672
</div>
670-
{mode !== "trash" && mode !== "marketplace" && user.orgDev && <CreateDropdown mode={mode} setModify={setModify} modify={modify!}/>}
673+
{mode !== "trash" && mode !== "marketplace" && user.orgDev && <CreateDropdown mode={mode} setModify={setIsCreated} modify={isCreated!}/>}
671674
</EmptyView>
672675
)}
673676
</>

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

+27-20
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet";
55
import { trans } from "i18n";
66
import {useState, useEffect } from "react";
77
import {fetchFolderElements} from "@lowcoder-ee/util/pagination/axios";
8-
import {ApplicationMeta, FolderMeta} from "@lowcoder-ee/constants/applicationConstants";
8+
import {ApplicationCategoriesEnum, ApplicationMeta, FolderMeta} from "@lowcoder-ee/constants/applicationConstants";
99
import {ApplicationPaginationType} from "@lowcoder-ee/util/pagination/type";
1010

1111
interface ElementsState {
@@ -21,26 +21,30 @@ export function HomeView() {
2121
const [searchValues, setSearchValues] = useState("");
2222
const [typeFilter, setTypeFilter] = useState<number>(0);
2323
const [modify, setModify] = useState(true);
24+
const [isCreated, setIsCreated] = useState(true);
25+
const [categoryFilter, setCategoryFilter] = useState<ApplicationCategoriesEnum | "All">("All");
26+
2427
useEffect( () => {
25-
try{
26-
fetchFolderElements({
27-
pageNum:currentPage,
28-
pageSize:pageSize,
29-
applicationType: ApplicationPaginationType[typeFilter],
30-
name: searchValues,
31-
}).then(
32-
(data: any) => {
33-
if (data.success) {
34-
setElements({elements: data.data || [], total: data.total || 1})
35-
}
36-
else
37-
console.error("ERROR: fetchFolderElements", data.error)
38-
}
39-
);
40-
} catch (error) {
41-
console.error('Failed to fetch data:', error);
42-
}
43-
}, [currentPage, pageSize, searchValues, typeFilter, modify]
28+
try{
29+
fetchFolderElements({
30+
pageNum:currentPage,
31+
pageSize:pageSize,
32+
applicationType: ApplicationPaginationType[typeFilter],
33+
name: searchValues,
34+
category: categoryFilter === "All" ? "" : categoryFilter
35+
}).then(
36+
(data: any) => {
37+
if (data.success) {
38+
setElements({elements: data.data || [], total: data.total || 1})
39+
}
40+
else
41+
console.error("ERROR: fetchFolderElements", data.error)
42+
}
43+
);
44+
} catch (error) {
45+
console.error('Failed to fetch data:', error);
46+
}
47+
}, [currentPage, pageSize, searchValues, typeFilter, modify, categoryFilter, isCreated]
4448
);
4549

4650
useEffect( () => {
@@ -79,6 +83,9 @@ export function HomeView() {
7983
setTypeFilterPagination={setTypeFilter}
8084
setModify={setModify}
8185
modify={modify}
86+
setCategoryFilterPagination={setCategoryFilter}
87+
setIsCreated={setIsCreated}
88+
isCreated={isCreated}
8289
/>
8390
</>
8491
);

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

+1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export interface fetchFolderRequestType {
6161
pageSize?: number;
6262
name?: string;
6363
applicationType?: string;
64+
category?: string
6465
}
6566

6667
export interface fetchDBRequestType {

0 commit comments

Comments
 (0)