diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx index a148c4082..b69b25731 100644 --- a/Client/src/Components/Inputs/Search/index.jsx +++ b/Client/src/Components/Inputs/Search/index.jsx @@ -9,12 +9,13 @@ import SearchIcon from "../../../assets/icons/search.svg?react"; * @param {Object} props * @param {string} props.id - Unique identifier for the Autocomplete component * @param {Array} props.options - Options to display in the Autocomplete dropdown + * @param {string} props.filteredBy - Key to access the option label from the options * @param {string} props.value - Current input value for the Autocomplete * @param {Function} props.handleChange - Function to call when the input changes * @param {Object} props.sx - Additional styles to apply to the component * @returns {JSX.Element} The rendered Search component */ -const Search = ({ id, options, value, handleChange, sx }) => { +const Search = ({ id, options, filteredBy, value, handleChange, sx }) => { const theme = useTheme(); return ( @@ -28,7 +29,7 @@ const Search = ({ id, options, value, handleChange, sx }) => { freeSolo disableClearable options={options} - getOptionLabel={(option) => option.name} + getOptionLabel={(option) => option[filteredBy]} renderInput={(params) => ( { )} filterOptions={(options, { inputValue }) => { const filtered = options.filter((option) => - option.name.toLowerCase().includes(inputValue.toLowerCase()) + option[filteredBy].toLowerCase().includes(inputValue.toLowerCase()) ); if (filtered.length === 0) { - return [{ name: "No monitors found", noOptions: true }]; + return [{ [filteredBy]: "No monitors found", noOptions: true }]; } return filtered; }} @@ -91,7 +92,7 @@ const Search = ({ id, options, value, handleChange, sx }) => { : {} } > - {option.name} + {option[filteredBy]} ); }} @@ -127,11 +128,8 @@ const Search = ({ id, options, value, handleChange, sx }) => { Search.propTypes = { id: PropTypes.string, - options: PropTypes.arrayOf( - PropTypes.shape({ - name: PropTypes.string.isRequired, - }) - ).isRequired, + options: PropTypes.array.isRequired, + filteredBy: PropTypes.string.isRequired, value: PropTypes.string.isRequired, handleChange: PropTypes.func.isRequired, sx: PropTypes.object, diff --git a/Client/src/Components/Search/index.css b/Client/src/Components/Search/index.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/Client/src/Components/Search/index.jsx b/Client/src/Components/Search/index.jsx deleted file mode 100644 index 391b95c02..000000000 --- a/Client/src/Components/Search/index.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import Autocomplete from '@mui/material/Autocomplete'; -import TextField from '@mui/material/TextField'; -import Chip from '@mui/material/Chip'; -import Box from '@mui/material/Box'; -import { useTheme } from "@mui/material"; - -const teamMembers = [ - { title: 'John Doe'}, - { title: 'Jane Smith'}, - { title: 'Alex Johnson'}, -]; - -/** - * @component - * @returns {JSX.Element} - */ - -export default function Search() - { - const theme = useTheme(); - return ( - {/* Add padding to the container */} - option.title} - filterSelectedOptions - renderInput={(params) => ( - - )} - renderTags={(value, getTagProps) => - value.map((option) => ( - - )) - } - /> - - ); -} diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx index 36921d1f5..d51c3de2a 100644 --- a/Client/src/Pages/Monitors/Home/index.jsx +++ b/Client/src/Pages/Monitors/Home/index.jsx @@ -120,6 +120,7 @@ const Monitors = ({ isAdmin }) => {