diff --git a/src/components/manage_users/ManageUsers.tsx b/src/components/manage_users/ManageUsers.tsx index 9d6bf6f..1863cfb 100644 --- a/src/components/manage_users/ManageUsers.tsx +++ b/src/components/manage_users/ManageUsers.tsx @@ -17,8 +17,9 @@ import { DialogContent, DialogActions, TablePagination, + InputAdornment, } from '@mui/material'; -import DeleteIcon from '@mui/icons-material/Delete'; +import SearchIcon from '@mui/icons-material/Search'; import EditIcon from '@mui/icons-material/Edit'; import AddIcon from '@mui/icons-material/Add'; import { postNewManageUsersData } from "../../APIs/ManageUsersAPIs/postAddUser"; @@ -61,6 +62,23 @@ export default function ManageUsers(){ const [newRow, setNewRow] = useState(); const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(10); + const [filteredData, setFilteredData] = useState([]); + const [searchByFilterOnBlur,setSearchByFilterOnBlur] = useState() + + + useEffect(() => { + if (searchByFilterOnBlur) { + // Filter data based on the username + const filtered = manageUsersResponse?.filter((row: any) => + row.username.toLowerCase().includes(searchByFilterOnBlur.toLowerCase()) || + (row.email_id && row.email_id.toLowerCase().includes(searchByFilterOnBlur.toLowerCase())) + ); + setFilteredData(filtered || []); + } else { + // If search input is empty, show all data + setFilteredData(manageUsersResponse || []); + } + }, [searchByFilterOnBlur, manageUsersResponse]); useEffect(()=>{ if (!open){ @@ -126,6 +144,51 @@ export default function ManageUsers(){ + + + + + + ), + }} + value={searchByFilterOnBlur} + onChange={(e)=>{ + setSearchByFilterOnBlur(e.target.value); + }} + sx={{input: { color: 'white' }, + "& label": { + color: "white" + }, + "& label.Mui-focused": { + color: "white" + }, + "& .MuiInput-underline:after": { + borderBottomColor: "white" + }, + "& .MuiOutlinedInput-root": { + "& fieldset": { + borderColor: "white" + }}, + "&:hover fieldset": { + borderColor: "white", + borderWidth: 2 + }, + "&.Mui-focused fieldset": { + borderColor: "white" + }, + margin:1, + // marginTop:3 + + }} + placeholder="Search..." + /> + + @@ -141,7 +204,7 @@ export default function ManageUsers(){ - {manageUsersResponse && manageUsersResponse.map((row:any) => ( + {filteredData && filteredData.map((row:any) => ( handleEdit(row)} aria-label="edit">