Implemented pagination in Data Sources.

Author: Imiss-U1025

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

@@ -8,6 +8,7 @@ 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";
 
 export interface PreparedStatementConfig {
   enableTurnOffPreparedStatement: boolean;
@@ -172,6 +173,11 @@ export class DatasourceApi extends Api {
     return Api.get(DatasourceApi.url + `/listByOrg?orgId=${orgId}`);
   }
 
+  static fetchDatasourcePaginationByOrg(request: fetchDBRequestType): AxiosPromise<GenericApiPaginationResponse<DatasourceInfo[]>> {
+    const {orgId, ...res} = request;
+    return Api.get(DatasourceApi.url + `/listByOrg?orgId=${orgId}`, {...res});
+  }
+
   static createDatasource(
     datasourceConfig: Partial<Datasource>
   ): AxiosPromise<GenericApiResponse<Datasource>> {

client/packages/lowcoder/src/pages/datasource/datasourceList.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { EditPopover, PointIcon, Search, TacoButton } from "lowcoder-design";
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getDataSource, getDataSourceLoading, getDataSourceTypesMap } from "../../redux/selectors/datasourceSelectors";
 import { deleteDatasource } from "../../redux/reduxActions/datasourceActions";
@@ -17,6 +17,10 @@ import { DatasourcePermissionDialog } from "../../components/PermissionDialog/Da
 import DataSourceIcon from "components/DataSourceIcon";
 import { Helmet } from "react-helmet";
 import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
+import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
+import {DatasourceInfo} from "@lowcoder-ee/api/datasourceApi";
+import {fetchDatasourcePagination} from "@lowcoder-ee/util/pagination/axios";
+import {getUser} from "@lowcoder-ee/redux/selectors/usersSelectors";
 
 const DatasourceWrapper = styled.div`
   display: flex;
@@ -103,11 +107,41 @@ const StyledTable = styled(Table)`
 export const DatasourceList = () => {
   const dispatch = useDispatch();
   const [searchValue, setSearchValue] = useState("");
+  const [searchValues, setSearchValues] = useState("");
   const [isCreateFormShow, showCreateForm] = useState(false);
   const [shareDatasourceId, setShareDatasourceId] = useState<string | undefined>(undefined);
   const datasource = useSelector(getDataSource);
+  const currentUser = useSelector(getUser);
+  const orgId = currentUser.currentOrgId;
   const datasourceLoading = useSelector(getDataSourceLoading);
   const plugins = useSelector(getDataSourceTypesMap);
+  interface ElementsState {
+    elements: DatasourceInfo[];
+    total: number;
+  }
+  console.log(datasource);
+
+  const [elements, setElements] = useState<ElementsState>({ elements: [], total: 0 });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  useEffect( () => {
+    fetchDatasourcePagination(
+      {
+        orgId: orgId,
+        pageNum: currentPage,
+        pageSize: pageSize,
+        name: searchValues
+      }
+    ).then(result => {
+      if (result.success){
+        setElements({elements: result.data || [], total: result.total || 1})
+      }
+      else
+        console.error("ERROR: fetchFolderElements", result.error)
+    })
+  }, [currentPage, pageSize, searchValues]
+  )
 
   return (
     <>
@@ -140,6 +174,7 @@ export const DatasourceList = () => {
             placeholder={trans("search")}
             value={searchValue}
             onChange={(e) => setSearchValue(e.target.value)}
+            onEnterPress={(value) => setSearchValues(value)}
             style={{ width: "192px", height: "32px", margin: "0 12px 0 0" }} />
           <AddBtn buttonType={"primary"} onClick={() => showCreateForm(true)}>
             {trans("home.newDatasource")}
@@ -267,19 +302,7 @@ export const DatasourceList = () => {
                 ),
               },
             ]}
-            dataSource={datasource
-              .filter((info) => {
-                if (info.datasource.creationSource === 2) {
-                  return false;
-                }
-                if (!isEmpty(searchValue)) {
-                  return (
-                    info.datasource.name.toLowerCase().includes(searchValue.trim().toLowerCase()) ||
-                    info.datasource.type.toLowerCase().includes(searchValue.trim().toLowerCase())
-                  );
-                }
-                return true;
-              })
+            dataSource={elements.elements
               .map((info, i) => ({
                 key: i,
                 id: info.datasource.id,
@@ -296,6 +319,13 @@ export const DatasourceList = () => {
                 creator: info.creatorName,
                 edit: info.edit,
               }))} />
+          <PaginationComp
+              currentPage={currentPage}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              setCurrentPage={setCurrentPage}
+              total={elements.total}
+          />
         </BodyWrapper>
         {shareDatasourceId && (
           <DatasourcePermissionDialog
@@ -305,6 +335,8 @@ export const DatasourceList = () => {
               !visible && setShareDatasourceId(undefined);
             } } />
         )}
-      </DatasourceWrapper></>
+      </DatasourceWrapper>
+
+    </>
   );
 };

client/packages/lowcoder/src/pages/setting/permission/orgUsersPermission.tsx

@@ -300,6 +300,11 @@ function OrgUsersPermission(props: UsersPermissionProp) {
 }
 
 const mapStateToProps = (state: AppState) => {
+    console.log({
+        orgUsersFetching: state.ui.org.orgUsersFetching,
+        orgUsers: state.ui.org.orgUsers,
+        currentUser: getUser(state),
+    })
   return {
     orgUsersFetching: state.ui.org.orgUsersFetching,
     orgUsers: state.ui.org.orgUsers,

client/packages/lowcoder/src/util/pagination/axios.ts

@@ -1,7 +1,13 @@
 import { FolderApi } from "@lowcoder-ee/api/folderApi";
 import ApplicationApi from "@lowcoder-ee/api/applicationApi";
-import {fetchAppRequestType, fetchFolderRequestType, orgGroupRequestType} from "@lowcoder-ee/util/pagination/type";
+import {
+    fetchAppRequestType,
+    fetchDBRequestType,
+    fetchFolderRequestType,
+    orgGroupRequestType
+} from "@lowcoder-ee/util/pagination/type";
 import OrgApi from "@lowcoder-ee/api/orgApi";
+import { DatasourceApi } from "@lowcoder-ee/api/datasourceApi";
 
 export const fetchFolderElements = async (request: fetchFolderRequestType) => {
     try {
@@ -53,4 +59,21 @@ export const fetchOrgGroups = async (request: orgGroupRequestType) => {
             error: error
         };
     }
+}
+
+export const fetchDatasourcePagination = async (request: fetchDBRequestType)=> {
+    try {
+        const response = await DatasourceApi.fetchDatasourcePaginationByOrg(request);
+        return {
+            success: true,
+            data: response.data.data,
+            total: response.data.total
+        }
+    } catch (error: any) {
+        console.error('Failed to fetch data:', error);
+        return {
+            success: false,
+            error: error
+        };
+    }
 }

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

@@ -34,6 +34,14 @@ export interface fetchFolderRequestType {
     applicationType?: string;
 }
 
+export interface fetchDBRequestType {
+    orgId: string;
+    pageNum?: number;
+    pageSize?: number;
+    name?: string;
+    type?: string;
+}
+
 export interface orgGroupRequestType{
     pageNum?: number;
     pageSize?: number;