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

@@ -299,17 +299,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,18 @@ 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 orgUsers = useSelector((state: AppState) => state.ui.org.orgUsers);
+
   const groupIdMap = new Map(orgGroups.map((group) => [group.groupId, group]));
   const dispatch = useDispatch();
   const selectKey = useParams<{ groupId: string }>().groupId;
@@ -60,25 +62,52 @@ 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) {
     return null;
   }
+  console.log(orgMemberElements.total, elements);
 
   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.members ? [] : elements.elements.members}
                       groupUsersFetching={groupUsersFetching}
                       currentUserGroupRole={currentUserGroupRole}
                       currentUser={currentUser}

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

@@ -4,7 +4,7 @@ import {
     fetchAppRequestType,
     fetchDBRequestType,
     fetchFolderRequestType,
-    fetchOrgUserRequestType,
+    fetchGroupUserRequestType, fetchOrgUserRequestType,
     orgGroupRequestType
 } from "@lowcoder-ee/util/pagination/type";
 import OrgApi from "@lowcoder-ee/api/orgApi";
@@ -79,9 +79,10 @@ 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);
+        console.log("response", response);
         return {
             success: true,
             data: response.data.data,
@@ -94,4 +95,21 @@ export const fetchGroupUsrPagination = async (request: fetchOrgUserRequestType)=
             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);
+        return {
+            success: false,
+            error: error
+        };
+    }
+}

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

@@ -1,4 +1,5 @@
-import {GroupUser} from "@lowcoder-ee/constants/orgConstants";
+import {GroupUser, OrgUser} from "@lowcoder-ee/constants/orgConstants";
+import {ApiResponse} from "@lowcoder-ee/api/apiResponses";
 
 type ApplicationType = {
     [key: number]: string; // This allows numeric indexing
@@ -20,6 +21,16 @@ export interface GroupUsersPaginationResponse {
     };
 }
 
+export interface OrgUsersPaginationResponse  {
+    total: number;
+    success: boolean;
+    data: {
+        total: number;
+        members: OrgUser[];
+        visitorRole: string;
+    };
+}
+
 export const ApplicationPaginationType: ApplicationType = {
     0: "",
     1: "APPLICATION",
@@ -57,6 +68,12 @@ export interface orgGroupRequestType{
     pageSize?: number;
 }
 export interface fetchOrgUserRequestType {
+    orgId: string;
+    pageNum?: number;
+    pageSize?: number;
+}
+
+export interface fetchGroupUserRequestType {
     groupId: string;
     pageNum?: number;
     pageSize?: number;