-
+
{heading ? heading : placeholder }
@@ -135,6 +214,13 @@ export default function Dashboard() {
className={"lg:stats-horizontal mb-10"}
groupData={scenarioGroupInfo}
/>
+ {user.uid == scenario.uid && (
+
+ )}
+
Groups Table
{!isLoading && (
-
-
-
- {mode == "groups" ? "Group Table" : "Group Members"}
-
-
-
-
- {mode == "groups" ? (
-
-
- handleRequestSort("groupNum")}
- >
- Group Number/Name
-
-
-
- handleRequestSort("groupSize")}
- >
- Number of Members
-
-
- Members - [Role]
-
- handleRequestSort("groupStarted")}
- >
- Started
-
-
- View Progress
-
- ) : (
-
-
- handleRequestSort("name")}
- >
- Name
-
-
-
- handleRequestSort("email")}
- >
- Email
-
-
-
- handleRequestSort("role")}
- >
- Role
-
-
-
- )}
-
-
- {mode == "groups"
- ? visibleRows.map((ginfo, index) => (
-
-
- {ginfo.users[0].group}
-
- {ginfo.users.length}
-
- {ginfo.users.map((user) => (
-
- {user.name} - [{user.role}]
-
- ))}
-
-
- {ginfo.path.length != 0 ? "Started" : "Not yet started"}
-
-
- {
- rowClick(ginfo._id);
- }}
- />
-
-
- ))
- : visibleRows.map((user, index) => (
-
-
- {user.name}
-
-
- {user.email}
-
-
- {user.role}
-
-
- ))}
- {emptyRows > 0 && (
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- State Variables
-
- {children}
-
-
-
- {hasStateVar
- ? "State variables will show up once the group has started the scenario."
- : "No state variables has been created for this scenario."}
-
-
- );
- } else {
- return (
-
-
-
-
-
-
- handleRequestSort("name")}
- >
- Name
-
-
-
- handleRequestSort("type")}
- >
- Type
-
-
-
- handleRequestSort("value")}
- >
- Value
-
-
-
-
-
- {visibleRows.map((stateVar) => (
-
- {stateVar.name}
- {stateVar.type}
-
- {stateVar.type === "boolean"
- ? stateVar.value
- ? "True"
- : "False"
- : stateVar.value}
-
-
- ))}
- {emptyRows > 0 && (
-
-
- )}
-
-
-
-
-
-
-
-
- );
- }
-};
-
-export default StateVarTable;
diff --git a/frontend/src/features/dashboard/components/ViewGroup.jsx b/frontend/src/features/dashboard/components/ViewGroup.jsx
index 1d442b31..06b2d4f7 100644
--- a/frontend/src/features/dashboard/components/ViewGroup.jsx
+++ b/frontend/src/features/dashboard/components/ViewGroup.jsx
@@ -1,16 +1,11 @@
import { useState, useContext, useEffect } from "react";
-import { useParams } from "react-router-dom";
import ScenarioContext from "../../../context/ScenarioContext";
-import { useGet } from "../../../hooks/crudHooks";
-import DashGroupTable from "./DashGroupTable";
-import StateVarTable from "./StateVarTable";
+import DashGroupTable from "./table/DashGroupTable";
+import StateVarTable from "./table/StateVarTable";
-export default function ViewGroup() {
- const { groupId } = useParams();
- const [groupInfo, setGroupInfo] = useState({});
+export default function ViewGroup({ groupInfo }) {
const [hasStateVar, setHasStateVar] = useState(false);
const { stateVariables } = useContext(ScenarioContext);
- useGet(`/api/group/retrieve/${groupId}`, setGroupInfo, true);
useEffect(() => {
if (!Array.isArray(stateVariables)) return;
@@ -21,11 +16,17 @@ export default function ViewGroup() {
{Object.keys(groupInfo) != 0 && (
-
-
+
+
Group Members
+
+
+
State Variables
+
)}
(You)
;
+ return (
+
handleDelete(item.uid)}
+ aria-label={`Delete ${item.name}`}
+ className="btn btn-ghost btn-sm"
+ >
+
+ );
+ },
+ },
+ ]);
+
+ const [pagination, setPagination] = useState({
+ pageIndex: 0,
+ pageSize: 5,
+ });
+ const table = useReactTable({
+ data,
+ columns,
+ state: { sorting, globalFilter, pagination },
+ onSortingChange: setSorting,
+ onGlobalFilterChange: setGlobalFilter,
+ getCoreRowModel: getCoreRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ onPaginationChange: setPagination,
+ });
+
+ const handleSearchChange = (e) => {
+ const v = e.target.value || "";
+ // console.log(v)
+ table.setGlobalFilter(v);
+ };
+
+ const handleChange = (e) => {
+ // console.log(e.target.value)
+ setSelectedUserIndex(e.target.value);
+ };
+
+ async function handleGrantAccess() {
+ if (selectedUserIndex == -1) return;
+
+ try {
+ const uid = options[selectedUserIndex].value;
+ const result = await axios.put(
+ `/api/access/${scenarioId}/users/${uid}`,
+ {},
+ {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+ if (result.status == 200) {
+ await fetchAccessList();
+ userReFetch();
+ }
+ } catch (err) {
+ console.log(err.message);
+ }
+ }
+
+ return (
+ <>
+
+
+
+
+ {table.getHeaderGroups().map((hg) => (
+
+ {hg.headers.map((header) => (
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ ))}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+ ))}
+
+ ))}
+ {table.getRowModel().rows.length == 0 && (
+
+
+ No Results
+
+
+ )}
+
+
+
+
+
+ {/* row per page */}
+
+ Rows per page:
+ {
+ table.setPageSize(Number(e.target.value));
+ }}
+ className="select select-xs w-[40%]"
+ >
+ 5
+ 10
+ 25
+ All
+
+
+ {/* No. of items */}
+
+ {/* some funky math going on here displaying the wrong data showing 1-2 instead of 1-1 when only 1 row */}
+ {pagination.pageSize * pagination.pageIndex + 1} -{" "}
+ {Math.max(
+ Math.min(pagination.pageSize, data.length),
+ pagination.pageSize * pagination.pageIndex +
+ 1 +
+ Math.ceil(data.length / pagination.pageSize)
+ )}{" "}
+ of {data.length}
+
+
+ table.firstPage()}
+ disabled={!table.getCanPreviousPage()}
+ aria-label="first page"
+ >
+
+ table.previousPage()}
+ disabled={!table.getCanPreviousPage()}
+ aria-label="previous page"
+ >
+
+ table.nextPage()}
+ disabled={!table.getCanNextPage()}
+ aria-label="next page"
+ >
+
+ table.lastPage()}
+ disabled={!table.getCanNextPage()}
+ aria-label="last page"
+ >
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AccessTable;
diff --git a/frontend/src/features/dashboard/components/table/CustomPagination.jsx b/frontend/src/features/dashboard/components/table/CustomPagination.jsx
new file mode 100644
index 00000000..de55b539
--- /dev/null
+++ b/frontend/src/features/dashboard/components/table/CustomPagination.jsx
@@ -0,0 +1,61 @@
+const CustomPagination = ({
+ colSpan,
+ value,
+ onChange,
+ count,
+ page,
+ rowsPerPage,
+ onPageChange,
+ actionComponent,
+}) => {
+ const actionNode = (() => {
+ if (actionComponent) {
+ const Comp = actionComponent;
+ return (
+
+ );
+ }
+ return null;
+ })();
+
+ return (
+
+
+
+ {/* row per page */}
+
+ Rows per page:
+
+ 5
+ 10
+ 25
+ All
+
+
+ {/* No. of items */}
+
+ {rowsPerPage * page + 1} -{" "}
+ {Math.max(
+ Math.min(rowsPerPage, count),
+ rowsPerPage * page + 1 + Math.ceil(count / rowsPerPage)
+ )}{" "}
+ of {count}
+
+ {/* Pagination Buttons */}
+
{actionNode}
+
+
+ );
+};
+
+export default CustomPagination;
diff --git a/frontend/src/features/dashboard/components/table/CustomSortHeader.jsx b/frontend/src/features/dashboard/components/table/CustomSortHeader.jsx
new file mode 100644
index 00000000..bb094736
--- /dev/null
+++ b/frontend/src/features/dashboard/components/table/CustomSortHeader.jsx
@@ -0,0 +1,24 @@
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+
+const CustomSortHeader = ({ active, direction, onClick, children }) => {
+ return (
+
+
+ {children}
+
+
+
+
+ );
+};
+
+export default CustomSortHeader;
diff --git a/frontend/src/features/dashboard/components/table/DashGroupTable.jsx b/frontend/src/features/dashboard/components/table/DashGroupTable.jsx
new file mode 100644
index 00000000..470cf845
--- /dev/null
+++ b/frontend/src/features/dashboard/components/table/DashGroupTable.jsx
@@ -0,0 +1,161 @@
+import { Visibility } from "@material-ui/icons";
+import { useMemo, useState } from "react";
+import TablePaginationActions from "./TablePaginationAction";
+import getComparator from "../../utils/TableHelper";
+import CustomSortHeader from "./CustomSortHeader";
+import CustomPagination from "./CustomPagination";
+// Need to update this to be able to take either multiple groups or individual group (to display members per row)
+// Acutally need to update this component to make it reuseable and take in params to dynamically display thead, tdata stuff with num col etc
+
+const DashGroupTable = ({ groupInfo, rowClick }) => {
+ // Check if group info is in array (Scenario Dashboard) or object (Vewiing Group)
+ // Maybe just make mode default to groups?
+ let mode;
+ let group = [];
+ if (Array.isArray(groupInfo)) {
+ mode = "groups";
+ group = groupInfo;
+ } else if (groupInfo && groupInfo.users) {
+ mode = "members";
+ group = [groupInfo];
+ }
+
+ const [page, setPage] = useState(0);
+ const [rowsPerPage, setRowsPerPage] = useState(5);
+ const [order, setOrder] = useState("asc");
+ const [orderBy, setOrderBy] = useState(
+ mode === "groups" ? "groupNum" : "name"
+ );
+
+ const handleRequestSort = (property) => {
+ const isAsc = orderBy === property && order === "asc";
+ setOrder(isAsc ? "desc" : "asc");
+ setOrderBy(property);
+ };
+
+ const handleChangePage = (event, newPage) => {
+ setPage(newPage);
+ };
+ const handleChangeRowsPerPage = (event) => {
+ setRowsPerPage(parseInt(event.target.value, 10));
+ setPage(0);
+ };
+
+ var sort = mode === "groups" ? group : group[0].users;
+
+ const visibleRows = useMemo(
+ () =>
+ [...sort]
+ .sort(getComparator(order, orderBy))
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+ [order, orderBy, page, rowsPerPage]
+ );
+
+ return (
+
+
+
+ {mode == "groups" ? (
+
+ handleRequestSort("groupNum")}
+ >
+ Group Number
+
+ handleRequestSort("groupSize")}
+ >
+ Number of Members
+
+ Members - [Role]
+ handleRequestSort("groupStarted")}
+ >
+ Started
+
+ View Progress
+
+ ) : (
+
+ handleRequestSort("name")}
+ >
+ Name
+
+ handleRequestSort("email")}
+ >
+ Email
+
+ handleRequestSort("role")}
+ >
+ Role
+
+
+ )}
+
+
+ {mode == "groups"
+ ? visibleRows.map((ginfo, index) => (
+
+ {ginfo.users[0].group}
+ {ginfo.users.length}
+
+ {ginfo.users.map((user) => (
+
+ {user.name} - [{user.role}]
+
+ ))}
+
+
+ {ginfo.path.length != 0 ? "Started" : "Not yet started"}
+
+
+ {
+ rowClick(ginfo._id);
+ }}
+ />
+
+
+ ))
+ : visibleRows.map((user, index) => (
+
+ {user.name}
+ {user.email}
+ {user.role}
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export default DashGroupTable;
diff --git a/frontend/src/features/dashboard/components/table/StateVarTable.jsx b/frontend/src/features/dashboard/components/table/StateVarTable.jsx
new file mode 100644
index 00000000..84d662ea
--- /dev/null
+++ b/frontend/src/features/dashboard/components/table/StateVarTable.jsx
@@ -0,0 +1,110 @@
+import { useState, useMemo } from "react";
+import TablePaginationActions from "./TablePaginationAction";
+import getComparator from "../../utils/TableHelper";
+import CustomSortHeader from "./CustomSortHeader";
+import CustomPagination from "./CustomPagination";
+const StateVarTable = ({ data, hasStateVar }) => {
+ const [page, setPage] = useState(0);
+ const [rowsPerPage, setRowsPerPage] = useState(5);
+ const emptyRows =
+ page > 0 ? Math.max(0, (1 + page) * rowsPerPage - data.length) : 0;
+ const [order, setOrder] = useState("asc");
+ const [orderBy, setOrderBy] = useState("name");
+
+ const handleRequestSort = (property) => {
+ const isAsc = orderBy === property && order === "asc";
+ setOrder(isAsc ? "desc" : "asc");
+ setOrderBy(property);
+ };
+ const handleChangePage = (event, newPage) => {
+ setPage(newPage);
+ };
+ const handleChangeRowsPerPage = (event) => {
+ setRowsPerPage(parseInt(event.target.value, 10));
+ setPage(0);
+ };
+
+ const visibleRows = useMemo(
+ () =>
+ [...data]
+ .sort(getComparator(order, orderBy))
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+ [order, orderBy, page, rowsPerPage]
+ );
+
+ if (data.length == 0) {
+ return (
+
+ {hasStateVar
+ ? "State variables will show up once the group has started the scenario."
+ : "No state variables has been created for this scenario."}
+
+ );
+ } else {
+ return (
+
+
+
+
+ handleRequestSort("name")}
+ >
+ Name
+
+ handleRequestSort("type")}
+ >
+ Type
+
+ handleRequestSort("value")}
+ >
+ Value
+
+
+
+
+ {visibleRows.map((stateVar) => (
+
+ {stateVar.name}
+ {stateVar.type}
+
+ {stateVar.type === "boolean"
+ ? stateVar.value
+ ? "True"
+ : "False"
+ : stateVar.value}
+
+
+ ))}
+ {emptyRows > 0 && (
+
+
+ )}
+
+
+
+
+
+ );
+ }
+};
+
+export default StateVarTable;
diff --git a/frontend/src/features/dashboard/components/TablePaginationAction.jsx b/frontend/src/features/dashboard/components/table/TablePaginationAction.jsx
similarity index 83%
rename from frontend/src/features/dashboard/components/TablePaginationAction.jsx
rename to frontend/src/features/dashboard/components/table/TablePaginationAction.jsx
index 7dc32398..f82d190f 100644
--- a/frontend/src/features/dashboard/components/TablePaginationAction.jsx
+++ b/frontend/src/features/dashboard/components/table/TablePaginationAction.jsx
@@ -2,8 +2,6 @@
* https://mui.com/material-ui/react-table/#custom-pagination-actions
*/
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
import FirstPageIcon from "@mui/icons-material/FirstPage";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
@@ -29,35 +27,39 @@ export default function TablePaginationActions(props) {
};
return (
-
-
+
-
+
-
+ = Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
-
+ = Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
-
+
+