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

Commit 606351c

Browse files
Implemented pagination in Query Library and made fetchJsDatasourcePaginationByApp function.
1 parent ea6d088 commit 606351c

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
export interface PreparedStatementConfig {
1418
enableTurnOffPreparedStatement: boolean;
@@ -165,6 +169,11 @@ export class DatasourceApi extends Api {
165169
return Api.get(DatasourceApi.url + `/jsDatasourcePlugins?appId=${appId}`);
166170
}
167171

172+
static fetchJsDatasourcePaginationByApp( request: fetchDataSourcePaginationRequestType ): AxiosPromise<GenericApiPaginationResponse<NodePluginDatasourceInfo[]>> {
173+
const {appId, ...res} = request
174+
return Api.get(DatasourceApi.url + `/jsDatasourcePlugins?appId=${appId}` ,{...res});
175+
}
176+
168177
static fetchDatasourceByApp(appId: string): AxiosPromise<GenericApiResponse<DatasourceInfo[]>> {
169178
return Api.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
export interface LibraryQuery {
78
id: string;
@@ -49,6 +50,10 @@ export class QueryLibraryApi extends Api {
4950
return Api.get(QueryLibraryApi.url + `/listByOrg`);
5051
}
5152

53+
static fetchQueryLibraryPaginationByOrg(request: fetchQueryLibraryPaginationRequestType): AxiosPromise<GenericApiPaginationResponse<Array<LibraryQuery>>> {
54+
return Api.get(QueryLibraryApi.url + `/listByOrg`, {...request});
55+
}
56+
5257
static fetchQueryLibraryDropdown(): 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
const user = 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+
import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
4042

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

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

142147
const fetchJSDataSourceByApp = 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
<ErrorBoundary fallback={fallbackUI}>
234+
{/*<PaginationComp*/}
235+
{/* currentPage={currentPage}*/}
236+
{/* pageSize={pageSize}*/}
237+
{/* setPageSize={setPageSize}*/}
238+
{/* setCurrentPage={setCurrentPage}*/}
239+
{/* total={elements.total}*/}
240+
{/*/>*/}
222241
{showAppSnapshot ? (
223242
<Suspense fallback={<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
import DataSourceIcon from "components/DataSourceIcon";
24+
import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
2425

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

7475
const Body = 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
const dispatch = useDispatch();
163170
const [searchValue, setSearchValue] = useState("");
164171
const datasourceTypes = 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 { default as Form } 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
const Wrapper = styled.div`
5152
display: flex;
@@ -59,9 +60,21 @@ const RightContent = styled.div`
5960
position: relative;
6061
`;
6162

63+
interface ElementsState {
64+
elements: LibraryQuery[];
65+
total: number;
66+
}
67+
68+
function transformData(input: LibraryQuery[]) {
69+
const output: any = {};
70+
input.forEach(item => {
71+
output[item.id] = item;
72+
});
73+
return output;
74+
}
75+
6276
export const QueryLibraryEditor = () => {
6377
const dispatch = useDispatch();
64-
const queryLibrary = useSelector(getQueryLibrary);
6578
const queryLibraryRecords = useSelector(getQueryLibraryRecords);
6679
const originDatasourceInfo = useSelector(getDataSource);
6780
const currentUser = 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
const selectedRecords = queryLibraryRecords[selectedQuery] ?? {};
7996
const libraryQuery = 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-
const recentlyUsed = Object.values(queryLibrary)
149-
.map((i) => i.libraryQueryDSL?.query.datasourceId)
185+
const recentlyUsed = Object.values(queryLibrary)
186+
.map((i: any) => i.libraryQueryDSL?.query.datasourceId)
150187
.map((id) => datasource.find((d) => d.id === id))
151188
.filter((i) => !!i) as Datasource[];
152189

153190
const nameGenerator = new NameGenerator();
154-
nameGenerator.init(Object.values(queryLibrary).map((t) => t.name));
191+
nameGenerator.init(Object.values(queryLibrary).map((t: any) => t.name));
155192
const newName = nameGenerator.genItemName(trans("queryLibrary.unnamed"));
156193

157194
const handleAdd = (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
import styled from "styled-components";
22
import { Pagination } from "antd";
33

4-
const PaginationLayout = styled(Pagination)`
4+
interface PaginationLayoutProps {
5+
height?: number;
6+
marginTop?: number;
7+
marginBottom?: number;
8+
}
9+
10+
const PaginationLayout = 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
interface PaginationCompProps {
@@ -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
const PaginationComp = (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
const handlePageChange = (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)

AltStyle によって変換されたページ (->オリジナル) /