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{
background-color: #171716 !important;
color:white !important;
color:white ;
border-bottom: 1px solid rgb(45 51 59);
}
@ -27,7 +27,3 @@
background-color: #171716;
color: white;
}
.activeCell {
color: green !important;
}

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

@ -7,6 +7,7 @@ import {
TableContainer,
TableHead,
TableRow,
tableRowClasses,
Paper,
Button,
IconButton,
@ -34,7 +35,7 @@ const StyledTextField = (props:any) => (
'& .MuiOutlinedInput-root': {
'& fieldset': { borderColor: 'white' },
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
'&.Mui-focused fieldset': { borderColor: 'white' },
// '&.Mui-focused fieldset': { borderColor: 'white' },
},
...props.sx,
}}
@ -42,67 +43,64 @@ const StyledTextField = (props:any) => (
);
interface Row {
id: number;
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(){
const [manageUsersData,setManageUsersData] = useState<any>()
const { data: manageUsersResponse, isLoading, isError } = useGetUsersData();
const [data, setData] = useState<Row[]>(initialData);
const [data, setData] = useState<Row[]>([]);
const [open, setOpen] = useState(false);
const [selectedRow, setSelectedRow] = useState<any>();
const [newRow, setNewRow] = useState<any>();
const handleEdit = (row: Row) => {
setSelectedRow(row);
setSelectedRow({...row});
setOpen(true);
};
const handleDelete = (id: number) => {
const updatedData = data.filter((row) => row.id !== id);
setData(updatedData);
};
const handleSave = () => {
if (selectedRow.id) {
const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
setData(updatedData);
} else {
// if (selectedRow.id) {
// const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
// setData(updatedData);
// } else {
const id = data.length + 1;
setNewRow({ ...newRow, id });
setData([...data, { ...newRow, id }]);
}
setData([...data, { ...selectedRow, id }]);
// }
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 = () => {
setOpen(true);
};
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 });
};
console.log(selectedRow,"sdfhhgfdg")
return(
<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' }}>
{/* <div> */}
<TableContainer component={Paper}>
<Table>
<TableHead className="manageusers-table-header-style">
@ -120,19 +118,22 @@ export default function ManageUsers(){
</TableHead>
<TableBody>
{manageUsersResponse && manageUsersResponse.map((row:any) => (
<TableRow key={row.id}>
<TableRow key={row.id} sx={{height:'20px'}}>
<TableCell>
<IconButton onClick={() => handleEdit(row)} aria-label="edit">
<EditIcon sx={{ color: 'white' }}/>
</IconButton>
<IconButton onClick={() => handleDelete(row.id)} aria-label="delete">
{/* <IconButton onClick={() => handleDelete(row.id)} aria-label="delete">
<DeleteIcon sx={{ color: 'white' }}/>
</IconButton>
</IconButton> */}
</TableCell>
<TableCell>{row.username}</TableCell>
<TableCell>{row.email_id}</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>
))}
</TableBody>
@ -146,7 +147,7 @@ export default function ManageUsers(){
label="Name"
type="text"
name="name"
value={selectedRow && selectedRow.username}
value={selectedRow && selectedRow.name}
onChange={handleChange}
/>
<StyledTextField
@ -164,7 +165,6 @@ export default function ManageUsers(){
/>
<StyledTextField
label="Active"
// type="number"
name="active"
value={selectedRow && selectedRow.active}
onChange={handleChange}
@ -174,12 +174,11 @@ export default function ManageUsers(){
<Button onClick={handleClose} color="primary">
Cancel
</Button>
{/* <Button onClick={handleSave} color="primary">
<Button onClick={handleSave} color="primary">
Save
</Button> */}
</Button>
</DialogActions>
</Dialog>
{/* </div> */}
</Paper>
</Paper>
)