Implemented pagination in organizations's member.

Author: Imiss-U1025

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

@@ -11,10 +11,11 @@ import {
 } from "redux/reduxActions/orgActions";
 import { ApiResponse, GenericApiResponse } from "./apiResponses";
 import {
+  fetchGroupUserRequestType,
   fetchOrgUserRequestType,
   GenericApiPaginationResponse,
   GroupUsersPaginationResponse,
-  orgGroupRequestType
+  orgGroupRequestType, OrgUsersPaginationResponse
 } from "@lowcoder-ee/util/pagination/type";
 
 export interface GroupUsersResponse extends ApiResponse {
@@ -98,11 +99,16 @@ export class OrgApi extends Api {
     return Api.get(OrgApi.fetchOrgUsersURL(orgId));
   }
 
+  static fetchOrgUsersPagination(request:fetchOrgUserRequestType): AxiosPromise<OrgUsersPaginationResponse> {
+    const {orgId, ...res} = request;
+    return Api.get(OrgApi.fetchOrgUsersURL(orgId), {...res});
+  }
+
   static fetchGroupUsers(groupId: string): AxiosPromise<GroupUsersResponse> {
     return Api.get(OrgApi.fetchGroupUsersURL(groupId));
   }
 
-  static fetchGroupUsersPagination(request: fetchOrgUserRequestType): AxiosPromise<GroupUsersPaginationResponse> {
+  static fetchGroupUsersPagination(request: fetchGroupUserRequestType): AxiosPromise<GroupUsersPaginationResponse> {
     const {groupId, ...res} = request;
     return Api.get(OrgApi.fetchGroupUsersURL(groupId), {...res});
   }

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

@@ -15,15 +15,13 @@ import { trans, transToNode } from "i18n";
 import InviteDialog from "pages/common/inviteDialog";
 import ProfileImage from "pages/common/profileImage";
 import React, { useEffect, useMemo } from "react";
-import { connect, useDispatch, useSelector } from "react-redux";
-import { AppState } from "redux/reducers";
+import { useDispatch, useSelector } from "react-redux";
 import {
   deleteOrgUserAction,
   fetchOrgUsersAction,
   quitOrgAction,
   updateUserOrgRoleAction,
 } from "redux/reduxActions/orgActions";
-import { getUser } from "redux/selectors/usersSelectors";
 import styled from "styled-components";
 import { formatTimestamp } from "util/dateTimeUtils";
 import { currentOrgAdmin } from "util/permissionUtils";
@@ -299,17 +297,4 @@ 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,
-    currentUser: getUser(state),
-  };
-};
-
-export default connect(mapStateToProps)(OrgUsersPermission);
+export default OrgUsersPermission;

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

@@ -8,8 +8,7 @@ import UsersPermission from "./orgUsersPermission";
 import { getOrgGroups } from "redux/selectors/orgSelectors";
 import { useParams } from "react-router-dom";
 import { AppState } from "redux/reducers";
