From 7b5d49c0e2a0cbc7d25c0215930b37e6623a662d Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 22 Jan 2025 12:40:29 -0800 Subject: [PATCH] Fix maintenace table and colors --- Client/src/Components/Inputs/Search/index.jsx | 9 + Client/src/Components/Table/index.jsx | 2 +- .../Maintenance/CreateMaintenance/index.jsx | 2 +- .../Maintenance/MaintenanceTable/index.jsx | 366 +++++------------- 4 files changed, 118 insertions(+), 261 deletions(-) diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx index bbc1ab614..1dff6b532 100644 --- a/Client/src/Components/Inputs/Search/index.jsx +++ b/Client/src/Components/Inputs/Search/index.jsx @@ -104,6 +104,14 @@ const Search = ({ "& .MuiOutlinedInput-root": { paddingY: 0, }, + "& .MuiAutocomplete-tag": { + // CAIO_REVIEW + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.lowContrast, + }, + "& .MuiChip-deleteIcon": { + color: theme.palette.primary.contrastText, // CAIO_REVIEW + }, }} /> {error && ( @@ -165,6 +173,7 @@ const Search = ({ "& .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected='true'], & .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected='true'].Mui-focused, & .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected='true']:hover": { backgroundColor: theme.palette.primary.lowContrast, + color: "red", }, "& li.MuiAutocomplete-option:hover:not([aria-selected='true'])": { color: theme.palette.primary.main, diff --git a/Client/src/Components/Table/index.jsx b/Client/src/Components/Table/index.jsx index 3d170f440..7a7048ab8 100644 --- a/Client/src/Components/Table/index.jsx +++ b/Client/src/Components/Table/index.jsx @@ -87,7 +87,7 @@ const DataTable = ({ headers, data, config = { emptyView: "No data" } }) => { config?.onRowClick(row)} + onClick={config?.onRowClick ? () => config.onRowClick(row) : null} > {headers.map((header, index) => { return ( diff --git a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx index 7b8efa20d..cacc0e8d5 100644 --- a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx +++ b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx @@ -412,7 +412,7 @@ const CreateMaintenance = () => { backgroundColor: theme.palette.accent.light, // Hover background }, "&.Mui-disabled": { - color: theme.palette.primary.lowContrast, // Disabled day color + color: theme.palette.primary.ContrastTextTertiary, // Disabled day color }, }, "& .MuiDayCalendar-weekDayLabel": { diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx index 775d3d954..9bdce5887 100644 --- a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx +++ b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx @@ -1,34 +1,16 @@ import PropTypes from "prop-types"; -import { - TableContainer, - Table, - TableHead, - TableRow, - TableCell, - TableBody, - Paper, - Box, - TablePagination, - Stack, - Typography, - Button, -} from "@mui/material"; +import { Box } from "@mui/material"; +import DataTable from "../../../Components/Table"; +import Pagination from "../../../Components/Table/TablePagination"; import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded"; import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded"; import ActionsMenu from "./ActionsMenu"; -import { useState, useEffect, memo, useCallback, useRef } from "react"; +import { memo } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { useTheme } from "@emotion/react"; -import LeftArrowDouble from "../../../assets/icons/left-arrow-double.svg?react"; -import RightArrowDouble from "../../../assets/icons/right-arrow-double.svg?react"; -import LeftArrow from "../../../assets/icons/left-arrow.svg?react"; -import RightArrow from "../../../assets/icons/right-arrow.svg?react"; -import SelectorVertical from "../../../assets/icons/selector-vertical.svg?react"; import { formatDurationRounded } from "../../../Utils/timeUtils"; import { StatusLabel } from "../../../Components/Label"; import { setRowsPerPage } from "../../../Features/UI/uiSlice"; import dayjs from "dayjs"; - /** * Component for pagination actions (first, previous, next, last). * @@ -41,65 +23,6 @@ import dayjs from "dayjs"; * * @returns {JSX.Element} Pagination actions component. */ -const TablePaginationActions = (props) => { - const { count, page, rowsPerPage, onPageChange } = props; - const handleFirstPageButtonClick = (event) => { - onPageChange(event, 0); - }; - const handleBackButtonClick = (event) => { - onPageChange(event, page - 1); - }; - const handleNextButtonClick = (event) => { - onPageChange(event, page + 1); - }; - const handleLastPageButtonClick = (event) => { - onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1)); - }; - - return ( - - - - - - - ); -}; - -TablePaginationActions.propTypes = { - count: PropTypes.number.isRequired, - page: PropTypes.number.isRequired, - rowsPerPage: PropTypes.number.isRequired, - onPageChange: PropTypes.func.isRequired, -}; const MaintenanceTable = ({ page, @@ -111,13 +34,102 @@ const MaintenanceTable = ({ updateCallback, }) => { const { rowsPerPage } = useSelector((state) => state.ui.maintenance); - const theme = useTheme(); + console.log(rowsPerPage); const dispatch = useDispatch(); const handleChangePage = (event, newPage) => { setPage(newPage); }; + const handleChangeRowsPerPage = (event) => { + dispatch( + setRowsPerPage({ + value: parseInt(event.target.value, 10), + table: "maintenance", + }) + ); + setPage(0); + }; + + const headers = [ + { + id: "name", + content: ( + handleSort("name")}> + Maintenance Window Name + + {sort.order === "asc" ? ( + + ) : ( + + )} + + + ), + render: (row) => row.name, + }, + { + id: "status", + content: ( + handleSort("status")}> + {" "} + Status + + {sort.order === "asc" ? ( + + ) : ( + + )} + + + ), + render: (row) => { + const status = row.active ? "up" : "paused"; + const text = row.active ? "active" : "paused"; + + return ( + + ); + }, + }, + { + id: "nextWindow", + content: "Next window", + render: (row) => { + return getTimeToNextWindow(row.start, row.end, row.repeat); + }, + }, + { + id: "repeat", + content: "Repeat", + render: (row) => { + return row.repeat === 0 ? "N/A" : formatDurationRounded(row.repeat); + }, + }, + { + id: "actions", + content: "Actions", + render: (row) => ( + + ), + }, + ]; + const getTimeToNextWindow = (startTime, endTime, repeat) => { //1. Advance time closest to next window as possible const now = dayjs(); @@ -153,26 +165,6 @@ const MaintenanceTable = ({ } }; - const handleChangeRowsPerPage = (event) => { - dispatch( - setRowsPerPage({ - value: parseInt(event.target.value, 10), - table: "maintenance", - }) - ); - setPage(0); - }; - - /** - * Helper function to calculate the range of displayed rows. - * @returns {string} - */ - const getRange = () => { - let start = page * rowsPerPage + 1; - let end = Math.min(page * rowsPerPage + rowsPerPage, maintenanceWindowCount); - return `${start} - ${end}`; - }; - const handleSort = async (field) => { let order = ""; if (sort.field !== field) { @@ -183,165 +175,21 @@ const MaintenanceTable = ({ setSort({ field, order }); }; + console.log(handleChangePage); + return ( <> - - - - - handleSort("name")} - > - - Maintenance Window Name - - {sort.order === "asc" ? ( - - ) : ( - - )} - - - - handleSort("status")} - > - {" "} - - {" "} - Status - - {sort.order === "asc" ? ( - - ) : ( - - )} - - - - Next Window - Repeat - Actions - - - - {maintenanceWindows.map((maintenanceWindow) => { - const text = maintenanceWindow.active ? "active" : "paused"; - const status = maintenanceWindow.active ? "up" : "paused"; - return ( - - {maintenanceWindow.name} - - - - - {getTimeToNextWindow( - maintenanceWindow.start, - maintenanceWindow.end, - maintenanceWindow.repeat - )} - - - {maintenanceWindow.repeat === 0 - ? "N/A" - : formatDurationRounded(maintenanceWindow.repeat)} - - - - - - ); - })} - -
- - - - Showing {getRange()} of {maintenanceWindowCount} maintenance window(s) - - - `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}` - } - slotProps={{ - select: { - MenuProps: { - keepMounted: true, - disableScrollLock: true, - PaperProps: { - className: "pagination-dropdown", - sx: { - mt: 0, - mb: theme.spacing(2), - }, - }, - transformOrigin: { vertical: "bottom", horizontal: "left" }, - anchorOrigin: { vertical: "top", horizontal: "left" }, - sx: { mt: theme.spacing(-2) }, - }, - inputProps: { id: "pagination-dropdown" }, - IconComponent: SelectorVertical, - sx: { - ml: theme.spacing(4), - mr: theme.spacing(12), - minWidth: theme.spacing(20), - textAlign: "left", - "&.Mui-focused > div": { - backgroundColor: theme.palette.primary.main, - }, - }, - }, - }} - sx={{ - mt: theme.spacing(6), - color: theme.palette.primary.contrastTextSecondary, - "& svg path": { - stroke: theme.palette.primary.contrastTextTertiary, - strokeWidth: 1.3, - }, - "& .MuiSelect-select": { - border: 1, - borderColor: theme.palette.primary.lowContrast, - borderRadius: theme.shape.borderRadius, - }, - }} - /> - + + ); };