Skip to content

Commit

Permalink
feat(manage-groups): add csv upload functionality.
Browse files Browse the repository at this point in the history
  • Loading branch information
@laibatool792
laibatool792 committed May 29, 2024
1 parent e4195e6 commit eca9beb
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 130 deletions.
140 changes: 42 additions & 98 deletions frontend/src/containers/pages/ManageGroups/GroupTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
* </GroupsTable>
* )
*/
import React, { useEffect, useState } from "react";
import axios from "axios";
import { useEffect, useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
Expand Down Expand Up @@ -38,107 +37,52 @@ const useStyles = makeStyles({
},
});

// export default function GroupTable({ data }) {
// const classes = useStyles();

// return (
// <div className={classes.root}>
// <Paper>
// <Typography variant="h5" component="h1" className={classes.heading}>
// Group Table
// </Typography>
// <TableContainer>
// <Table className={classes.table} aria-label="simple table">
// <TableHead>
// <TableRow>
// <TableCell>Group Number</TableCell>
// <TableCell align="right">Nurse</TableCell>
// <TableCell align="right">Doctor</TableCell>
// <TableCell align="right">Pharmacist</TableCell>
// <TableCell align="right">Progress</TableCell>
// </TableRow>
// </TableHead>
// // <TableBody>
// // {data.map((group) => (
// <TableRow key={group.groupNumber}>
// <TableCell component="th" scope="row">
// {group.groupNumber}
// </TableCell>
// <TableCell align="right">{group.nurse}</TableCell>
// <TableCell align="right">{group.doctor}</TableCell>
// <TableCell align="right">{group.pharmacist}</TableCell>
// <TableCell align="right">{group.progress}</TableCell>
// </TableRow>
// ))}
// </TableBody>
// </Table>
// </TableContainer>
// </Paper>
// </div>
// );
// }

const GroupsTable = ({ data }) => {
const classes = useStyles();

return (
<div className={classes.root}>
<Paper>
<Typography variant="h5" component="h1" className={classes.heading}>
Group Table
</Typography>
<TableContainer>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Group Number</TableCell>
<TableCell align="right">Nurse</TableCell>
<TableCell align="right">Doctor</TableCell>
<TableCell align="right">Pharmacist</TableCell>
<TableCell align="right">Progress</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((group) => (
<TableRow key={group._id}>
<TableCell component="th" scope="row">
{group._id}
</TableCell>
<TableCell align="right">
<ul>
{group.users.map((user) => (
<li key={user.email}>
{user.name} ({user.role})
</li>
))}
</ul>
</TableCell>
<TableCell align="right">{group.scenarioId}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Paper>
</div>
);
};

const ManageGroups = () => {
const [groups, setGroups] = useState([]);
const [users, setUsers] = useState([]);

useEffect(() => {
axios
.get("/api/groups")
.then((response) => {
setGroups(response.data);
})
.catch((error) => {
console.error("Error fetching groups:", error);
});
}, []);
if (data) {
setUsers(data);
}
}, [data]);

return <GroupsTable data={groups} />;
return (
<>
<div className={classes.root}>
<Paper>
<Typography variant="h5" component="h1" className={classes.heading}>
Group Table
</Typography>
<TableContainer>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Group Number</TableCell>
<TableCell align="right">Name</TableCell>
<TableCell align="right">Email</TableCell>
<TableCell align="right">Role</TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.map((user, index) => (
<TableRow key={user.email || index}>
<TableCell component="th" scope="row">
{user.group}
</TableCell>
<TableCell align="right">{user.name}</TableCell>
<TableCell align="right">{user.email}</TableCell>
<TableCell align="right">{user.role}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Paper>
</div>
</>
);
};

export default ManageGroups;
export default GroupsTable;
33 changes: 1 addition & 32 deletions frontend/src/containers/pages/ManageGroups/ManageGroupsPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,37 +31,6 @@ export default function ManageGroupsPage() {

fetchGroups();

const tableData = [
{
groupNumber: 1,
nurse: "Alice Cheng",
doctor: "Bob Marley",
pharmacist: "Charlie Puth",
progress: "50%",
},
{
groupNumber: 2,
nurse: "Alice Cheng",
doctor: "Bob Marley",
pharmacist: "Charlie Puth",
progress: "20%",
},
{
groupNumber: 3,
nurse: "Alice Cheng",
doctor: "Bob Marley",
pharmacist: "Charlie Puth",
progress: "0%",
},
{
groupNumber: 4,
nurse: "Alice Cheng",
doctor: "Bob Marley",
pharmacist: "Charlie Puth",
progress: "300%",
},
];

// File input is a hidden input element that is activated via a click handler
// This allows us to have an UI button that acts like a file <input> element.
const fileInputRef = useRef(null);
Expand Down Expand Up @@ -201,7 +170,7 @@ export default function ManageGroupsPage() {
</Button>
</TopBar>

<GroupsTable data={tableData} />
<GroupsTable data={groups} />
</ScreenContainer>
);
}
Expand Down

0 comments on commit eca9beb

Please sign in to comment.