sonika/sony_intranet_remake2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style and some logic changes

Browse Source
This commit is contained in:
Sonika 2023-12-19 20:06:27 +05:30
parent db48679f5a
commit 7950c4268a
2 changed files with 43 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.css
View File

@ -5,7 +5,7 @@
.projectScreen-background .css-1ex1afd-MuiTableCell-root{ .projectScreen-background .css-1ex1afd-MuiTableCell-root{
background-color: #171716 !important; background-color: #171716 !important;
color:white !important; color:white ;
border-bottom: 1px solid rgb(45 51 59); border-bottom: 1px solid rgb(45 51 59);
} }
@ -27,7 +27,3 @@
background-color: #171716; background-color: #171716;
color: white; color: white;
} }
.activeCell {
color: green !important;
}

89
src/components/manage_users/ManageUsers.tsx
View File

@ -7,6 +7,7 @@ import {
TableContainer, TableContainer,
TableHead, TableHead,
TableRow, TableRow,
tableRowClasses,
Paper, Paper,
Button, Button,
IconButton, IconButton,
@ -34,75 +35,72 @@ const StyledTextField = (props:any) => (
'& .MuiOutlinedInput-root': { '& .MuiOutlinedInput-root': {
'& fieldset': { borderColor: 'white' }, '& fieldset': { borderColor: 'white' },
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 }, '&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
'&.Mui-focused fieldset': { borderColor: 'white' }, // '&.Mui-focused fieldset': { borderColor: 'white' },
}, },
...props.sx, ...props.sx,
}} }}
/> />
); );
interface Row { interface Row {
id: number;
name: string; name: string;
age: number; email: string;
last_login:string;
active:boolean|string;
} }
const initialData: Row[] = [
{ id: 1, name: 'Row 1', age: 25 },
{ id: 2, name: 'Row 2', age: 30 },
];
export default function ManageUsers(){ export default function ManageUsers(){
const [manageUsersData,setManageUsersData] = useState<any>() const [manageUsersData,setManageUsersData] = useState<any>()
const { data: manageUsersResponse, isLoading, isError } = useGetUsersData(); const { data: manageUsersResponse, isLoading, isError } = useGetUsersData();
const [data, setData] = useState<Row[]>(initialData); const [data, setData] = useState<Row[]>([]);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [selectedRow, setSelectedRow] = useState<any>(); const [selectedRow, setSelectedRow] = useState<any>();
const [newRow, setNewRow] = useState<any>(); const [newRow, setNewRow] = useState<any>();
const handleEdit = (row: Row) => { const handleEdit = (row: Row) => {
setSelectedRow(row); setSelectedRow({...row});
setOpen(true); setOpen(true);
}; };
const handleDelete = (id: number) => {
const updatedData = data.filter((row) => row.id !== id);
setData(updatedData);
};
const handleSave = () => { const handleSave = () => {
if (selectedRow.id) { // if (selectedRow.id) {
const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row)); // const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
setData(updatedData); // setData(updatedData);
} else { // } else {
const id = data.length + 1; const id = data.length + 1;
setNewRow({ ...newRow, id }); setData([...data, { ...selectedRow, id }]);
setData([...data, { ...newRow, id }]); // }
}
setOpen(false); setOpen(false);
setSelectedRow({ id: 0, name: '', age: 0 }); setSelectedRow({name: '', email: '', last_login: '', active: '' });
setNewRow({name: '', email: '', last_login: '', active: '' });
};
const handleClose = () => {
setOpen(false);
setSelectedRow({name: '', email: '', last_login: '', active: '' });
setNewRow({name: '', email: '', last_login: '', active: '' });
};
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
if (selectedRow) {
// Editing existing row
setSelectedRow({ ...selectedRow, [name]: value });
} else {
// Adding a new row
setNewRow({ ...newRow, [name]: value });
}
}; };
const handleOpen = () => { const handleOpen = () => {
setOpen(true); setOpen(true);
}; };
console.log(selectedRow,"sdfhhgfdg")
const handleClose = () => {
setOpen(false);
setSelectedRow({ id: 0, name: '', age: 0 });
};
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setSelectedRow({ ...selectedRow, [name]: value });
setNewRow({ ...newRow, [name]: value });
};
return( return(
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}> <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' }}> <Paper className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
{/* <div> */}
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table> <Table>
<TableHead className="manageusers-table-header-style"> <TableHead className="manageusers-table-header-style">
@ -120,19 +118,22 @@ export default function ManageUsers(){
</TableHead> </TableHead>
<TableBody> <TableBody>
{manageUsersResponse && manageUsersResponse.map((row:any) => ( {manageUsersResponse && manageUsersResponse.map((row:any) => (
<TableRow key={row.id}> <TableRow key={row.id} sx={{height:'20px'}}>
<TableCell> <TableCell>
<IconButton onClick={() => handleEdit(row)} aria-label="edit"> <IconButton onClick={() => handleEdit(row)} aria-label="edit">
<EditIcon sx={{ color: 'white' }}/> <EditIcon sx={{ color: 'white' }}/>
</IconButton> </IconButton>
<IconButton onClick={() => handleDelete(row.id)} aria-label="delete"> {/* <IconButton onClick={() => handleDelete(row.id)} aria-label="delete">
<DeleteIcon sx={{ color: 'white' }}/> <DeleteIcon sx={{ color: 'white' }}/>
</IconButton> </IconButton> */}
</TableCell> </TableCell>
<TableCell>{row.username}</TableCell> <TableCell>{row.username}</TableCell>
<TableCell>{row.email_id}</TableCell> <TableCell>{row.email_id}</TableCell>
<TableCell>{row.last_login}</TableCell> <TableCell>{row.last_login}</TableCell>
<TableCell>{row.active==true?'Active':'Inactive'}</TableCell> {row.active?
<TableCell sx={{color:'green', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Active</TableCell>
:
<TableCell sx={{color:'red', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Inactive</TableCell>}
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
@ -146,7 +147,7 @@ export default function ManageUsers(){
label="Name" label="Name"
type="text" type="text"
name="name" name="name"
value={selectedRow && selectedRow.username} value={selectedRow && selectedRow.name}
onChange={handleChange} onChange={handleChange}
/> />
<StyledTextField <StyledTextField
@ -164,7 +165,6 @@ export default function ManageUsers(){
/> />
<StyledTextField <StyledTextField
label="Active" label="Active"
// type="number"
name="active" name="active"
value={selectedRow && selectedRow.active} value={selectedRow && selectedRow.active}
onChange={handleChange} onChange={handleChange}
@ -174,12 +174,11 @@ export default function ManageUsers(){
<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>
{/* </div> */}
</Paper> </Paper>
</Paper> </Paper>
) )