mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-26 03:39:27 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #577 from bluewave-labs/fix/pagination-styling

Browse Source 
Fixed pagination styling
This commit is contained in:
Alexander Holliday
2024-08-08 20:30:39 -07:00
committed by GitHub
parent 7e30be9085 6d5cc931d0
commit a979b9550c
2 changed files with 71 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
View File

@@ -80,7 +80,7 @@ export const updatePageSpeed = createAsyncThunk(
// notifications: monitor.notifications,
};
const res = await axiosInstance.put(
`/monitors/edit/${monitor._id}`,
`/monitors/${monitor._id}`,
updatedFields,
{
headers: {

122
Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
View File

@@ -8,12 +8,17 @@ import {
TableBody,
TableFooter,
TablePagination,
PaginationItem,
Pagination,
Paper,
} from "@mui/material";
import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import axiosInstance from "../../../../Utils/axiosConfig";
import { StatusLabel } from "../../../../Components/Label";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
const PaginationTable = ({ monitorId, filter }) => {
const { authToken } = useSelector((state) => state.auth);
@@ -53,63 +58,76 @@ const PaginationTable = ({ monitorId, filter }) => {
const handlePageChange = (_, newPage) => {
setPaginationController({
...paginationController,
page: newPage,
});
};
const handleChangeRowsPerPage = (event) => {
setPaginationController({
...paginationController,
rowsPerPage: parseInt(event.target.value, 10),
page: 0,
page: newPage - 1,
});
};
let paginationComponent = <></>;
if (checksCount > paginationController.rowsPerPage) {
paginationComponent = (
<Pagination
count={Math.ceil(checksCount / paginationController.rowsPerPage)}
page={paginationController.page + 1}
onChange={handlePageChange}
shape="rounded"
renderItem={(item) => (
<PaginationItem
slots={{
previous: ArrowBackRoundedIcon,
next: ArrowForwardRoundedIcon,
}}
{...item}
sx={{
"&:focus": {
outline: "none",
},
"& .MuiTouchRipple-root": {
pointerEvents: "none",
display: "none",
},
}}
/>
)}
/>
);
}
return (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Status</TableCell>
<TableCell>Date & Time</TableCell>
<TableCell>Message</TableCell>
</TableRow>
</TableHead>
<TableBody>
{checks.map((check) => {
const status = check.status === true ? "up" : "down";
<>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Status</TableCell>
<TableCell>Date & Time</TableCell>
<TableCell>Message</TableCell>
</TableRow>
</TableHead>
<TableBody>
{checks.map((check) => {
const status = check.status === true ? "up" : "down";
return (
<TableRow key={check._id}>
<TableCell>
<StatusLabel
status={status}
text={status}
customStyles={{ textTransform: "capitalize" }}
/>
</TableCell>
<TableCell>
{new Date(check.createdAt).toLocaleString()}
</TableCell>
<TableCell>{check.statusCode}</TableCell>
</TableRow>
);
})}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
onPageChange={handlePageChange}
page={paginationController.page}
count={checksCount}
rowsPerPage={paginationController.rowsPerPage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
return (
<TableRow key={check._id}>
<TableCell>
<StatusLabel
status={status}
text={status}
customStyles={{ textTransform: "capitalize" }}
/>
</TableCell>
<TableCell>
{new Date(check.createdAt).toLocaleString()}
</TableCell>
<TableCell>{check.statusCode}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
{paginationComponent}
</>
);
};