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

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