dialog ui fix

This commit is contained in:
Sonika 2024-01-17 16:20:30 +05:30
parent 95dbc0cff7
commit 0e4a5f4435
2 changed files with 63 additions and 50 deletions

View File

@ -71,12 +71,15 @@ const StyledTextField = (props:any) => (
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 }, '&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
}, },
...props.sx, ...props.sx,
width:'92vh'
}} }}
> >
{props.children} {props.children}
</Select> </Select>
</div> </div>
); );
interface Row { interface Row {
username: string; username: string;
role: string; role: string;
@ -259,23 +262,30 @@ export default function IntranetUsers(){
onPageChange={handleChangePage} onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage} onRowsPerPageChange={handleChangeRowsPerPage}
/> />
<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)' }} className="dialog-class"> <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
<DialogTitle sx={{ bgcolor: 'rgb(24 24 23)', color: 'white', textAlign: 'center' }}>
{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}
</DialogTitle>
<DialogContent sx={{ bgcolor: 'rgb(24 24 23)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }} className="dialog-class">
<StyledTextField <StyledTextField
label="Name" label="Name"
type="text" type="text"
name="username" name="username"
value={selectedRow && selectedRow.username} value={selectedRow && selectedRow.username}
onChange={handleChange} onChange={handleChange}
sx={{ width: '100%', marginBottom: '20px', }}
/> />
<StyledTextField <StyledTextField
label="Role" label="Role"
name="role" name="role"
value={selectedRow && selectedRow.role} value={selectedRow && selectedRow.role}
onChange={handleChange} onChange={handleChange}
sx={{ width: '100%', marginBottom: '20px' }}
/> />
<StyledSelect <StyledSelect
fullWidth
label="Active" label="Active"
placeholder="Active" placeholder="Active"
name="active" name="active"
@ -287,7 +297,7 @@ export default function IntranetUsers(){
</StyledSelect> </StyledSelect>
</DialogContent> </DialogContent>
<DialogActions sx={{bgcolor:'rgb(24 24 23)'}} className="dialog-class-actions"> <DialogActions sx={{ bgcolor: 'rgb(24 24 23)', justifyContent: 'space-between', padding: '20px' }} className="dialog-class-actions">
<Button onClick={handleClose} color="primary"> <Button onClick={handleClose} color="primary">
Cancel Cancel
</Button> </Button>
@ -296,6 +306,8 @@ export default function IntranetUsers(){
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</Paper> </Paper>
</Paper> </Paper>
</Box> </Box>

View File

@ -69,6 +69,7 @@ const StyledTextField = (props:any) => (
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 }, '&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
}, },
...props.sx, ...props.sx,
width:'92vh'
}} }}
> >
{props.children} {props.children}
@ -263,29 +264,28 @@ export default function ManageUsers(){
onPageChange={handleChangePage} onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage} onRowsPerPageChange={handleChangeRowsPerPage}
/> />
<Dialog open={open} onClose={handleClose}> <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
<DialogTitle sx={{bgcolor:'rgb(24 24 23)', color:'white'}}>{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle> <DialogTitle sx={{ bgcolor: 'rgb(24 24 23)', color: 'white', textAlign: 'center' }}>
<DialogContent sx={{ bgcolor: 'rgb(24 24 23)' }} className="dialog-class"> {selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}
</DialogTitle>
<DialogContent sx={{ bgcolor: 'rgb(24 24 23)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }} className="dialog-class">
<StyledTextField <StyledTextField
label="Name" label="Name"
type="text" type="text"
name="username" name="username"
value={selectedRow && selectedRow.username} value={selectedRow && selectedRow.username}
onChange={handleChange} onChange={handleChange}
sx={{ width: '100%', marginBottom: '20px', }}
/> />
<StyledTextField <StyledTextField
label="Email" label="Role"
name="email_id" name="role"
value={selectedRow && selectedRow.email_id} value={selectedRow && selectedRow.role}
onChange={handleChange}
/>
<StyledTextField
label="Last Login"
name="last_login"
value={selectedRow && selectedRow.last_login}
onChange={handleChange} onChange={handleChange}
sx={{ width: '100%', marginBottom: '20px' }}
/> />
<StyledSelect <StyledSelect
fullWidth
label="Active" label="Active"
placeholder="Active" placeholder="Active"
name="active" name="active"
@ -295,8 +295,9 @@ export default function ManageUsers(){
<MenuItem value='Active'>Active</MenuItem> <MenuItem value='Active'>Active</MenuItem>
<MenuItem value='Inactive'>Inactive</MenuItem> <MenuItem value='Inactive'>Inactive</MenuItem>
</StyledSelect> </StyledSelect>
</DialogContent> </DialogContent>
<DialogActions sx={{bgcolor:'rgb(24 24 23)'}} className="dialog-class-actions"> <DialogActions sx={{ bgcolor: 'rgb(24 24 23)', justifyContent: 'space-between', padding: '20px' }} className="dialog-class-actions">
<Button onClick={handleClose} color="primary"> <Button onClick={handleClose} color="primary">
Cancel Cancel
</Button> </Button>