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

Lines changed: 5 additions & 2 deletions
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

Lines changed: 19 additions & 16 deletions
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

Lines changed: 27 additions & 20 deletions
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

Lines changed: 1 addition & 0 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy