Implemented pagination in Query Library and made fetchJsDatasourcePaginationByApp function.

Author: Imiss-U1025

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

@@ -8,7 +8,11 @@ import { JSONArray } from "util/jsonTypes";
 import { AuthType, HttpOAuthGrantType } from "pages/datasource/form/httpDatasourceForm";
 import { Datasource } from "@lowcoder-ee/constants/datasourceConstants";
 import { DataSourcePluginMeta } from "lowcoder-sdk/dataSource";
-import {fetchDBRequestType, GenericApiPaginationResponse} from "@lowcoder-ee/util/pagination/type";
+import {
+  fetchDataSourcePaginationRequestType,
+  fetchDBRequestType,
+  GenericApiPaginationResponse
+} from "@lowcoder-ee/util/pagination/type";
 
 export interface PreparedStatementConfig {
   enableTurnOffPreparedStatement: boolean;
@@ -165,6 +169,11 @@ export class DatasourceApi extends Api {
     return Api.get(DatasourceApi.url + `/jsDatasourcePlugins?appId=${appId}`);
   }
 
+  static fetchJsDatasourcePaginationByApp( request: fetchDataSourcePaginationRequestType ): AxiosPromise<GenericApiPaginationResponse<NodePluginDatasourceInfo[]>> {
+    const {appId, ...res} = request
+    return Api.get(DatasourceApi.url + `/jsDatasourcePlugins?appId=${appId}` ,{...res});
+  }
+
   static fetchDatasourceByApp(appId: string): AxiosPromise<GenericApiResponse<DatasourceInfo[]>> {
     return Api.get(DatasourceApi.url + `/listByApp?appId=${appId}`);
   }

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

@@ -2,6 +2,7 @@ import Api from "./api";
 import { AxiosPromise } from "axios";
 import { GenericApiResponse } from "./apiResponses";
 import { DatasourceType } from "@lowcoder-ee/constants/queryConstants";
+import {fetchQueryLibraryPaginationRequestType, GenericApiPaginationResponse} from "@lowcoder-ee/util/pagination/type";
 
 export interface LibraryQuery {
   id: string;
@@ -49,6 +50,10 @@ export class QueryLibraryApi extends Api {
     return Api.get(QueryLibraryApi.url + `/listByOrg`);
   }
 
+  static fetchQueryLibraryPaginationByOrg(request: fetchQueryLibraryPaginationRequestType): AxiosPromise<GenericApiPaginationResponse<Array<LibraryQuery>>> {
+    return Api.get(QueryLibraryApi.url + `/listByOrg`, {...request});
+  }
+
   static fetchQueryLibraryDropdown(): AxiosPromise<
     GenericApiResponse<Array<LibraryQueryDropdownInfo>>
   > {

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

@@ -41,8 +41,6 @@ export function HomeView() {
           }, [currentPage, pageSize, searchValues, typeFilter]
       );
 
-  console.log(currentPage, pageSize);
-
   const user = useSelector(getUser);
 
   if (!user.currentOrgId) {

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

@@ -37,6 +37,8 @@ import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSele
 import { notificationInstance } from "components/GlobalInstances";
 import { AppState } from "@lowcoder-ee/redux/reducers";
 import { resetIconDictionary } from "@lowcoder-ee/constants/iconConstants";
+import {fetchJsDSPaginationByApp} from "@lowcoder-ee/util/pagination/axios";
+import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
 
 const AppSnapshot = lazy(() => {
   return import("pages/editor/appSnapshot")
@@ -57,6 +59,9 @@ const AppEditor = React.memo(() => {
   const fetchOrgGroupsFinished = useSelector(getFetchOrgGroupsFinished);
   const isCommonSettingsFetching = useSelector(getIsCommonSettingFetching);
   const application = useSelector(currentApplication);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [elements, setElements] = useState({ elements: [], total: 1 })
   const isLowcoderCompLoading = useSelector((state: AppState) => state.npmPlugin.loading.lowcoderComps);
 
   const isUserViewMode = useMemo(
@@ -140,8 +145,13 @@ const AppEditor = React.memo(() => {
   }, [dispatch, applicationId, paramViewMode]);
 
   const fetchJSDataSourceByApp = useCallback(() => {
-    DatasourceApi.fetchJsDatasourceByApp(applicationId).then((res) => {
-      res.data.data.forEach((i) => {
+    fetchJsDSPaginationByApp({
+      appId: applicationId,
+      pageNum: currentPage,
+      pageSize: pageSize
+    }).then((res) => {
+      setElements({elements: [], total: res.total || 1})
+      res.data!.forEach((i: any) => {
         registryDataSourcePlugin(i.type, i.id, i.pluginDefinition);
       });
       setIsDataSourcePluginRegistered(true);
@@ -153,6 +163,8 @@ const AppEditor = React.memo(() => {
     setIsDataSourcePluginRegistered,
     setShowAppSnapshot,
     dispatch,
+    currentPage,
+    pageSize
   ]);
 
   useEffect(() => {
@@ -219,6 +231,13 @@ const AppEditor = React.memo(() => {
 
   return (
     <ErrorBoundary fallback={fallbackUI}>
+      {/*<PaginationComp*/}
+      {/*    currentPage={currentPage}*/}
+      {/*    pageSize={pageSize}*/}
+      {/*    setPageSize={setPageSize}*/}
+      {/*    setCurrentPage={setCurrentPage}*/}
+      {/*    total={elements.total}*/}
+      {/*/>*/}
       {showAppSnapshot ? (
         <Suspense fallback={<EditorSkeletonView />}>
           <AppSnapshot

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

@@ -21,6 +21,7 @@ import { trans } from "i18n";
 import { DatasourceType } from "@lowcoder-ee/constants/queryConstants";
 import { saveAs } from "file-saver";
 import DataSourceIcon from "components/DataSourceIcon";
+import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
 
 const Wrapper = styled.div<{ $readOnly?: boolean }>`
   display: flex;
@@ -72,7 +73,7 @@ const CreateBtn = styled(TacoButton)<{ $readOnly?: boolean }>`
 `;
 
 const Body = styled.div`
-  height: calc(100% - 80px);
+  height: calc(100% - 120px);
   display: flex;
   flex-direction: column;
 `;
@@ -158,7 +159,13 @@ export const LeftNav = (props: {
   addQuery: () => void;
   onSelect: (queryId: string) => void;
   readOnly?: boolean;
+  setCurrentPage: (page: number) => void;
+  setPageSize: (size: number) => void;
+  currentPage: number;
+  pageSize: number;
+  total: number;
 }) => {
+  const {currentPage, setCurrentPage, pageSize, setPageSize, total } = props
   const dispatch = useDispatch();
   const [searchValue, setSearchValue] = useState("");
   const datasourceTypes = useSelector(getDataSourceTypesMap);
@@ -272,6 +279,17 @@ export const LeftNav = (props: {
             </ScrollBar>
           </SelectListWrapper>
         </Body>
+        <PaginationComp
+            height={40}
+            marginTop={0}
+            marginBottom={0}
+            currentPage={currentPage}
+            setCurrentPage={setCurrentPage}
+            pageSize={pageSize}
+            setPageSize={setPageSize}
+            total={total}
+            simple={true}
+        />
       </Wrapper>
     </ReadOnlyMask>
   );

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

@@ -22,7 +22,7 @@ import { useCompInstance } from "../../comps/utils/useCompInstance";
 import { QueryLibraryComp } from "../../comps/comps/queryLibrary/queryLibraryComp";
 import { useSearchParam, useThrottle } from "react-use";
 import { Comp } from "lowcoder-core";
-import { LibraryQuery } from "../../api/queryLibraryApi";
+import {LibraryQuery} from "../../api/queryLibraryApi";
 import { NameGenerator } from "../../comps/utils";
 import { QueryLibraryHistoryView } from "./QueryLibraryHistoryView";
 import { default as Form } from "antd/es/form";
@@ -46,6 +46,7 @@ import { importQueryLibrary } from "./importQueryLibrary";
 import { registryDataSourcePlugin } from "constants/queryConstants";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { Helmet } from "react-helmet";
+import {fetchQLPaginationByOrg} from "@lowcoder-ee/util/pagination/axios";
 
 const Wrapper = styled.div`
   display: flex;
@@ -59,9 +60,21 @@ const RightContent = styled.div`
   position: relative;
 `;
 
+interface ElementsState {
+  elements: LibraryQuery[];
+  total: number;
+}
+
+function transformData(input: LibraryQuery[]) {
+  const output: any = {};
+  input.forEach(item => {
+    output[item.id] = item;
+  });
+  return output;
+}
+
 export const QueryLibraryEditor = () => {
   const dispatch = useDispatch();
-  const queryLibrary = useSelector(getQueryLibrary);
   const queryLibraryRecords = useSelector(getQueryLibraryRecords);
   const originDatasourceInfo = useSelector(getDataSource);
   const currentUser = useSelector(getUser);
@@ -74,6 +87,10 @@ export const QueryLibraryEditor = () => {
   const [publishModalVisible, setPublishModalVisible] = useState(false);
   const [showHistory, setShowHistory] = useState(false);
   const [isDataSourceReady, setIsDataSourceReady] = useState(false);
+  const [elements, setElements] = useState<ElementsState>({ elements: [], total: 0 });
+  const [queryLibrary, setQueryLibrary] = useState<any>({});
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
 
   const selectedRecords = queryLibraryRecords[selectedQuery] ?? {};
   const libraryQuery = queryLibrary[selectedQuery];
@@ -98,6 +115,25 @@ export const QueryLibraryEditor = () => {
   const [comp, container] = useCompInstance(params);
   useSaveQueryLibrary(libraryQuery, comp);
 
+  useEffect(() => {
+        try {
+            fetchQLPaginationByOrg(
+                {
+                    name: "",
+                    pageNum: currentPage,
+                    pageSize: pageSize,
+                }
+            ).then(result => {
+                if (result.success){
+                    setElements({elements: result.data || [], total: result.total || 1})
+                    setQueryLibrary(transformData(result.data || []));
+                }
+            });
+        } catch (error) {
+            console.error(error)
+        }
+    }, [currentPage, pageSize])
+
   useEffect(() => {
     if (orgId) {
       dispatch(fetchQueryLibrary());
@@ -125,7 +161,8 @@ export const QueryLibraryEditor = () => {
 
   useEffect(() => {
     if (!forwardQueryId && !queryLibrary[selectedQuery]) {
-      setSelectedQuery(Object.values(queryLibrary)?.[0]?.id);
+      // @ts-ignore
+        setSelectedQuery(Object.values(queryLibrary)?.[0]?.id);
     }
   }, [dispatch, Object.keys(queryLibrary).length]);
 
@@ -145,13 +182,13 @@ export const QueryLibraryEditor = () => {
     })
     .map((info) => info.datasource);
 
-  const recentlyUsed = Object.values(queryLibrary)
-    .map((i) => i.libraryQueryDSL?.query.datasourceId)
+    const recentlyUsed = Object.values(queryLibrary)
+    .map((i: any) => i.libraryQueryDSL?.query.datasourceId)
     .map((id) => datasource.find((d) => d.id === id))
     .filter((i) => !!i) as Datasource[];
 
   const nameGenerator = new NameGenerator();
-  nameGenerator.init(Object.values(queryLibrary).map((t) => t.name));
+    nameGenerator.init(Object.values(queryLibrary).map((t: any) => t.name));
   const newName = nameGenerator.genItemName(trans("queryLibrary.unnamed"));
 
   const handleAdd = (type: BottomResTypeEnum, extraInfo?: any) => {
@@ -189,7 +226,12 @@ export const QueryLibraryEditor = () => {
             setSelectedQuery(id);
             showCreatePanel(false);
           } }
-          readOnly={showHistory} />
+          setCurrentPage={setCurrentPage}
+          setPageSize={setPageSize}
+          currentPage={currentPage}
+          pageSize={pageSize}
+          total={elements.total}
+        />
         <RightContent>
           {!selectedQuery || !comp?.children.query.children.id.getView() ? (
             EmptyQueryWithoutTab

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

@@ -1,11 +1,19 @@
 import styled from "styled-components";
 import { Pagination } from "antd";
 
-const PaginationLayout = styled(Pagination)`
+interface PaginationLayoutProps {
+    height?: number;
+    marginTop?: number;
+    marginBottom?: number;
+}
+
+const PaginationLayout = styled(Pagination)<PaginationLayoutProps>`
     display: flex;
     justify-content: center;
-    margin-top: 40px;
-    margin-bottom: 20px;
+    align-items: center;
+    margin-top: ${(props) => props.marginTop !== undefined ? props.marginTop : 40}px !important;
+    margin-bottom: ${(props) => props.marginBottom !== undefined ? props.marginBottom : 20}px !important;
+    height: ${(props) => props.height}px;
 `;
 
 interface PaginationCompProps {
@@ -14,6 +22,10 @@ interface PaginationCompProps {
     currentPage: number;
     pageSize: number;
     total: number;
+    height?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    simple?: boolean;
 }
 
 const PaginationComp = (props: PaginationCompProps) => {
@@ -23,6 +35,10 @@ const PaginationComp = (props: PaginationCompProps) => {
         currentPage,
         pageSize,
         total,
+        height,
+        marginTop,
+        marginBottom,
+        simple,
     } = props;
 
     const handlePageChange = (page: number, pageSize: number | undefined) => {
@@ -38,14 +54,32 @@ const PaginationComp = (props: PaginationCompProps) => {
     };
 
     return (
-        <PaginationLayout
-            current={currentPage}
-            pageSize={pageSize}
-            onChange={handlePageChange}
-            onShowSizeChange={handlePageSizeChange}
-            total={total}
-            showSizeChanger
-        />
+        <>
+        {simple ?
+            <PaginationLayout
+                height={height}
+                marginTop={marginTop}
+                marginBottom={marginBottom}
+                current={currentPage}
+                pageSize={pageSize}
+                onChange={handlePageChange}
+                onShowSizeChange={handlePageSizeChange}
+                total={total}
+                simple
+            /> :
+            <PaginationLayout
+                height={height}
+                marginTop={marginTop}
+                marginBottom={marginBottom}
+                current={currentPage}
+                pageSize={pageSize}
+                onChange={handlePageChange}
+                onShowSizeChange={handlePageSizeChange}
+                total={total}
+                showSizeChanger
+            />
+        }
+            </>
     );
 };