this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add pagination to relay dash (#941)

authored by

Jaz and committed by
GitHub
81637f14 fa14a2fa

+109 -8
+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
··· 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 && (