Implemented pagination in groupUsersPermission.

Author: Imiss-U1025

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

@@ -10,7 +10,12 @@ import {
   UpdateUserOrgRolePayload,
 } from "redux/reduxActions/orgActions";
 import { ApiResponse, GenericApiResponse } from "./apiResponses";
-import {GenericApiPaginationResponse, orgGroupRequestType} from "@lowcoder-ee/util/pagination/type";
+import {
+  fetchOrgUserRequestType,
+  GenericApiPaginationResponse,
+  GroupUsersPaginationResponse,
+  orgGroupRequestType
+} from "@lowcoder-ee/util/pagination/type";
 
 export interface GroupUsersResponse extends ApiResponse {
   data: {
@@ -97,6 +102,11 @@ export class OrgApi extends Api {
     return Api.get(OrgApi.fetchGroupUsersURL(groupId));
   }
 
+  static fetchGroupUsersPagination(request: fetchOrgUserRequestType): AxiosPromise<GroupUsersPaginationResponse> {
+    const {groupId, ...res} = request;
+    return Api.get(OrgApi.fetchGroupUsersURL(groupId), {...res});
+  }
+
   static deleteGroupUser(request: RemoveGroupUserPayload): AxiosPromise<ApiResponse> {
     return Api.delete(OrgApi.deleteGroupUserURL(request.groupId), {
       userId: request.userId,

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

@@ -4,15 +4,13 @@ import { AddIcon, ArrowIcon, CustomSelect, PackUpIcon, SuperUserIcon } from "low
 import { trans } from "i18n";
 import ProfileImage from "pages/common/profileImage";
 import React, { useEffect, useMemo } from "react";
-import { connect, useDispatch } from "react-redux";
-import { AppState } from "redux/reducers";
+import { useDispatch } from "react-redux";
 import {
   deleteGroupUserAction,
   fetchGroupUsersAction,
   quitGroupAction,
   updateUserGroupRoleAction,
 } from "redux/reduxActions/orgActions";
-import { getUser } from "redux/selectors/usersSelectors";
 import styled from "styled-components";
 import { formatTimestamp } from "util/dateTimeUtils";
 import { currentOrgAdmin, isGroupAdmin } from "util/permissionUtils";
@@ -208,13 +206,4 @@ function GroupUsersPermission(props: GroupPermissionProp) {
   );
 }
 
-const mapStateToProps = (state: AppState) => {
-  return {
-    groupUsers: state.ui.org.groupUsers,
-    groupUsersFetching: state.ui.org.groupUsersFetching,
-    currentUser: getUser(state),
-    currentUserGroupRole: state.ui.org.currentUserGroupRole,
-  };
-};
-
-export default connect(mapStateToProps)(GroupUsersPermission);
+export default GroupUsersPermission;

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

@@ -1,12 +1,16 @@
-import { useEffect } from "react";
+import React, {useEffect, useState} from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchGroupsAction } from "redux/reduxActions/orgActions";
 import { getUser } from "redux/selectors/usersSelectors";
 import styled from "styled-components";
 import GroupPermission from "./groupUsersPermission";
 import UsersPermission from "./orgUsersPermission";
 import { getOrgGroups } from "redux/selectors/orgSelectors";
-import { useParams } from "react-router";
+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 PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
 
 const PermissionContent = styled.div`
   display: flex;
@@ -20,10 +24,18 @@ const PermissionContent = styled.div`
 
 const All_Users = "users";
 
-export default function PermissionSetting() {
-  const user = useSelector(getUser);
+export default function PermissionSetting() {  const user = useSelector(getUser);
+
+  const [elements, setElements] = 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 groupIdMap = new Map(orgGroups.map((group) => [group.groupId, group]));
   const dispatch = useDispatch();
   const selectKey = useParams<{ groupId: string }>().groupId;
@@ -33,19 +45,49 @@ export default function PermissionSetting() {
     }
     dispatch(fetchGroupsAction(orgId));
   }, [orgId]);
+
+  useEffect( () => {
+    if (selectKey !== "users")
+      fetchGroupUsrPagination(
+        {
+          groupId: groupIdMap.get(selectKey)!.groupId,
+          pageNum: currentPage,
+          pageSize: pageSize,
+        }
+        ).then(result => {
+          if (result.success){
+            setElements({elements: result.data || [], total: result.total || 1})
+          }
+          else
+            console.error("ERROR: fetchFolderElements", result.error)
+        })
+      }, [currentPage, pageSize]
+  )
+
   if (!orgId) {
     return null;
   }
 
   return (
-    <PermissionContent key={selectKey}>
-      {selectKey === All_Users ? (
-        <UsersPermission orgId={orgId} />
-      ) : (
-        groupIdMap.has(selectKey) && (
-          <GroupPermission group={groupIdMap.get(selectKey)!} orgId={orgId} />
-        )
-      )}
-    </PermissionContent>
+      <PermissionContent key={selectKey}>
+        {selectKey === All_Users ? (
+            <UsersPermission orgId={orgId} />
+        ) : (
+            groupIdMap.has(selectKey) && (
+                <>
+                  <GroupPermission
+                      group={groupIdMap.get(selectKey)!}
+                      orgId={orgId}
+                      groupUsers={groupUsers}
+                      groupUsersFetching={groupUsersFetching}
+                      currentUserGroupRole={currentUserGroupRole}
+                      currentUser={currentUser}
+                  />
+                  <PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={elements.total} />
+                </>
+
+            )
+        )}
+      </PermissionContent>
   );
-}
+}

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

@@ -4,6 +4,7 @@ import {
     fetchAppRequestType,
     fetchDBRequestType,
     fetchFolderRequestType,
+    fetchOrgUserRequestType,
     orgGroupRequestType
 } from "@lowcoder-ee/util/pagination/type";
 import OrgApi from "@lowcoder-ee/api/orgApi";
@@ -76,4 +77,21 @@ export const fetchDatasourcePagination = async (request: fetchDBRequestType)=> {
             error: error
         };
     }
+}
+
+export const fetchGroupUsrPagination = async (request: fetchOrgUserRequestType)=> {
+    try {
+        const response = await OrgApi.fetchGroupUsersPagination(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

@@ -1,3 +1,5 @@
+import {GroupUser} from "@lowcoder-ee/constants/orgConstants";
+
 type ApplicationType = {
     [key: number]: string; // This allows numeric indexing
 };
@@ -9,6 +11,14 @@ export interface GenericApiPaginationResponse<T> {
     message: string;
     data: T;
 }
+export interface GroupUsersPaginationResponse {
+    total: number;
+    success: boolean;
+    data: {
+        members: GroupUser[];
+        visitorRole: string;
+    };
+}
 
 export const ApplicationPaginationType: ApplicationType = {
     0: "",
@@ -46,3 +56,8 @@ export interface orgGroupRequestType{
     pageNum?: number;
     pageSize?: number;
 }
+export interface fetchOrgUserRequestType {
+    groupId: string;
+    pageNum?: number;
+    pageSize?: number;
+}