stwhite
/
boxes-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More UI fixes to Admin.js

This commit is contained in:
Steve White 2024-10-17 09:04:28 -05:00
parent 88a90e39b7
commit 578d38f187
1 changed files with 115 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/components/Admin.js
View File

@ -4,6 +4,21 @@ import axios from 'axios';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App'; import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
import './Admin.css'; // Import the CSS file import './Admin.css'; // Import the CSS file
import {
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Button,
Alert,
Container,
Box,
TextField
} from '@mui/material';
export default function Admin() { export default function Admin() {
@ -26,6 +41,19 @@ export default function Admin() {
}); });
}, []); }, []);
const fetchUsers = async () => {
try {
const response = await axios.get(`${process.env.REACT_APP_API_URL}/admin/user`, {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
});
setUsers(response.data);
} catch (error) {
console.error('Error fetching users:', error);
// Optionally, set an error message
// setErrorMessage('Failed to fetch users. Please try again.');
}
};
const handleCreateUser = async (e) => { const handleCreateUser = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
@ -49,6 +77,9 @@ export default function Admin() {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` } headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
}); });
setUsers(users.filter(user => user.id !== id)); setUsers(users.filter(user => user.id !== id));
//setUsers(prevUsers => prevUsers.filter(user => user.id !== id));
fetchUsers();
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
@ -103,54 +134,87 @@ export default function Admin() {
}; };
return ( return (
<div> <Container maxWidth="md">
<h1>Admin</h1> <Typography variant="h4" gutterBottom>
<table> Admin
<thead> </Typography>
<tr>
<th>Username</th> <Box component="form" onSubmit={handleCreateUser} sx={{ mb: 4 }}>
<th>Actions</th> <Typography variant="h6" gutterBottom>
</tr> Add New User
</thead> </Typography>
<tbody> <TextField
{users.map(user => ( label="Username"
<tr key={user.ID}> variant="outlined"
<td>{user.username}</td> value={username}
<td> onChange={(e) => setUsername(e.target.value)}
<button onClick={() => handleDeleteUser(user.ID)}>Delete</button> sx={{ mr: 2 }}
</td> />
</tr> <TextField
))} label="Password"
</tbody> type="password"
</table> variant="outlined"
<form onSubmit={handleCreateUser}> value={password}
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" /> onChange={(e) => setPassword(e.target.value)}
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" /> sx={{ mr: 2 }}
<button type="submit">Create User</button> />
</form> <Button type="submit" sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary">
<h2>Database</h2> Add User
<table> </Button>
<thead> </Box>
<tr>
<th>Action</th> <TableContainer component={Paper}>
<th></th> <Table>
</tr> <TableHead>
</thead> <TableRow>
<tbody> <TableCell>Username</TableCell>
<tr> <TableCell>Actions</TableCell>
<td>Backup</td> </TableRow>
<td> </TableHead>
<button onClick={handleBackupDatabase}>Download Backup</button> <TableBody>
</td> {users.map(user => (
</tr> <TableRow key={user.ID}>
<tr> <TableCell>{user.username}</TableCell>
<td>Restore</td> <TableCell>
<td> <Button
<input type="file" ref={fileInputRef} /> variant="contained"
<button onClick={handleRestoreDatabase}>Upload and Restore</button> color="error"
</td> onClick={() => handleDeleteUser(user.ID)}
</tr> >
</tbody> Delete User
</table> </Button>
</div> </TableCell>
)}; </TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<Box sx={{ mt: 4 }}>
<Button
variant="contained"
color="primary"
onClick={handleBackupDatabase}
sx={{ mr: 2, backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
>
Backup Database
</Button>
<Button
variant="contained"
color="secondary"
component="label"
sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}
>
Restore Database
<input
type="file"
hidden
ref={fileInputRef}
onChange={handleRestoreDatabase}
/>
</Button>
</Box>
</Container>
);
}