TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored old select components

Browse Source
This commit is contained in:
Daniel Cojocea committed 2024-07-24 14:09:24 -04:00
1 parent a49cf7cc6e
commit 6f668942d6
10 files changed
+142 -237
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/Inputs/Select/index.css
+8 -4
View File
@@ -1,13 +1,17 @@
.select-component > .MuiSelect-select {
.select-wrapper .select-component > .MuiSelect-select {
padding: 0 10px;
height: 34px !important;
display: flex !important;
align-items: center;
text-transform: capitalize;
line-height: 1;
}
.MuiInputBase-root:has(> .MuiSelect-select) {
.select-wrapper .MuiInputBase-root:has(> .MuiSelect-select) {
min-width: 150px;
}
.MuiInputBase-root:has(> .MuiSelect-select),
.MuiMenu-List .MuiMenuItem-root {
.select-wrapper .MuiInputBase-root:has(> .MuiSelect-select),
.MuiMenu-List .MuiMenuItem-root,
.select-wrapper h3.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
color: var(--env-var-color-5);
}
Client/src/Components/Inputs/Select/index.jsx
+67 -47
View File
@@ -1,6 +1,11 @@
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
import { MenuItem, Select as MuiSelect } from "@mui/material";
import {
MenuItem,
Select as MuiSelect,
Stack,
Typography,
} from "@mui/material";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import "./index.css";
@@ -9,6 +14,7 @@ import "./index.css";
* @component
* @param {object} props
* @param {string} props.id - The ID attribute for the select element.
* @param {string} props.placeholder - The label of the select element.
* @param {string} props.placeholder - The placeholder text when no option is selected.
* @param {boolean} props.isHidden - Whether the placeholder should be hidden.
* @param {string} props.value - The currently selected value.
@@ -20,7 +26,16 @@ import "./index.css";
* @returns {JSX.Element}
*/
const Select = ({ id, placeholder, isHidden, value, items, onChange, sx }) => {
const Select = ({
id,
label,
placeholder,
isHidden,
value,
items,
onChange,
sx,
}) => {
const theme = useTheme();
const itemStyles = {
fontSize: "var(--env-var-font-size-medium)",
@@ -31,61 +46,66 @@ const Select = ({ id, placeholder, isHidden, value, items, onChange, sx }) => {
};
return (
<MuiSelect
id={id}
className="select-component"
value={value}
onChange={onChange}
displayEmpty
MenuProps={{
PaperProps: {
style: {
marginTop: theme.gap.xs,
<Stack gap={theme.gap.xs} className="select-wrapper">
{label && <Typography component="h3">{label}</Typography>}
<MuiSelect
className="select-component"
value={value}
onChange={onChange}
displayEmpty
inputProps={{ id: id }}
MenuProps={{
PaperProps: {
className: "select-dropdown",
style: {
marginTop: theme.gap.xs,
},
},
},
MenuListProps: {
style: { padding: 0 },
},
}}
IconComponent={KeyboardArrowDownIcon}
sx={{ ...sx }}
>
{placeholder && (
<MenuItem
className="select-placeholder"
value="0"
sx={{
display: isHidden ? "none" : "flex",
visibility: isHidden ? "none" : "visible",
...itemStyles,
}}
>
{placeholder}
</MenuItem>
)}
{items.map((item) => (
<MenuItem
value={item._id}
key={`${id}-${item._id}`}
sx={{
...itemStyles,
}}
>
{item.name}
</MenuItem>
))}
</MuiSelect>
MenuListProps: {
style: { padding: 0 },
},
}}
IconComponent={KeyboardArrowDownIcon}
sx={{ ...sx }}
>
{placeholder && (
<MenuItem
className="select-placeholder"
value="0"
sx={{
display: isHidden ? "none" : "flex",
visibility: isHidden ? "none" : "visible",
...itemStyles,
}}
>
{placeholder}
</MenuItem>
)}
{items.map((item) => (
<MenuItem
value={item._id}
key={`${id}-${item._id}`}
sx={{
...itemStyles,
}}
>
{item.name}
</MenuItem>
))}
</MuiSelect>
</Stack>
);
};
Select.propTypes = {
id: PropTypes.string.isRequired,
label: PropTypes.string,
placeholder: PropTypes.string,
isHidden: PropTypes.bool,
value: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
items: PropTypes.arrayOf(
PropTypes.shape({
_id: PropTypes.string.isRequired,
_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
name: PropTypes.string.isRequired,
})
).isRequired,
Client/src/Components/TabPanels/Account/TeamPanel.jsx
+10 -45
View File
@@ -5,9 +5,7 @@ import {
ButtonGroup,
Divider,
IconButton,
MenuItem,
Modal,
Select,
Stack,
TextField,
Typography,
@@ -18,12 +16,12 @@ import { useEffect, useState } from "react";
import EditSvg from "../../../assets/icons/edit.svg?react";
import Field from "../../Inputs/Field";
import { credentials } from "../../../Validation/validation";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import axiosInstance from "../../../Utils/axiosConfig";
import { createToast } from "../../../Utils/toastUtils";
import { useSelector } from "react-redux";
import BasicTable from "../../BasicTable";
import Remove from "../../../assets/icons/trash-bin.svg?react";
import Select from "../../Inputs/Select";
/**
* TeamPanel component manages the organization and team members,
@@ -44,7 +42,7 @@ const TeamPanel = () => {
});
const [toInvite, setToInvite] = useState({
email: "",
role: [""],
role: ["0"],
});
const [tableData, setTableData] = useState({});
const [members, setMembers] = useState([]);
@@ -202,7 +200,7 @@ const TeamPanel = () => {
};
const closeInviteModal = () => {
setIsOpen(false);
setToInvite({ email: "", role: [""] });
setToInvite({ email: "", role: ["0"] });
setErrors({});
};
@@ -377,6 +375,8 @@ const TeamPanel = () => {
/>
<Select
id="team-member-role"
placeholder="Select role"
isHidden={true}
value={toInvite.role[0]}
onChange={(event) =>
setToInvite((prev) => ({
@@ -384,46 +384,11 @@ const TeamPanel = () => {
role: [event.target.value],
}))
}
displayEmpty
MenuProps={{
PaperProps: {
style: {
marginTop: theme.gap.xs,
},
},
MenuListProps: {
style: { padding: 0 },
},
}}
IconComponent={KeyboardArrowDownIcon}
sx={{ mt: theme.gap.xs }}
>
<MenuItem disableRipple id="role-default" value="">
Select role
</MenuItem>
<MenuItem
disableRipple
value="admin"
sx={{
fontSize: "13px",
borderRadius: `${theme.shape.borderRadius}px`,
margin: theme.gap.xs,
}}
>
Admin
</MenuItem>
<MenuItem
disableRipple
value="user"
sx={{
fontSize: "13px",
borderRadius: `${theme.shape.borderRadius}px`,
margin: theme.gap.xs,
}}
>
User
</MenuItem>
</Select>
items={[
{ _id: "admin", name: "admin" },
{ _id: "user", name: "user" },
]}
/>
<Stack
direction="row"
gap={theme.gap.small}
Client/src/Pages/Account/index.css
-34
View File
@@ -67,23 +67,6 @@
align-items: center;
}
#select-actions,
#select-role {
padding: 5px 0;
padding-left: 15px;
padding-right: 50px;
line-height: 1.75;
}
.MuiInputBase-root:has(#select-actions) fieldset,
.MuiInputBase-root:has(#select-role) fieldset {
border-color: #a1a7b1;
margin: -1px;
border-width: 1px;
}
.MuiInputBase-root:has(#select-actions):hover fieldset,
.MuiInputBase-root:has(#select-role):hover fieldset {
border-color: var(--env-var-color-2);
}
/* for testing, will remove later */
@media only screen and (max-width: 1600px) {
@@ -111,23 +94,6 @@
margin: 0;
}
#role-default {
display: none;
visibility: none;
}
.MuiInputBase-root:has(#team-member-role) {
height: 34px;
}
#team-member-role {
padding: 0 10px;
height: 100%;
display: flex;
align-items: center;
}
.MuiInputBase-root:not(.Mui-focused):has(#team-member-role):hover fieldset {
border-color: var(--env-var-color-29);
}
.edit-organization-form {
display: flex;
align-items: center;
Client/src/Pages/Incidents/index.jsx
-1
View File
@@ -119,7 +119,6 @@ const Incidents = () => {
value={selectedMonitor}
onChange={handleSelect}
items={Object.values(monitors)}
field="name"
/>
<ButtonGroup sx={{ ml: "auto" }}>
<Button
Client/src/Pages/Monitors/Configure/index.css
+5
View File
@@ -69,4 +69,9 @@
display: flex;
flex-direction: column;
gap: var(--env-var-spacing-4);
}
body:has(.configure-monitor) .select-dropdown .MuiMenuItem-root,
.configure-monitor .select-wrapper .select-component > .MuiSelect-select {
text-transform: lowercase;
}
Client/src/Pages/Monitors/Configure/index.jsx
+16 -37
View File
@@ -5,15 +5,15 @@ import { useEffect, useState } from "react";
import Button from "../../../Components/Button";
import Field from "../../../Components/Inputs/Field";
import RadioButton from "../../../Components/RadioButton";
import { Box, MenuItem, Select, Stack, Typography } from "@mui/material";
import { Box, MenuItem, Stack, Typography } from "@mui/material";
import WestRoundedIcon from "@mui/icons-material/WestRounded";
import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import "./index.css";
import { monitorValidation } from "../../../Validation/validation";
import Select from "../../../Components/Inputs/Select";
const formatDurationRounded = (ms) => {
const seconds = Math.floor(ms / 1000);
@@ -119,7 +119,13 @@ const Configure = () => {
// TODO
};
const frequencies = [1, 2, 3, 4, 5];
const frequencies = [
{ _id: 1, name: "1 minute" },
{ _id: 2, name: "2 minutes" },
{ _id: 3, name: "3 minutes" },
{ _id: 4, name: "4 minutes" },
{ _id: 5, name: "5 minutes" },
];
return (
<div
@@ -284,40 +290,13 @@ const Configure = () => {
<Typography component="h2">Advanced settings</Typography>
</Box>
<Stack gap={theme.gap.xl}>
<Box>
<Typography component="p" mb={theme.gap.small}>
Check frequency
</Typography>
<Select
id="monitor-interval"
value={monitor?.interval || 1}
inputProps={{ id: "monitor-interval-select" }}
MenuProps={{
PaperProps: {
style: {
marginTop: "10px",
},
},
}}
IconComponent={KeyboardArrowDownIcon}
onChange={(event) => handleChange(event, "interval")}
>
{frequencies.map((freq) => (
<MenuItem
key={`port-${freq}`}
value={freq}
disableRipple
sx={{
fontSize: "13px",
borderRadius: `${theme.shape.borderRadius}px`,
margin: theme.gap.xs,
}}
>
{freq} {freq === 1 ? "minute" : "minutes"}
</MenuItem>
))}
</Select>
</Box>
<Select
id="monitor-interval-configure"
label="Check frequency"
value={monitor?.interval || 1}
onChange={(event) => handleChange(event, "interval")}
items={frequencies}
/>
</Stack>
</Stack>
<Stack direction="row" justifyContent="flex-end">
Client/src/Pages/Monitors/CreateMonitor/index.css
+7 -19
View File
@@ -10,14 +10,12 @@
font-size: var(--env-var-font-size-large);
}
.create-monitor p.MuiTypography-root,
.create-monitor button.MuiButtonBase-root,
#monitor-frequencies {
.create-monitor button.MuiButtonBase-root {
font-size: var(--env-var-font-size-medium);
}
.create-monitor h2.MuiTypography-root,
.create-monitor h6.MuiTypography-root,
.create-monitor p.MuiTypography-root,
#monitor-frequencies {
.create-monitor p.MuiTypography-root {
color: var(--env-var-color-2);
}
.create-monitor h6.MuiTypography-root {
@@ -36,21 +34,6 @@
position: absolute;
top: 0;
}
.create-monitor .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
padding: var(--env-var-spacing-1);
}
.create-monitor .MuiInputBase-root:has(#monitor-frequencies) {
min-width: 300px;
width: 100%;
height: 34px;
border: 1px solid var(--env-var-color-4);
border-radius: var(--env-var-radius-1);
overflow: hidden;
}
.create-monitor .MuiInputBase-root:has(#monitor-frequencies) fieldset {
outline: none;
border: none;
}
.create-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) {
position: relative;
}
@@ -75,4 +58,9 @@
display: flex;
flex-direction: column;
gap: var(--env-var-spacing-4);
}
body:has(.create-monitor) .select-dropdown .MuiMenuItem-root,
.create-monitor .select-wrapper .select-component > .MuiSelect-select {
text-transform: lowercase;
}
Client/src/Pages/Monitors/CreateMonitor/index.jsx
+18 -37
View File
@@ -2,7 +2,7 @@ import "./index.css";
import React, { useState } from "react";
import RadioButton from "../../../Components/RadioButton";
import Button from "../../../Components/Button";
import { Box, MenuItem, Select, Stack, Typography } from "@mui/material";
import { Box, MenuItem, Stack, Typography } from "@mui/material";
import { useSelector, useDispatch } from "react-redux";
import { monitorValidation } from "../../../Validation/validation";
import { createMonitor } from "../../../Features/Monitors/monitorsSlice";
@@ -10,6 +10,7 @@ import { useNavigate } from "react-router-dom";
import { useTheme } from "@emotion/react";
import WestRoundedIcon from "@mui/icons-material/WestRounded";
import Field from "../../../Components/Inputs/Field";
import Select from "../../../Components/Inputs/Select";
const CreateMonitor = () => {
const MS_PER_MINUTE = 60000;
@@ -125,7 +126,13 @@ const CreateMonitor = () => {
//select values
// const ports = ["Port 1", "Port 2", "Port 3"];
const frequencies = [1, 2, 3, 4, 5];
const frequencies = [
{ _id: 1, name: "1 minute" },
{ _id: 2, name: "2 minutes" },
{ _id: 3, name: "3 minutes" },
{ _id: 4, name: "4 minutes" },
{ _id: 5, name: "5 minutes" },
];
return (
<div
@@ -308,41 +315,15 @@ const CreateMonitor = () => {
<Typography component="h2">Advanced settings</Typography>
</Box>
<Stack gap={theme.gap.large}>
{/* TODO - refactor select component */}
<Box>
<Typography component="p" mb={theme.gap.small}>
Check frequency
</Typography>
<Select
id="monitor-frequencies"
value={advancedSettings.interval || 1}
inputProps={{ id: "monitor-frequencies-select" }}
onChange={(event) =>
handleChange(event, "interval", setAdvancedSettings)
}
MenuProps={{
PaperProps: {
style: {
marginTop: "10px",
},
},
}}
>
{frequencies.map((freq) => (
<MenuItem
key={`port-${freq}`}
value={freq}
sx={{
fontSize: "13px",
borderRadius: `${theme.shape.borderRadius}px`,
margin: "5px",
}}
>
{freq} {freq === 1 ? "minute" : "minutes"}
</MenuItem>
))}
</Select>
</Box>
<Select
id="monitor-interval"
label="Check frequency"
value={advancedSettings.interval || 1}
onChange={(event) =>
handleChange(event, "interval", setAdvancedSettings)
}
items={frequencies}
/>
{/* TODO */}
{/* <FlexibileTextField
id="monitor-settings-retries"
Client/src/Pages/Settings/index.jsx
+11 -13
View File
@@ -1,10 +1,11 @@
import { useTheme } from "@emotion/react";
import { Box, Stack, Typography } from "@mui/material";
import Button from "../../Components/Button";
import "./index.css";
import Field from "../../Components/Inputs/Field";
import Link from "../../Components/Link";
import Select from "../../Components/Inputs/Select";
import "./index.css";
const Settings = () => {
const theme = useTheme();
@@ -37,22 +38,19 @@ const Settings = () => {
</Typography>
</Box>
<Stack gap={theme.gap.xl}>
{/* TODO - build select component */}
<Field
type="text"
<Select
id="display-timezone"
label="Display timezone"
placeholder="America / Toronto"
value=""
onChange={() => console.log("Disabled")}
value="est"
onChange={() => console.log("disabled")}
items={[{ _id: "est", name: "America / Toronto" }]}
/>
<Field
type="text"
<Select
id="server-timezone"
label="Server timezone"
placeholder="America / Toronto"
value=""
onChange={() => console.log("Disabled")}
value="est"
onChange={() => console.log("disabled")}
items={[{ _id: "est", name: "America / Toronto" }]}
/>
</Stack>
</Stack>