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 },
},
...props.sx,
width:'92vh'
}}
>
{props.children}
</Select>
</div>
);
interface Row {
username: string;
role: string;
@ -259,43 +262,52 @@ export default function IntranetUsers(){
onPageChange={handleChangePage}
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">
<StyledTextField
<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
label="Name"
type="text"
name="username"
value={selectedRow && selectedRow.username}
onChange={handleChange}
/>
<StyledTextField
sx={{ width: '100%', marginBottom: '20px', }}
/>
<StyledTextField
label="Role"
name="role"
value={selectedRow && selectedRow.role}
onChange={handleChange}
/>
<StyledSelect
label="Active"
placeholder="Active"
name="active"
value={selectedRow && selectedRow.active}
onChange={handleChange}
>
<MenuItem value='Active'>Active</MenuItem>
<MenuItem value='Inactive'>Inactive</MenuItem>
</StyledSelect>
sx={{ width: '100%', marginBottom: '20px' }}
/>
<StyledSelect
fullWidth
label="Active"
placeholder="Active"
name="active"
value={selectedRow && selectedRow.active}
onChange={handleChange}
>
<MenuItem value='Active'>Active</MenuItem>
<MenuItem value='Inactive'>Inactive</MenuItem>
</StyledSelect>
</DialogContent >
<DialogActions sx={{bgcolor:'rgb(24 24 23)'}} className="dialog-class-actions">
</DialogContent>
<DialogActions sx={{ bgcolor: 'rgb(24 24 23)', justifyContent: 'space-between', padding: '20px' }} className="dialog-class-actions">
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleSave} color="primary">
Save
</Button>
</DialogActions>
</Dialog>
</DialogActions>
</Dialog>
</Paper>
</Paper>
</Box>

View File

@ -69,6 +69,7 @@ const StyledTextField = (props:any) => (
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
},
...props.sx,
width:'92vh'
}}
>
{props.children}
@ -263,48 +264,48 @@ export default function ManageUsers(){
onPageChange={handleChangePage}
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">
<StyledTextField
<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
label="Name"
type="text"
name="username"
value={selectedRow && selectedRow.username}
onChange={handleChange}
/>
<StyledTextField
label="Email"
name="email_id"
value={selectedRow && selectedRow.email_id}
sx={{ width: '100%', marginBottom: '20px', }}
/>
<StyledTextField
label="Role"
name="role"
value={selectedRow && selectedRow.role}
onChange={handleChange}
/>
<StyledTextField
label="Last Login"
name="last_login"
value={selectedRow && selectedRow.last_login}
sx={{ width: '100%', marginBottom: '20px' }}
/>
<StyledSelect
fullWidth
label="Active"
placeholder="Active"
name="active"
value={selectedRow && selectedRow.active}
onChange={handleChange}
/>
<StyledSelect
label="Active"
placeholder="Active"
name="active"
value={selectedRow && selectedRow.active}
onChange={handleChange}
>
<MenuItem value='Active'>Active</MenuItem>
<MenuItem value='Inactive'>Inactive</MenuItem>
</StyledSelect>
</DialogContent>
<DialogActions sx={{bgcolor:'rgb(24 24 23)'}} className="dialog-class-actions">
>
<MenuItem value='Active'>Active</MenuItem>
<MenuItem value='Inactive'>Inactive</MenuItem>
</StyledSelect>
</DialogContent>
<DialogActions sx={{ bgcolor: 'rgb(24 24 23)', justifyContent: 'space-between', padding: '20px' }} className="dialog-class-actions">
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleSave} color="primary">
Save
</Button>
</DialogActions>
</Dialog>
</DialogActions>
</Dialog>
</Paper>
</Paper>
</Box>