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

manage users css and features

Browse Source
This commit is contained in:
Sonika 2023-12-18 15:12:51 +05:30
parent 3fa52f24b5
commit c55d3f23c6
2 changed files with 136 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.css
View File

@ -22,3 +22,12 @@
.select-field { .select-field {
width : 35%; width : 35%;
} }
.manageusers-table-header-style .css-1ygcj2i-MuiTableCell-root{
background-color: #171716;
color: white;
}
.activeCell {
color: green !important;
}

150
src/components/manage_users/ManageUsers.tsx
View File

@ -36,8 +36,8 @@ export default function ManageUsers(){
const { data: manageUsersResponse, isLoading, isError } = useGetUsersData(); const { data: manageUsersResponse, isLoading, isError } = useGetUsersData();
const [data, setData] = useState<Row[]>(initialData); const [data, setData] = useState<Row[]>(initialData);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [selectedRow, setSelectedRow] = useState<Row>({ id: 0, name: '', age: 0 }); const [selectedRow, setSelectedRow] = useState<any>();
const [newRow, setNewRow] = useState<Row>({ id: 0, name: '', age: 0 }); const [newRow, setNewRow] = useState<any>();
const handleEdit = (row: Row) => { const handleEdit = (row: Row) => {
setSelectedRow(row); setSelectedRow(row);
@ -78,22 +78,17 @@ export default function ManageUsers(){
setNewRow({ ...newRow, [name]: value }); setNewRow({ ...newRow, [name]: value });
}; };
console.log(manageUsersResponse,"dsjhgfsdugf")
return( return(
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}> <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' }}> <Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
<div> {/* <div> */}
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table> <Table>
<TableHead> <TableHead className="manageusers-table-header-style">
<TableRow> <TableRow>
<TableCell> <TableCell>
<Button variant="contained" startIcon={<AddIcon />} onClick={handleOpen}> <Button variant="contained" sx={{bgcolor:'white',color:'#1e1e1e', fontWeight:600}} startIcon={<AddIcon />} onClick={handleOpen}>
Add New Row New
</Button> </Button>
</TableCell> </TableCell>
<TableCell>Name</TableCell> <TableCell>Name</TableCell>
@ -116,47 +111,156 @@ export default function ManageUsers(){
<TableCell>{row.username}</TableCell> <TableCell>{row.username}</TableCell>
<TableCell>{row.email_id}</TableCell> <TableCell>{row.email_id}</TableCell>
<TableCell>{row.last_login}</TableCell> <TableCell>{row.last_login}</TableCell>
<TableCell>{row.active}</TableCell> <TableCell>{row.active==true?'Active':'Inactive'}</TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
<Dialog className='projectScreen-background' open={open} onClose={handleClose}> <Dialog open={open} onClose={handleClose}>
<DialogTitle>{selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle> <DialogTitle sx={{bgcolor:'rgb(24 24 23)', color:'white'}}>{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
<DialogContent> <DialogContent sx={{bgcolor:'rgb(24 24 23)'}}>
<TextField <TextField
variant="standard"
autoFocus autoFocus
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="dense" margin="dense"
label="Name" label="Name"
type="text" type="text"
fullWidth fullWidth
name="name" name="name"
value={selectedRow.name} value={selectedRow && selectedRow.username}
onChange={handleChange} onChange={handleChange}
/> />
<TextField <TextField
variant="standard"
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="dense" margin="dense"
label="Age" label="Email"
// type="number"
fullWidth
name="age"
value={selectedRow && selectedRow.email_id}
onChange={handleChange}
/>
<TextField
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"
}
}}
variant="standard"
margin="dense"
label="Last Login"
type="last_login"
fullWidth
name="last_login"
value={selectedRow && selectedRow.last_login}
onChange={handleChange}
/>
<TextField
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"
}
}}
variant="standard"
margin="dense"
label="Active"
type="number" type="number"
fullWidth fullWidth
name="age" name="age"
value={selectedRow.age} value={selectedRow && selectedRow.active}
onChange={handleChange} onChange={handleChange}
/> />
</DialogContent> </DialogContent>
<DialogActions> <DialogActions sx={{bgcolor:'rgb(24 24 23)'}}>
<Button onClick={handleClose} color="primary"> <Button onClick={handleClose} color="primary">
Cancel Cancel
</Button> </Button>
<Button onClick={handleSave} color="primary"> {/* <Button onClick={handleSave} color="primary">
Save Save
</Button> </Button> */}
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</div> {/* </div> */}
</Paper> </Paper>
</Paper> </Paper>
) )