Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit606351c

Browse files
committed
Implemented pagination in Query Library and made fetchJsDatasourcePaginationByApp function.
1 parentea6d088 commit606351c

File tree

9 files changed

+209
-36
lines changed

9 files changed

+209
-36
lines changed

‎client/packages/lowcoder/src/api/datasourceApi.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import { JSONArray } from "util/jsonTypes";
88
import{AuthType,HttpOAuthGrantType}from"pages/datasource/form/httpDatasourceForm";
99
import{Datasource}from"@lowcoder-ee/constants/datasourceConstants";
1010
import{DataSourcePluginMeta}from"lowcoder-sdk/dataSource";
11-
import{fetchDBRequestType,GenericApiPaginationResponse}from"@lowcoder-ee/util/pagination/type";
11+
import{
12+
fetchDataSourcePaginationRequestType,
13+
fetchDBRequestType,
14+
GenericApiPaginationResponse
15+
}from"@lowcoder-ee/util/pagination/type";
1216

1317
exportinterfacePreparedStatementConfig{
1418
enableTurnOffPreparedStatement:boolean;
@@ -165,6 +169,11 @@ export class DatasourceApi extends Api {
165169
returnApi.get(DatasourceApi.url+`/jsDatasourcePlugins?appId=${appId}`);
166170
}
167171

172+
staticfetchJsDatasourcePaginationByApp(request:fetchDataSourcePaginationRequestType):AxiosPromise<GenericApiPaginationResponse<NodePluginDatasourceInfo[]>>{
173+
const{appId, ...res}=request
174+
returnApi.get(DatasourceApi.url+`/jsDatasourcePlugins?appId=${appId}`,{...res});
175+
}
176+
168177
staticfetchDatasourceByApp(appId:string):AxiosPromise<GenericApiResponse<DatasourceInfo[]>>{
169178
returnApi.get(DatasourceApi.url+`/listByApp?appId=${appId}`);
170179
}

‎client/packages/lowcoder/src/api/queryLibraryApi.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Api from "./api";
22
import{AxiosPromise}from"axios";
33
import{GenericApiResponse}from"./apiResponses";
44
import{DatasourceType}from"@lowcoder-ee/constants/queryConstants";
5+
import{fetchQueryLibraryPaginationRequestType,GenericApiPaginationResponse}from"@lowcoder-ee/util/pagination/type";
56

67
exportinterfaceLibraryQuery{
78
id:string;
@@ -49,6 +50,10 @@ export class QueryLibraryApi extends Api {
4950
returnApi.get(QueryLibraryApi.url+`/listByOrg`);
5051
}
5152

53+
staticfetchQueryLibraryPaginationByOrg(request:fetchQueryLibraryPaginationRequestType):AxiosPromise<GenericApiPaginationResponse<Array<LibraryQuery>>>{
54+
returnApi.get(QueryLibraryApi.url+`/listByOrg`,{...request});
55+
}
56+
5257
staticfetchQueryLibraryDropdown():AxiosPromise<
5358
GenericApiResponse<Array<LibraryQueryDropdownInfo>>
5459
>{

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,6 @@ export function HomeView() {
4141
},[currentPage,pageSize,searchValues,typeFilter]
4242
);
4343

44-
console.log(currentPage,pageSize);
45-
4644
constuser=useSelector(getUser);
4745

4846
if(!user.currentOrgId){

‎client/packages/lowcoder/src/pages/editor/AppEditor.tsx

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSele
3737
import{notificationInstance}from"components/GlobalInstances";
3838
import{AppState}from"@lowcoder-ee/redux/reducers";
3939
import{resetIconDictionary}from"@lowcoder-ee/constants/iconConstants";
40+
import{fetchJsDSPaginationByApp}from"@lowcoder-ee/util/pagination/axios";
41+
importPaginationCompfrom"@lowcoder-ee/util/pagination/Pagination";
4042

4143
constAppSnapshot=lazy(()=>{
4244
returnimport("pages/editor/appSnapshot")
@@ -57,6 +59,9 @@ const AppEditor = React.memo(() => {
5759
constfetchOrgGroupsFinished=useSelector(getFetchOrgGroupsFinished);
5860
constisCommonSettingsFetching=useSelector(getIsCommonSettingFetching);
5961
constapplication=useSelector(currentApplication);
62+
const[currentPage,setCurrentPage]=useState(1);
63+
const[pageSize,setPageSize]=useState(10);
64+
const[elements,setElements]=useState({elements:[],total:1})
6065
constisLowcoderCompLoading=useSelector((state:AppState)=>state.npmPlugin.loading.lowcoderComps);
6166

6267
constisUserViewMode=useMemo(
@@ -140,8 +145,13 @@ const AppEditor = React.memo(() => {
140145
},[dispatch,applicationId,paramViewMode]);
141146

142147
constfetchJSDataSourceByApp=useCallback(()=>{
143-
DatasourceApi.fetchJsDatasourceByApp(applicationId).then((res)=>{
144-
res.data.data.forEach((i)=>{
148+
fetchJsDSPaginationByApp({
149+
appId:applicationId,
150+
pageNum:currentPage,
151+
pageSize:pageSize
152+
}).then((res)=>{
153+
setElements({elements:[],total:res.total||1})
154+
res.data!.forEach((i:any)=>{
145155
registryDataSourcePlugin(i.type,i.id,i.pluginDefinition);
146156
});
147157
setIsDataSourcePluginRegistered(true);
@@ -153,6 +163,8 @@ const AppEditor = React.memo(() => {
153163
setIsDataSourcePluginRegistered,
154164
setShowAppSnapshot,
155165
dispatch,
166+
currentPage,
167+
pageSize
156168
]);
157169

158170
useEffect(()=>{
@@ -219,6 +231,13 @@ const AppEditor = React.memo(() => {
219231

220232
return(
221233
<ErrorBoundaryfallback={fallbackUI}>
234+
{/*<PaginationComp*/}
235+
{/* currentPage={currentPage}*/}
236+
{/* pageSize={pageSize}*/}
237+
{/* setPageSize={setPageSize}*/}
238+
{/* setCurrentPage={setCurrentPage}*/}
239+
{/* total={elements.total}*/}
240+
{/*/>*/}
222241
{showAppSnapshot ?(
223242
<Suspensefallback={<EditorSkeletonView/>}>
224243
<AppSnapshot

‎client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { trans } from "i18n";
2121
import{DatasourceType}from"@lowcoder-ee/constants/queryConstants";
2222
import{saveAs}from"file-saver";
2323
importDataSourceIconfrom"components/DataSourceIcon";
24+
importPaginationCompfrom"@lowcoder-ee/util/pagination/Pagination";
2425

2526
constWrapper=styled.div<{$readOnly?:boolean}>`
2627
display: flex;
@@ -72,7 +73,7 @@ const CreateBtn = styled(TacoButton)<{ $readOnly?: boolean }>`
7273
`;
7374

7475
constBody=styled.div`
75-
height: calc(100% -80px);
76+
height: calc(100% -120px);
7677
display: flex;
7778
flex-direction: column;
7879
`;
@@ -158,7 +159,13 @@ export const LeftNav = (props: {
158159
addQuery:()=>void;
159160
onSelect:(queryId:string)=>void;
160161
readOnly?:boolean;
162+
setCurrentPage:(page:number)=>void;
163+
setPageSize:(size:number)=>void;
164+
currentPage:number;
165+
pageSize:number;
166+
total:number;
161167
})=>{
168+
const{currentPage, setCurrentPage, pageSize, setPageSize, total}=props
162169
constdispatch=useDispatch();
163170
const[searchValue,setSearchValue]=useState("");
164171
constdatasourceTypes=useSelector(getDataSourceTypesMap);
@@ -272,6 +279,17 @@ export const LeftNav = (props: {
272279
</ScrollBar>
273280
</SelectListWrapper>
274281
</Body>
282+
<PaginationComp
283+
height={40}
284+
marginTop={0}
285+
marginBottom={0}
286+
currentPage={currentPage}
287+
setCurrentPage={setCurrentPage}
288+
pageSize={pageSize}
289+
setPageSize={setPageSize}
290+
total={total}
291+
simple={true}
292+
/>
275293
</Wrapper>
276294
</ReadOnlyMask>
277295
);

‎client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { useCompInstance } from "../../comps/utils/useCompInstance";
2222
import{QueryLibraryComp}from"../../comps/comps/queryLibrary/queryLibraryComp";
2323
import{useSearchParam,useThrottle}from"react-use";
2424
import{Comp}from"lowcoder-core";
25-
import{LibraryQuery}from"../../api/queryLibraryApi";
25+
import{LibraryQuery}from"../../api/queryLibraryApi";
2626
import{NameGenerator}from"../../comps/utils";
2727
import{QueryLibraryHistoryView}from"./QueryLibraryHistoryView";
2828
import{defaultasForm}from"antd/es/form";
@@ -46,6 +46,7 @@ import { importQueryLibrary } from "./importQueryLibrary";
4646
import{registryDataSourcePlugin}from"constants/queryConstants";
4747
import{messageInstance}from"lowcoder-design/src/components/GlobalInstances";
4848
import{Helmet}from"react-helmet";
49+
import{fetchQLPaginationByOrg}from"@lowcoder-ee/util/pagination/axios";
4950

5051
constWrapper=styled.div`
5152
display: flex;
@@ -59,9 +60,21 @@ const RightContent = styled.div`
5960
position: relative;
6061
`;
6162

63+
interfaceElementsState{
64+
elements:LibraryQuery[];
65+
total:number;
66+
}
67+
68+
functiontransformData(input:LibraryQuery[]){
69+
constoutput:any={};
70+
input.forEach(item=>{
71+
output[item.id]=item;
72+
});
73+
returnoutput;
74+
}
75+
6276
exportconstQueryLibraryEditor=()=>{
6377
constdispatch=useDispatch();
64-
constqueryLibrary=useSelector(getQueryLibrary);
6578
constqueryLibraryRecords=useSelector(getQueryLibraryRecords);
6679
constoriginDatasourceInfo=useSelector(getDataSource);
6780
constcurrentUser=useSelector(getUser);
@@ -74,6 +87,10 @@ export const QueryLibraryEditor = () => {
7487
const[publishModalVisible,setPublishModalVisible]=useState(false);
7588
const[showHistory,setShowHistory]=useState(false);
7689
const[isDataSourceReady,setIsDataSourceReady]=useState(false);
90+
const[elements,setElements]=useState<ElementsState>({elements:[],total:0});
91+
const[queryLibrary,setQueryLibrary]=useState<any>({});
92+
const[currentPage,setCurrentPage]=useState(1);
93+
const[pageSize,setPageSize]=useState(10);
7794

7895
constselectedRecords=queryLibraryRecords[selectedQuery]??{};
7996
constlibraryQuery=queryLibrary[selectedQuery];
@@ -98,6 +115,25 @@ export const QueryLibraryEditor = () => {
98115
const[comp,container]=useCompInstance(params);
99116
useSaveQueryLibrary(libraryQuery,comp);
100117

118+
useEffect(()=>{
119+
try{
120+
fetchQLPaginationByOrg(
121+
{
122+
name:"",
123+
pageNum:currentPage,
124+
pageSize:pageSize,
125+
}
126+
).then(result=>{
127+
if(result.success){
128+
setElements({elements:result.data||[],total:result.total||1})
129+
setQueryLibrary(transformData(result.data||[]));
130+
}
131+
});
132+
}catch(error){
133+
console.error(error)
134+
}
135+
},[currentPage,pageSize])
136+
101137
useEffect(()=>{
102138
if(orgId){
103139
dispatch(fetchQueryLibrary());
@@ -125,7 +161,8 @@ export const QueryLibraryEditor = () => {
125161

126162
useEffect(()=>{
127163
if(!forwardQueryId&&!queryLibrary[selectedQuery]){
128-
setSelectedQuery(Object.values(queryLibrary)?.[0]?.id);
164+
//@ts-ignore
165+
setSelectedQuery(Object.values(queryLibrary)?.[0]?.id);
129166
}
130167
},[dispatch,Object.keys(queryLibrary).length]);
131168

@@ -145,13 +182,13 @@ export const QueryLibraryEditor = () => {
145182
})
146183
.map((info)=>info.datasource);
147184

148-
constrecentlyUsed=Object.values(queryLibrary)
149-
.map((i)=>i.libraryQueryDSL?.query.datasourceId)
185+
constrecentlyUsed=Object.values(queryLibrary)
186+
.map((i:any)=>i.libraryQueryDSL?.query.datasourceId)
150187
.map((id)=>datasource.find((d)=>d.id===id))
151188
.filter((i)=>!!i)asDatasource[];
152189

153190
constnameGenerator=newNameGenerator();
154-
nameGenerator.init(Object.values(queryLibrary).map((t)=>t.name));
191+
nameGenerator.init(Object.values(queryLibrary).map((t:any)=>t.name));
155192
constnewName=nameGenerator.genItemName(trans("queryLibrary.unnamed"));
156193

157194
consthandleAdd=(type:BottomResTypeEnum,extraInfo?:any)=>{
@@ -189,7 +226,12 @@ export const QueryLibraryEditor = () => {
189226
setSelectedQuery(id);
190227
showCreatePanel(false);
191228
}}
192-
readOnly={showHistory}/>
229+
setCurrentPage={setCurrentPage}
230+
setPageSize={setPageSize}
231+
currentPage={currentPage}
232+
pageSize={pageSize}
233+
total={elements.total}
234+
/>
193235
<RightContent>
194236
{!selectedQuery||!comp?.children.query.children.id.getView() ?(
195237
EmptyQueryWithoutTab

‎client/packages/lowcoder/src/util/pagination/Pagination.tsx

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
importstyledfrom"styled-components";
22
import{Pagination}from"antd";
33

4-
constPaginationLayout=styled(Pagination)`
4+
interfacePaginationLayoutProps{
5+
height?:number;
6+
marginTop?:number;
7+
marginBottom?:number;
8+
}
9+
10+
constPaginationLayout=styled(Pagination)<PaginationLayoutProps>`
511
display: flex;
612
justify-content: center;
7-
margin-top: 40px;
8-
margin-bottom: 20px;
13+
align-items: center;
14+
margin-top:${(props)=>props.marginTop!==undefined ?props.marginTop :40}px !important;
15+
margin-bottom:${(props)=>props.marginBottom!==undefined ?props.marginBottom :20}px !important;
16+
height:${(props)=>props.height}px;
917
`;
1018

1119
interfacePaginationCompProps{
@@ -14,6 +22,10 @@ interface PaginationCompProps {
1422
currentPage:number;
1523
pageSize:number;
1624
total:number;
25+
height?:number;
26+
marginTop?:number;
27+
marginBottom?:number;
28+
simple?:boolean;
1729
}
1830

1931
constPaginationComp=(props:PaginationCompProps)=>{
@@ -23,6 +35,10 @@ const PaginationComp = (props: PaginationCompProps) => {
2335
currentPage,
2436
pageSize,
2537
total,
38+
height,
39+
marginTop,
40+
marginBottom,
41+
simple,
2642
}=props;
2743

2844
consthandlePageChange=(page:number,pageSize:number|undefined)=>{
@@ -38,14 +54,32 @@ const PaginationComp = (props: PaginationCompProps) => {
3854
};
3955

4056
return(
41-
<PaginationLayout
42-
current={currentPage}
43-
pageSize={pageSize}
44-
onChange={handlePageChange}
45-
onShowSizeChange={handlePageSizeChange}
46-
total={total}
47-
showSizeChanger
48-
/>
57+
<>
58+
{simple ?
59+
<PaginationLayout
60+
height={height}
61+
marginTop={marginTop}
62+
marginBottom={marginBottom}
63+
current={currentPage}
64+
pageSize={pageSize}
65+
onChange={handlePageChange}
66+
onShowSizeChange={handlePageSizeChange}
67+
total={total}
68+
simple
69+
/> :
70+
<PaginationLayout
71+
height={height}
72+
marginTop={marginTop}
73+
marginBottom={marginBottom}
74+
current={currentPage}
75+
pageSize={pageSize}
76+
onChange={handlePageChange}
77+
onShowSizeChange={handlePageSizeChange}
78+
total={total}
79+
showSizeChanger
80+
/>
81+
}
82+
</>
4983
);
5084
};
5185

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp