fix: paginate operational list pages

This commit is contained in:
hectorzhao
2026-07-28 23:20:13 +08:00
parent 87c5b1eccc
commit b8560372cc
40 changed files with 1208 additions and 422 deletions
+21 -27
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { Edit3, Eye, Plus, Search, Trash2 } from 'lucide-react';
import { adminApi, type ClientSmsApplication, type ClientSmsSignature, type ClientSmsTemplate, type TenantOption } from '@/api/adminApi';
import { formatDateTime } from '@/utils/dateTime';
@@ -289,6 +289,7 @@ export function AdminEnterpriseTemplatesPage() {
const [templateModal, setTemplateModal] = useState<ClientSmsTemplate | 'new' | null>(null);
const [templatePreview, setTemplatePreview] = useState<ClientSmsTemplate | null>(null);
const [templates, setTemplates] = useState<ClientSmsTemplate[]>([]);
const [total, setTotal] = useState(0);
const [templateNameKeyword, setTemplateNameKeyword] = useState('');
const [appliedTemplateNameKeyword, setAppliedTemplateNameKeyword] = useState('');
const [templateContentKeyword, setTemplateContentKeyword] = useState('');
@@ -296,15 +297,18 @@ export function AdminEnterpriseTemplatesPage() {
const [tenants, setTenants] = useState<TenantOption[]>([]);
const [page, setPage] = useState(1);
async function loadData(filters = { enterpriseKeyword: appliedEnterpriseKeyword, applicationKeyword: appliedApplicationKeyword, nameKeyword: appliedTemplateNameKeyword, contentKeyword: appliedTemplateContentKeyword }) {
const pageSize = 10;
async function loadData(filters = { enterpriseKeyword: appliedEnterpriseKeyword, applicationKeyword: appliedApplicationKeyword, nameKeyword: appliedTemplateNameKeyword, contentKeyword: appliedTemplateContentKeyword }, targetPage = page) {
try {
const [templateItems, tenantItems, applicationItems, signatureList] = await Promise.all([
adminApi.listEnterpriseTemplates(filters),
const [templateResult, tenantItems, applicationItems, signatureList] = await Promise.all([
adminApi.listEnterpriseTemplatesPage({ ...filters, page: targetPage, pageSize }),
adminApi.listTenants(),
adminApi.listEnterpriseApplications(),
adminApi.listEnterpriseSignatures(),
adminApi.listEnterpriseApplicationOptions(),
adminApi.listEnterpriseSignatureOptions(),
]);
setTemplates(templateItems);
setTemplates(templateResult.items);
setTotal(templateResult.total);
setTenants(tenantItems.filter((tenant) => tenant.status !== 'deleted'));
setApplications(applicationItems);
setSignatureItems(signatureList);
@@ -315,25 +319,13 @@ export function AdminEnterpriseTemplatesPage() {
}
useEffect(() => {
void loadData();
}, []);
void loadData(undefined, page);
}, [page]);
const filteredTemplates = useMemo(() => templates.filter((item) => {
const enterprise = item.tenant?.name ?? item.tenantId;
const application = item.application?.name ?? '';
return (!appliedEnterpriseKeyword || enterprise.includes(appliedEnterpriseKeyword))
&& (!appliedApplicationKeyword || application.includes(appliedApplicationKeyword))
&& (!appliedTemplateNameKeyword || item.name.includes(appliedTemplateNameKeyword))
&& (!appliedTemplateContentKeyword || item.content.includes(appliedTemplateContentKeyword));
}), [appliedApplicationKeyword, appliedEnterpriseKeyword, appliedTemplateContentKeyword, appliedTemplateNameKeyword, templates]);
const pageSize = 10;
const totalPages = Math.max(1, Math.ceil(filteredTemplates.length / pageSize));
const filteredTemplates = templates;
const totalPages = Math.max(1, Math.ceil(total / pageSize));
const currentPage = Math.min(page, totalPages);
const visibleTemplates = filteredTemplates.slice((currentPage - 1) * pageSize, currentPage * pageSize);
useEffect(() => {
setPage(1);
}, [appliedApplicationKeyword, appliedEnterpriseKeyword, appliedTemplateContentKeyword, appliedTemplateNameKeyword]);
const visibleTemplates = templates;
async function saveTemplate(state: TemplateFormState) {
const existing = templateModal && templateModal !== 'new' ? templateModal : null;
@@ -387,7 +379,8 @@ export function AdminEnterpriseTemplatesPage() {
setAppliedApplicationKeyword(filters.applicationKeyword);
setAppliedTemplateNameKeyword(filters.nameKeyword);
setAppliedTemplateContentKeyword(filters.contentKeyword);
void loadData(filters);
setPage(1);
void loadData(filters, 1);
}}></Button>
<Button onClick={() => {
const filters = { enterpriseKeyword: '', applicationKeyword: '', nameKeyword: '', contentKeyword: '' };
@@ -399,7 +392,8 @@ export function AdminEnterpriseTemplatesPage() {
setAppliedApplicationKeyword('');
setAppliedTemplateNameKeyword('');
setAppliedTemplateContentKeyword('');
void loadData(filters);
setPage(1);
void loadData(filters, 1);
}} variant="ghost"></Button>
</div>
</div>
@@ -447,7 +441,7 @@ export function AdminEnterpriseTemplatesPage() {
onPrevious={() => setPage((value) => Math.max(1, value - 1))}
page={currentPage}
previousDisabled={currentPage <= 1}
total={filteredTemplates.length}
total={total}
totalPages={totalPages}
/>
</div>