this repo has no description
Add pagination to relay dash (#941)
+109
-8
+3
-5
ts/bgs-dash/src/App.tsx
+3
-5
ts/bgs-dash/src/App.tsx
···
164
164
<div className="flex h-16 items-center justify-between">
165
165
<div className="flex items-center">
166
166
<div className="flex-shrink-0">
167
-
<img
168
-
className="h-8 w-8"
169
-
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
170
-
alt="Relay Admin Dashboard"
171
-
/>
167
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-8 h-8 text-white">
168
+
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
169
+
</svg>
172
170
</div>
173
171
<div className="hidden md:block">
174
172
<div className="ml-10 flex items-baseline space-x-4">
+106
-3
ts/bgs-dash/src/components/Dash/Dash.tsx
+106
-3
ts/bgs-dash/src/components/Dash/Dash.tsx
···
1
1
import {
2
+
ChevronDoubleLeftIcon,
3
+
ChevronLeftIcon,
4
+
ChevronRightIcon,
2
5
MagnifyingGlassIcon,
3
6
ShieldCheckIcon,
4
7
ShieldExclamationIcon,
···
35
38
const [fullPDSList, setFullPDSList] = useState<PDS[] | null>(null);
36
39
const [sortField, setSortField] = useState<PDSKey>("ID");
37
40
const [sortOrder, setSortOrder] = useState<string>("asc");
41
+
const [pageNum, setPageNum] = useState<number>(1);
42
+
const pageSize = 30;
38
43
39
44
// Slurp Toggle Management
40
45
const [slurpsEnabled, setSlurpsEnabled] = useState<boolean>(true);
···
467
472
refreshPDSList();
468
473
getSlurpsEnabled();
469
474
getNewPDSRateLimit();
470
-
// Refresh stats every 10 seconds
475
+
// Refresh stats every 60 seconds
471
476
const interval = setInterval(() => {
472
477
refreshPDSList();
473
478
getSlurpsEnabled();
474
479
getNewPDSRateLimit();
475
-
}, 10 * 1000);
480
+
}, 60 * 1000);
476
481
477
482
return () => clearInterval(interval);
478
483
}, [sortField, sortOrder]);
···
598
603
type="search"
599
604
onChange={(e) => {
600
605
setSearchTerm(e.target.value);
606
+
setPageNum(1);
601
607
}}
602
608
value={searchTerm || ""}
603
609
/>
···
896
902
</thead>
897
903
<tbody className="divide-y divide-gray-200 bg-white">
898
904
{pdsList &&
899
-
pdsList.map((pds) => {
905
+
pdsList.map((pds, idx) => {
906
+
if (idx < (pageNum - 1) * pageSize || idx >= pageNum * pageSize) {
907
+
return null;
908
+
}
900
909
return (
901
910
<tr key={pds.ID}>
902
911
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 text-left">
···
1290
1299
</tbody>
1291
1300
</table>
1292
1301
</div>
1302
+
{pdsList && pdsList.length > pageSize && (
1303
+
<div className="mt-4 flex-1 flex justify-between sm:justify-end">
1304
+
<div className="flex-1 flex justify-between sm:hidden">
1305
+
<button
1306
+
onClick={() => {
1307
+
if (pageNum > 1) {
1308
+
setPageNum(pageNum - 1);
1309
+
}
1310
+
}}
1311
+
disabled={pageNum <= 1}
1312
+
className="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm cursor-pointer"
1313
+
>
1314
+
Previous
1315
+
</button>
1316
+
<button
1317
+
onClick={() => {
1318
+
if (pageNum < Math.ceil(pdsList.length / pageSize)) {
1319
+
setPageNum(pageNum + 1);
1320
+
}
1321
+
}}
1322
+
disabled={pageNum >= Math.ceil(pdsList.length / pageSize)}
1323
+
className="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm cursor-pointer"
1324
+
>
1325
+
Next
1326
+
</button>
1327
+
</div>
1328
+
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
1329
+
<div>
1330
+
<p className="text-sm text-gray-700">
1331
+
Showing
1332
+
<span className="font-medium"> {1 + (pageNum - 1) * pageSize} </span>
1333
+
to
1334
+
<span className="font-medium"> {Math.min(pageNum * pageSize, pdsList.length)} </span>
1335
+
of
1336
+
<span className="font-medium"> {pdsList.length} </span>
1337
+
results
1338
+
</p>
1339
+
</div>
1340
+
<div>
1341
+
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
1342
+
<button
1343
+
onClick={() => setPageNum(1)}
1344
+
disabled={pageNum <= 1}
1345
+
className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-pointer"
1346
+
>
1347
+
<span className="sr-only">First</span>
1348
+
<ChevronDoubleLeftIcon className="h-5 w-5" aria-hidden="true" />
1349
+
</button>
1350
+
<button
1351
+
onClick={() => {
1352
+
if (pageNum > 1) {
1353
+
setPageNum(pageNum - 1);
1354
+
}
1355
+
}}
1356
+
disabled={pageNum <= 1}
1357
+
className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-pointer"
1358
+
>
1359
+
<span className="sr-only">Previous</span>
1360
+
<ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
1361
+
</button>
1362
+
{Array.from({ length: Math.ceil(pdsList.length / pageSize) }, (_, i) => i + 1).map((page) => (
1363
+
// Skip buttons more than 5 pages away from the current page
1364
+
Math.abs(page - pageNum) > 5 ? null : (
1365
+
<button
1366
+
key={page}
1367
+
onClick={() => setPageNum(page)}
1368
+
className={classNames(
1369
+
page === pageNum
1370
+
? "z-10 bg-indigo-50 border-indigo-500 text-indigo-600"
1371
+
: "bg-white border-gray-300 text-gray-500",
1372
+
"relative inline-flex items-center px-4 py-2 text-sm font-medium border cursor-pointer"
1373
+
)}
1374
+
>
1375
+
{page}
1376
+
</button>
1377
+
)
1378
+
))}
1379
+
<button
1380
+
onClick={() => {
1381
+
if (pageNum < Math.ceil(pdsList.length / pageSize)) {
1382
+
setPageNum(pageNum + 1);
1383
+
}
1384
+
}}
1385
+
disabled={pageNum >= Math.ceil(pdsList.length / pageSize)}
1386
+
className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-pointer"
1387
+
>
1388
+
<span className="sr-only">Next</span>
1389
+
<ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
1390
+
</button>
1391
+
</nav>
1392
+
</div>
1393
+
</div>
1394
+
</div>
1395
+
)}
1293
1396
</div>
1294
1397
{
1295
1398
modalAction && (