active select

This commit is contained in:
Sonika 2024-01-10 10:49:04 +05:30
parent e22b9bacbc
commit bbb5acb67c
3 changed files with 84 additions and 18 deletions

View File

@ -15,7 +15,7 @@ export default function Admin(){
<Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}> <Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
<Paper style={{ padding: '20px', backgroundColor: "#181817", color: 'white', display:'flex',flexDirection:'row' }}> <Paper style={{ padding: '20px', backgroundColor: "#181817", color: 'white', display:'flex',flexDirection:'row' }}>
<CloudUploadIcon /> <CloudUploadIcon />
<input type="file" multiple onChange={handleFileUpload} /> <input type="file" multiple onChange={handleFileUpload} />
<ul> <ul>
{files.map((file:any, index:number) => ( {files.map((file:any, index:number) => (

View File

@ -20,6 +20,9 @@ import {
Grid, Grid,
InputAdornment, InputAdornment,
Box, Box,
Select,
MenuItem,
InputLabel,
} from '@mui/material'; } from '@mui/material';
import EditIcon from '@mui/icons-material/Edit'; import EditIcon from '@mui/icons-material/Edit';
import AddIcon from '@mui/icons-material/Add'; import AddIcon from '@mui/icons-material/Add';
@ -49,6 +52,31 @@ const StyledTextField = (props:any) => (
/> />
); );
const StyledSelect = (props: any) => (
<div>
<InputLabel htmlFor={props.name} sx={{ color: 'white', fontSize:13 }}>
{props.label}
</InputLabel>
<Select
variant="standard"
margin="dense"
fullWidth
{...props}
sx={{
color: 'white',
'& .MuiInputBase-input': { color: 'white' },
'& .MuiInput-underline:after': { borderBottomColor: 'white' },
'& .MuiOutlinedInput-root': {
'& fieldset': { borderColor: 'white' },
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
},
...props.sx,
}}
>
{props.children}
</Select>
</div>
);
interface Row { interface Row {
username: string; username: string;
role: string; role: string;
@ -233,7 +261,7 @@ export default function IntranetUsers(){
/> />
<Dialog open={open} onClose={handleClose}> <Dialog open={open} onClose={handleClose}>
<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'}}>{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
<DialogContent sx={{ bgcolor: 'rgb(24 24 23)' }}> <DialogContent sx={{ bgcolor: 'rgb(24 24 23)' }} className="dialog-class">
<StyledTextField <StyledTextField
label="Name" label="Name"
type="text" type="text"
@ -247,14 +275,19 @@ export default function IntranetUsers(){
value={selectedRow && selectedRow.role} value={selectedRow && selectedRow.role}
onChange={handleChange} onChange={handleChange}
/> />
<StyledTextField <StyledSelect
label="Active" label="Active"
name="active" placeholder="Active"
value={selectedRow && selectedRow.active} name="active"
onChange={handleChange} value={selectedRow && selectedRow.active}
/> onChange={handleChange}
</DialogContent> >
<DialogActions sx={{bgcolor:'rgb(24 24 23)'}}> <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>

View File

@ -19,6 +19,9 @@ import {
TablePagination, TablePagination,
InputAdornment, InputAdornment,
Box, Box,
InputLabel,
Select,
MenuItem,
} from '@mui/material'; } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search'; import SearchIcon from '@mui/icons-material/Search';
import EditIcon from '@mui/icons-material/Edit'; import EditIcon from '@mui/icons-material/Edit';
@ -47,6 +50,32 @@ const StyledTextField = (props:any) => (
/> />
); );
const StyledSelect = (props: any) => (
<div>
<InputLabel htmlFor={props.name} sx={{ color: 'white', fontSize:13 }}>
{props.label}
</InputLabel>
<Select
variant="standard"
margin="dense"
fullWidth
{...props}
sx={{
color: 'white',
'& .MuiInputBase-input': { color: 'white' },
'& .MuiInput-underline:after': { borderBottomColor: 'white' },
'& .MuiOutlinedInput-root': {
'& fieldset': { borderColor: 'white' },
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
},
...props.sx,
}}
>
{props.children}
</Select>
</div>
);
interface Row { interface Row {
username: string; username: string;
email_id: string; email_id: string;
@ -236,7 +265,7 @@ export default function ManageUsers(){
/> />
<Dialog open={open} onClose={handleClose}> <Dialog open={open} onClose={handleClose}>
<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'}}>{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
<DialogContent sx={{ bgcolor: 'rgb(24 24 23)' }}> <DialogContent sx={{ bgcolor: 'rgb(24 24 23)' }} className="dialog-class">
<StyledTextField <StyledTextField
label="Name" label="Name"
type="text" type="text"
@ -256,14 +285,18 @@ export default function ManageUsers(){
value={selectedRow && selectedRow.last_login} value={selectedRow && selectedRow.last_login}
onChange={handleChange} onChange={handleChange}
/> />
<StyledTextField <StyledSelect
label="Active" label="Active"
name="active" placeholder="Active"
value={selectedRow && selectedRow.active} name="active"
onChange={handleChange} value={selectedRow && selectedRow.active}
/> onChange={handleChange}
>
<MenuItem value='Active'>Active</MenuItem>
<MenuItem value='Inactive'>Inactive</MenuItem>
</StyledSelect>
</DialogContent> </DialogContent>
<DialogActions sx={{bgcolor:'rgb(24 24 23)'}}> <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>