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,43 +262,52 @@ 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>
<StyledTextField <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
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 />
label="Active" <StyledSelect
placeholder="Active" fullWidth
name="active" label="Active"
value={selectedRow && selectedRow.active} placeholder="Active"
onChange={handleChange} name="active"
> value={selectedRow && selectedRow.active}
<MenuItem value='Active'>Active</MenuItem> onChange={handleChange}
<MenuItem value='Inactive'>Inactive</MenuItem> >
</StyledSelect> <MenuItem value='Active'>Active</MenuItem>
<MenuItem value='Inactive'>Inactive</MenuItem>
</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>
<Button onClick={handleSave} color="primary"> <Button onClick={handleSave} color="primary">
Save Save
</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,48 +264,48 @@ 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'}
<StyledTextField </DialogTitle>
<DialogContent sx={{ bgcolor: 'rgb(24 24 23)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }} className="dialog-class">
<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 />
label="Email" <StyledTextField
name="email_id" label="Role"
value={selectedRow && selectedRow.email_id} name="role"
value={selectedRow && selectedRow.role}
onChange={handleChange} onChange={handleChange}
/> sx={{ width: '100%', marginBottom: '20px' }}
<StyledTextField />
label="Last Login" <StyledSelect
name="last_login" fullWidth
value={selectedRow && selectedRow.last_login} label="Active"
placeholder="Active"
name="active"
value={selectedRow && selectedRow.active}
onChange={handleChange} onChange={handleChange}
/> >
<StyledSelect <MenuItem value='Active'>Active</MenuItem>
label="Active" <MenuItem value='Inactive'>Inactive</MenuItem>
placeholder="Active" </StyledSelect>
name="active"
value={selectedRow && selectedRow.active} </DialogContent>
onChange={handleChange} <DialogActions sx={{ bgcolor: 'rgb(24 24 23)', justifyContent: 'space-between', padding: '20px' }} className="dialog-class-actions">
>
<MenuItem value='Active'>Active</MenuItem>
<MenuItem value='Inactive'>Inactive</MenuItem>
</StyledSelect>
</DialogContent>
<DialogActions sx={{bgcolor:'rgb(24 24 23)'}} className="dialog-class-actions">
<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>
</Paper> </Paper>
</Paper> </Paper>
</Box> </Box>