sonika/sony_intranet_remake2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

search feature for intranet screen

Browse Source
This commit is contained in:
Sonika 2023-12-27 12:37:43 +05:30
parent 995643abd5
commit 12017afe52
2 changed files with 74 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.css
View File

@ -32,3 +32,9 @@
padding-top: 6.5px !important;
padding-bottom: 6.5px !important;
}
.table-header-bottomBorder-style .css-1ygcj2i-MuiTableCell-root{
/* background-color: #171716 !important; */
/* color:white ; */
border-bottom: 1px solid rgb(45 51 59) !important;
}

77
src/components/intranet_users/IntranetUsers.tsx
View File

@ -17,11 +17,14 @@ import {
DialogContent,
DialogActions,
TablePagination,
Grid,
InputAdornment,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import AddIcon from '@mui/icons-material/Add';
import { postNewIntranetUsersData } from "../../APIs/IntranetUsersAPIs/postAddUser";
import { AccountCircle } from "@mui/icons-material";
import SearchIcon from '@mui/icons-material/Search';
const StyledTextField = (props:any) => (
@ -52,7 +55,7 @@ const StyledTextField = (props:any) => (
}
export default function IntranetUsers(){
const [manageUsersData,setManageUsersData] = useState<any>()
const [searchByFilterOnBlur,setSearchByFilterOnBlur] = useState<any>()
const { data: manageUsersResponse, isLoading, isError } = useGetIntranetUsersData();
const [data, setData] = useState<Row[]>([]);
const [open, setOpen] = useState(false);
@ -60,6 +63,20 @@ export default function IntranetUsers(){
const [newRow, setNewRow] = useState<any>();
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const [filteredData, setFilteredData] = useState<Row[]>([]);
useEffect(() => {
if (searchByFilterOnBlur) {
// Filter data based on the username
const filtered = manageUsersResponse?.filter((row: any) =>
row.username.toLowerCase().includes(searchByFilterOnBlur.toLowerCase())
);
setFilteredData(filtered || []);
} else {
// If search input is empty, show all data
setFilteredData(manageUsersResponse || []);
}
}, [searchByFilterOnBlur, manageUsersResponse]);
useEffect(()=>{
if (!open){
@ -125,6 +142,51 @@ export default function IntranetUsers(){
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
<Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
<TableContainer component={Paper}>
<TableRow sx={{bgcolor:'#171716 !important',borderBottom:'#171716',width:'100%', display:'flex',flexDirection:'row-reverse'}}>
<TableCell className="no-padding-cell" sx={{borderBottom:'black'}}>
<TextField
id="standard-name"
variant="standard"
InputProps={{
startAdornment: (
<InputAdornment sx={{fontSize: 40}} position="start">
<SearchIcon sx={{color:'white'}}/>
</InputAdornment>
),
}}
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..."
/>
</TableCell>
</TableRow>
<Table>
<TableHead className="manageusers-table-header-style">
<TableRow>
@ -133,28 +195,25 @@ export default function IntranetUsers(){
New
</Button>
</TableCell>
<TableCell className="no-padding-cell">Name</TableCell>
<TableCell className="no-padding-cell table-header-bottomBorder-style">Name</TableCell>
<TableCell className="no-padding-cell">Role</TableCell>
<TableCell className="no-padding-cell">Active</TableCell>
</TableRow>
</TableHead>
<TableBody>
{manageUsersResponse && manageUsersResponse.map((row:any) => (
{filteredData && filteredData.map((row:any) => (
<TableRow key={row.id} sx={{height:'20px'}}>
<TableCell className="no-padding-cell">
<IconButton onClick={() => handleEdit(row)} aria-label="edit">
<EditIcon sx={{ color: 'white' }}/>
</IconButton>
{/* <IconButton onClick={() => handleDelete(row.id)} aria-label="delete">
<DeleteIcon sx={{ color: 'white' }}/>
</IconButton> */}
</TableCell>
<TableCell className="no-padding-cell">{row.username}</TableCell>
<TableCell className="no-padding-cell">{row.role}</TableCell>
{row.active==1?
<TableCell className="no-padding-cell" sx={{color:'green', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Active</TableCell>
<TableCell className="no-padding-cell" sx={{color:'green', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Active</TableCell>
:
<TableCell className="no-padding-cell" sx={{color:'red', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Inactive</TableCell>}
<TableCell className="no-padding-cell" sx={{color:'red', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Inactive</TableCell>}
</TableRow>
))}
</TableBody>