-import {fetchGroupUsrPagination} from "@lowcoder-ee/util/pagination/axios";
-import {OrgGroup} from "@lowcoder-ee/constants/orgConstants";
+import {fetchGroupUsrPagination, fetchOrgUsrPagination} from "@lowcoder-ee/util/pagination/axios";
 import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
 
 const PermissionContent = styled.div`
@@ -27,15 +26,17 @@ const All_Users = "users";
 export default function PermissionSetting() {  const user = useSelector(getUser);
 
   const [elements, setElements] = useState<any>({ elements: [], total: 0 });
+  const [orgMemberElements, setOrgMemberElements] = useState<any>({ elements: [], total: 0 })
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
 
   const orgId = user.currentOrgId;
   const orgGroups = useSelector(getOrgGroups);
-  const groupUsers = useSelector((state: AppState) => state.ui.org.groupUsers);
   const groupUsersFetching = useSelector((state: AppState) => state.ui.org.groupUsersFetching);
   const currentUserGroupRole = useSelector((state: AppState) => state.ui.org.currentUserGroupRole);
   const currentUser = useSelector(getUser);
+  const orgUsersFetching = useSelector((state: AppState) => state.ui.org.orgUsersFetching);
+
   const groupIdMap = new Map(orgGroups.map((group) => [group.groupId, group]));
   const dispatch = useDispatch();
   const selectKey = useParams<{ groupId: string }>().groupId;
@@ -60,8 +61,25 @@ export default function PermissionSetting() {  const user = useSelector(getUser)
           }
           else
             console.error("ERROR: fetchFolderElements", result.error)
-        })
-      }, [currentPage, pageSize]
+        }
+        )
+    else
+      fetchOrgUsrPagination(
+          {
+            orgId: orgId,
+            pageNum: currentPage,
+            pageSize: pageSize,
+          }
+      ).then(result => {
+            if (result.success){
+              setOrgMemberElements({elements: result.data || [], total: result.total || 1})
+            }
+            else
+              console.error("ERROR: fetchFolderElements", result.error)
+          }
+      )
+      },
+      [currentPage, pageSize]
   )
 
   if (!orgId) {
@@ -71,14 +89,23 @@ export default function PermissionSetting() {  const user = useSelector(getUser)
   return (
       <PermissionContent key={selectKey}>
         {selectKey === All_Users ? (
-            <UsersPermission orgId={orgId} />
+            <>
+              <UsersPermission
+                  orgId={orgId}
+                  orgUsersFetching={orgUsersFetching}
+                  // orgUsers={!orgMemberElements.elements.members ? [] : orgMemberElements.elements.members}
+                  orgUsers={orgMemberElements.elements}
+                  currentUser={currentUser}
+              />
+              <PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={orgMemberElements.total} />
+            </>
         ) : (
             groupIdMap.has(selectKey) && (
                 <>
                   <GroupPermission
                       group={groupIdMap.get(selectKey)!}
                       orgId={orgId}
-                      groupUsers={groupUsers}
+                      groupUsers={elements.elements}
                       groupUsersFetching={groupUsersFetching}
                       currentUserGroupRole={currentUserGroupRole}
                       currentUser={currentUser}

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

@@ -4,6 +4,7 @@ import {
     fetchAppRequestType,
     fetchDBRequestType,
     fetchFolderRequestType,
+    fetchGroupUserRequestType,
     fetchOrgUserRequestType,
     orgGroupRequestType
 } from "@lowcoder-ee/util/pagination/type";
@@ -79,13 +80,30 @@ export const fetchDatasourcePagination = async (request: fetchDBRequestType)=> {
     }
 }
 
-export const fetchGroupUsrPagination = async (request: fetchOrgUserRequestType)=> {
+export const fetchGroupUsrPagination = async (request: fetchGroupUserRequestType)=> {
     try {
         const response = await OrgApi.fetchGroupUsersPagination(request);
         return {
             success: true,
-            data: response.data.data,
-            total: response.data.total
+            data: response.data.data.members,
+            total: response.data.data.total
+        }
+    } catch (error: any) {
+        console.error('Failed to fetch data:', error);
+        return {
+            success: false,
+            error: error
+        };
+    }
+}
+
+export const fetchOrgUsrPagination = async (request: fetchOrgUserRequestType)=> {
+    try {
+        const response = await OrgApi.fetchOrgUsersPagination(request);
+        return {
+            success: true,
+            data: response.data.data.members,
+            total: response.data.data.total,
         }
     } catch (error: any) {
         console.error('Failed to fetch data:', error);
@@ -94,4 +112,4 @@ export const fetchGroupUsrPagination = async (request: fetchOrgUserRequestType)=
             error: error
         };
     }
-}
+}

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

@@ -1,4 +1,4 @@
-import {GroupUser} from "@lowcoder-ee/constants/orgConstants";
+import {GroupUser, OrgUser} from "@lowcoder-ee/constants/orgConstants";
 
 type ApplicationType = {
     [key: number]: string; // This allows numeric indexing
@@ -12,11 +12,20 @@ export interface GenericApiPaginationResponse<T> {
     data: T;
 }
 export interface GroupUsersPaginationResponse {
-    total: number;
     success: boolean;
     data: {
         members: GroupUser[];
         visitorRole: string;
+        total: number;
+    };
+}
+
+export interface OrgUsersPaginationResponse  {
+    success: boolean;
+    data: {
+        total: number;
+        members: OrgUser[];
+        visitorRole: string;
     };
 }
 
@@ -57,6 +66,12 @@ export interface orgGroupRequestType{
     pageSize?: number;
 }
 export interface fetchOrgUserRequestType {
+    orgId: string;
+    pageNum?: number;
+    pageSize?: number;
+}
+
+export interface fetchGroupUserRequestType {
     groupId: string;
     pageNum?: number;
     pageSize?: number;