Improve pagination for Active Scripts page (#763)

This commit is contained in:
Michael Ficocelli 2023-08-31 20:31:48 -04:00 committed by GitHub
parent 7c82221a13
commit ae87851889
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 29 deletions

@ -25,16 +25,20 @@ export function ServerAccordionContent(props: IProps): React.ReactElement {
return ( return (
<> <>
<TablePagination {props.workerScripts.length > 10 ? (
rowsPerPageOptions={[10, 15, 20, 100]} <TablePagination
component="div" rowsPerPageOptions={[10, 15, 20, 100]}
count={props.workerScripts.length} component="div"
rowsPerPage={rowsPerPage} count={props.workerScripts.length}
page={page} rowsPerPage={rowsPerPage}
onPageChange={handleChangePage} page={page}
onRowsPerPageChange={handleChangeRowsPerPage} onPageChange={handleChangePage}
ActionsComponent={TablePaginationActionsAll} onRowsPerPageChange={handleChangeRowsPerPage}
/> ActionsComponent={TablePaginationActionsAll}
/>
) : (
""
)}
<List dense disablePadding> <List dense disablePadding>
{props.workerScripts.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((ws) => ( {props.workerScripts.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((ws) => (
<WorkerScriptAccordion key={`${ws.pid}`} workerScript={ws} /> <WorkerScriptAccordion key={`${ws.pid}`} workerScript={ws} />

@ -9,6 +9,7 @@ import { ServerAccordion } from "./ServerAccordion";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import List from "@mui/material/List"; import List from "@mui/material/List";
import TablePagination from "@mui/material/TablePagination"; import TablePagination from "@mui/material/TablePagination";
import Grid from "@mui/material/Grid";
import { WorkerScript } from "../../Netscript/WorkerScript"; import { WorkerScript } from "../../Netscript/WorkerScript";
import { GetServer } from "../../Server/AllServers"; import { GetServer } from "../../Server/AllServers";
import { BaseServer } from "../../Server/BaseServer"; import { BaseServer } from "../../Server/BaseServer";
@ -88,25 +89,38 @@ export function ServerAccordions(props: IProps): React.ReactElement {
return ( return (
<> <>
<TextField <Grid container>
value={filter} <Grid item xs={4}>
onChange={handleFilterChange} <TextField
autoFocus value={filter}
InputProps={{ onChange={handleFilterChange}
startAdornment: <SearchIcon />, autoFocus
spellCheck: false, InputProps={{
}} startAdornment: <SearchIcon />,
/> spellCheck: false,
<TablePagination }}
rowsPerPageOptions={[10, 15, 20, 100]} style={{
component="div" paddingTop: "8px",
count={filtered.length} }}
rowsPerPage={rowsPerPage} />
page={page} </Grid>
onPageChange={handleChangePage} <Grid item xs={8}>
onRowsPerPageChange={handleChangeRowsPerPage} {filtered.length > 10 ? (
ActionsComponent={TablePaginationActionsAll} <TablePagination
/> rowsPerPageOptions={[10, 15, 20, 100]}
component="div"
count={filtered.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
ActionsComponent={TablePaginationActionsAll}
/>
) : (
""
)}
</Grid>
</Grid>
<List dense={true}> <List dense={true}>
{filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((data) => { {filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((data) => {
return ( return (