Implemented pagination in User Group List.

Author: Imiss-U1025

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

@@ -10,6 +10,7 @@ import {
   UpdateUserOrgRolePayload,
 } from "redux/reduxActions/orgActions";
 import { ApiResponse, GenericApiResponse } from "./apiResponses";
+import {GenericApiPaginationResponse, orgGroupRequestType} from "@lowcoder-ee/util/pagination/type";
 
 export interface GroupUsersResponse extends ApiResponse {
   data: {
@@ -66,6 +67,10 @@ export class OrgApi extends Api {
     return Api.get(OrgApi.fetchGroupURL);
   }
 
+  static fetchGroupPagination(request: orgGroupRequestType): AxiosPromise<GenericApiPaginationResponse<OrgGroup[]>> {
+    return Api.get(OrgApi.fetchGroupURL, {...request});
+  }
+
   static deleteGroup(groupId: string): AxiosPromise<ApiResponse> {
     return Api.delete(OrgApi.deleteGroupURL(groupId));
   }

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

@@ -334,7 +334,6 @@ export function HomeLayout(props: HomeLayoutProps) {
     setTypeFilterPagination,
 
   } = props;
-  console.log("elements", elements, total);
   const handlePageChange = (page: number) => {
     setCurrentPage(page);
   };

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

@@ -45,16 +45,16 @@ export function TrashView() {
     <>
       <Helmet>{<title>{trans("home.trash")}</title>}</Helmet>
       <HomeLayout
-      elements={elements.elements}
-      breadcrumb={[{ text: trans("home.trash"), path: TRASH_URL }]}
-      mode={"trash"}
-      currentPage ={currentPage}
-      setCurrentPage={setCurrentPage}
-      pageSize={pageSize}
-      setPageSize={setPageSize}
-      total={elements.total}
-      setSearchValues={setSearchValues}
-      setTypeFilterPagination={setTypeFilter}
+          elements={elements.elements}
+          breadcrumb={[{ text: trans("home.trash"), path: TRASH_URL }]}
+          mode={"trash"}
+          currentPage ={currentPage}
+          setCurrentPage={setCurrentPage}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
+          total={elements.total}
+          setSearchValues={setSearchValues}
+          setTypeFilterPagination={setTypeFilter}
       />
     </>
   );

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

@@ -21,7 +21,6 @@ import {
 } from "lowcoder-design";
 import styled from "styled-components";
 import { trans } from "i18n";
-import { getOrgGroups } from "redux/selectors/orgSelectors";
 import { Table } from "components/Table";
 import history from "util/history";
 import { Level1SettingPageContentWithList, Level1SettingPageTitleWithBtn } from "../styled";
@@ -32,6 +31,8 @@ import { OrgGroup } from "constants/orgConstants";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import InviteDialog from "pages/common/inviteDialog";
 import { Flex } from "antd";
+import {fetchOrgGroups} from "@lowcoder-ee/util/pagination/axios";
+import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
 
 const NEW_GROUP_PREFIX = trans("memberSettings.newGroupPrefix");
 
@@ -51,17 +52,48 @@ type DataItemInfo = {
   group?: OrgGroup;
 };
 
+interface ElementsState {
+  elements: OrgGroup[];
+  total: number;
+}
+
 export default function PermissionSetting() {
+  let dataSource: DataItemInfo[] = [];
   const user = useSelector(getUser);
   const orgId = user.currentOrgId;
-  const orgGroups = useSelector(getOrgGroups);
-  const visibleOrgGroups = orgGroups.filter((g) => !g.allUsersGroup);
-  const allUsersGroup = orgGroups.find((g) => g.allUsersGroup);
   const dispatch = useDispatch();
   const [needRenameId, setNeedRenameId] = useState<string | undefined>(undefined);
   const { nameSuffixFunc, menuItemsFunc, menuExtraView } = usePermissionMenuItems(orgId);
   const [groupCreating, setGroupCreating] = useState(false);
+  const [elements, setElements] = useState<ElementsState>({ elements: [], total: 0 });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
 
+  useEffect( () => {
+    fetchOrgGroups(
+        {
+          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]
+  )
+  const visibleOrgGroups = elements.elements.filter((g) => !g.allUsersGroup);
+  const allUsersGroup = elements.elements.find((g) => g.allUsersGroup);
+  dataSource = currentPage === 1 ? [{
+    key: "users",
+    label: trans("memberSettings.allMembers"),
+    createTime: allUsersGroup?.createTime,
+    lock: true,
+    del: false,
+    rename: false,
+  }] : [];
   useEffect(() => {
     if (!orgId) {
       return;
@@ -105,17 +137,6 @@ export default function PermissionSetting() {
       });
   };
 
-  const dataSource: DataItemInfo[] = [
-    {
-      key: "users",
-      label: trans("memberSettings.allMembers"),
-      createTime: allUsersGroup?.createTime,
-      lock: true,
-      del: false,
-      rename: false,
-    },
-  ];
-
   visibleOrgGroups.forEach((group) => {
     dataSource.push({
       key: group.groupId,
@@ -255,6 +276,13 @@ export default function PermissionSetting() {
         />
       </div>
       {menuExtraView}
+      <PaginationComp
+          currentPage={currentPage}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
+          setCurrentPage={setCurrentPage}
+          total={elements.total}
+      />
     </Level1SettingPageContentWithList>
   );
 }

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

@@ -1,8 +1,7 @@
 import { FolderApi } from "@lowcoder-ee/api/folderApi";
 import ApplicationApi from "@lowcoder-ee/api/applicationApi";
-import {fetchAppRequestType, fetchFolderRequestType} from "@lowcoder-ee/util/pagination/type";
-
-
+import {fetchAppRequestType, fetchFolderRequestType, orgGroupRequestType} from "@lowcoder-ee/util/pagination/type";
+import OrgApi from "@lowcoder-ee/api/orgApi";
 
 export const fetchFolderElements = async (request: fetchFolderRequestType) => {
     try {
@@ -21,7 +20,6 @@ export const fetchFolderElements = async (request: fetchFolderRequestType) => {
     }
 }
 
-
 export const fetchApplicationElements = async (request: fetchAppRequestType)=> {
     try {
         const response = await ApplicationApi.fetchAllApplicationsPagination(request);
@@ -37,4 +35,22 @@ export const fetchApplicationElements = async (request: fetchAppRequestType)=> {
             error: error
         };
     }
+}
+
+export const fetchOrgGroups = async (request: orgGroupRequestType) => {
+    try{
+        const response = await OrgApi.fetchGroupPagination(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

@@ -2,7 +2,14 @@ type ApplicationType = {
     [key: number]: string; // This allows numeric indexing
 };
 
-// Define the const with explicit type
+export interface GenericApiPaginationResponse<T> {
+    total: number;
+    success: boolean;
+    code: number;
+    message: string;
+    data: T;
+}
+
 export const ApplicationPaginationType: ApplicationType = {
     0: "",
     1: "APPLICATION",
@@ -27,10 +34,7 @@ export interface fetchFolderRequestType {
     applicationType?: string;
 }
 
-export interface GenericApiPaginationResponse<T> {
-    total: number;
-    success: boolean;
-    code: number;
-    message: string;
-    data: T;
-}
+export interface orgGroupRequestType{
+    pageNum?: number;
+    pageSize?: number;
+}