fix(admin-ui): pagination auto reset to first page when after refetching data (#12339)

### What problem does this PR solve?

Admin user enabling/disabling a user will causing user list reset to
first page

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
Jimmy Ben Klieve
2025-12-31 09:39:13 +08:00
committed by GitHub
parent 6fee60e110
commit ec5575dce2

View File

@ -1,4 +1,4 @@
import { useMemo, useState } from 'react'; import { useLayoutEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useNavigate } from 'umi'; import { useNavigate } from 'umi';
@ -12,7 +12,12 @@ import {
useReactTable, useReactTable,
} from '@tanstack/react-table'; } from '@tanstack/react-table';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import {
keepPreviousData,
useMutation,
useQuery,
useQueryClient,
} from '@tanstack/react-query';
import { import {
LucideClipboardList, LucideClipboardList,
@ -125,12 +130,14 @@ function AdminUserManagement() {
queryFn: async () => (await listRoles()).data.data.roles, queryFn: async () => (await listRoles()).data.data.roles,
enabled: IS_ENTERPRISE, enabled: IS_ENTERPRISE,
retry: false, retry: false,
placeholderData: keepPreviousData,
}); });
const { data: usersList } = useQuery({ const { data: usersList } = useQuery({
queryKey: ['admin/listUsers'], queryKey: ['admin/listUsers'],
queryFn: async () => (await listUsers()).data.data, queryFn: async () => (await listUsers()).data.data,
retry: false, retry: false,
placeholderData: keepPreviousData,
}); });
// Delete user mutation // Delete user mutation
@ -354,8 +361,16 @@ function AdminUserManagement() {
getFilteredRowModel: getFilteredRowModel(), getFilteredRowModel: getFilteredRowModel(),
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
autoResetPageIndex: false,
}); });
useLayoutEffect(() => {
if (table.getState().pagination.pageIndex > table.getPageCount()) {
table.setPageIndex(Math.max(0, table.getPageCount() - 1));
}
}, [usersList, table]);
return ( return (
<> <>
<Card className="!shadow-none relative h-full bg-transparent overflow-hidden"> <Card className="!shadow-none relative h-full bg-transparent overflow-hidden">
@ -538,7 +553,7 @@ function AdminUserManagement() {
<CardFooter className="flex items-center justify-end"> <CardFooter className="flex items-center justify-end">
<RAGFlowPagination <RAGFlowPagination
total={usersList?.length ?? 0} total={table.getFilteredRowModel().rows.length}
current={table.getState().pagination.pageIndex + 1} current={table.getState().pagination.pageIndex + 1}
pageSize={table.getState().pagination.pageSize} pageSize={table.getState().pagination.pageSize}
onChange={(page, pageSize) => { onChange={(page, pageSize) => {