From ba3588e97db770f5ffc4cfb36e93b688cb3d73b4 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Mon, 30 Oct 2023 15:27:48 +0000 Subject: [PATCH] Updated the groups section for the teachers and admins --- src/dashboards/Corporate.tsx | 30 ++++++++++++++++++++++++--- src/dashboards/Teacher.tsx | 6 +++--- src/hooks/useGroups.tsx | 9 ++++++-- src/pages/(admin)/Lists/GroupList.tsx | 24 +++++++++++++-------- 4 files changed, 52 insertions(+), 17 deletions(-) diff --git a/src/dashboards/Corporate.tsx b/src/dashboards/Corporate.tsx index 2e9dfaa1..4b2c3f29 100644 --- a/src/dashboards/Corporate.tsx +++ b/src/dashboards/Corporate.tsx @@ -15,6 +15,7 @@ import { BsGlobeCentralSouthAsia, BsPaperclip, BsPerson, + BsPersonAdd, BsPersonFill, BsPersonFillGear, BsPersonGear, @@ -27,6 +28,7 @@ import {MODULE_ARRAY} from "@/utils/moduleUtils"; import {Module} from "@/interfaces"; import {groupByExam} from "@/utils/stats"; import IconCard from "./IconCard"; +import GroupList from "@/pages/(admin)/Lists/GroupList"; interface Props { user: User; @@ -116,6 +118,26 @@ export default function CorporateDashboard({user}: Props) { ); }; + const GroupsList = () => { + const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id); + + return ( + <> +
+
setPage("")} + className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"> + + Back +
+

Groups ({groups.filter(filter).length})

+
+ + + + ); + }; + const averageLevelCalculator = (studentStats: Stat[]) => { const formattedStats = studentStats .map((s) => ({focus: users.find((u) => u.id === s.user)?.focus, score: s.score, module: s.module})) @@ -132,8 +154,8 @@ export default function CorporateDashboard({user}: Props) { }; const DefaultDashboard = () => ( -
-
+ <> +
setPage("students")} Icon={BsPersonFill} @@ -160,6 +182,7 @@ export default function CorporateDashboard({user}: Props) { value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)} color="purple" /> + setPage("groups")} Icon={BsPersonAdd} label="Groups" value={groups.length} color="purple" />
- + ); return ( @@ -243,6 +266,7 @@ export default function CorporateDashboard({user}: Props) { {page === "students" && } {page === "teachers" && } + {page === "groups" && } {page === "" && } ); diff --git a/src/dashboards/Teacher.tsx b/src/dashboards/Teacher.tsx index 742605a8..06e485dd 100644 --- a/src/dashboards/Teacher.tsx +++ b/src/dashboards/Teacher.tsx @@ -91,7 +91,7 @@ export default function TeacherDashboard({user}: Props) { }; const GroupsList = () => { - const filter = (x: Group) => x.admin === user.id; + const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id); return ( <> @@ -126,7 +126,7 @@ export default function TeacherDashboard({user}: Props) { }; const DefaultDashboard = () => ( -
+ <>
setPage("students")} @@ -188,7 +188,7 @@ export default function TeacherDashboard({user}: Props) {
- + ); return ( diff --git a/src/hooks/useGroups.tsx b/src/hooks/useGroups.tsx index d0d5187f..8d3bbc9d 100644 --- a/src/hooks/useGroups.tsx +++ b/src/hooks/useGroups.tsx @@ -10,8 +10,13 @@ export default function useGroups(admin?: string) { const getData = () => { setIsLoading(true); axios - .get(!admin ? "/api/groups" : `/api/groups?admin=${admin}`) - .then((response) => setGroups(response.data)) + .get("/api/groups") + .then((response) => { + const filter = (g: Group) => g.admin === admin || g.participants.includes(admin || ""); + + const filteredGroups = admin ? response.data.filter(filter) : response.data; + return setGroups(admin ? filteredGroups.map((g) => ({...g, disableEditing: g.disableEditing || g.admin !== admin})) : filteredGroups); + }) .finally(() => setIsLoading(false)); }; diff --git a/src/pages/(admin)/Lists/GroupList.tsx b/src/pages/(admin)/Lists/GroupList.tsx index 114eea53..d59f9bbb 100644 --- a/src/pages/(admin)/Lists/GroupList.tsx +++ b/src/pages/(admin)/Lists/GroupList.tsx @@ -122,13 +122,15 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => { ); }; +const filterTypes = ["corporate", "teacher"]; + export default function GroupList({user}: {user: User}) { const [editingID, setEditingID] = useState(); const [showDisclosure, setShowDisclosure] = useState(false); const [filterByUser, setFilterByUser] = useState(false); const {users} = useUsers(); - const {groups, reload} = useGroups(filterByUser ? user.id : undefined); + const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined); useEffect(() => { if (editingID) setShowDisclosure(true); @@ -214,7 +216,7 @@ export default function GroupList({user}: {user: User}) { cell: ({row}: {row: {original: Group}}) => { return ( <> - {(user.type === "developer" || user.type === "owner" || user.id === row.original.admin) && ( + {(user?.type === "developer" || user?.type === "owner" || user.id === row.original.admin) && (
{editingID !== row.original.id && (
setEditingID(row.original.id)}> @@ -290,13 +292,17 @@ export default function GroupList({user}: {user: User}) { x.id === editingID) : undefined} user={user} - users={users.filter( - (u) => - groups - .filter((g) => g.admin === user.id) - .flatMap((g) => g.participants) - .includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id), - )} + users={ + user?.type === "corporate" || user?.type === "teacher" + ? users.filter( + (u) => + groups + .filter((g) => g.admin === user.id) + .flatMap((g) => g.participants) + .includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id), + ) + : users + } onCreate={(group) => { (!editingID ? createGroup : updateGroup)(group).then((result) => { if (result) {