Intranet users screen and style
This commit is contained in:
Sonika
parent
0bc2875bba
commit
21a7c0b778
19
src/APIs/IntranetUsersAPIs/getUsersList.tsx
Normal file
19
src/APIs/IntranetUsersAPIs/getUsersList.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import {useQuery} from '@tanstack/react-query'
|
||||
|
||||
export const getIntranetUsersList = async()=>{
|
||||
const response = await fetch(`${process.env.REACT_APP_API_URL}/intranet-users-list`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get User list data');
|
||||
}
|
||||
const UserListData = await response.json()
|
||||
return UserListData;
|
||||
}
|
||||
|
||||
export const useGetIntranetUsersData = () => {
|
||||
return useQuery(
|
||||
{
|
||||
queryKey: ['IntranetUsers-list'],
|
||||
queryFn: () => getIntranetUsersList(),
|
||||
}
|
||||
);
|
||||
}
|
||||
@ -8,6 +8,7 @@ import Dashboard from './components/Dashboard';
|
||||
import Projects from './components/projects/Projects';
|
||||
import { ReactQueryDevtools} from 'react-query/devtools'
|
||||
import ManageUsers from './components/manage_users/ManageUsers';
|
||||
import IntranetUsers from './components/intranet_users/IntranetUsers';
|
||||
|
||||
function App() {
|
||||
const queryClient = new QueryClient();
|
||||
@ -20,6 +21,7 @@ function App() {
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/projects" element={<Projects />} />
|
||||
<Route path="/manage-users" element={<ManageUsers />} />
|
||||
<Route path="/intranet-users" element={<IntranetUsers />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
|
||||
@ -106,6 +106,10 @@ function Header() {
|
||||
<Typography textAlign="center" component={Link}
|
||||
to='/manage-users'>MANAGE USERS</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem key='home' onClick={handleCloseNavMenu}>
|
||||
<Typography textAlign="center" component={Link}
|
||||
to='/intranet-users'>INTRANET USERS</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
@ -165,6 +169,15 @@ function Header() {
|
||||
>
|
||||
MANAGE USERS
|
||||
</Button>
|
||||
<Button
|
||||
key='home'
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{ my: 2, color: 'white', display: 'block' }}
|
||||
component={Link}
|
||||
to='/intranet-users'
|
||||
>
|
||||
INTRANET USERS
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
|
||||
208
src/components/intranet_users/IntranetUsers.tsx
Normal file
208
src/components/intranet_users/IntranetUsers.tsx
Normal file
@ -0,0 +1,208 @@
|
||||
import React, { ChangeEvent, useEffect, useState } from "react";
|
||||
import { useGetIntranetUsersData } from "../../APIs/IntranetUsersAPIs/getUsersList";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
tableRowClasses,
|
||||
Paper,
|
||||
Button,
|
||||
IconButton,
|
||||
TextField,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TablePagination,
|
||||
} from '@mui/material';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { postNewManageUsersData } from "../../APIs/ManageUsersAPIs/postAddUser";
|
||||
|
||||
|
||||
const StyledTextField = (props:any) => (
|
||||
<TextField
|
||||
variant="standard"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
{...props}
|
||||
sx={{
|
||||
input: { color: 'white' },
|
||||
'& label': { color: 'white' },
|
||||
'& label.Mui-focused': { color: 'white' },
|
||||
'& .MuiInput-underline:after': { borderBottomColor: 'white' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': { borderColor: 'white' },
|
||||
'&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
|
||||
// '&.Mui-focused fieldset': { borderColor: 'white' },
|
||||
},
|
||||
...props.sx,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
interface Row {
|
||||
username: string;
|
||||
role: string;
|
||||
active:any;
|
||||
}
|
||||
|
||||
export default function IntranetUsers(){
|
||||
const [manageUsersData,setManageUsersData] = useState<any>()
|
||||
const { data: manageUsersResponse, isLoading, isError } = useGetIntranetUsersData();
|
||||
const [data, setData] = useState<Row[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedRow, setSelectedRow] = useState<any>();
|
||||
const [newRow, setNewRow] = useState<any>();
|
||||
const [page, setPage] = React.useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
||||
|
||||
useEffect(()=>{
|
||||
if (!open){
|
||||
setSelectedRow({username: '', role: '', active: '' });
|
||||
setNewRow({username: '', role: '', active: '' });
|
||||
}
|
||||
},[open])
|
||||
useEffect(() => {
|
||||
if (selectedRow){
|
||||
postNewManageUsersData(selectedRow);
|
||||
}
|
||||
},[data])
|
||||
|
||||
const handleChangePage = (event:any, newPage:any) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event:any) => {
|
||||
setRowsPerPage(+event.target.value);
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const handleEdit = (row: Row) => {
|
||||
setSelectedRow({...row});
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
// if (selectedRow.id) {
|
||||
// const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
|
||||
// setData(updatedData);
|
||||
// } else {
|
||||
const id = data.length + 1;
|
||||
setData([...data, { ...selectedRow, id }]);
|
||||
// }
|
||||
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
setSelectedRow({username: '', role: '', active: '' });
|
||||
setNewRow({username: '', role: '', 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);
|
||||
};
|
||||
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' }}>
|
||||
<TableContainer component={Paper}>
|
||||
<Table>
|
||||
<TableHead className="manageusers-table-header-style">
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<Button variant="contained" sx={{bgcolor:'white',color:'#1e1e1e', fontWeight:600}} startIcon={<AddIcon />} onClick={handleOpen}>
|
||||
New
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Role</TableCell>
|
||||
<TableCell>Active</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{manageUsersResponse && manageUsersResponse.map((row:any) => (
|
||||
<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">
|
||||
<DeleteIcon sx={{ color: 'white' }}/>
|
||||
</IconButton> */}
|
||||
</TableCell>
|
||||
<TableCell>{row.username}</TableCell>
|
||||
<TableCell>{row.role}</TableCell>
|
||||
{row.active==1?
|
||||
<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>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
sx={{bgcolor:'#171716',color:'white'}}
|
||||
rowsPerPageOptions={[10, 25, 100]}
|
||||
component="div"
|
||||
count={manageUsersResponse && manageUsersResponse.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
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)' }}>
|
||||
<StyledTextField
|
||||
label="Name"
|
||||
type="text"
|
||||
name="username"
|
||||
value={selectedRow && selectedRow.username}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<StyledTextField
|
||||
label="Role"
|
||||
name="role"
|
||||
value={selectedRow && selectedRow.role}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<StyledTextField
|
||||
label="Active"
|
||||
name="active"
|
||||
value={selectedRow && selectedRow.active}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{bgcolor:'rgb(24 24 23)'}}>
|
||||
<Button onClick={handleClose} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave} color="primary">
|
||||
Save
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Paper>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
@ -22,7 +22,6 @@ import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { postNewManageUsersData } from "../../APIs/ManageUsersAPIs/postAddUser";
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
|
||||
|
||||
const StyledTextField = (props:any) => (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user