1

frontend/src/pages/Deploy/ProjectGroup/List/index.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import {PageContainer} from '@/components/ui/page-container';
 import {
     PlusOutlined,
@@ -59,6 +59,7 @@ import {
 import {useForm} from "react-hook-form";
 import {zodResolver} from "@hookform/resolvers/zod";
 import {searchFormSchema, type SearchFormValues} from "./schema";
+import {DataTablePagination} from "@/components/ui/pagination";
 
 interface Column {
     accessorKey?: keyof ProjectGroup;
@@ -74,6 +75,11 @@ const ProjectGroupList: React.FC = () => {
     const [list, setList] = useState<ProjectGroup[]>([]);
     const [loading, setLoading] = useState(false);
     const [deleteDialogOpen, setDeleteDialogOpen] = useState<Record<string | number, boolean>>({});
+    const [pagination, setPagination] = useState({
+        pageNum: 1,
+        pageSize: 10,
+        totalElements: 0,
+    });
     const {toast} = useToast();
 
     const form = useForm<SearchFormValues>({
@@ -86,11 +92,20 @@ const ProjectGroupList: React.FC = () => {
         },
     });
 
-    const loadData = async (params?: ProjectGroupQueryParams) => {
+    const loadData = async (params?: SearchFormValues) => {
         setLoading(true);
         try {
-            const data = await getProjectGroupPage(params);
-            setList(data.content);
+            const queryParams: ProjectGroupQueryParams = {
+                ...params,
+                pageNum: pagination.pageNum,
+                pageSize: pagination.pageSize,
+            };
+            const data = await getProjectGroupPage(queryParams);
+            setList(data.content || []);
+            setPagination(prev => ({
+                ...prev,
+                totalElements: data.totalElements,
+            }));
         } catch (error) {
             toast({
                 variant: "destructive",
@@ -103,9 +118,16 @@ const ProjectGroupList: React.FC = () => {
         }
     };
 
-    React.useEffect(() => {
-        loadData();
-    }, []);
+    const handlePageChange = (page: number) => {
+        setPagination(prev => ({
+            ...prev,
+            pageNum: page,
+        }));
+    };
+
+    useEffect(() => {
+        loadData(form.getValues());
+    }, [pagination.pageNum, pagination.pageSize]);
 
     const handleDelete = async (id: number) => {
         try {
@@ -136,11 +158,6 @@ const ProjectGroupList: React.FC = () => {
         setDeleteDialogOpen(prev => ({...prev, [id]: false}));
     };
 
-    const handleAdd = () => {
-        setCurrentProject(undefined);
-        setModalVisible(true);
-    };
-
     const handleEdit = (project: ProjectGroup) => {
         setCurrentProject(project);
         setModalVisible(true);
@@ -455,6 +472,14 @@ const ProjectGroupList: React.FC = () => {
                                 </TableBody>
                             </Table>
                         </div>
+                        <div className="flex justify-end border-t border-border bg-muted/40">
+                            <DataTablePagination
+                                pageIndex={pagination.pageNum}
+                                pageSize={pagination.pageSize}
+                                pageCount={Math.ceil(pagination.totalElements / pagination.pageSize)}
+                                onPageChange={handlePageChange}
+                            />
+                        </div>
                     </div>
                 </CardContent>
             </Card>