Refactor most getServerProps to fetch independent request in parallel and projected the data only to return the necessary fields and changed some functions
This commit is contained in:
José Marques Lima
@@ -61,7 +61,14 @@ export default function App({ Component, pageProps }: AppProps) {
|
||||
|
||||
return pageProps?.user ? (
|
||||
<Layout user={pageProps.user} entities={entities} refreshPage={loading}>
|
||||
{loading ? <UserProfileSkeleton /> : <Component {...pageProps} />}
|
||||
{loading ? (
|
||||
// TODO: Change this later to a better loading screen (example: skeletons for each page)
|
||||
<div className="min-h-screen flex justify-center items-start">
|
||||
<span className="loading loading-infinity w-32" />
|
||||
</div>
|
||||
) : (
|
||||
<Component entities={entities} {...pageProps} />
|
||||
)}
|
||||
</Layout>
|
||||
) : (
|
||||
<Component {...pageProps} />
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -5,16 +5,16 @@ import { useListSearch } from "@/hooks/useListSearch";
|
||||
import usePagination from "@/hooks/usePagination";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { Assignment } from "@/interfaces/results";
|
||||
import { User } from "@/interfaces/user";
|
||||
import { User } from "@/interfaces/user";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { findBy, mapBy, redirect, serialize } from "@/utils";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import {
|
||||
activeAssignmentFilter,
|
||||
archivedAssignmentFilter,
|
||||
futureAssignmentFilter,
|
||||
pastAssignmentFilter,
|
||||
startHasExpiredAssignmentFilter,
|
||||
activeAssignmentFilter,
|
||||
archivedAssignmentFilter,
|
||||
futureAssignmentFilter,
|
||||
pastAssignmentFilter,
|
||||
startHasExpiredAssignmentFilter,
|
||||
} from "@/utils/assignments";
|
||||
import { getAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
@@ -28,197 +28,309 @@ import { useMemo } from "react";
|
||||
import { BsChevronLeft, BsPlus } from "react-icons/bs";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res)
|
||||
if (!user) return redirect("/login")
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (!checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
|
||||
return redirect("/")
|
||||
if (
|
||||
!checkAccess(user, [
|
||||
"admin",
|
||||
"developer",
|
||||
"corporate",
|
||||
"teacher",
|
||||
"mastercorporate",
|
||||
])
|
||||
)
|
||||
return redirect("/");
|
||||
const isAdmin = checkAccess(user, ["developer", "admin"]);
|
||||
const entityIDS = mapBy(user.entities, "id") || [];
|
||||
const entities = await (isAdmin
|
||||
? getEntitiesWithRoles()
|
||||
: getEntitiesWithRoles(entityIDS));
|
||||
|
||||
const entityIDS = mapBy(user.entities, "id") || [];
|
||||
const entities = await (checkAccess(user, ["developer", "admin"]) ? getEntitiesWithRoles() : getEntitiesWithRoles(entityIDS));
|
||||
const allowedEntities = findAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"view_assignments"
|
||||
);
|
||||
const [users, assignments] = await Promise.all([
|
||||
await (isAdmin
|
||||
? getUsers({}, 0, {}, { _id: 0, id: 1, name: 1 })
|
||||
: getEntitiesUsers(mapBy(allowedEntities, "id"), {}, 0, {
|
||||
_id: 0,
|
||||
id: 1,
|
||||
name: 1,
|
||||
})),
|
||||
await (isAdmin
|
||||
? getAssignments()
|
||||
: getEntitiesAssignments(mapBy(allowedEntities, "id"))),
|
||||
]);
|
||||
|
||||
const allowedEntities = findAllowedEntities(user, entities, "view_assignments")
|
||||
|
||||
const users =
|
||||
await (checkAccess(user, ["developer", "admin"]) ? getUsers() : getEntitiesUsers(mapBy(allowedEntities, 'id')));
|
||||
|
||||
const assignments =
|
||||
await (checkAccess(user, ["developer", "admin"]) ? getAssignments() : getEntitiesAssignments(mapBy(allowedEntities, 'id')));
|
||||
|
||||
return { props: serialize({ user, users, entities: allowedEntities, assignments }) };
|
||||
return {
|
||||
props: serialize({ user, users, entities: allowedEntities, assignments }),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
const SEARCH_FIELDS = [["name"]];
|
||||
|
||||
interface Props {
|
||||
assignments: Assignment[];
|
||||
entities: EntityWithRoles[]
|
||||
user: User;
|
||||
users: User[];
|
||||
assignments: Assignment[];
|
||||
entities: EntityWithRoles[];
|
||||
user: User;
|
||||
users: User[];
|
||||
}
|
||||
|
||||
export default function AssignmentsPage({ assignments, entities, user, users }: Props) {
|
||||
const entitiesAllowCreate = useAllowedEntities(user, entities, 'create_assignment')
|
||||
const entitiesAllowEdit = useAllowedEntities(user, entities, 'edit_assignment')
|
||||
const entitiesAllowArchive = useAllowedEntities(user, entities, 'archive_assignment')
|
||||
export default function AssignmentsPage({
|
||||
assignments,
|
||||
entities,
|
||||
user,
|
||||
users,
|
||||
}: Props) {
|
||||
const entitiesAllowCreate = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_assignment"
|
||||
);
|
||||
const entitiesAllowEdit = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"edit_assignment"
|
||||
);
|
||||
const entitiesAllowArchive = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"archive_assignment"
|
||||
);
|
||||
|
||||
const activeAssignments = useMemo(() => assignments.filter(activeAssignmentFilter), [assignments]);
|
||||
const plannedAssignments = useMemo(() => assignments.filter(futureAssignmentFilter), [assignments]);
|
||||
const pastAssignments = useMemo(() => assignments.filter(pastAssignmentFilter), [assignments]);
|
||||
const startExpiredAssignments = useMemo(() => assignments.filter(startHasExpiredAssignmentFilter), [assignments]);
|
||||
const archivedAssignments = useMemo(() => assignments.filter(archivedAssignmentFilter), [assignments]);
|
||||
const activeAssignments = useMemo(
|
||||
() => assignments.filter(activeAssignmentFilter),
|
||||
[assignments]
|
||||
);
|
||||
const plannedAssignments = useMemo(
|
||||
() => assignments.filter(futureAssignmentFilter),
|
||||
[assignments]
|
||||
);
|
||||
const pastAssignments = useMemo(
|
||||
() => assignments.filter(pastAssignmentFilter),
|
||||
[assignments]
|
||||
);
|
||||
const startExpiredAssignments = useMemo(
|
||||
() => assignments.filter(startHasExpiredAssignmentFilter),
|
||||
[assignments]
|
||||
);
|
||||
const archivedAssignments = useMemo(
|
||||
() => assignments.filter(archivedAssignmentFilter),
|
||||
[assignments]
|
||||
);
|
||||
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
const { rows: activeRows, renderSearch: renderActive } = useListSearch(SEARCH_FIELDS, activeAssignments);
|
||||
const { rows: plannedRows, renderSearch: renderPlanned } = useListSearch(SEARCH_FIELDS, plannedAssignments);
|
||||
const { rows: pastRows, renderSearch: renderPast } = useListSearch(SEARCH_FIELDS, pastAssignments);
|
||||
const { rows: expiredRows, renderSearch: renderExpired } = useListSearch(SEARCH_FIELDS, startExpiredAssignments);
|
||||
const { rows: archivedRows, renderSearch: renderArchived } = useListSearch(SEARCH_FIELDS, archivedAssignments);
|
||||
const { rows: activeRows, renderSearch: renderActive } = useListSearch(
|
||||
SEARCH_FIELDS,
|
||||
activeAssignments
|
||||
);
|
||||
const { rows: plannedRows, renderSearch: renderPlanned } = useListSearch(
|
||||
SEARCH_FIELDS,
|
||||
plannedAssignments
|
||||
);
|
||||
const { rows: pastRows, renderSearch: renderPast } = useListSearch(
|
||||
SEARCH_FIELDS,
|
||||
pastAssignments
|
||||
);
|
||||
const { rows: expiredRows, renderSearch: renderExpired } = useListSearch(
|
||||
SEARCH_FIELDS,
|
||||
startExpiredAssignments
|
||||
);
|
||||
const { rows: archivedRows, renderSearch: renderArchived } = useListSearch(
|
||||
SEARCH_FIELDS,
|
||||
archivedAssignments
|
||||
);
|
||||
|
||||
const { items: activeItems, renderMinimal: paginationActive } = usePagination(activeRows, 16);
|
||||
const { items: plannedItems, renderMinimal: paginationPlanned } = usePagination(plannedRows, 16);
|
||||
const { items: pastItems, renderMinimal: paginationPast } = usePagination(pastRows, 16);
|
||||
const { items: expiredItems, renderMinimal: paginationExpired } = usePagination(expiredRows, 16);
|
||||
const { items: archivedItems, renderMinimal: paginationArchived } = usePagination(archivedRows, 16);
|
||||
const { items: activeItems, renderMinimal: paginationActive } = usePagination(
|
||||
activeRows,
|
||||
16
|
||||
);
|
||||
const { items: plannedItems, renderMinimal: paginationPlanned } =
|
||||
usePagination(plannedRows, 16);
|
||||
const { items: pastItems, renderMinimal: paginationPast } = usePagination(
|
||||
pastRows,
|
||||
16
|
||||
);
|
||||
const { items: expiredItems, renderMinimal: paginationExpired } =
|
||||
usePagination(expiredRows, 16);
|
||||
const { items: archivedItems, renderMinimal: paginationArchived } =
|
||||
usePagination(archivedRows, 16);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Assignments | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link href="/dashboard" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
|
||||
<BsChevronLeft />
|
||||
</Link>
|
||||
<h2 className="font-bold text-2xl">Assignments</h2>
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-lg font-bold">Active Assignments Status</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span>
|
||||
<b>Total:</b> {activeAssignments.reduce((acc, curr) => acc + curr.results.length, 0)}/
|
||||
{activeAssignments.reduce((acc, curr) => curr.exams.length + acc, 0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Assignments | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
|
||||
>
|
||||
<BsChevronLeft />
|
||||
</Link>
|
||||
<h2 className="font-bold text-2xl">Assignments</h2>
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-lg font-bold">Active Assignments Status</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span>
|
||||
<b>Total:</b>{" "}
|
||||
{activeAssignments.reduce(
|
||||
(acc, curr) => acc + curr.results.length,
|
||||
0
|
||||
)}
|
||||
/
|
||||
{activeAssignments.reduce(
|
||||
(acc, curr) => curr.exams.length + acc,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold">Active Assignments ({activeAssignments.length})</h2>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderActive()}
|
||||
{paginationActive()}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{activeItems.map((a) => (
|
||||
<AssignmentCard {...a} entityObj={findBy(entities, 'id', a.entity)} users={users} onClick={() => router.push(`/assignments/${a.id}`)} key={a.id} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold">
|
||||
Active Assignments ({activeAssignments.length})
|
||||
</h2>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderActive()}
|
||||
{paginationActive()}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{activeItems.map((a) => (
|
||||
<AssignmentCard
|
||||
{...a}
|
||||
entityObj={findBy(entities, "id", a.entity)}
|
||||
users={users}
|
||||
onClick={() => router.push(`/assignments/${a.id}`)}
|
||||
key={a.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold">Planned Assignments ({plannedAssignments.length})</h2>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderPlanned()}
|
||||
{paginationPlanned()}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Link
|
||||
href={entitiesAllowCreate.length > 0 ? "/assignments/creator" : ""}
|
||||
className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
|
||||
<BsPlus className="text-6xl" />
|
||||
<span className="text-lg">New Assignment</span>
|
||||
</Link>
|
||||
{plannedItems.map((a) => (
|
||||
<AssignmentCard
|
||||
{...a}
|
||||
users={users}
|
||||
entityObj={findBy(entities, 'id', a.entity)}
|
||||
onClick={
|
||||
mapBy(entitiesAllowEdit, 'id').includes(a.entity || "")
|
||||
? () => router.push(`/assignments/creator/${a.id}`)
|
||||
: () => router.push(`/assignments/${a.id}`)
|
||||
}
|
||||
key={a.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold">
|
||||
Planned Assignments ({plannedAssignments.length})
|
||||
</h2>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderPlanned()}
|
||||
{paginationPlanned()}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Link
|
||||
href={
|
||||
entitiesAllowCreate.length > 0 ? "/assignments/creator" : ""
|
||||
}
|
||||
className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300"
|
||||
>
|
||||
<BsPlus className="text-6xl" />
|
||||
<span className="text-lg">New Assignment</span>
|
||||
</Link>
|
||||
{plannedItems.map((a) => (
|
||||
<AssignmentCard
|
||||
{...a}
|
||||
users={users}
|
||||
entityObj={findBy(entities, "id", a.entity)}
|
||||
onClick={
|
||||
mapBy(entitiesAllowEdit, "id").includes(a.entity || "")
|
||||
? () => router.push(`/assignments/creator/${a.id}`)
|
||||
: () => router.push(`/assignments/${a.id}`)
|
||||
}
|
||||
key={a.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold">Past Assignments ({pastAssignments.length})</h2>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderPast()}
|
||||
{paginationPast()}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{pastItems.map((a) => (
|
||||
<AssignmentCard
|
||||
{...a}
|
||||
users={users}
|
||||
entityObj={findBy(entities, 'id', a.entity)}
|
||||
onClick={() => router.push(`/assignments/${a.id}`)}
|
||||
key={a.id}
|
||||
allowDownload
|
||||
allowArchive={mapBy(entitiesAllowArchive, 'id').includes(a.entity || "")}
|
||||
allowExcelDownload
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold">Assignments start expired ({startExpiredAssignments.length})</h2>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderExpired()}
|
||||
{paginationExpired()}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{expiredItems.map((a) => (
|
||||
<AssignmentCard
|
||||
{...a}
|
||||
users={users}
|
||||
entityObj={findBy(entities, 'id', a.entity)}
|
||||
onClick={() => router.push(`/assignments/${a.id}`)}
|
||||
key={a.id}
|
||||
allowDownload
|
||||
allowArchive={mapBy(entitiesAllowArchive, 'id').includes(a.entity || "")}
|
||||
allowExcelDownload
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold">Archived Assignments ({archivedAssignments.length})</h2>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderArchived()}
|
||||
{paginationArchived()}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{archivedItems.map((a) => (
|
||||
<AssignmentCard
|
||||
{...a}
|
||||
users={users}
|
||||
onClick={() => router.push(`/assignments/${a.id}`)}
|
||||
key={a.id}
|
||||
entityObj={findBy(entities, 'id', a.entity)}
|
||||
allowDownload
|
||||
allowUnarchive
|
||||
allowExcelDownload
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold">
|
||||
Past Assignments ({pastAssignments.length})
|
||||
</h2>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderPast()}
|
||||
{paginationPast()}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{pastItems.map((a) => (
|
||||
<AssignmentCard
|
||||
{...a}
|
||||
users={users}
|
||||
entityObj={findBy(entities, "id", a.entity)}
|
||||
onClick={() => router.push(`/assignments/${a.id}`)}
|
||||
key={a.id}
|
||||
allowDownload
|
||||
allowArchive={mapBy(entitiesAllowArchive, "id").includes(
|
||||
a.entity || ""
|
||||
)}
|
||||
allowExcelDownload
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold">
|
||||
Assignments start expired ({startExpiredAssignments.length})
|
||||
</h2>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderExpired()}
|
||||
{paginationExpired()}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{expiredItems.map((a) => (
|
||||
<AssignmentCard
|
||||
{...a}
|
||||
users={users}
|
||||
entityObj={findBy(entities, "id", a.entity)}
|
||||
onClick={() => router.push(`/assignments/${a.id}`)}
|
||||
key={a.id}
|
||||
allowDownload
|
||||
allowArchive={mapBy(entitiesAllowArchive, "id").includes(
|
||||
a.entity || ""
|
||||
)}
|
||||
allowExcelDownload
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-2xl font-semibold">
|
||||
Archived Assignments ({archivedAssignments.length})
|
||||
</h2>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderArchived()}
|
||||
{paginationArchived()}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{archivedItems.map((a) => (
|
||||
<AssignmentCard
|
||||
{...a}
|
||||
users={users}
|
||||
onClick={() => router.push(`/assignments/${a.id}`)}
|
||||
key={a.id}
|
||||
entityObj={findBy(entities, "id", a.entity)}
|
||||
allowDownload
|
||||
allowUnarchive
|
||||
allowExcelDownload
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,328 +18,476 @@ import { getEntityUsers, getSpecificUsers } from "@/utils/users.be";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import { capitalize } from "lodash";
|
||||
import { capitalize, last } from "lodash";
|
||||
import moment from "moment";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { Divider } from "primereact/divider";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { BsBuilding, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsFillPersonVcardFill, BsPlus, BsStopwatchFill, BsTag, BsTrash, BsX } from "react-icons/bs";
|
||||
import {
|
||||
BsBuilding,
|
||||
BsChevronLeft,
|
||||
BsClockFill,
|
||||
BsEnvelopeFill,
|
||||
BsFillPersonVcardFill,
|
||||
BsPlus,
|
||||
BsStopwatchFill,
|
||||
BsTag,
|
||||
BsTrash,
|
||||
BsX,
|
||||
} from "react-icons/bs";
|
||||
import { toast, ToastContainer } from "react-toastify";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
|
||||
const user = await requestUser(req, res)
|
||||
if (!user) return redirect("/login")
|
||||
export const getServerSideProps = withIronSessionSsr(
|
||||
async ({ req, res, params }) => {
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (shouldRedirectHome(user)) return redirect("/")
|
||||
if (shouldRedirectHome(user)) return redirect("/");
|
||||
|
||||
const { id } = params as { id: string };
|
||||
const { id } = params as { id: string };
|
||||
|
||||
const group = await getGroup(id);
|
||||
if (!group || !group.entity) return redirect("/classrooms")
|
||||
const group = await getGroup(id);
|
||||
if (!group || !group.entity) return redirect("/classrooms");
|
||||
|
||||
const entity = await getEntityWithRoles(group.entity)
|
||||
if (!entity) return redirect("/classrooms")
|
||||
const entity = await getEntityWithRoles(group.entity);
|
||||
if (!entity) return redirect("/classrooms");
|
||||
|
||||
const canView = doesEntityAllow(user, entity, "view_classrooms")
|
||||
if (!canView) return redirect("/")
|
||||
const canView = doesEntityAllow(user, entity, "view_classrooms");
|
||||
if (!canView) return redirect("/");
|
||||
const [linkedUsers, users] = await Promise.all([
|
||||
getEntityUsers(
|
||||
entity.id,
|
||||
0,
|
||||
{},
|
||||
{
|
||||
_id: 0,
|
||||
id: 1,
|
||||
name: 1,
|
||||
email: 1,
|
||||
corporateInformation: 1,
|
||||
type: 1,
|
||||
profilePicture: 1,
|
||||
subscriptionExpirationDate: 1,
|
||||
lastLogin: 1,
|
||||
}
|
||||
),
|
||||
getSpecificUsers([...group.participants, group.admin], {
|
||||
_id: 0,
|
||||
id: 1,
|
||||
name: 1,
|
||||
email: 1,
|
||||
corporateInformation: 1,
|
||||
type: 1,
|
||||
profilePicture: 1,
|
||||
subscriptionExpirationDate: 1,
|
||||
lastLogin: 1,
|
||||
}),
|
||||
]);
|
||||
|
||||
const linkedUsers = await getEntityUsers(entity.id)
|
||||
const users = await getSpecificUsers([...group.participants, group.admin]);
|
||||
const groupWithUser = convertToUsers(group, users);
|
||||
const groupWithUser = convertToUsers(group, users);
|
||||
|
||||
return {
|
||||
props: serialize({ user, group: groupWithUser, users: linkedUsers.filter(x => isAdmin(user) ? true : !isAdmin(x)), entity }),
|
||||
};
|
||||
}, sessionOptions);
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
group: groupWithUser,
|
||||
users: linkedUsers.filter((x) => (isAdmin(user) ? true : !isAdmin(x))),
|
||||
entity,
|
||||
}),
|
||||
};
|
||||
},
|
||||
sessionOptions
|
||||
);
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
group: GroupWithUsers;
|
||||
users: User[];
|
||||
entity: EntityWithRoles
|
||||
user: User;
|
||||
group: GroupWithUsers;
|
||||
users: User[];
|
||||
entity: EntityWithRoles;
|
||||
}
|
||||
|
||||
export default function Home({ user, group, users, entity }: Props) {
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
||||
|
||||
const canAddParticipants = useEntityPermission(user, entity, "add_to_classroom")
|
||||
const canRemoveParticipants = useEntityPermission(user, entity, "remove_from_classroom")
|
||||
const canRenameClassroom = useEntityPermission(user, entity, "rename_classrooms")
|
||||
const canDeleteClassroom = useEntityPermission(user, entity, "delete_classroom")
|
||||
const canAddParticipants = useEntityPermission(
|
||||
user,
|
||||
entity,
|
||||
"add_to_classroom"
|
||||
);
|
||||
const canRemoveParticipants = useEntityPermission(
|
||||
user,
|
||||
entity,
|
||||
"remove_from_classroom"
|
||||
);
|
||||
const canRenameClassroom = useEntityPermission(
|
||||
user,
|
||||
entity,
|
||||
"rename_classrooms"
|
||||
);
|
||||
const canDeleteClassroom = useEntityPermission(
|
||||
user,
|
||||
entity,
|
||||
"delete_classroom"
|
||||
);
|
||||
|
||||
const nonParticipantUsers = useMemo(
|
||||
() => users.filter((x) => ![...group.participants.map((g) => g.id), group.admin.id, user.id].includes(x.id)),
|
||||
[users, group.participants, group.admin.id, user.id],
|
||||
);
|
||||
const nonParticipantUsers = useMemo(
|
||||
() =>
|
||||
users.filter(
|
||||
(x) =>
|
||||
![
|
||||
...group.participants.map((g) => g.id),
|
||||
group.admin.id,
|
||||
user.id,
|
||||
].includes(x.id)
|
||||
),
|
||||
[users, group.participants, group.admin.id, user.id]
|
||||
);
|
||||
|
||||
const { rows, renderSearch } = useListSearch<User>(
|
||||
[["name"], ["corporateInformation", "companyInformation", "name"]],
|
||||
isAdding ? nonParticipantUsers : group.participants,
|
||||
);
|
||||
const { items, renderMinimal } = usePagination<User>(rows, 20);
|
||||
const { rows, renderSearch } = useListSearch<User>(
|
||||
[["name"], ["corporateInformation", "companyInformation", "name"]],
|
||||
isAdding ? nonParticipantUsers : group.participants
|
||||
);
|
||||
const { items, renderMinimal } = usePagination<User>(rows, 20);
|
||||
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
|
||||
const toggleUser = (u: User) =>
|
||||
setSelectedUsers((prev) =>
|
||||
prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]
|
||||
);
|
||||
|
||||
const removeParticipants = () => {
|
||||
if (selectedUsers.length === 0) return;
|
||||
if (!canRemoveParticipants) return;
|
||||
if (!confirm(`Are you sure you want to remove ${selectedUsers.length} participant${selectedUsers.length === 1 ? "" : "s"} from this group?`))
|
||||
return;
|
||||
const removeParticipants = () => {
|
||||
if (selectedUsers.length === 0) return;
|
||||
if (!canRemoveParticipants) return;
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure you want to remove ${selectedUsers.length} participant${
|
||||
selectedUsers.length === 1 ? "" : "s"
|
||||
} from this group?`
|
||||
)
|
||||
)
|
||||
return;
|
||||
|
||||
setIsLoading(true);
|
||||
setIsLoading(true);
|
||||
|
||||
axios
|
||||
.patch(`/api/groups/${group.id}`, { participants: group.participants.map((x) => x.id).filter((x) => !selectedUsers.includes(x)) })
|
||||
.then(() => {
|
||||
toast.success("The group has been updated successfully!");
|
||||
router.replace(router.asPath);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
axios
|
||||
.patch(`/api/groups/${group.id}`, {
|
||||
participants: group.participants
|
||||
.map((x) => x.id)
|
||||
.filter((x) => !selectedUsers.includes(x)),
|
||||
})
|
||||
.then(() => {
|
||||
toast.success("The group has been updated successfully!");
|
||||
router.replace(router.asPath);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const addParticipants = () => {
|
||||
if (selectedUsers.length === 0) return;
|
||||
if (!canAddParticipants || !isAdding) return;
|
||||
if (!confirm(`Are you sure you want to add ${selectedUsers.length} participant${selectedUsers.length === 1 ? "" : "s"} to this group?`))
|
||||
return;
|
||||
const addParticipants = () => {
|
||||
if (selectedUsers.length === 0) return;
|
||||
if (!canAddParticipants || !isAdding) return;
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure you want to add ${selectedUsers.length} participant${
|
||||
selectedUsers.length === 1 ? "" : "s"
|
||||
} to this group?`
|
||||
)
|
||||
)
|
||||
return;
|
||||
|
||||
setIsLoading(true);
|
||||
setIsLoading(true);
|
||||
|
||||
axios
|
||||
.patch(`/api/groups/${group.id}`, { participants: [...group.participants.map((x) => x.id), ...selectedUsers] })
|
||||
.then(() => {
|
||||
toast.success("The group has been updated successfully!");
|
||||
router.replace(router.asPath);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
axios
|
||||
.patch(`/api/groups/${group.id}`, {
|
||||
participants: [
|
||||
...group.participants.map((x) => x.id),
|
||||
...selectedUsers,
|
||||
],
|
||||
})
|
||||
.then(() => {
|
||||
toast.success("The group has been updated successfully!");
|
||||
router.replace(router.asPath);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const renameGroup = () => {
|
||||
if (!canRenameClassroom) return;
|
||||
const renameGroup = () => {
|
||||
if (!canRenameClassroom) return;
|
||||
|
||||
const name = prompt("Rename this classroom:", group.name);
|
||||
if (!name) return;
|
||||
const name = prompt("Rename this classroom:", group.name);
|
||||
if (!name) return;
|
||||
|
||||
setIsLoading(true);
|
||||
axios
|
||||
.patch(`/api/groups/${group.id}`, { name })
|
||||
.then(() => {
|
||||
toast.success("The classroom has been updated successfully!");
|
||||
router.replace(router.asPath);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
setIsLoading(true);
|
||||
axios
|
||||
.patch(`/api/groups/${group.id}`, { name })
|
||||
.then(() => {
|
||||
toast.success("The classroom has been updated successfully!");
|
||||
router.replace(router.asPath);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const deleteGroup = () => {
|
||||
if (!canDeleteClassroom) return;
|
||||
if (!confirm("Are you sure you want to delete this classroom?")) return;
|
||||
const deleteGroup = () => {
|
||||
if (!canDeleteClassroom) return;
|
||||
if (!confirm("Are you sure you want to delete this classroom?")) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setIsLoading(true);
|
||||
|
||||
axios
|
||||
.delete(`/api/groups/${group.id}`)
|
||||
.then(() => {
|
||||
toast.success("This classroom has been successfully deleted!");
|
||||
router.replace("/classrooms");
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
axios
|
||||
.delete(`/api/groups/${group.id}`)
|
||||
.then(() => {
|
||||
toast.success("This classroom has been successfully deleted!");
|
||||
router.replace("/classrooms");
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => setSelectedUsers([]), [isAdding]);
|
||||
useEffect(() => setSelectedUsers([]), [isAdding]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{group.name} | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
{user && (
|
||||
<>
|
||||
<section className="flex flex-col gap-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/classrooms"
|
||||
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
|
||||
<BsChevronLeft />
|
||||
</Link>
|
||||
<h2 className="font-bold text-2xl">{group.name}</h2>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{group.name} | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
{user && (
|
||||
<>
|
||||
<section className="flex flex-col gap-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/classrooms"
|
||||
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
|
||||
>
|
||||
<BsChevronLeft />
|
||||
</Link>
|
||||
<h2 className="font-bold text-2xl">{group.name}</h2>
|
||||
</div>
|
||||
|
||||
{!isAdding && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={renameGroup}
|
||||
disabled={isLoading || !canRenameClassroom}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
|
||||
<BsTag />
|
||||
<span className="text-xs">Rename Classroom</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={deleteGroup}
|
||||
disabled={isLoading || !canDeleteClassroom}
|
||||
className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
|
||||
<BsTrash />
|
||||
<span className="text-xs">Delete Classroom</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="flex items-center gap-2">
|
||||
<BsBuilding className="text-xl" /> {entity.label}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<BsFillPersonVcardFill className="text-xl" /> {getUserName(group.admin)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="font-semibold text-xl">Participants</span>
|
||||
{!isAdding && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setIsAdding(true)}
|
||||
disabled={isLoading || !canAddParticipants}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
|
||||
<BsPlus />
|
||||
<span className="text-xs">Add Participants</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={removeParticipants}
|
||||
disabled={selectedUsers.length === 0 || isLoading || !canRemoveParticipants}
|
||||
className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
|
||||
<BsTrash />
|
||||
<span className="text-xs">Remove Participants</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{isAdding && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setIsAdding(false)}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
|
||||
<BsX />
|
||||
<span className="text-xs">Discard Selection</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={addParticipants}
|
||||
disabled={selectedUsers.length === 0 || isLoading || !canAddParticipants}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
|
||||
<BsPlus />
|
||||
<span className="text-xs">Add Participants</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderSearch()}
|
||||
{renderMinimal()}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
{['student', 'teacher', 'corporate'].map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => {
|
||||
const typeUsers = mapBy(filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type), 'id')
|
||||
if (typeUsers.every((u) => selectedUsers.includes(u))) {
|
||||
setSelectedUsers((prev) => prev.filter((a) => !typeUsers.includes(a)));
|
||||
} else {
|
||||
setSelectedUsers((prev) => [...prev.filter((a) => !typeUsers.includes(a)), ...typeUsers]);
|
||||
}
|
||||
}}
|
||||
disabled={filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type).length === 0}
|
||||
className={clsx(
|
||||
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
|
||||
"transition duration-300 ease-in-out",
|
||||
"disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
|
||||
filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type).length > 0 &&
|
||||
filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type).every((u) => selectedUsers.includes(u.id)) &&
|
||||
"!bg-mti-purple-light !text-white",
|
||||
)}>
|
||||
{capitalize(type)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
{!isAdding && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={renameGroup}
|
||||
disabled={isLoading || !canRenameClassroom}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
|
||||
>
|
||||
<BsTag />
|
||||
<span className="text-xs">Rename Classroom</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={deleteGroup}
|
||||
disabled={isLoading || !canDeleteClassroom}
|
||||
className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
|
||||
>
|
||||
<BsTrash />
|
||||
<span className="text-xs">Delete Classroom</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="flex items-center gap-2">
|
||||
<BsBuilding className="text-xl" /> {entity.label}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<BsFillPersonVcardFill className="text-xl" />{" "}
|
||||
{getUserName(group.admin)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="font-semibold text-xl">Participants</span>
|
||||
{!isAdding && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setIsAdding(true)}
|
||||
disabled={isLoading || !canAddParticipants}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
|
||||
>
|
||||
<BsPlus />
|
||||
<span className="text-xs">Add Participants</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={removeParticipants}
|
||||
disabled={
|
||||
selectedUsers.length === 0 ||
|
||||
isLoading ||
|
||||
!canRemoveParticipants
|
||||
}
|
||||
className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
|
||||
>
|
||||
<BsTrash />
|
||||
<span className="text-xs">Remove Participants</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{isAdding && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setIsAdding(false)}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
|
||||
>
|
||||
<BsX />
|
||||
<span className="text-xs">Discard Selection</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={addParticipants}
|
||||
disabled={
|
||||
selectedUsers.length === 0 ||
|
||||
isLoading ||
|
||||
!canAddParticipants
|
||||
}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
|
||||
>
|
||||
<BsPlus />
|
||||
<span className="text-xs">Add Participants</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderSearch()}
|
||||
{renderMinimal()}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
{["student", "teacher", "corporate"].map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => {
|
||||
const typeUsers = mapBy(
|
||||
filterBy(
|
||||
isAdding ? nonParticipantUsers : group.participants,
|
||||
"type",
|
||||
type
|
||||
),
|
||||
"id"
|
||||
);
|
||||
if (typeUsers.every((u) => selectedUsers.includes(u))) {
|
||||
setSelectedUsers((prev) =>
|
||||
prev.filter((a) => !typeUsers.includes(a))
|
||||
);
|
||||
} else {
|
||||
setSelectedUsers((prev) => [
|
||||
...prev.filter((a) => !typeUsers.includes(a)),
|
||||
...typeUsers,
|
||||
]);
|
||||
}
|
||||
}}
|
||||
disabled={
|
||||
filterBy(
|
||||
isAdding ? nonParticipantUsers : group.participants,
|
||||
"type",
|
||||
type
|
||||
).length === 0
|
||||
}
|
||||
className={clsx(
|
||||
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
|
||||
"transition duration-300 ease-in-out",
|
||||
"disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
|
||||
filterBy(
|
||||
isAdding ? nonParticipantUsers : group.participants,
|
||||
"type",
|
||||
type
|
||||
).length > 0 &&
|
||||
filterBy(
|
||||
isAdding ? nonParticipantUsers : group.participants,
|
||||
"type",
|
||||
type
|
||||
).every((u) => selectedUsers.includes(u.id)) &&
|
||||
"!bg-mti-purple-light !text-white"
|
||||
)}
|
||||
>
|
||||
{capitalize(type)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{items.map((u) => (
|
||||
<button
|
||||
onClick={() => toggleUser(u)}
|
||||
disabled={isAdding ? !canAddParticipants : !canRemoveParticipants}
|
||||
key={u.id}
|
||||
className={clsx(
|
||||
"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
|
||||
"hover:border-mti-purple transition ease-in-out duration-300",
|
||||
selectedUsers.includes(u.id) && "border-mti-purple",
|
||||
)}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
|
||||
<img src={u.profilePicture} alt={u.name} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold">{getUserName(u)}</span>
|
||||
<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
|
||||
</div>
|
||||
</div>
|
||||
<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{items.map((u) => (
|
||||
<button
|
||||
onClick={() => toggleUser(u)}
|
||||
disabled={
|
||||
isAdding ? !canAddParticipants : !canRemoveParticipants
|
||||
}
|
||||
key={u.id}
|
||||
className={clsx(
|
||||
"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
|
||||
"hover:border-mti-purple transition ease-in-out duration-300",
|
||||
selectedUsers.includes(u.id) && "border-mti-purple"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
|
||||
<img src={u.profilePicture} alt={u.name} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold">{getUserName(u)}</span>
|
||||
<span className="opacity-80 text-sm">
|
||||
{USER_TYPE_LABELS[u.type]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="E-mail address">
|
||||
<BsEnvelopeFill />
|
||||
</Tooltip>
|
||||
{u.email}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Expiration Date">
|
||||
<BsStopwatchFill />
|
||||
</Tooltip>
|
||||
{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Last Login">
|
||||
<BsClockFill />
|
||||
</Tooltip>
|
||||
{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="E-mail address">
|
||||
<BsEnvelopeFill />
|
||||
</Tooltip>
|
||||
{u.email}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Expiration Date">
|
||||
<BsStopwatchFill />
|
||||
</Tooltip>
|
||||
{u.subscriptionExpirationDate
|
||||
? moment(u.subscriptionExpirationDate).format(
|
||||
"DD/MM/YYYY"
|
||||
)
|
||||
: "Unlimited"}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Last Login">
|
||||
<BsClockFill />
|
||||
</Tooltip>
|
||||
{u.lastLogin
|
||||
? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm")
|
||||
: "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,221 +2,308 @@
|
||||
import Input from "@/components/Low/Input";
|
||||
import Select from "@/components/Low/Select";
|
||||
import Tooltip from "@/components/Low/Tooltip";
|
||||
import {useListSearch} from "@/hooks/useListSearch";
|
||||
import { useListSearch } from "@/hooks/useListSearch";
|
||||
import usePagination from "@/hooks/usePagination";
|
||||
import {EntityWithRoles} from "@/interfaces/entity";
|
||||
import {User} from "@/interfaces/user";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import {USER_TYPE_LABELS} from "@/resources/user";
|
||||
import {filterBy, mapBy, redirect, serialize} from "@/utils";
|
||||
import { getEntitiesWithRoles} from "@/utils/entities.be";
|
||||
import {shouldRedirectHome} from "@/utils/navigation.disabled";
|
||||
import {getUserName, isAdmin} from "@/utils/users";
|
||||
import {getEntitiesUsers} from "@/utils/users.be";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { User } from "@/interfaces/user";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { USER_TYPE_LABELS } from "@/resources/user";
|
||||
import { filterBy, mapBy, redirect, serialize } from "@/utils";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||
import { getUserName, isAdmin } from "@/utils/users";
|
||||
import { getEntitiesUsers } from "@/utils/users.be";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import {withIronSessionSsr} from "iron-session/next";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import moment from "moment";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import {useRouter} from "next/router";
|
||||
import {Divider} from "primereact/divider";
|
||||
import {useEffect, useMemo, useState} from "react";
|
||||
import {BsCheck, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsStopwatchFill} from "react-icons/bs";
|
||||
import {toast, ToastContainer} from "react-toastify";
|
||||
import { useRouter } from "next/router";
|
||||
import { Divider } from "primereact/divider";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
BsCheck,
|
||||
BsChevronLeft,
|
||||
BsClockFill,
|
||||
BsEnvelopeFill,
|
||||
BsStopwatchFill,
|
||||
} from "react-icons/bs";
|
||||
import { toast, ToastContainer } from "react-toastify";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import { findAllowedEntities } from "@/utils/permissions";
|
||||
import { capitalize } from "lodash";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
|
||||
const user = await requestUser(req, res)
|
||||
if (!user) return redirect("/login")
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (shouldRedirectHome(user)) return redirect("/")
|
||||
if (shouldRedirectHome(user)) return redirect("/");
|
||||
|
||||
const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : mapBy(user.entities, "id"));
|
||||
const users = await getEntitiesUsers(mapBy(entities, 'id'))
|
||||
const allowedEntities = findAllowedEntities(user, entities, "create_classroom")
|
||||
const entities = await getEntitiesWithRoles(
|
||||
isAdmin(user) ? undefined : mapBy(user.entities, "id")
|
||||
);
|
||||
const users = await getEntitiesUsers(
|
||||
mapBy(entities, "id"),
|
||||
{
|
||||
id: { $ne: user.id },
|
||||
},
|
||||
0,
|
||||
{
|
||||
_id: 0,
|
||||
id: 1,
|
||||
name: 1,
|
||||
email: 1,
|
||||
profilePicture: 1,
|
||||
type: 1,
|
||||
corporateInformation: 1,
|
||||
lastLogin: 1,
|
||||
subscriptionExpirationDate: 1,
|
||||
}
|
||||
);
|
||||
const allowedEntities = findAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_classroom"
|
||||
);
|
||||
|
||||
return {
|
||||
props: serialize({user, entities: allowedEntities, users: users.filter((x) => x.id !== user.id)}),
|
||||
};
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
entities: allowedEntities,
|
||||
users: users,
|
||||
}),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
users: User[];
|
||||
entities: EntityWithRoles[];
|
||||
user: User;
|
||||
users: User[];
|
||||
entities: EntityWithRoles[];
|
||||
}
|
||||
|
||||
export default function Home({user, users, entities}: Props) {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
||||
const [name, setName] = useState("");
|
||||
const [entity, setEntity] = useState<string | undefined>(entities[0]?.id);
|
||||
export default function Home({ user, users, entities }: Props) {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
||||
const [name, setName] = useState("");
|
||||
const [entity, setEntity] = useState<string | undefined>(entities[0]?.id);
|
||||
|
||||
const entityUsers = useMemo(() => !entity ? users : users.filter(u => mapBy(u.entities, 'id').includes(entity)), [entity, users])
|
||||
const entityUsers = useMemo(
|
||||
() =>
|
||||
!entity
|
||||
? users
|
||||
: users.filter((u) => mapBy(u.entities, "id").includes(entity)),
|
||||
[entity, users]
|
||||
);
|
||||
|
||||
const {rows, renderSearch} = useListSearch<User>(
|
||||
[["name"], ["type"], ["corporateInformation", "companyInformation", "name"]], entityUsers
|
||||
);
|
||||
const { rows, renderSearch } = useListSearch<User>(
|
||||
[
|
||||
["name"],
|
||||
["type"],
|
||||
["corporateInformation", "companyInformation", "name"],
|
||||
],
|
||||
entityUsers
|
||||
);
|
||||
|
||||
const {items, renderMinimal} = usePagination<User>(rows, 16);
|
||||
const { items, renderMinimal } = usePagination<User>(rows, 16);
|
||||
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => setSelectedUsers([]), [entity])
|
||||
useEffect(() => setSelectedUsers([]), [entity]);
|
||||
|
||||
const createGroup = () => {
|
||||
if (!name.trim()) return;
|
||||
if (!entity) return;
|
||||
if (!confirm(`Are you sure you want to create this group with ${selectedUsers.length} participants?`)) return;
|
||||
const createGroup = () => {
|
||||
if (!name.trim()) return;
|
||||
if (!entity) return;
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure you want to create this group with ${selectedUsers.length} participants?`
|
||||
)
|
||||
)
|
||||
return;
|
||||
|
||||
setIsLoading(true);
|
||||
setIsLoading(true);
|
||||
|
||||
axios
|
||||
.post<{id: string}>(`/api/groups`, {name, participants: selectedUsers, admin: user.id, entity})
|
||||
.then((result) => {
|
||||
toast.success("Your group has been created successfully!");
|
||||
router.replace(`/classrooms/${result.data.id}`);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
axios
|
||||
.post<{ id: string }>(`/api/groups`, {
|
||||
name,
|
||||
participants: selectedUsers,
|
||||
admin: user.id,
|
||||
entity,
|
||||
})
|
||||
.then((result) => {
|
||||
toast.success("Your group has been created successfully!");
|
||||
router.replace(`/classrooms/${result.data.id}`);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
|
||||
const toggleUser = (u: User) =>
|
||||
setSelectedUsers((prev) =>
|
||||
prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Create Group | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<>
|
||||
<section className="flex flex-col gap-0">
|
||||
<div className="flex gap-3 justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/classrooms"
|
||||
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
|
||||
<BsChevronLeft />
|
||||
</Link>
|
||||
<h2 className="font-bold text-2xl">Create Classroom</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={createGroup}
|
||||
disabled={!name.trim() || !entity || isLoading}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
|
||||
<BsCheck />
|
||||
<span className="text-xs">Create Classroom</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="grid grid-cols-2 gap-4 place-items-end">
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<span className="font-semibold text-xl">Classroom Name:</span>
|
||||
<Input name="name" onChange={setName} type="text" placeholder="Classroom A" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<span className="font-semibold text-xl">Entity:</span>
|
||||
<Select
|
||||
options={entities.map((e) => ({value: e.id, label: e.label}))}
|
||||
onChange={(v) => setEntity(v ? v.value! : undefined)}
|
||||
defaultValue={{value: entities[0]?.id, label: entities[0]?.label}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="font-semibold text-xl">Participants ({selectedUsers.length} selected):</span>
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderSearch()}
|
||||
{renderMinimal()}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
{['student', 'teacher', 'corporate'].map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => {
|
||||
const typeUsers = mapBy(filterBy(entityUsers, 'type', type), 'id')
|
||||
if (typeUsers.every((u) => selectedUsers.includes(u))) {
|
||||
setSelectedUsers((prev) => prev.filter((a) => !typeUsers.includes(a)));
|
||||
} else {
|
||||
setSelectedUsers((prev) => [...prev.filter((a) => !typeUsers.includes(a)), ...typeUsers]);
|
||||
}
|
||||
}}
|
||||
disabled={filterBy(entityUsers, 'type', type).length === 0}
|
||||
className={clsx(
|
||||
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
|
||||
"transition duration-300 ease-in-out",
|
||||
"disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
|
||||
filterBy(entityUsers, 'type', type).length > 0 &&
|
||||
filterBy(entityUsers, 'type', type).every((u) => selectedUsers.includes(u.id)) &&
|
||||
"!bg-mti-purple-light !text-white",
|
||||
)}>
|
||||
{capitalize(type)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Create Group | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<>
|
||||
<section className="flex flex-col gap-0">
|
||||
<div className="flex gap-3 justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/classrooms"
|
||||
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
|
||||
>
|
||||
<BsChevronLeft />
|
||||
</Link>
|
||||
<h2 className="font-bold text-2xl">Create Classroom</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={createGroup}
|
||||
disabled={!name.trim() || !entity || isLoading}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
|
||||
>
|
||||
<BsCheck />
|
||||
<span className="text-xs">Create Classroom</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="grid grid-cols-2 gap-4 place-items-end">
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<span className="font-semibold text-xl">Classroom Name:</span>
|
||||
<Input
|
||||
name="name"
|
||||
onChange={setName}
|
||||
type="text"
|
||||
placeholder="Classroom A"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<span className="font-semibold text-xl">Entity:</span>
|
||||
<Select
|
||||
options={entities.map((e) => ({ value: e.id, label: e.label }))}
|
||||
onChange={(v) => setEntity(v ? v.value! : undefined)}
|
||||
defaultValue={{
|
||||
value: entities[0]?.id,
|
||||
label: entities[0]?.label,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="font-semibold text-xl">
|
||||
Participants ({selectedUsers.length} selected):
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderSearch()}
|
||||
{renderMinimal()}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
{["student", "teacher", "corporate"].map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => {
|
||||
const typeUsers = mapBy(
|
||||
filterBy(entityUsers, "type", type),
|
||||
"id"
|
||||
);
|
||||
if (typeUsers.every((u) => selectedUsers.includes(u))) {
|
||||
setSelectedUsers((prev) =>
|
||||
prev.filter((a) => !typeUsers.includes(a))
|
||||
);
|
||||
} else {
|
||||
setSelectedUsers((prev) => [
|
||||
...prev.filter((a) => !typeUsers.includes(a)),
|
||||
...typeUsers,
|
||||
]);
|
||||
}
|
||||
}}
|
||||
disabled={filterBy(entityUsers, "type", type).length === 0}
|
||||
className={clsx(
|
||||
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
|
||||
"transition duration-300 ease-in-out",
|
||||
"disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
|
||||
filterBy(entityUsers, "type", type).length > 0 &&
|
||||
filterBy(entityUsers, "type", type).every((u) =>
|
||||
selectedUsers.includes(u.id)
|
||||
) &&
|
||||
"!bg-mti-purple-light !text-white"
|
||||
)}
|
||||
>
|
||||
{capitalize(type)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{items.map((u) => (
|
||||
<button
|
||||
onClick={() => toggleUser(u)}
|
||||
disabled={isLoading}
|
||||
key={u.id}
|
||||
className={clsx(
|
||||
"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
|
||||
"hover:border-mti-purple transition ease-in-out duration-300",
|
||||
selectedUsers.includes(u.id) && "border-mti-purple",
|
||||
)}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
|
||||
<img src={u.profilePicture} alt={u.name} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold">{getUserName(u)}</span>
|
||||
<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
|
||||
</div>
|
||||
</div>
|
||||
<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{items.map((u) => (
|
||||
<button
|
||||
onClick={() => toggleUser(u)}
|
||||
disabled={isLoading}
|
||||
key={u.id}
|
||||
className={clsx(
|
||||
"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
|
||||
"hover:border-mti-purple transition ease-in-out duration-300",
|
||||
selectedUsers.includes(u.id) && "border-mti-purple"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
|
||||
<img src={u.profilePicture} alt={u.name} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold">{getUserName(u)}</span>
|
||||
<span className="opacity-80 text-sm">
|
||||
{USER_TYPE_LABELS[u.type]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="E-mail address">
|
||||
<BsEnvelopeFill />
|
||||
</Tooltip>
|
||||
{u.email}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Expiration Date">
|
||||
<BsStopwatchFill />
|
||||
</Tooltip>
|
||||
{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Last Login">
|
||||
<BsClockFill />
|
||||
</Tooltip>
|
||||
{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="E-mail address">
|
||||
<BsEnvelopeFill />
|
||||
</Tooltip>
|
||||
{u.email}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Expiration Date">
|
||||
<BsStopwatchFill />
|
||||
</Tooltip>
|
||||
{u.subscriptionExpirationDate
|
||||
? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY")
|
||||
: "Unlimited"}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Last Login">
|
||||
<BsClockFill />
|
||||
</Tooltip>
|
||||
{u.lastLogin
|
||||
? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm")
|
||||
: "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,132 +27,182 @@ import StudentClassroomTransfer from "@/components/Imports/StudentClassroomTrans
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res)
|
||||
if (!user) return redirect("/login")
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (shouldRedirectHome(user)) return redirect("/")
|
||||
if (shouldRedirectHome(user)) return redirect("/");
|
||||
|
||||
const entityIDS = mapBy(user.entities, "id");
|
||||
const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS)
|
||||
const allowedEntities = findAllowedEntities(user, entities, "view_classrooms")
|
||||
const entityIDS = mapBy(user.entities, "id");
|
||||
const entities = await getEntitiesWithRoles(
|
||||
isAdmin(user) ? undefined : entityIDS
|
||||
);
|
||||
|
||||
const groups = await getGroupsForEntities(mapBy(allowedEntities, 'id'));
|
||||
const allowedEntities = findAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"view_classrooms"
|
||||
);
|
||||
|
||||
const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants, g.admin])));
|
||||
const groupsWithUsers: GroupWithUsers[] = groups.map((g) => convertToUsers(g, users.filter(x => isAdmin(user) ? true : !isAdmin(x))));
|
||||
const groups = await getGroupsForEntities(mapBy(allowedEntities, "id"));
|
||||
|
||||
return {
|
||||
props: serialize({ user, groups: groupsWithUsers, entities: allowedEntities }),
|
||||
};
|
||||
const users = await getSpecificUsers(
|
||||
uniq(groups.flatMap((g) => [...g.participants, g.admin])),
|
||||
{ _id: 0, id: 1, name: 1, email: 1, corporateInformation: 1, type: 1 }
|
||||
);
|
||||
const groupsWithUsers: GroupWithUsers[] = groups.map((g) =>
|
||||
convertToUsers(
|
||||
g,
|
||||
users.filter((x) => (isAdmin(user) ? true : !isAdmin(x)))
|
||||
)
|
||||
);
|
||||
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
groups: groupsWithUsers,
|
||||
entities: allowedEntities,
|
||||
}),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
const SEARCH_FIELDS = [
|
||||
["name"],
|
||||
["admin", "name"],
|
||||
["admin", "email"],
|
||||
["admin", "corporateInformation", "companyInformation", "name"],
|
||||
["participants", "name"],
|
||||
["participants", "email"],
|
||||
["participants", "corporateInformation", "companyInformation", "name"],
|
||||
["name"],
|
||||
["admin", "name"],
|
||||
["admin", "email"],
|
||||
["admin", "corporateInformation", "companyInformation", "name"],
|
||||
["participants", "name"],
|
||||
["participants", "email"],
|
||||
["participants", "corporateInformation", "companyInformation", "name"],
|
||||
];
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
groups: GroupWithUsers[];
|
||||
entities: EntityWithRoles[]
|
||||
user: User;
|
||||
groups: GroupWithUsers[];
|
||||
entities: EntityWithRoles[];
|
||||
}
|
||||
export default function Home({ user, groups, entities }: Props) {
|
||||
const entitiesAllowCreate = useAllowedEntities(user, entities, 'create_classroom');
|
||||
const [showImport, setShowImport] = useState(false);
|
||||
const entitiesAllowCreate = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_classroom"
|
||||
);
|
||||
const [showImport, setShowImport] = useState(false);
|
||||
|
||||
const renderCard = (group: GroupWithUsers) => (
|
||||
<Link
|
||||
href={`/classrooms/${group.id}`}
|
||||
key={group.id}
|
||||
className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer">
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="bg-mti-purple text-white font-semibold px-2">Classroom</span>
|
||||
{group.name}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="bg-mti-purple text-white font-semibold px-2">Admin</span>
|
||||
{getUserName(group.admin)}
|
||||
</span>
|
||||
{!!group.entity && (
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="bg-mti-purple text-white font-semibold px-2">Entity</span>
|
||||
{findBy(entities, 'id', group.entity)?.label}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="bg-mti-purple text-white font-semibold px-2">Participants</span>
|
||||
<span className="bg-mti-purple-light/50 px-2">{group.participants.length}</span>
|
||||
</span>
|
||||
<span>
|
||||
{group.participants.slice(0, 3).map(getUserName).join(", ")}{' '}
|
||||
{group.participants.length > 3 ? <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">and {group.participants.length - 3} more</span> : ""}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-fit">
|
||||
<FaPersonChalkboard className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
const renderCard = (group: GroupWithUsers) => (
|
||||
<Link
|
||||
href={`/classrooms/${group.id}`}
|
||||
key={group.id}
|
||||
className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer"
|
||||
>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="bg-mti-purple text-white font-semibold px-2">
|
||||
Classroom
|
||||
</span>
|
||||
{group.name}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="bg-mti-purple text-white font-semibold px-2">
|
||||
Admin
|
||||
</span>
|
||||
{getUserName(group.admin)}
|
||||
</span>
|
||||
{!!group.entity && (
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="bg-mti-purple text-white font-semibold px-2">
|
||||
Entity
|
||||
</span>
|
||||
{findBy(entities, "id", group.entity)?.label}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="bg-mti-purple text-white font-semibold px-2">
|
||||
Participants
|
||||
</span>
|
||||
<span className="bg-mti-purple-light/50 px-2">
|
||||
{group.participants.length}
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
{group.participants.slice(0, 3).map(getUserName).join(", ")}{" "}
|
||||
{group.participants.length > 3 ? (
|
||||
<span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">
|
||||
and {group.participants.length - 3} more
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-fit">
|
||||
<FaPersonChalkboard className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const firstCard = () => (
|
||||
<Link
|
||||
href={`/classrooms/create`}
|
||||
className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
|
||||
<BsPlus size={40} />
|
||||
<span className="font-semibold">Create Classroom</span>
|
||||
</Link>
|
||||
);
|
||||
const firstCard = () => (
|
||||
<Link
|
||||
href={`/classrooms/create`}
|
||||
className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"
|
||||
>
|
||||
<BsPlus size={40} />
|
||||
<span className="font-semibold">Create Classroom</span>
|
||||
</Link>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Classrooms | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<>
|
||||
<section className="flex flex-col gap-4 w-full h-full">
|
||||
<Modal isOpen={showImport} onClose={() => setShowImport(false)} maxWidth="max-w-[85%]">
|
||||
<StudentClassroomTransfer user={user} entities={entities} onFinish={() => setShowImport(false)} />
|
||||
</Modal>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex justify-between">
|
||||
<h2 className="font-bold text-2xl">Classrooms</h2>
|
||||
{entitiesAllowCreate.length !== 0 && <button
|
||||
className={clsx(
|
||||
"flex flex-row gap-3 items-center py-1.5 px-4 text-lg",
|
||||
"bg-mti-purple-light border border-mti-purple-light rounded-xl text-white",
|
||||
"hover:bg-white hover:text-mti-purple-light transition duration-300 ease-in-out",
|
||||
)}
|
||||
onClick={() => setShowImport(true)}
|
||||
>
|
||||
<FaFileUpload className="w-5 h-5" />
|
||||
Transfer Students
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Classrooms | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<>
|
||||
<section className="flex flex-col gap-4 w-full h-full">
|
||||
<Modal
|
||||
isOpen={showImport}
|
||||
onClose={() => setShowImport(false)}
|
||||
maxWidth="max-w-[85%]"
|
||||
>
|
||||
<StudentClassroomTransfer
|
||||
user={user}
|
||||
entities={entities}
|
||||
onFinish={() => setShowImport(false)}
|
||||
/>
|
||||
</Modal>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex justify-between">
|
||||
<h2 className="font-bold text-2xl">Classrooms</h2>
|
||||
{entitiesAllowCreate.length !== 0 && (
|
||||
<button
|
||||
className={clsx(
|
||||
"flex flex-row gap-3 items-center py-1.5 px-4 text-lg",
|
||||
"bg-mti-purple-light border border-mti-purple-light rounded-xl text-white",
|
||||
"hover:bg-white hover:text-mti-purple-light transition duration-300 ease-in-out"
|
||||
)}
|
||||
onClick={() => setShowImport(true)}
|
||||
>
|
||||
<FaFileUpload className="w-5 h-5" />
|
||||
Transfer Students
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
|
||||
<CardList<GroupWithUsers>
|
||||
list={groups}
|
||||
searchFields={SEARCH_FIELDS}
|
||||
renderCard={renderCard}
|
||||
firstCard={entitiesAllowCreate.length === 0 ? undefined : firstCard}
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
<CardList<GroupWithUsers>
|
||||
list={groups}
|
||||
searchFields={SEARCH_FIELDS}
|
||||
renderCard={renderCard}
|
||||
firstCard={entitiesAllowCreate.length === 0 ? undefined : firstCard}
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,20 +4,15 @@ import IconCard from "@/components/IconCard";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { Stat, Type, User } from "@/interfaces/user";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { filterBy, mapBy, redirect, serialize } from "@/utils";
|
||||
import { filterBy, mapBy, redirect, serialize } from "@/utils";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import {
|
||||
countEntitiesAssignments,
|
||||
} from "@/utils/assignments.be";
|
||||
import { countEntitiesAssignments } from "@/utils/assignments.be";
|
||||
import { getEntities } from "@/utils/entities.be";
|
||||
import { countGroups } from "@/utils/groups.be";
|
||||
import { checkAccess } from "@/utils/permissions";
|
||||
import { groupByExam } from "@/utils/stats";
|
||||
import { getStatsByUsers } from "@/utils/stats.be";
|
||||
import {
|
||||
countUsersByTypes,
|
||||
getUsers,
|
||||
} from "@/utils/users.be";
|
||||
import { countUsersByTypes, getUsers } from "@/utils/users.be";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
@@ -49,49 +44,48 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
if (!user || !user.isVerified) return redirect("/login");
|
||||
|
||||
if (!checkAccess(user, ["admin", "developer"])) return redirect("/");
|
||||
|
||||
const students = await getUsers(
|
||||
{ type: "student" },
|
||||
10,
|
||||
{
|
||||
averageLevel: -1,
|
||||
},
|
||||
{ id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
|
||||
const usersCount = await countUsersByTypes([
|
||||
"student",
|
||||
"teacher",
|
||||
"corporate",
|
||||
"mastercorporate",
|
||||
const [
|
||||
entities,
|
||||
usersCount,
|
||||
groupsCount,
|
||||
students,
|
||||
latestStudents,
|
||||
latestTeachers,
|
||||
] = await Promise.all([
|
||||
getEntities(undefined, { _id: 0, id: 1, label: 1 }),
|
||||
countUsersByTypes(["student", "teacher", "corporate", "mastercorporate"]),
|
||||
countGroups(),
|
||||
getUsers(
|
||||
{ type: "student" },
|
||||
10,
|
||||
{
|
||||
averageLevel: -1,
|
||||
},
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
getUsers(
|
||||
{ type: "student" },
|
||||
10,
|
||||
{
|
||||
registrationDate: -1,
|
||||
},
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
getUsers(
|
||||
{ type: "teacher" },
|
||||
10,
|
||||
{
|
||||
registrationDate: -1,
|
||||
},
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
]);
|
||||
|
||||
const latestStudents = await getUsers(
|
||||
{ type: "student" },
|
||||
10,
|
||||
{
|
||||
registrationDate: -1,
|
||||
},
|
||||
{ id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
const latestTeachers = await getUsers(
|
||||
{ type: "teacher" },
|
||||
10,
|
||||
{
|
||||
registrationDate: -1,
|
||||
},
|
||||
{ id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
|
||||
const entities = await getEntities(undefined, { _id: 0, id: 1, label: 1 });
|
||||
|
||||
const assignmentsCount = await countEntitiesAssignments(
|
||||
mapBy(entities, "id"),
|
||||
{ archived: { $ne: true } }
|
||||
);
|
||||
|
||||
const groupsCount = await countGroups();
|
||||
|
||||
const stats = await getStatsByUsers(mapBy(students, "id"));
|
||||
|
||||
return {
|
||||
|
||||
@@ -14,10 +14,7 @@ import {
|
||||
groupAllowedEntitiesByPermissions,
|
||||
} from "@/utils/permissions";
|
||||
import { groupByExam } from "@/utils/stats";
|
||||
import {
|
||||
countAllowedUsers,
|
||||
getUsers,
|
||||
} from "@/utils/users.be";
|
||||
import { countAllowedUsers, getUsers } from "@/utils/users.be";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import moment from "moment";
|
||||
import Head from "next/head";
|
||||
@@ -35,6 +32,7 @@ import {
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import { count } from "console";
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
@@ -68,40 +66,44 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
"view_teachers",
|
||||
]);
|
||||
|
||||
const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
|
||||
const entitiesIDS = mapBy(entities, "id") || [];
|
||||
const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
|
||||
const entitiesIDS = mapBy(entities, "id") || [];
|
||||
|
||||
|
||||
const students = await getUsers(
|
||||
{ type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
|
||||
10,
|
||||
{ averageLevel: -1 },
|
||||
{ id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
const latestStudents = await getUsers(
|
||||
{ type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
const latestTeachers = await getUsers(
|
||||
{
|
||||
type: "teacher",
|
||||
"entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
|
||||
},
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
|
||||
const userCounts = await countAllowedUsers(user, entities);
|
||||
|
||||
const assignmentsCount = await countEntitiesAssignments(
|
||||
entitiesIDS,
|
||||
{ archived: { $ne: true } }
|
||||
);
|
||||
|
||||
const groupsCount = await countGroupsByEntities(entitiesIDS);
|
||||
const [
|
||||
students,
|
||||
latestStudents,
|
||||
latestTeachers,
|
||||
userCounts,
|
||||
assignmentsCount,
|
||||
groupsCount,
|
||||
] = await Promise.all([
|
||||
getUsers(
|
||||
{ type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
|
||||
10,
|
||||
{ averageLevel: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
getUsers(
|
||||
{ type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
getUsers(
|
||||
{
|
||||
type: "teacher",
|
||||
"entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
|
||||
},
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
countAllowedUsers(user, entities),
|
||||
countEntitiesAssignments(entitiesIDS, {
|
||||
archived: { $ne: true },
|
||||
}),
|
||||
countGroupsByEntities(entitiesIDS),
|
||||
]);
|
||||
|
||||
return {
|
||||
props: serialize({
|
||||
@@ -135,8 +137,8 @@ export default function Dashboard({
|
||||
userCounts.student +
|
||||
userCounts.teacher,
|
||||
[userCounts]
|
||||
);
|
||||
|
||||
);
|
||||
|
||||
const totalLicenses = useMemo(
|
||||
() =>
|
||||
entities.reduce(
|
||||
|
||||
@@ -2,21 +2,16 @@
|
||||
import UserDisplayList from "@/components/UserDisplayList";
|
||||
import IconCard from "@/components/IconCard";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { Stat, Type, User } from "@/interfaces/user";
|
||||
import { Stat, Type, User } from "@/interfaces/user";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { filterBy, mapBy, redirect, serialize } from "@/utils";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import {
|
||||
countEntitiesAssignments,
|
||||
} from "@/utils/assignments.be";
|
||||
import { countEntitiesAssignments } from "@/utils/assignments.be";
|
||||
import { getEntities } from "@/utils/entities.be";
|
||||
import { countGroups } from "@/utils/groups.be";
|
||||
import { checkAccess } from "@/utils/permissions";
|
||||
import { groupByExam } from "@/utils/stats";
|
||||
import {
|
||||
countUsersByTypes,
|
||||
getUsers,
|
||||
} from "@/utils/users.be";
|
||||
import { countUsersByTypes, getUsers } from "@/utils/users.be";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
@@ -49,45 +44,41 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
|
||||
if (!checkAccess(user, ["admin", "developer"])) return redirect("/");
|
||||
|
||||
const students = await getUsers(
|
||||
{ type: "student" },
|
||||
10,
|
||||
{
|
||||
averageLevel: -1,
|
||||
},
|
||||
{ id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
|
||||
const usersCount = await countUsersByTypes([
|
||||
"student",
|
||||
"teacher",
|
||||
"corporate",
|
||||
"mastercorporate",
|
||||
const [
|
||||
students,
|
||||
latestStudents,
|
||||
latestTeachers,
|
||||
usersCount,
|
||||
entities,
|
||||
groupsCount,
|
||||
] = await Promise.all([
|
||||
getUsers(
|
||||
{ type: "student" },
|
||||
10,
|
||||
{ averageLevel: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
getUsers(
|
||||
{ type: "student" },
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
getUsers(
|
||||
{ type: "teacher" },
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
countUsersByTypes(["student", "teacher", "corporate", "mastercorporate"]),
|
||||
getEntities(undefined, { _id: 0, id: 1, label: 1 }),
|
||||
countGroups(),
|
||||
]);
|
||||
|
||||
const latestStudents = await getUsers(
|
||||
{ type: "student" },
|
||||
10,
|
||||
{
|
||||
registrationDate: -1,
|
||||
},
|
||||
{id:1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
const latestTeachers = await getUsers(
|
||||
{ type: "teacher" },
|
||||
10,
|
||||
{
|
||||
registrationDate: -1,
|
||||
},
|
||||
{ id:1,name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
|
||||
const entities = await getEntities(undefined, { _id: 0, id: 1, label: 1 });
|
||||
const assignmentsCount = await countEntitiesAssignments(
|
||||
mapBy(entities, "id"),
|
||||
{ archived: { $ne: true } }
|
||||
);
|
||||
const groupsCount = await countGroups();
|
||||
|
||||
return {
|
||||
props: serialize({
|
||||
|
||||
@@ -34,6 +34,7 @@ import {
|
||||
} from "react-icons/bs";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import { count } from "console";
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
@@ -70,37 +71,39 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
|
||||
const entitiesIDS = mapBy(entities, "id") || [];
|
||||
|
||||
const students = await getUsers(
|
||||
{ type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
|
||||
10,
|
||||
{ averageLevel: -1 },
|
||||
{ id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
|
||||
const latestStudents = await getUsers(
|
||||
{ type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
|
||||
const latestTeachers = await getUsers(
|
||||
{
|
||||
type: "teacher",
|
||||
"entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
|
||||
},
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
);
|
||||
|
||||
const userCounts = await countAllowedUsers(user, entities);
|
||||
|
||||
const assignmentsCount = await countEntitiesAssignments(entitiesIDS, {
|
||||
archived: { $ne: true },
|
||||
});
|
||||
|
||||
const groupsCount = await countGroupsByEntities(entitiesIDS);
|
||||
const [
|
||||
students,
|
||||
latestStudents,
|
||||
latestTeachers,
|
||||
userCounts,
|
||||
assignmentsCount,
|
||||
groupsCount,
|
||||
] = await Promise.all([
|
||||
getUsers(
|
||||
{ type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
|
||||
10,
|
||||
{ averageLevel: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
getUsers(
|
||||
{ type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
getUsers(
|
||||
{
|
||||
type: "teacher",
|
||||
"entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
|
||||
},
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
countAllowedUsers(user, entities),
|
||||
countEntitiesAssignments(entitiesIDS, { archived: { $ne: true } }),
|
||||
countGroupsByEntities(entitiesIDS),
|
||||
]);
|
||||
|
||||
return {
|
||||
props: serialize({
|
||||
@@ -127,6 +130,7 @@ export default function Dashboard({
|
||||
stats = [],
|
||||
groupsCount,
|
||||
}: Props) {
|
||||
|
||||
const totalCount = useMemo(
|
||||
() =>
|
||||
userCounts.corporate +
|
||||
|
||||
@@ -5,7 +5,7 @@ import InviteWithUserCard from "@/components/Medium/InviteWithUserCard";
|
||||
import ModuleBadge from "@/components/ModuleBadge";
|
||||
import ProfileSummary from "@/components/ProfileSummary";
|
||||
import { Session } from "@/hooks/useSessions";
|
||||
import { Grading } from "@/interfaces";
|
||||
import { Grading, Module } from "@/interfaces";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { Exam } from "@/interfaces/exam";
|
||||
import { InviteWithEntity } from "@/interfaces/invite";
|
||||
@@ -34,6 +34,7 @@ import { capitalize, uniqBy } from "lodash";
|
||||
import moment from "moment";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
BsBook,
|
||||
BsClipboard,
|
||||
@@ -65,42 +66,49 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
return redirect("/");
|
||||
|
||||
const entityIDS = mapBy(user.entities, "id") || [];
|
||||
|
||||
const entities = await getEntities(entityIDS, { _id: 0, label: 1 });
|
||||
const currentDate = moment().toISOString();
|
||||
const assignments = await getAssignmentsForStudent(user.id, currentDate);
|
||||
const stats = await getDetailedStatsByUser(user.id, "stats");
|
||||
|
||||
const [assignments, stats, invites, grading] = await Promise.all([
|
||||
getAssignmentsForStudent(user.id, currentDate),
|
||||
getDetailedStatsByUser(user.id, "stats"),
|
||||
getInvitesByInvitee(user.id),
|
||||
getGradingSystemByEntity(entityIDS[0] || "", {
|
||||
_id: 0,
|
||||
steps: 1,
|
||||
}),
|
||||
]);
|
||||
const assignmentsIDs = mapBy(assignments, "id");
|
||||
|
||||
const sessions = await getSessionsByUser(user.id, 10, {
|
||||
["assignment.id"]: { $in: assignmentsIDs },
|
||||
});
|
||||
const invites = await getInvitesByInvitee(user.id);
|
||||
const grading = await getGradingSystemByEntity(entityIDS[0] || "", {
|
||||
_id: 0,
|
||||
steps: 1,
|
||||
});
|
||||
|
||||
const formattedInvites = await Promise.all(
|
||||
invites.map(convertInvitersToEntity)
|
||||
);
|
||||
|
||||
const examIDs = uniqBy(
|
||||
assignments.flatMap((a) =>
|
||||
a.exams.map((e: { module: string; id: string }) => ({
|
||||
module: e.module,
|
||||
id: e.id,
|
||||
key: `${e.module}_${e.id}`,
|
||||
}))
|
||||
assignments.reduce<{ module: Module; id: string; key: string }[]>(
|
||||
(acc, a) => {
|
||||
a.exams.forEach((e: { module: Module; id: string }) => {
|
||||
acc.push({
|
||||
module: e.module,
|
||||
id: e.id,
|
||||
key: `${e.module}_${e.id}`,
|
||||
});
|
||||
});
|
||||
return acc;
|
||||
},
|
||||
[]
|
||||
),
|
||||
"key"
|
||||
);
|
||||
|
||||
const exams = examIDs.length > 0 ? await getExamsByIds(examIDs) : [];
|
||||
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
entities,
|
||||
assignments,
|
||||
stats,
|
||||
exams,
|
||||
@@ -145,6 +153,11 @@ export default function Dashboard({
|
||||
}
|
||||
};
|
||||
|
||||
const entitiesLabels = useMemo(
|
||||
() => (entities.length > 0 ? mapBy(entities, "label")?.join(", ") : ""),
|
||||
[entities]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@@ -160,7 +173,7 @@ export default function Dashboard({
|
||||
<>
|
||||
{entities.length > 0 && (
|
||||
<div className="rounded-lg bg-neutral-200 px-2 py-1 ">
|
||||
<b>{mapBy(entities, "label")?.join(", ")}</b>
|
||||
<b>{entitiesLabels}</b>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -27,6 +27,7 @@ import { requestUser } from "@/utils/api";
|
||||
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
|
||||
import { getEntitiesUsers } from "@/utils/users.be";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import { useMemo } from "react";
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
@@ -52,29 +53,29 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
|
||||
const filteredEntities = findAllowedEntities(user, entities, "view_students");
|
||||
|
||||
const students = await getEntitiesUsers(
|
||||
mapBy(filteredEntities, "id"),
|
||||
{
|
||||
type: "student",
|
||||
},
|
||||
0,
|
||||
{
|
||||
_id: 0,
|
||||
id: 1,
|
||||
name: 1,
|
||||
email: 1,
|
||||
profilePicture: 1,
|
||||
levels: 1,
|
||||
registrationDate: 1,
|
||||
}
|
||||
);
|
||||
|
||||
const assignments = await getEntitiesAssignments(entityIDS);
|
||||
const [students, assignments, groups] = await Promise.all([
|
||||
getEntitiesUsers(
|
||||
mapBy(filteredEntities, "id"),
|
||||
{
|
||||
type: "student",
|
||||
},
|
||||
0,
|
||||
{
|
||||
_id: 0,
|
||||
id: 1,
|
||||
name: 1,
|
||||
email: 1,
|
||||
profilePicture: 1,
|
||||
levels: 1,
|
||||
registrationDate: 1,
|
||||
}
|
||||
),
|
||||
getEntitiesAssignments(entityIDS),
|
||||
getGroupsByEntities(entityIDS),
|
||||
]);
|
||||
|
||||
const stats = await getStatsByUsers(students.map((u) => u.id));
|
||||
|
||||
const groups = await getGroupsByEntities(entityIDS);
|
||||
|
||||
return {
|
||||
props: serialize({ user, students, entities, assignments, stats, groups }),
|
||||
};
|
||||
@@ -100,6 +101,10 @@ export default function Dashboard({
|
||||
entities,
|
||||
"view_student_performance"
|
||||
);
|
||||
const entitiesLabels = useMemo(
|
||||
() => mapBy(entities, "label")?.join(", "),
|
||||
[entities]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -117,7 +122,7 @@ export default function Dashboard({
|
||||
<div className="w-full flex flex-col gap-4">
|
||||
{entities.length > 0 && (
|
||||
<div className="w-fit self-end bg-neutral-200 px-2 rounded-lg py-1">
|
||||
<b>{mapBy(entities, "label")?.join(", ")}</b>
|
||||
<b>{entitiesLabels}</b>
|
||||
</div>
|
||||
)}
|
||||
<section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -10,7 +10,7 @@ import { USER_TYPE_LABELS } from "@/resources/user";
|
||||
import { redirect, serialize } from "@/utils";
|
||||
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||
import { getUserName } from "@/utils/users";
|
||||
import { getUsers } from "@/utils/users.be";
|
||||
import { getUsers } from "@/utils/users.be";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
@@ -20,161 +20,218 @@ import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { Divider } from "primereact/divider";
|
||||
import { useState } from "react";
|
||||
import { BsCheck, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsStopwatchFill } from "react-icons/bs";
|
||||
import {
|
||||
BsCheck,
|
||||
BsChevronLeft,
|
||||
BsClockFill,
|
||||
BsEnvelopeFill,
|
||||
BsStopwatchFill,
|
||||
} from "react-icons/bs";
|
||||
import { toast, ToastContainer } from "react-toastify";
|
||||
import { requestUser } from "@/utils/api";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res)
|
||||
if (!user) return redirect("/login")
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (shouldRedirectHome(user)) return redirect("/")
|
||||
if (!["admin", "developer"].includes(user.type)) return redirect("/entities")
|
||||
if (shouldRedirectHome(user)) return redirect("/");
|
||||
if (!["admin", "developer"].includes(user.type)) return redirect("/entities");
|
||||
|
||||
const users = await getUsers()
|
||||
const users = await getUsers(
|
||||
{ id: { $ne: user.id } },
|
||||
0,
|
||||
{},
|
||||
{
|
||||
_id: 0,
|
||||
id: 1,
|
||||
name: 1,
|
||||
type: 1,
|
||||
profilePicture: 1,
|
||||
email: 1,
|
||||
lastLogin: 1,
|
||||
subscriptionExpirationDate: 1,
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
props: serialize({ user, users: users.filter((x) => x.id !== user.id) }),
|
||||
};
|
||||
return {
|
||||
props: serialize({ user, users }),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
users: User[];
|
||||
user: User;
|
||||
users: User[];
|
||||
}
|
||||
|
||||
export default function Home({ user, users }: Props) {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
||||
const [label, setLabel] = useState("");
|
||||
const [licenses, setLicenses] = useState(0);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
||||
const [label, setLabel] = useState("");
|
||||
const [licenses, setLicenses] = useState(0);
|
||||
|
||||
const { rows, renderSearch } = useListSearch<User>([["name"], ["corporateInformation", "companyInformation", "name"]], users);
|
||||
const { items, renderMinimal } = usePagination<User>(rows, 16);
|
||||
const { rows, renderSearch } = useListSearch<User>(
|
||||
[["name"], ["corporateInformation", "companyInformation", "name"]],
|
||||
users
|
||||
);
|
||||
const { items, renderMinimal } = usePagination<User>(rows, 16);
|
||||
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
const createGroup = () => {
|
||||
if (!label.trim()) return;
|
||||
if (!confirm(`Are you sure you want to create this entity with ${selectedUsers.length} members?`)) return;
|
||||
const createGroup = () => {
|
||||
if (!label.trim()) return;
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure you want to create this entity with ${selectedUsers.length} members?`
|
||||
)
|
||||
)
|
||||
return;
|
||||
|
||||
setIsLoading(true);
|
||||
setIsLoading(true);
|
||||
|
||||
axios
|
||||
.post<Entity>(`/api/entities`, { label, licenses, members: selectedUsers })
|
||||
.then((result) => {
|
||||
toast.success("Your entity has been created successfully!");
|
||||
router.replace(`/entities/${result.data.id}`);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
axios
|
||||
.post<Entity>(`/api/entities`, {
|
||||
label,
|
||||
licenses,
|
||||
members: selectedUsers,
|
||||
})
|
||||
.then((result) => {
|
||||
toast.success("Your entity has been created successfully!");
|
||||
router.replace(`/entities/${result.data.id}`);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
|
||||
const toggleUser = (u: User) =>
|
||||
setSelectedUsers((prev) =>
|
||||
prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Create Entity | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<>
|
||||
<section className="flex flex-col gap-0">
|
||||
<div className="flex gap-3 justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/classrooms"
|
||||
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
|
||||
<BsChevronLeft />
|
||||
</Link>
|
||||
<h2 className="font-bold text-2xl">Create Entity</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={createGroup}
|
||||
disabled={!label.trim() || licenses <= 0 || isLoading}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
|
||||
<BsCheck />
|
||||
<span className="text-xs">Create Entity</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="w-full grid grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<span className="font-semibold text-xl">Entity Label:</span>
|
||||
<Input name="name" onChange={setLabel} type="text" placeholder="Entity A" />
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Create Entity | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<>
|
||||
<section className="flex flex-col gap-0">
|
||||
<div className="flex gap-3 justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/classrooms"
|
||||
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
|
||||
>
|
||||
<BsChevronLeft />
|
||||
</Link>
|
||||
<h2 className="font-bold text-2xl">Create Entity</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={createGroup}
|
||||
disabled={!label.trim() || licenses <= 0 || isLoading}
|
||||
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
|
||||
>
|
||||
<BsCheck />
|
||||
<span className="text-xs">Create Entity</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="w-full grid grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<span className="font-semibold text-xl">Entity Label:</span>
|
||||
<Input
|
||||
name="name"
|
||||
onChange={setLabel}
|
||||
type="text"
|
||||
placeholder="Entity A"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<span className="font-semibold text-xl">Licenses:</span>
|
||||
<Input name="licenses" min={0} onChange={(v) => setLicenses(parseInt(v))} type="number" placeholder="12" />
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="font-semibold text-xl">Members ({selectedUsers.length} selected):</span>
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderSearch()}
|
||||
{renderMinimal()}
|
||||
</div>
|
||||
</section>
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<span className="font-semibold text-xl">Licenses:</span>
|
||||
<Input
|
||||
name="licenses"
|
||||
min={0}
|
||||
onChange={(v) => setLicenses(parseInt(v))}
|
||||
type="number"
|
||||
placeholder="12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="font-semibold text-xl">
|
||||
Members ({selectedUsers.length} selected):
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-4">
|
||||
{renderSearch()}
|
||||
{renderMinimal()}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{items.map((u) => (
|
||||
<button
|
||||
onClick={() => toggleUser(u)}
|
||||
disabled={isLoading}
|
||||
key={u.id}
|
||||
className={clsx(
|
||||
"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
|
||||
"hover:border-mti-purple transition ease-in-out duration-300",
|
||||
selectedUsers.includes(u.id) && "border-mti-purple",
|
||||
)}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
|
||||
<img src={u.profilePicture} alt={u.name} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold">{getUserName(u)}</span>
|
||||
<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
|
||||
</div>
|
||||
</div>
|
||||
<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{items.map((u) => (
|
||||
<button
|
||||
onClick={() => toggleUser(u)}
|
||||
disabled={isLoading}
|
||||
key={u.id}
|
||||
className={clsx(
|
||||
"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
|
||||
"hover:border-mti-purple transition ease-in-out duration-300",
|
||||
selectedUsers.includes(u.id) && "border-mti-purple"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
|
||||
<img src={u.profilePicture} alt={u.name} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold">{getUserName(u)}</span>
|
||||
<span className="opacity-80 text-sm">
|
||||
{USER_TYPE_LABELS[u.type]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="E-mail address">
|
||||
<BsEnvelopeFill />
|
||||
</Tooltip>
|
||||
{u.email}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Expiration Date">
|
||||
<BsStopwatchFill />
|
||||
</Tooltip>
|
||||
{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Last Login">
|
||||
<BsClockFill />
|
||||
</Tooltip>
|
||||
{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="E-mail address">
|
||||
<BsEnvelopeFill />
|
||||
</Tooltip>
|
||||
{u.email}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Expiration Date">
|
||||
<BsStopwatchFill />
|
||||
</Tooltip>
|
||||
{u.subscriptionExpirationDate
|
||||
? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY")
|
||||
: "Unlimited"}
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Tooltip tooltip="Last Login">
|
||||
<BsClockFill />
|
||||
</Tooltip>
|
||||
{u.lastLogin
|
||||
? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm")
|
||||
: "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -35,17 +35,35 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
);
|
||||
const allowedEntities = findAllowedEntities(user, entities, "view_entities");
|
||||
|
||||
const entitiesWithCount = await Promise.all(
|
||||
allowedEntities.map(async (e) => ({
|
||||
entity: e,
|
||||
count: await countEntityUsers(e.id, {
|
||||
type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
|
||||
}),
|
||||
users: await getEntityUsers(e.id, 5, {
|
||||
type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
|
||||
}),
|
||||
}))
|
||||
);
|
||||
const [counts, users] = await Promise.all([
|
||||
await Promise.all(
|
||||
allowedEntities.map(async (e) =>
|
||||
countEntityUsers(e.id, {
|
||||
type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
|
||||
})
|
||||
)
|
||||
),
|
||||
await Promise.all(
|
||||
allowedEntities.map(async (e) =>
|
||||
getEntityUsers(
|
||||
e.id,
|
||||
5,
|
||||
{
|
||||
type: {
|
||||
$in: ["student", "teacher", "corporate", "mastercorporate"],
|
||||
},
|
||||
},
|
||||
{ name: 1 }
|
||||
)
|
||||
)
|
||||
),
|
||||
]);
|
||||
|
||||
const entitiesWithCount = allowedEntities.map<{
|
||||
entity: EntityWithRoles;
|
||||
users: User[];
|
||||
count: number;
|
||||
}>((e, i) => ({ entity: e, users: users[i], count: counts[i] }));
|
||||
|
||||
return {
|
||||
props: serialize({ user, entities: entitiesWithCount }),
|
||||
|
||||
@@ -21,93 +21,124 @@ import { getSessionByAssignment } from "@/utils/sessions.be";
|
||||
import { Session } from "@/hooks/useSessions";
|
||||
import { activeAssignmentFilter } from "@/utils/assignments";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
|
||||
const user = await requestUser(req, res)
|
||||
const loginDestination = Buffer.from(req.url || "/").toString("base64")
|
||||
if (!user) return redirect(`/login?destination=${loginDestination}`)
|
||||
export const getServerSideProps = withIronSessionSsr(
|
||||
async ({ req, res, query }) => {
|
||||
const user = await requestUser(req, res);
|
||||
const loginDestination = Buffer.from(req.url || "/").toString("base64");
|
||||
if (!user) return redirect(`/login?destination=${loginDestination}`);
|
||||
|
||||
if (shouldRedirectHome(user)) return redirect("/")
|
||||
if (shouldRedirectHome(user)) return redirect("/");
|
||||
|
||||
const { assignment: assignmentID, destination } = query as { assignment?: string, destination?: string }
|
||||
const destinationURL = !!destination ? Buffer.from(destination, 'base64').toString() : undefined
|
||||
const { assignment: assignmentID, destination } = query as {
|
||||
assignment?: string;
|
||||
destination?: string;
|
||||
};
|
||||
const destinationURL = !!destination
|
||||
? Buffer.from(destination, "base64").toString()
|
||||
: undefined;
|
||||
|
||||
if (!!assignmentID) {
|
||||
const assignment = await getAssignment(assignmentID)
|
||||
if (!!assignmentID) {
|
||||
const assignment = await getAssignment(assignmentID);
|
||||
|
||||
if (!assignment) return redirect(destinationURL || "/exam")
|
||||
if (!assignment.assignees.includes(user.id) && !["admin", "developer"].includes(user.type))
|
||||
return redirect(destinationURL || "/exam")
|
||||
if (!assignment) return redirect(destinationURL || "/exam");
|
||||
if (
|
||||
!assignment.assignees.includes(user.id) &&
|
||||
!["admin", "developer"].includes(user.type)
|
||||
)
|
||||
return redirect(destinationURL || "/exam");
|
||||
|
||||
if (filterBy(assignment.results, 'user', user.id).length > 0)
|
||||
return redirect(destinationURL || "/exam")
|
||||
if (filterBy(assignment.results, "user", user.id).length > 0)
|
||||
return redirect(destinationURL || "/exam");
|
||||
|
||||
const [exams, session] = await Promise.all([
|
||||
getExamsByIds(uniqBy(assignment.exams, "id")),
|
||||
getSessionByAssignment(assignmentID),
|
||||
]);
|
||||
|
||||
const exams = await getExamsByIds(uniqBy(assignment.exams, "id"))
|
||||
const session = await getSessionByAssignment(assignmentID)
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
assignment,
|
||||
exams,
|
||||
destinationURL,
|
||||
session: session ?? undefined,
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
props: serialize({ user, assignment, exams, destinationURL, session: session ?? undefined })
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: serialize({ user, destinationURL }),
|
||||
};
|
||||
}, sessionOptions);
|
||||
return {
|
||||
props: serialize({ user, destinationURL }),
|
||||
};
|
||||
},
|
||||
sessionOptions
|
||||
);
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
assignment?: Assignment
|
||||
exams?: Exam[]
|
||||
session?: Session
|
||||
destinationURL?: string
|
||||
user: User;
|
||||
assignment?: Assignment;
|
||||
exams?: Exam[];
|
||||
session?: Session;
|
||||
destinationURL?: string;
|
||||
}
|
||||
|
||||
const Page: React.FC<Props> = ({ user, assignment, exams = [], destinationURL = "/exam", session }) => {
|
||||
const router = useRouter()
|
||||
const { assignment: storeAssignment, dispatch } = useExamStore();
|
||||
const Page: React.FC<Props> = ({
|
||||
user,
|
||||
assignment,
|
||||
exams = [],
|
||||
destinationURL = "/exam",
|
||||
session,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { assignment: storeAssignment, dispatch } = useExamStore();
|
||||
|
||||
useEffect(() => {
|
||||
if (assignment && exams.length > 0 && !storeAssignment && !session) {
|
||||
if (!activeAssignmentFilter(assignment)) return
|
||||
dispatch({
|
||||
type: "INIT_EXAM", payload: {
|
||||
exams: exams.sort(sortByModule),
|
||||
modules: exams
|
||||
.map((x) => x!)
|
||||
.sort(sortByModule)
|
||||
.map((x) => x!.module),
|
||||
assignment
|
||||
}
|
||||
});
|
||||
useEffect(() => {
|
||||
if (assignment && exams.length > 0 && !storeAssignment && !session) {
|
||||
if (!activeAssignmentFilter(assignment)) return;
|
||||
dispatch({
|
||||
type: "INIT_EXAM",
|
||||
payload: {
|
||||
exams: exams.sort(sortByModule),
|
||||
modules: exams
|
||||
.map((x) => x!)
|
||||
.sort(sortByModule)
|
||||
.map((x) => x!.module),
|
||||
assignment,
|
||||
},
|
||||
});
|
||||
|
||||
router.replace(router.asPath)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [assignment, exams, session])
|
||||
router.replace(router.asPath);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [assignment, exams, session]);
|
||||
|
||||
useEffect(() => {
|
||||
if (assignment && exams.length > 0 && !storeAssignment && !!session) {
|
||||
dispatch({ type: "SET_SESSION", payload: { session } })
|
||||
router.replace(router.asPath)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [assignment, exams, session])
|
||||
useEffect(() => {
|
||||
if (assignment && exams.length > 0 && !storeAssignment && !!session) {
|
||||
dispatch({ type: "SET_SESSION", payload: { session } });
|
||||
router.replace(router.asPath);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [assignment, exams, session]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Exams | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ExamPage page="exams" destination={destinationURL} user={user} hideSidebar={!!assignment || !!storeAssignment} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Exams | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ExamPage
|
||||
page="exams"
|
||||
destination={destinationURL}
|
||||
user={user}
|
||||
hideSidebar={!!assignment || !!storeAssignment}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
//Page.whyDidYouRender = true;
|
||||
export default Page;
|
||||
|
||||
@@ -21,92 +21,100 @@ import { getSessionByAssignment } from "@/utils/sessions.be";
|
||||
import { Session } from "@/hooks/useSessions";
|
||||
import moment from "moment";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
|
||||
const user = await requestUser(req, res)
|
||||
const destination = Buffer.from(req.url || "/").toString("base64")
|
||||
if (!user) return redirect(`/login?destination=${destination}`)
|
||||
export const getServerSideProps = withIronSessionSsr(
|
||||
async ({ req, res, query }) => {
|
||||
const user = await requestUser(req, res);
|
||||
const destination = Buffer.from(req.url || "/").toString("base64");
|
||||
if (!user) return redirect(`/login?destination=${destination}`);
|
||||
|
||||
if (shouldRedirectHome(user)) return redirect("/")
|
||||
if (shouldRedirectHome(user)) return redirect("/");
|
||||
|
||||
const { assignment: assignmentID } = query as { assignment?: string }
|
||||
const { assignment: assignmentID } = query as { assignment?: string };
|
||||
|
||||
if (assignmentID) {
|
||||
const assignment = await getAssignment(assignmentID)
|
||||
if (assignmentID) {
|
||||
const assignment = await getAssignment(assignmentID);
|
||||
|
||||
if (!assignment) return redirect("/exam")
|
||||
if (!["admin", "developer"].includes(user.type) && !assignment.assignees.includes(user.id)) return redirect("/exercises")
|
||||
if (!assignment) return redirect("/exam");
|
||||
if (
|
||||
!["admin", "developer"].includes(user.type) &&
|
||||
!assignment.assignees.includes(user.id)
|
||||
)
|
||||
return redirect("/exercises");
|
||||
if (
|
||||
filterBy(assignment.results, "user", user.id) ||
|
||||
moment(assignment.startDate).isBefore(moment()) ||
|
||||
moment(assignment.endDate).isAfter(moment())
|
||||
)
|
||||
return redirect("/exam");
|
||||
const [exams, session] = await Promise.all([
|
||||
getExamsByIds(uniqBy(assignment.exams, "id")),
|
||||
getSessionByAssignment(assignmentID),
|
||||
]);
|
||||
|
||||
const exams = await getExamsByIds(uniqBy(assignment.exams, "id"))
|
||||
const session = await getSessionByAssignment(assignmentID)
|
||||
return {
|
||||
props: serialize({ user, assignment, exams, session }),
|
||||
};
|
||||
}
|
||||
|
||||
if (
|
||||
filterBy(assignment.results, 'user', user.id) ||
|
||||
moment(assignment.startDate).isBefore(moment()) ||
|
||||
moment(assignment.endDate).isAfter(moment())
|
||||
)
|
||||
return redirect("/exam")
|
||||
|
||||
return {
|
||||
props: serialize({ user, assignment, exams, session })
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: serialize({ user }),
|
||||
};
|
||||
}, sessionOptions);
|
||||
return {
|
||||
props: serialize({ user }),
|
||||
};
|
||||
},
|
||||
sessionOptions
|
||||
);
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
assignment?: Assignment
|
||||
exams?: Exam[]
|
||||
session?: Session
|
||||
user: User;
|
||||
assignment?: Assignment;
|
||||
exams?: Exam[];
|
||||
session?: Session;
|
||||
}
|
||||
|
||||
export default function Page({ user, assignment, exams = [], session }: Props) {
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
|
||||
const { assignment: storeAssignment, dispatch } = useExamStore()
|
||||
const { assignment: storeAssignment, dispatch } = useExamStore();
|
||||
|
||||
useEffect(() => {
|
||||
if (assignment && exams.length > 0 && !storeAssignment && !session) {
|
||||
dispatch({
|
||||
type: "INIT_EXAM", payload: {
|
||||
exams: exams.sort(sortByModule),
|
||||
modules: exams
|
||||
.map((x) => x!)
|
||||
.sort(sortByModule)
|
||||
.map((x) => x!.module),
|
||||
assignment
|
||||
}
|
||||
})
|
||||
useEffect(() => {
|
||||
if (assignment && exams.length > 0 && !storeAssignment && !session) {
|
||||
dispatch({
|
||||
type: "INIT_EXAM",
|
||||
payload: {
|
||||
exams: exams.sort(sortByModule),
|
||||
modules: exams
|
||||
.map((x) => x!)
|
||||
.sort(sortByModule)
|
||||
.map((x) => x!.module),
|
||||
assignment,
|
||||
},
|
||||
});
|
||||
|
||||
router.replace(router.asPath)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [assignment, exams, session])
|
||||
router.replace(router.asPath);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [assignment, exams, session]);
|
||||
|
||||
useEffect(() => {
|
||||
if (assignment && exams.length > 0 && !storeAssignment && !!session) {
|
||||
dispatch({ type: "SET_SESSION", payload: { session } });
|
||||
useEffect(() => {
|
||||
if (assignment && exams.length > 0 && !storeAssignment && !!session) {
|
||||
dispatch({ type: "SET_SESSION", payload: { session } });
|
||||
|
||||
router.replace(router.asPath)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [assignment, exams, session])
|
||||
router.replace(router.asPath);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [assignment, exams, session]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Exams | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ExamPage page="exams" user={user} hideSidebar={!!assignment} />
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Exams | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ExamPage page="exams" user={user} hideSidebar={!!assignment} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import Button from "@/components/Low/Button";
|
||||
import Separator from "@/components/Low/Separator";
|
||||
import ProfileSummary from "@/components/ProfileSummary";
|
||||
import { Session } from "@/hooks/useSessions";
|
||||
import { Grading } from "@/interfaces";
|
||||
import { Grading, Module } from "@/interfaces";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { Exam } from "@/interfaces/exam";
|
||||
import { InviteWithEntity } from "@/interfaces/invite";
|
||||
@@ -12,14 +12,13 @@ import { Assignment } from "@/interfaces/results";
|
||||
import { Stat, User } from "@/interfaces/user";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import useExamStore from "@/stores/exam";
|
||||
import { filterBy, findBy, mapBy, redirect, serialize } from "@/utils";
|
||||
import { findBy, mapBy, redirect, serialize } from "@/utils";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import {
|
||||
activeAssignmentFilter,
|
||||
futureAssignmentFilter,
|
||||
} from "@/utils/assignments";
|
||||
import { getAssignmentsByAssignee } from "@/utils/assignments.be";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { getExamsByIds } from "@/utils/exams.be";
|
||||
import { sortByModule } from "@/utils/moduleUtils";
|
||||
import { checkAccess } from "@/utils/permissions";
|
||||
@@ -53,32 +52,59 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
|
||||
if (!checkAccess(user, ["admin", "developer", "student"]))
|
||||
return redirect("/");
|
||||
const assignments = (await getAssignmentsByAssignee(
|
||||
user.id,
|
||||
{
|
||||
archived: { $ne: true },
|
||||
},
|
||||
{
|
||||
_id: 0,
|
||||
id: 1,
|
||||
name: 1,
|
||||
startDate: 1,
|
||||
endDate: 1,
|
||||
exams: 1,
|
||||
results: 1,
|
||||
},
|
||||
{
|
||||
sort: { startDate: 1 },
|
||||
}
|
||||
)) as Assignment[];
|
||||
|
||||
const entityIDS = mapBy(user.entities, "id") || [];
|
||||
|
||||
const entities = await getEntitiesWithRoles(entityIDS);
|
||||
const assignments = await getAssignmentsByAssignee(user.id, {
|
||||
archived: { $ne: true },
|
||||
});
|
||||
const sessions = await getSessionsByUser(user.id, 0, {
|
||||
"assignment.id": { $in: mapBy(assignments, "id") },
|
||||
});
|
||||
const sessions = await getSessionsByUser(
|
||||
user.id,
|
||||
0,
|
||||
{
|
||||
"assignment.id": { $in: mapBy(assignments, "id") },
|
||||
},
|
||||
{
|
||||
_id: 0,
|
||||
id: 1,
|
||||
assignment: 1,
|
||||
}
|
||||
);
|
||||
|
||||
const examIDs = uniqBy(
|
||||
assignments.flatMap((a) =>
|
||||
filterBy(a.exams, "assignee", user.id).map(
|
||||
(e: any) => ({
|
||||
module: e.module,
|
||||
id: e.id,
|
||||
key: `${e.module}_${e.id}`,
|
||||
})
|
||||
)
|
||||
assignments.reduce<{ module: Module; id: string; key: string }[]>(
|
||||
(acc, a) => {
|
||||
a.exams.forEach((e) => {
|
||||
if (e.assignee === user.id)
|
||||
acc.push({
|
||||
module: e.module,
|
||||
id: e.id,
|
||||
key: `${e.module}_${e.id}`,
|
||||
});
|
||||
});
|
||||
return acc;
|
||||
},
|
||||
[]
|
||||
),
|
||||
"key"
|
||||
);
|
||||
|
||||
const exams = await getExamsByIds(examIDs);
|
||||
|
||||
return { props: serialize({ user, entities, assignments, exams, sessions }) };
|
||||
return { props: serialize({ user, assignments, exams, sessions }) };
|
||||
}, sessionOptions);
|
||||
|
||||
const destination = Buffer.from("/official-exam").toString("base64");
|
||||
@@ -109,11 +135,12 @@ export default function OfficialExam({
|
||||
});
|
||||
|
||||
if (assignmentExams.every((x) => !!x)) {
|
||||
const sortedAssignmentExams = assignmentExams.sort(sortByModule);
|
||||
dispatch({
|
||||
type: "INIT_EXAM",
|
||||
payload: {
|
||||
exams: assignmentExams.sort(sortByModule),
|
||||
modules: mapBy(assignmentExams.sort(sortByModule), "module"),
|
||||
exams: sortedAssignmentExams,
|
||||
modules: mapBy(sortedAssignmentExams, "module"),
|
||||
assignment,
|
||||
},
|
||||
});
|
||||
@@ -144,12 +171,16 @@ export default function OfficialExam({
|
||||
[assignments]
|
||||
);
|
||||
|
||||
const assignmentSessions = useMemo(
|
||||
() =>
|
||||
sessions.filter((s) =>
|
||||
mapBy(studentAssignments, "id").includes(s.assignment?.id || "")
|
||||
),
|
||||
[sessions, studentAssignments]
|
||||
const assignmentSessions = useMemo(() => {
|
||||
const studentAssignmentsIDs = mapBy(studentAssignments, "id");
|
||||
return sessions.filter((s) =>
|
||||
studentAssignmentsIDs.includes(s.assignment?.id || "")
|
||||
);
|
||||
}, [sessions, studentAssignments]);
|
||||
|
||||
const entityLabels = useMemo(
|
||||
() => mapBy(entities, "label")?.join(","),
|
||||
[entities]
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -167,7 +198,7 @@ export default function OfficialExam({
|
||||
<>
|
||||
{entities.length > 0 && (
|
||||
<div className="absolute right-4 top-4 rounded-lg bg-neutral-200 px-2 py-1">
|
||||
<b>{mapBy(entities, "label")?.join(", ")}</b>
|
||||
<b>{entityLabels}</b>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -191,20 +222,18 @@ export default function OfficialExam({
|
||||
<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
|
||||
{studentAssignments.length === 0 &&
|
||||
"Assignments will appear here. It seems that for now there are no assignments for you."}
|
||||
{studentAssignments
|
||||
.sort((a, b) => moment(a.startDate).diff(b.startDate))
|
||||
.map((a) => (
|
||||
<AssignmentCard
|
||||
key={a.id}
|
||||
assignment={a}
|
||||
user={user}
|
||||
session={assignmentSessions.find(
|
||||
(s) => s.assignment?.id === a.id
|
||||
)}
|
||||
startAssignment={startAssignment}
|
||||
resumeAssignment={loadSession}
|
||||
/>
|
||||
))}
|
||||
{studentAssignments.map((a) => (
|
||||
<AssignmentCard
|
||||
key={a.id}
|
||||
assignment={a}
|
||||
user={user}
|
||||
session={assignmentSessions.find(
|
||||
(s) => s.assignment?.id === a.id
|
||||
)}
|
||||
startAssignment={startAssignment}
|
||||
resumeAssignment={loadSession}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ import { useListSearch } from "@/hooks/useListSearch";
|
||||
import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import { mapBy, redirect, serialize } from "@/utils";
|
||||
import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import { Entity, EntityWithRoles } from "@/interfaces/entity";
|
||||
|
||||
|
||||
@@ -21,11 +21,12 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
if (!user) return redirect("/login")
|
||||
|
||||
const entityIDs = mapBy(user.entities, 'id')
|
||||
const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDs)
|
||||
|
||||
const domain = user.email.split("@").pop()
|
||||
const discounts = await db.collection<Discount>("discounts").find({ domain }).toArray()
|
||||
const packages = await db.collection<Package>("packages").find().toArray()
|
||||
const [entities, discounts, packages] = await Promise.all([
|
||||
getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDs),
|
||||
db.collection<Discount>("discounts").find({ domain }).toArray(),
|
||||
db.collection<Package>("packages").find().toArray(),
|
||||
])
|
||||
|
||||
return {
|
||||
props: serialize({ user, entities, discounts, packages }),
|
||||
|
||||
@@ -7,7 +7,7 @@ import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||
import { Permission, PermissionType } from "@/interfaces/permissions";
|
||||
import { getPermissionDoc } from "@/utils/permissions.be";
|
||||
import { User } from "@/interfaces/user";
|
||||
import { LayoutContext } from "@/components/High/Layout";
|
||||
import { LayoutContext } from "@/components/High/Layout";
|
||||
import { getUsers } from "@/utils/users.be";
|
||||
import { BsTrash } from "react-icons/bs";
|
||||
import Select from "@/components/Low/Select";
|
||||
@@ -18,6 +18,7 @@ import { Type as UserType } from "@/interfaces/user";
|
||||
import { getGroups } from "@/utils/groups.be";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import { redirect } from "@/utils";
|
||||
import { G } from "@react-pdf/renderer";
|
||||
interface BasicUser {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -40,31 +41,25 @@ export const getServerSideProps = withIronSessionSsr(
|
||||
if (!params?.id) return redirect("/permissions");
|
||||
|
||||
// Fetch data from external API
|
||||
const permission: Permission = await getPermissionDoc(params.id as string);
|
||||
|
||||
const allUserData: User[] = await getUsers();
|
||||
const groups = await getGroups();
|
||||
const [permission, users, groups] = await Promise.all([
|
||||
getPermissionDoc(params.id as string),
|
||||
getUsers({}, 0, {}, { _id: 0, id: 1, name: 1, type: 1 }),
|
||||
getGroups(),
|
||||
]);
|
||||
|
||||
const userGroups = groups.filter((x) => x.admin === user.id);
|
||||
const userGroupsParticipants = userGroups.flatMap((x) => x.participants);
|
||||
const filteredGroups =
|
||||
user.type === "corporate"
|
||||
? userGroups
|
||||
: user.type === "mastercorporate"
|
||||
? groups.filter((x) =>
|
||||
userGroups.flatMap((y) => y.participants).includes(x.admin)
|
||||
)
|
||||
? groups.filter((x) => userGroupsParticipants.includes(x.admin))
|
||||
: groups;
|
||||
|
||||
const users = allUserData.map((u) => ({
|
||||
id: u.id,
|
||||
name: u.name,
|
||||
type: u.type,
|
||||
})) as BasicUser[];
|
||||
|
||||
const filteredGroupsParticipants = filteredGroups.flatMap(
|
||||
(g) => g.participants
|
||||
);
|
||||
const filteredUsers = ["mastercorporate", "corporate"].includes(user.type)
|
||||
? users.filter((u) =>
|
||||
filteredGroups.flatMap((g) => g.participants).includes(u.id)
|
||||
)
|
||||
? users.filter((u) => filteredGroupsParticipants.includes(u.id))
|
||||
: users;
|
||||
|
||||
// const res = await fetch("api/permissions");
|
||||
@@ -158,12 +153,14 @@ export default function Page(props: Props) {
|
||||
<div className="flex gap-3">
|
||||
<Select
|
||||
value={null}
|
||||
options={users
|
||||
.filter((u) => !selectedUsers.includes(u.id))
|
||||
.map((u) => ({
|
||||
label: `${u?.type}-${u?.name}`,
|
||||
value: u.id,
|
||||
}))}
|
||||
options={users.reduce<{ label: string; value: string }[]>(
|
||||
(acc, u) => {
|
||||
if (!selectedUsers.includes(u.id))
|
||||
acc.push({ label: `${u?.type}-${u?.name}`, value: u.id });
|
||||
return acc;
|
||||
},
|
||||
[]
|
||||
)}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<Button onClick={update}>Update</Button>
|
||||
@@ -195,9 +192,8 @@ export default function Page(props: Props) {
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2>Whitelisted Users</h2>
|
||||
<div className="flex flex-col gap-3 flex-wrap">
|
||||
{users
|
||||
.filter((user) => !selectedUsers.includes(user.id))
|
||||
.map((user) => {
|
||||
{users.map((user) => {
|
||||
if (!selectedUsers.includes(user.id))
|
||||
return (
|
||||
<div
|
||||
className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
|
||||
@@ -208,7 +204,8 @@ export default function Page(props: Props) {
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -53,23 +53,23 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (shouldRedirectHome(user)) return redirect("/");
|
||||
const linkedCorporate = (await getUserCorporate(user.id)) || null;
|
||||
const groups = (
|
||||
await getParticipantGroups(user.id, { _id: 0, admin: 1 })
|
||||
).map((group) => group.admin);
|
||||
const referralAgent =
|
||||
const [linkedCorporate, groups, referralAgent] = await Promise.all([
|
||||
getUserCorporate(user.id) || null,
|
||||
getParticipantGroups(user.id, { _id: 0, group: 1 }),
|
||||
user.type === "corporate" && user.corporateInformation.referralAgent
|
||||
? await getUser(user.corporateInformation.referralAgent, {
|
||||
? getUser(user.corporateInformation.referralAgent, {
|
||||
_id: 0,
|
||||
name: 1,
|
||||
email: 1,
|
||||
demographicInformation: 1,
|
||||
})
|
||||
: null;
|
||||
: null,
|
||||
]);
|
||||
const groupsAdmin = groups.map((group) => group.admin);
|
||||
|
||||
const hasBenefitsFromUniversity =
|
||||
(await countUsers({
|
||||
id: { $in: groups },
|
||||
id: { $in: groupsAdmin },
|
||||
type: "corporate",
|
||||
})) > 0;
|
||||
|
||||
|
||||
@@ -23,7 +23,9 @@ import { getAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
|
||||
import { findBy, mapBy, redirect, serialize } from "@/utils";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { checkAccess } from "@/utils/permissions";
|
||||
import { getGradingSystemByEntities, getGradingSystemByEntity } from "@/utils/grading.be";
|
||||
import {
|
||||
getGradingSystemByEntities,
|
||||
} from "@/utils/grading.be";
|
||||
import { Grading } from "@/interfaces";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import CardList from "@/components/High/CardList";
|
||||
@@ -33,208 +35,272 @@ import getPendingEvals from "@/utils/disabled.be";
|
||||
import useEvaluationPolling from "@/hooks/useEvaluationPolling";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res)
|
||||
if (!user) return redirect("/login")
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (shouldRedirectHome(user)) return redirect("/")
|
||||
if (shouldRedirectHome(user)) return redirect("/");
|
||||
|
||||
const entityIDs = mapBy(user.entities, 'id')
|
||||
const isAdmin = checkAccess(user, ["admin", "developer"])
|
||||
const entityIDs = mapBy(user.entities, "id");
|
||||
const isAdmin = checkAccess(user, ["admin", "developer"]);
|
||||
|
||||
const entities = await getEntitiesWithRoles(checkAccess(user, ["admin", "developer"]) ? undefined : entityIDs)
|
||||
const entitiesIds = mapBy(entities, 'id')
|
||||
const users = await (isAdmin ? getUsers() : getEntitiesUsers(entitiesIds))
|
||||
const assignments = await (isAdmin ? getAssignments() : getEntitiesAssignments(entitiesIds))
|
||||
const gradingSystems = await getGradingSystemByEntities(entitiesIds)
|
||||
const pendingSessionIds = await getPendingEvals(user.id);
|
||||
const entities = await getEntitiesWithRoles(isAdmin ? undefined : entityIDs);
|
||||
const entitiesIds = mapBy(entities, "id");
|
||||
const [users, assignments, gradingSystems, pendingSessionIds] =
|
||||
await Promise.all([
|
||||
isAdmin ? getUsers() : getEntitiesUsers(entitiesIds),
|
||||
isAdmin ? getAssignments() : getEntitiesAssignments(entitiesIds),
|
||||
getGradingSystemByEntities(entitiesIds),
|
||||
getPendingEvals(user.id),
|
||||
]);
|
||||
|
||||
return {
|
||||
props: serialize({ user, users, assignments, entities, gradingSystems, isAdmin, pendingSessionIds }),
|
||||
};
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
users,
|
||||
assignments,
|
||||
entities,
|
||||
gradingSystems,
|
||||
isAdmin,
|
||||
pendingSessionIds,
|
||||
}),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
type Filter = "months" | "weeks" | "days" | "assignments" | undefined;
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
users: User[];
|
||||
assignments: Assignment[];
|
||||
entities: EntityWithRoles[]
|
||||
gradingSystems: Grading[]
|
||||
pendingSessionIds: string[];
|
||||
isAdmin:boolean
|
||||
user: User;
|
||||
users: User[];
|
||||
assignments: Assignment[];
|
||||
entities: EntityWithRoles[];
|
||||
gradingSystems: Grading[];
|
||||
pendingSessionIds: string[];
|
||||
isAdmin: boolean;
|
||||
}
|
||||
|
||||
const MAX_TRAINING_EXAMS = 10;
|
||||
|
||||
export default function History({ user, users, assignments, entities, gradingSystems, isAdmin, pendingSessionIds }: Props) {
|
||||
const router = useRouter();
|
||||
const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore((state) => [
|
||||
state.selectedUser,
|
||||
state.setSelectedUser,
|
||||
state.training,
|
||||
state.setTraining,
|
||||
]);
|
||||
export default function History({
|
||||
user,
|
||||
users,
|
||||
assignments,
|
||||
entities,
|
||||
gradingSystems,
|
||||
isAdmin,
|
||||
pendingSessionIds,
|
||||
}: Props) {
|
||||
const router = useRouter();
|
||||
const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore(
|
||||
(state) => [
|
||||
state.selectedUser,
|
||||
state.setSelectedUser,
|
||||
state.training,
|
||||
state.setTraining,
|
||||
]
|
||||
);
|
||||
|
||||
const [filter, setFilter] = useState<Filter>();
|
||||
const [filter, setFilter] = useState<Filter>();
|
||||
|
||||
const { data: stats, isLoading: isStatsLoading } = useFilterRecordsByUser<Stat[]>(statsUserId || user?.id);
|
||||
const allowedDownloadEntities = useAllowedEntities(user, entities, 'download_student_record')
|
||||
const { data: stats, isLoading: isStatsLoading } = useFilterRecordsByUser<
|
||||
Stat[]
|
||||
>(statsUserId || user?.id);
|
||||
const allowedDownloadEntities = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"download_student_record"
|
||||
);
|
||||
|
||||
const renderPdfIcon = usePDFDownload("stats");
|
||||
const renderPdfIcon = usePDFDownload("stats");
|
||||
|
||||
const [selectedTrainingExams, setSelectedTrainingExams] = useState<string[]>([]);
|
||||
const setTrainingStats = useTrainingContentStore((state) => state.setStats);
|
||||
const [selectedTrainingExams, setSelectedTrainingExams] = useState<string[]>(
|
||||
[]
|
||||
);
|
||||
const setTrainingStats = useTrainingContentStore((state) => state.setStats);
|
||||
|
||||
const groupedStats = useMemo(() => groupByDate(
|
||||
stats.filter((x) => {
|
||||
if (
|
||||
(
|
||||
x.module === "writing" || x.module === "speaking") &&
|
||||
!x.isDisabled && Array.isArray(x.solutions) &&
|
||||
!x.solutions.every((y) => Object.keys(y).includes("evaluation")
|
||||
)
|
||||
)
|
||||
return false;
|
||||
return true;
|
||||
}),
|
||||
), [stats])
|
||||
const groupedStats = useMemo(
|
||||
() =>
|
||||
groupByDate(
|
||||
stats.filter((x) => {
|
||||
if (
|
||||
(x.module === "writing" || x.module === "speaking") &&
|
||||
!x.isDisabled &&
|
||||
Array.isArray(x.solutions) &&
|
||||
!x.solutions.every((y) => Object.keys(y).includes("evaluation"))
|
||||
)
|
||||
return false;
|
||||
return true;
|
||||
})
|
||||
),
|
||||
[stats]
|
||||
);
|
||||
|
||||
useEffect(() => setStatsUserId(user.id), [setStatsUserId, user]);
|
||||
useEffect(() => setStatsUserId(user.id), [setStatsUserId, user]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleRouteChange = (url: string) => {
|
||||
setTraining(false);
|
||||
};
|
||||
router.events.on("routeChangeStart", handleRouteChange);
|
||||
return () => {
|
||||
router.events.off("routeChangeStart", handleRouteChange);
|
||||
};
|
||||
}, [router.events, setTraining]);
|
||||
useEffect(() => {
|
||||
const handleRouteChange = (url: string) => {
|
||||
setTraining(false);
|
||||
};
|
||||
router.events.on("routeChangeStart", handleRouteChange);
|
||||
return () => {
|
||||
router.events.off("routeChangeStart", handleRouteChange);
|
||||
};
|
||||
}, [router.events, setTraining]);
|
||||
|
||||
const filterStatsByDate = (stats: { [key: string]: Stat[] }) => {
|
||||
if (filter && filter !== "assignments") {
|
||||
const filterDate = moment()
|
||||
.subtract({ [filter as string]: 1 })
|
||||
.format("x");
|
||||
const filteredStats: { [key: string]: Stat[] } = {};
|
||||
const filterStatsByDate = (stats: { [key: string]: Stat[] }) => {
|
||||
if (filter && filter !== "assignments") {
|
||||
const filterDate = moment()
|
||||
.subtract({ [filter as string]: 1 })
|
||||
.format("x");
|
||||
const filteredStats: { [key: string]: Stat[] } = {};
|
||||
|
||||
Object.keys(stats).forEach((timestamp) => {
|
||||
if (timestamp >= filterDate) filteredStats[timestamp] = stats[timestamp];
|
||||
});
|
||||
return filteredStats;
|
||||
}
|
||||
Object.keys(stats).forEach((timestamp) => {
|
||||
if (timestamp >= filterDate)
|
||||
filteredStats[timestamp] = stats[timestamp];
|
||||
});
|
||||
return filteredStats;
|
||||
}
|
||||
|
||||
if (filter && filter === "assignments") {
|
||||
const filteredStats: { [key: string]: Stat[] } = {};
|
||||
if (filter && filter === "assignments") {
|
||||
const filteredStats: { [key: string]: Stat[] } = {};
|
||||
|
||||
Object.keys(stats).forEach((timestamp) => {
|
||||
if (stats[timestamp].map((s) => s.assignment === undefined).includes(false))
|
||||
filteredStats[timestamp] = [...stats[timestamp].filter((s) => !!s.assignment)];
|
||||
});
|
||||
Object.keys(stats).forEach((timestamp) => {
|
||||
if (
|
||||
stats[timestamp]
|
||||
.map((s) => s.assignment === undefined)
|
||||
.includes(false)
|
||||
)
|
||||
filteredStats[timestamp] = [
|
||||
...stats[timestamp].filter((s) => !!s.assignment),
|
||||
];
|
||||
});
|
||||
|
||||
return filteredStats;
|
||||
}
|
||||
return filteredStats;
|
||||
}
|
||||
|
||||
return stats;
|
||||
};
|
||||
return stats;
|
||||
};
|
||||
|
||||
const handleTrainingContentSubmission = () => {
|
||||
if (groupedStats) {
|
||||
const groupedStatsByDate = filterStatsByDate(groupedStats);
|
||||
const allStats = Object.keys(groupedStatsByDate);
|
||||
const selectedStats = selectedTrainingExams.reduce<Record<string, Stat[]>>((accumulator, moduleAndTimestamp) => {
|
||||
const timestamp = moduleAndTimestamp.split("-")[1];
|
||||
if (allStats.includes(timestamp) && !accumulator.hasOwnProperty(timestamp)) {
|
||||
accumulator[timestamp] = groupedStatsByDate[timestamp];
|
||||
}
|
||||
return accumulator;
|
||||
}, {});
|
||||
setTrainingStats(Object.values(selectedStats).flat());
|
||||
router.push("/training");
|
||||
}
|
||||
};
|
||||
const handleTrainingContentSubmission = () => {
|
||||
if (groupedStats) {
|
||||
const groupedStatsByDate = filterStatsByDate(groupedStats);
|
||||
const allStats = Object.keys(groupedStatsByDate);
|
||||
const selectedStats = selectedTrainingExams.reduce<
|
||||
Record<string, Stat[]>
|
||||
>((accumulator, moduleAndTimestamp) => {
|
||||
const timestamp = moduleAndTimestamp.split("-")[1];
|
||||
if (
|
||||
allStats.includes(timestamp) &&
|
||||
!accumulator.hasOwnProperty(timestamp)
|
||||
) {
|
||||
accumulator[timestamp] = groupedStatsByDate[timestamp];
|
||||
}
|
||||
return accumulator;
|
||||
}, {});
|
||||
setTrainingStats(Object.values(selectedStats).flat());
|
||||
router.push("/training");
|
||||
}
|
||||
};
|
||||
|
||||
const filteredStats = useMemo(() =>
|
||||
Object.keys(filterStatsByDate(groupedStats))
|
||||
.sort((a, b) => parseInt(b) - parseInt(a)),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[groupedStats, filter])
|
||||
const filteredStats = useMemo(
|
||||
() =>
|
||||
Object.keys(filterStatsByDate(groupedStats)).sort(
|
||||
(a, b) => parseInt(b) - parseInt(a)
|
||||
),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[groupedStats, filter]
|
||||
);
|
||||
|
||||
const customContent = (timestamp: string) => {
|
||||
const dateStats = groupedStats[timestamp];
|
||||
const statUser = findBy(users, 'id', dateStats[0]?.user)
|
||||
const customContent = (timestamp: string) => {
|
||||
const dateStats = groupedStats[timestamp];
|
||||
const statUser = findBy(users, "id", dateStats[0]?.user);
|
||||
|
||||
const canDownload = mapBy(statUser?.entities, 'id').some(e => mapBy(allowedDownloadEntities, 'id').includes(e))
|
||||
const canDownload = mapBy(statUser?.entities, "id").some((e) =>
|
||||
mapBy(allowedDownloadEntities, "id").includes(e)
|
||||
);
|
||||
|
||||
return (
|
||||
<StatsGridItem
|
||||
key={uuidv4()}
|
||||
stats={dateStats}
|
||||
gradingSystems={gradingSystems}
|
||||
timestamp={timestamp}
|
||||
user={user}
|
||||
assignments={assignments}
|
||||
users={users}
|
||||
training={training}
|
||||
selectedTrainingExams={selectedTrainingExams}
|
||||
setSelectedTrainingExams={setSelectedTrainingExams}
|
||||
maxTrainingExams={MAX_TRAINING_EXAMS}
|
||||
renderPdfIcon={canDownload ? renderPdfIcon : undefined}
|
||||
/>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<StatsGridItem
|
||||
key={uuidv4()}
|
||||
stats={dateStats}
|
||||
gradingSystems={gradingSystems}
|
||||
timestamp={timestamp}
|
||||
user={user}
|
||||
assignments={assignments}
|
||||
users={users}
|
||||
training={training}
|
||||
selectedTrainingExams={selectedTrainingExams}
|
||||
setSelectedTrainingExams={setSelectedTrainingExams}
|
||||
maxTrainingExams={MAX_TRAINING_EXAMS}
|
||||
renderPdfIcon={canDownload ? renderPdfIcon : undefined}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
useEvaluationPolling(pendingSessionIds ? pendingSessionIds : [], "records", user.id);
|
||||
useEvaluationPolling(
|
||||
pendingSessionIds ? pendingSessionIds : [],
|
||||
"records",
|
||||
user.id
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Record | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
{user && (
|
||||
<>
|
||||
<RecordFilter user={user} isAdmin={isAdmin} entities={entities} filterState={{ filter: filter, setFilter: setFilter }}>
|
||||
{training && (
|
||||
<div className="flex flex-row">
|
||||
<div className="font-semibold text-2xl mr-4">
|
||||
Select up to 10 exercises
|
||||
{`(${selectedTrainingExams.length}/${MAX_TRAINING_EXAMS})`}
|
||||
</div>
|
||||
<button
|
||||
className={clsx(
|
||||
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4 disabled:cursor-not-allowed",
|
||||
"transition duration-300 ease-in-out",
|
||||
)}
|
||||
disabled={selectedTrainingExams.length == 0}
|
||||
onClick={handleTrainingContentSubmission}>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</RecordFilter>
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Record | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
{user && (
|
||||
<>
|
||||
<RecordFilter
|
||||
user={user}
|
||||
isAdmin={isAdmin}
|
||||
entities={entities}
|
||||
filterState={{ filter: filter, setFilter: setFilter }}
|
||||
>
|
||||
{training && (
|
||||
<div className="flex flex-row">
|
||||
<div className="font-semibold text-2xl mr-4">
|
||||
Select up to 10 exercises
|
||||
{`(${selectedTrainingExams.length}/${MAX_TRAINING_EXAMS})`}
|
||||
</div>
|
||||
<button
|
||||
className={clsx(
|
||||
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4 disabled:cursor-not-allowed",
|
||||
"transition duration-300 ease-in-out"
|
||||
)}
|
||||
disabled={selectedTrainingExams.length == 0}
|
||||
onClick={handleTrainingContentSubmission}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</RecordFilter>
|
||||
|
||||
|
||||
{filteredStats.length > 0 && !isStatsLoading && (
|
||||
<CardList list={filteredStats} renderCard={customContent} searchFields={[]} pageSize={30} className="lg:!grid-cols-3" />
|
||||
)}
|
||||
{filteredStats.length === 0 && !isStatsLoading && (
|
||||
<span className="font-semibold ml-1">No record to display...</span>
|
||||
)}
|
||||
{isStatsLoading && (
|
||||
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
|
||||
<span className="loading loading-infinity w-32 bg-mti-green-light" />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
{filteredStats.length > 0 && !isStatsLoading && (
|
||||
<CardList
|
||||
list={filteredStats}
|
||||
renderCard={customContent}
|
||||
searchFields={[]}
|
||||
pageSize={30}
|
||||
className="lg:!grid-cols-3"
|
||||
/>
|
||||
)}
|
||||
{filteredStats.length === 0 && !isStatsLoading && (
|
||||
<span className="font-semibold ml-1">No record to display...</span>
|
||||
)}
|
||||
{isStatsLoading && (
|
||||
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
|
||||
<span className="loading loading-infinity w-32 bg-mti-green-light" />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,169 +13,256 @@ import { checkAccess, getTypesOfUser } from "@/utils/permissions";
|
||||
import { useState } from "react";
|
||||
import Modal from "@/components/Modal";
|
||||
import IconCard from "@/components/IconCard";
|
||||
import { BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill } from "react-icons/bs";
|
||||
import {
|
||||
BsCode,
|
||||
BsCodeSquare,
|
||||
BsGearFill,
|
||||
BsPeopleFill,
|
||||
BsPersonFill,
|
||||
} from "react-icons/bs";
|
||||
import UserCreator from "./(admin)/UserCreator";
|
||||
import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
|
||||
import { CEFR_STEPS } from "@/resources/grading";
|
||||
import { User } from "@/interfaces/user";
|
||||
import { getUserPermissions } from "@/utils/permissions.be";
|
||||
import { PermissionType } from "@/interfaces/permissions";
|
||||
import { PermissionType } from "@/interfaces/permissions";
|
||||
import { getUsers } from "@/utils/users.be";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { mapBy, serialize, redirect } from "@/utils";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import { getGradingSystemByEntities, getGradingSystemByEntity } from "@/utils/grading.be";
|
||||
import {
|
||||
getGradingSystemByEntities,
|
||||
getGradingSystemByEntity,
|
||||
} from "@/utils/grading.be";
|
||||
import { Grading } from "@/interfaces";
|
||||
import { useRouter } from "next/router";
|
||||
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res)
|
||||
if (!user) return redirect("/login")
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
|
||||
return redirect("/")
|
||||
if (
|
||||
shouldRedirectHome(user) ||
|
||||
!checkAccess(user, [
|
||||
"admin",
|
||||
"developer",
|
||||
"corporate",
|
||||
"teacher",
|
||||
"mastercorporate",
|
||||
])
|
||||
)
|
||||
return redirect("/");
|
||||
const [permissions, entities, allUsers] = await Promise.all([
|
||||
getUserPermissions(user.id),
|
||||
isAdmin(user)
|
||||
? await getEntitiesWithRoles()
|
||||
: await getEntitiesWithRoles(mapBy(user.entities, "id")),
|
||||
getUsers(),
|
||||
]);
|
||||
const gradingSystems = await getGradingSystemByEntities(
|
||||
mapBy(entities, "id")
|
||||
);
|
||||
const entitiesGrading = entities.map(
|
||||
(e) =>
|
||||
gradingSystems.find((g) => g.entity === e.id) || {
|
||||
entity: e.id,
|
||||
steps: CEFR_STEPS,
|
||||
}
|
||||
);
|
||||
|
||||
const permissions = await getUserPermissions(user.id);
|
||||
const entities = isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, 'id'))
|
||||
const allUsers = await getUsers()
|
||||
const gradingSystems = await getGradingSystemByEntities(mapBy(entities, 'id'))
|
||||
const entitiesGrading = entities.map(e => gradingSystems.find(g => g.entity === e.id) || { entity: e.id, steps: CEFR_STEPS })
|
||||
|
||||
return {
|
||||
props: serialize({ user, permissions, entities, allUsers, entitiesGrading }),
|
||||
};
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
permissions,
|
||||
entities,
|
||||
allUsers,
|
||||
entitiesGrading,
|
||||
}),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
permissions: PermissionType[];
|
||||
entities: EntityWithRoles[];
|
||||
allUsers: User[]
|
||||
entitiesGrading: Grading[]
|
||||
user: User;
|
||||
permissions: PermissionType[];
|
||||
entities: EntityWithRoles[];
|
||||
allUsers: User[];
|
||||
entitiesGrading: Grading[];
|
||||
}
|
||||
|
||||
export default function Admin({ user, entities, permissions, allUsers, entitiesGrading }: Props) {
|
||||
const [modalOpen, setModalOpen] = useState<string>();
|
||||
const router = useRouter()
|
||||
export default function Admin({
|
||||
user,
|
||||
entities,
|
||||
permissions,
|
||||
allUsers,
|
||||
entitiesGrading,
|
||||
}: Props) {
|
||||
const [modalOpen, setModalOpen] = useState<string>();
|
||||
const router = useRouter();
|
||||
|
||||
const entitiesAllowCreateUser = useAllowedEntities(user, entities, 'create_user')
|
||||
const entitiesAllowCreateUsers = useAllowedEntities(user, entities, 'create_user_batch')
|
||||
const entitiesAllowCreateCode = useAllowedEntities(user, entities, 'create_code')
|
||||
const entitiesAllowCreateCodes = useAllowedEntities(user, entities, 'create_code_batch')
|
||||
const entitiesAllowEditGrading = useAllowedEntities(user, entities, 'edit_grading_system')
|
||||
const entitiesAllowCreateUser = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_user"
|
||||
);
|
||||
const entitiesAllowCreateUsers = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_user_batch"
|
||||
);
|
||||
const entitiesAllowCreateCode = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_code"
|
||||
);
|
||||
const entitiesAllowCreateCodes = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_code_batch"
|
||||
);
|
||||
const entitiesAllowEditGrading = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"edit_grading_system"
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Settings Panel | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<>
|
||||
<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
|
||||
<BatchCreateUser
|
||||
user={user}
|
||||
entities={entitiesAllowCreateUser}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
|
||||
<BatchCodeGenerator
|
||||
entities={entitiesAllowCreateCodes}
|
||||
user={user}
|
||||
users={allUsers}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
|
||||
<CodeGenerator
|
||||
entities={entitiesAllowCreateCode}
|
||||
user={user}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
|
||||
<UserCreator
|
||||
user={user}
|
||||
entities={entitiesAllowCreateUsers}
|
||||
users={allUsers}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
|
||||
<CorporateGradingSystem
|
||||
user={user}
|
||||
entitiesGrading={entitiesGrading}
|
||||
entities={entitiesAllowEditGrading}
|
||||
mutate={() => router.replace(router.asPath)}
|
||||
/>
|
||||
</Modal>
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Settings Panel | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<>
|
||||
<Modal
|
||||
isOpen={modalOpen === "batchCreateUser"}
|
||||
onClose={() => setModalOpen(undefined)}
|
||||
maxWidth="max-w-[85%]"
|
||||
>
|
||||
<BatchCreateUser
|
||||
user={user}
|
||||
entities={entitiesAllowCreateUser}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
isOpen={modalOpen === "batchCreateCode"}
|
||||
onClose={() => setModalOpen(undefined)}
|
||||
>
|
||||
<BatchCodeGenerator
|
||||
entities={entitiesAllowCreateCodes}
|
||||
user={user}
|
||||
users={allUsers}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
isOpen={modalOpen === "createCode"}
|
||||
onClose={() => setModalOpen(undefined)}
|
||||
>
|
||||
<CodeGenerator
|
||||
entities={entitiesAllowCreateCode}
|
||||
user={user}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
isOpen={modalOpen === "createUser"}
|
||||
onClose={() => setModalOpen(undefined)}
|
||||
>
|
||||
<UserCreator
|
||||
user={user}
|
||||
entities={entitiesAllowCreateUsers}
|
||||
users={allUsers}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
isOpen={modalOpen === "gradingSystem"}
|
||||
onClose={() => setModalOpen(undefined)}
|
||||
>
|
||||
<CorporateGradingSystem
|
||||
user={user}
|
||||
entitiesGrading={entitiesGrading}
|
||||
entities={entitiesAllowEditGrading}
|
||||
mutate={() => router.replace(router.asPath)}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
|
||||
<ExamLoader />
|
||||
{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
|
||||
<div className="w-full grid grid-cols-2 gap-4">
|
||||
<IconCard
|
||||
Icon={BsCode}
|
||||
label="Generate Single Code"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("createCode")}
|
||||
disabled={entitiesAllowCreateCode.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsCodeSquare}
|
||||
label="Generate Codes in Batch"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("batchCreateCode")}
|
||||
disabled={entitiesAllowCreateCodes.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsPersonFill}
|
||||
label="Create Single User"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("createUser")}
|
||||
disabled={entitiesAllowCreateUser.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsPeopleFill}
|
||||
label="Create Users in Batch"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("batchCreateUser")}
|
||||
disabled={entitiesAllowCreateUsers.length === 0}
|
||||
/>
|
||||
{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
|
||||
<IconCard
|
||||
Icon={BsGearFill}
|
||||
label="Grading System"
|
||||
color="purple"
|
||||
className="w-full h-full col-span-2"
|
||||
onClick={() => setModalOpen("gradingSystem")}
|
||||
disabled={entitiesAllowEditGrading.length === 0}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<section className="w-full">
|
||||
<Lists user={user} entities={entities} permissions={permissions} />
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
|
||||
<ExamLoader />
|
||||
{checkAccess(
|
||||
user,
|
||||
getTypesOfUser(["teacher"]),
|
||||
permissions,
|
||||
"viewCodes"
|
||||
) && (
|
||||
<div className="w-full grid grid-cols-2 gap-4">
|
||||
<IconCard
|
||||
Icon={BsCode}
|
||||
label="Generate Single Code"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("createCode")}
|
||||
disabled={entitiesAllowCreateCode.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsCodeSquare}
|
||||
label="Generate Codes in Batch"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("batchCreateCode")}
|
||||
disabled={entitiesAllowCreateCodes.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsPersonFill}
|
||||
label="Create Single User"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("createUser")}
|
||||
disabled={entitiesAllowCreateUser.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsPeopleFill}
|
||||
label="Create Users in Batch"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("batchCreateUser")}
|
||||
disabled={entitiesAllowCreateUsers.length === 0}
|
||||
/>
|
||||
{checkAccess(user, [
|
||||
"admin",
|
||||
"corporate",
|
||||
"developer",
|
||||
"mastercorporate",
|
||||
]) && (
|
||||
<IconCard
|
||||
Icon={BsGearFill}
|
||||
label="Grading System"
|
||||
color="purple"
|
||||
className="w-full h-full col-span-2"
|
||||
onClick={() => setModalOpen("gradingSystem")}
|
||||
disabled={entitiesAllowEditGrading.length === 0}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<section className="w-full">
|
||||
<Lists user={user} entities={entities} permissions={permissions} />
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,14 +7,14 @@ import { Session } from "@/hooks/useSessions";
|
||||
import { Entity, EntityWithRoles } from "@/interfaces/entity";
|
||||
import { Exam } from "@/interfaces/exam";
|
||||
import { Assignment, AssignmentResult } from "@/interfaces/results";
|
||||
import { StudentUser, User } from "@/interfaces/user";
|
||||
import { StudentUser, User } from "@/interfaces/user";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { filterBy, findBy, mapBy, redirect, serialize } from "@/utils";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import { getEntitiesAssignments } from "@/utils/assignments.be";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { getExamsByIds } from "@/utils/exams.be";
|
||||
import { findAllowedEntities } from "@/utils/permissions";
|
||||
import { findAllowedEntities } from "@/utils/permissions";
|
||||
import { getSessionsByAssignments } from "@/utils/sessions.be";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import { getEntitiesUsers } from "@/utils/users.be";
|
||||
@@ -28,278 +28,399 @@ import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import ReactDatePicker from "react-datepicker";
|
||||
import {
|
||||
BsBank,
|
||||
BsChevronLeft,
|
||||
BsX,
|
||||
} from "react-icons/bs";
|
||||
import { BsBank, BsChevronLeft, BsX } from "react-icons/bs";
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
students: StudentUser[];
|
||||
entities: EntityWithRoles[];
|
||||
assignments: Assignment[];
|
||||
sessions: Session[]
|
||||
exams: Exam[]
|
||||
user: User;
|
||||
students: StudentUser[];
|
||||
entities: EntityWithRoles[];
|
||||
assignments: Assignment[];
|
||||
sessions: Session[];
|
||||
exams: Exam[];
|
||||
}
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res)
|
||||
if (!user) return redirect("/login")
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
const entityIDS = mapBy(user.entities, "id") || [];
|
||||
const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
|
||||
const allowedEntities = findAllowedEntities(user, entities, 'view_entity_statistics')
|
||||
const entityIDS = mapBy(user.entities, "id") || [];
|
||||
const entities = await getEntitiesWithRoles(
|
||||
isAdmin(user) ? undefined : entityIDS
|
||||
);
|
||||
const allowedEntities = findAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"view_entity_statistics"
|
||||
);
|
||||
|
||||
if (allowedEntities.length === 0) return redirect("/")
|
||||
if (allowedEntities.length === 0) return redirect("/");
|
||||
|
||||
const studentsAllowedEntities = findAllowedEntities(user, entities, 'view_students')
|
||||
const students = await getEntitiesUsers(mapBy(studentsAllowedEntities, 'id'), { type: "student" })
|
||||
const studentsAllowedEntities = findAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"view_students"
|
||||
);
|
||||
|
||||
const [students, assignments] = await Promise.all([
|
||||
getEntitiesUsers(mapBy(studentsAllowedEntities, "id"), { type: "student" }),
|
||||
getEntitiesAssignments(mapBy(entities, "id")),
|
||||
]);
|
||||
|
||||
const [sessions, exams] = await Promise.all([
|
||||
getSessionsByAssignments(mapBy(assignments, "id")),
|
||||
getExamsByIds(assignments.flatMap((a) => a.exams)),
|
||||
]);
|
||||
|
||||
const assignments = await getEntitiesAssignments(mapBy(entities, "id"));
|
||||
const sessions = await getSessionsByAssignments(mapBy(assignments, 'id'))
|
||||
const exams = await getExamsByIds(assignments.flatMap(a => a.exams))
|
||||
|
||||
return { props: serialize({ user, students, entities: allowedEntities, assignments, sessions, exams }) };
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
students,
|
||||
entities: allowedEntities,
|
||||
assignments,
|
||||
sessions,
|
||||
exams,
|
||||
}),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
interface Item {
|
||||
student: StudentUser
|
||||
result?: AssignmentResult
|
||||
assignment: Assignment
|
||||
exams: Exam[]
|
||||
entity: Entity
|
||||
session?: Session
|
||||
student: StudentUser;
|
||||
result?: AssignmentResult;
|
||||
assignment: Assignment;
|
||||
exams: Exam[];
|
||||
entity: Entity;
|
||||
session?: Session;
|
||||
}
|
||||
|
||||
const columnHelper = createColumnHelper<Item>();
|
||||
|
||||
export default function Statistical({ user, students, entities, assignments, sessions, exams }: Props) {
|
||||
const [startDate, setStartDate] = useState<Date>(new Date());
|
||||
const [endDate, setEndDate] = useState<Date | null>(moment().add(1, 'month').toDate());
|
||||
const [selectedEntities, setSelectedEntities] = useState<string[]>([])
|
||||
const [isDownloading, setIsDownloading] = useState(false)
|
||||
export default function Statistical({
|
||||
user,
|
||||
students,
|
||||
entities,
|
||||
assignments,
|
||||
sessions,
|
||||
exams,
|
||||
}: Props) {
|
||||
const [startDate, setStartDate] = useState<Date>(new Date());
|
||||
const [endDate, setEndDate] = useState<Date | null>(
|
||||
moment().add(1, "month").toDate()
|
||||
);
|
||||
const [selectedEntities, setSelectedEntities] = useState<string[]>([]);
|
||||
const [isDownloading, setIsDownloading] = useState(false);
|
||||
|
||||
const entitiesAllowDownload = useAllowedEntities(user, entities, 'download_statistics_report')
|
||||
const entitiesAllowDownload = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"download_statistics_report"
|
||||
);
|
||||
|
||||
const resetDateRange = () => {
|
||||
const orderedAssignments = orderBy(assignments, ['startDate'], ['asc'])
|
||||
setStartDate(moment(orderedAssignments.shift()?.startDate || "2024-01-01T00:00:01.986Z").toDate())
|
||||
setEndDate(moment().add(1, 'month').toDate())
|
||||
}
|
||||
const resetDateRange = () => {
|
||||
const orderedAssignments = orderBy(assignments, ["startDate"], ["asc"]);
|
||||
setStartDate(
|
||||
moment(
|
||||
orderedAssignments.shift()?.startDate || "2024-01-01T00:00:01.986Z"
|
||||
).toDate()
|
||||
);
|
||||
setEndDate(moment().add(1, "month").toDate());
|
||||
};
|
||||
|
||||
useEffect(resetDateRange, [assignments])
|
||||
useEffect(resetDateRange, [assignments]);
|
||||
|
||||
const updateDateRange = (dates: [Date, Date | null]) => {
|
||||
const [start, end] = dates;
|
||||
setStartDate(start!);
|
||||
setEndDate(end);
|
||||
};
|
||||
const updateDateRange = (dates: [Date, Date | null]) => {
|
||||
const [start, end] = dates;
|
||||
setStartDate(start!);
|
||||
setEndDate(end);
|
||||
};
|
||||
|
||||
const toggleEntity = (id: string) => setSelectedEntities(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
|
||||
const toggleEntity = (id: string) =>
|
||||
setSelectedEntities((prev) =>
|
||||
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
|
||||
);
|
||||
|
||||
const renderAssignmentResolution = (entityID: string) => {
|
||||
const entityAssignments = filterBy(assignments, 'entity', entityID)
|
||||
const total = entityAssignments.reduce((acc, curr) => acc + curr.assignees.length, 0)
|
||||
const results = entityAssignments.reduce((acc, curr) => acc + curr.results.length, 0)
|
||||
const renderAssignmentResolution = (entityID: string) => {
|
||||
const entityAssignments = filterBy(assignments, "entity", entityID);
|
||||
const total = entityAssignments.reduce(
|
||||
(acc, curr) => acc + curr.assignees.length,
|
||||
0
|
||||
);
|
||||
const results = entityAssignments.reduce(
|
||||
(acc, curr) => acc + curr.results.length,
|
||||
0
|
||||
);
|
||||
|
||||
return `${results}/${total}`
|
||||
}
|
||||
return `${results}/${total}`;
|
||||
};
|
||||
|
||||
const totalAssignmentResolution = useMemo(() => {
|
||||
const total = assignments.reduce((acc, curr) => acc + curr.assignees.length, 0)
|
||||
const results = assignments.reduce((acc, curr) => acc + curr.results.length, 0)
|
||||
const totalAssignmentResolution = useMemo(() => {
|
||||
const total = assignments.reduce(
|
||||
(acc, curr) => acc + curr.assignees.length,
|
||||
0
|
||||
);
|
||||
const results = assignments.reduce(
|
||||
(acc, curr) => acc + curr.results.length,
|
||||
0
|
||||
);
|
||||
|
||||
return { results, total }
|
||||
}, [assignments])
|
||||
return { results, total };
|
||||
}, [assignments]);
|
||||
|
||||
const filteredAssignments = useMemo(() => {
|
||||
if (!startDate && !endDate) return assignments
|
||||
const startDateFiltered = startDate ? assignments.filter(a => moment(a.startDate).isSameOrAfter(moment(startDate))) : assignments
|
||||
return endDate ? startDateFiltered.filter(a => moment(a.endDate).isSameOrBefore(moment(endDate))) : startDateFiltered
|
||||
}, [startDate, endDate, assignments])
|
||||
const filteredAssignments = useMemo(() => {
|
||||
if (!startDate && !endDate) return assignments;
|
||||
const startDateFiltered = startDate
|
||||
? assignments.filter((a) =>
|
||||
moment(a.startDate).isSameOrAfter(moment(startDate))
|
||||
)
|
||||
: assignments;
|
||||
return endDate
|
||||
? startDateFiltered.filter((a) =>
|
||||
moment(a.endDate).isSameOrBefore(moment(endDate))
|
||||
)
|
||||
: startDateFiltered;
|
||||
}, [startDate, endDate, assignments]);
|
||||
|
||||
const data: Item[] = useMemo(() =>
|
||||
filteredAssignments.filter(a => selectedEntities.includes(a.entity || "")).flatMap(a => a.assignees.map(x => {
|
||||
const result = findBy(a.results, 'user', x)
|
||||
const student = findBy(students, 'id', x)
|
||||
const entity = findBy(entities, 'id', a.entity)
|
||||
const assignmentExams = exams.filter(e => a.exams.map(x => `${x.id}_${x.module}`).includes(`${e.id}_${e.module}`))
|
||||
const session = sessions.find(s => s.assignment?.id === a.id && s.user === x)
|
||||
const data: Item[] = useMemo(
|
||||
() =>
|
||||
filteredAssignments
|
||||
.filter((a) => selectedEntities.includes(a.entity || ""))
|
||||
.flatMap((a) =>
|
||||
a.assignees.map((x) => {
|
||||
const result = findBy(a.results, "user", x);
|
||||
const student = findBy(students, "id", x);
|
||||
const entity = findBy(entities, "id", a.entity);
|
||||
const assignmentExams = exams.filter((e) =>
|
||||
a.exams
|
||||
.map((x) => `${x.id}_${x.module}`)
|
||||
.includes(`${e.id}_${e.module}`)
|
||||
);
|
||||
const session = sessions.find(
|
||||
(s) => s.assignment?.id === a.id && s.user === x
|
||||
);
|
||||
|
||||
if (!student) return undefined
|
||||
return { student, result, assignment: a, exams: assignmentExams, session, entity }
|
||||
})).filter(x => !!x) as Item[],
|
||||
[students, selectedEntities, filteredAssignments, exams, sessions, entities]
|
||||
)
|
||||
if (!student) return undefined;
|
||||
return {
|
||||
student,
|
||||
result,
|
||||
assignment: a,
|
||||
exams: assignmentExams,
|
||||
session,
|
||||
entity,
|
||||
};
|
||||
})
|
||||
)
|
||||
.filter((x) => !!x) as Item[],
|
||||
[students, selectedEntities, filteredAssignments, exams, sessions, entities]
|
||||
);
|
||||
|
||||
const sortedData: Item[] = useMemo(() => data.sort((a, b) => {
|
||||
const aTotalScore = a.result?.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0) || 0
|
||||
const bTotalScore = b.result?.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0) || 0
|
||||
const sortedData: Item[] = useMemo(
|
||||
() =>
|
||||
data.sort((a, b) => {
|
||||
const aTotalScore =
|
||||
a.result?.stats
|
||||
.filter((x) => !x.isPractice)
|
||||
.reduce((acc, curr) => acc + curr.score.correct, 0) || 0;
|
||||
const bTotalScore =
|
||||
b.result?.stats
|
||||
.filter((x) => !x.isPractice)
|
||||
.reduce((acc, curr) => acc + curr.score.correct, 0) || 0;
|
||||
|
||||
return bTotalScore - aTotalScore
|
||||
}), [data])
|
||||
return bTotalScore - aTotalScore;
|
||||
}),
|
||||
[data]
|
||||
);
|
||||
|
||||
const downloadExcel = async () => {
|
||||
setIsDownloading(true)
|
||||
const downloadExcel = async () => {
|
||||
setIsDownloading(true);
|
||||
|
||||
const request = await axios.post("/api/statistical", {
|
||||
entities: entities.filter(e => selectedEntities.includes(e.id)),
|
||||
items: data,
|
||||
assignments: filteredAssignments,
|
||||
startDate,
|
||||
endDate
|
||||
}, {
|
||||
responseType: 'blob'
|
||||
})
|
||||
const request = await axios.post(
|
||||
"/api/statistical",
|
||||
{
|
||||
entities: entities.filter((e) => selectedEntities.includes(e.id)),
|
||||
items: data,
|
||||
assignments: filteredAssignments,
|
||||
startDate,
|
||||
endDate,
|
||||
},
|
||||
{
|
||||
responseType: "blob",
|
||||
}
|
||||
);
|
||||
|
||||
const href = URL.createObjectURL(request.data)
|
||||
const link = document.createElement('a');
|
||||
link.href = href;
|
||||
link.setAttribute('download', `statistical_${new Date().toISOString()}.xlsx`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
const href = URL.createObjectURL(request.data);
|
||||
const link = document.createElement("a");
|
||||
link.href = href;
|
||||
link.setAttribute(
|
||||
"download",
|
||||
`statistical_${new Date().toISOString()}.xlsx`
|
||||
);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(href);
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(href);
|
||||
|
||||
setIsDownloading(false)
|
||||
}
|
||||
setIsDownloading(false);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
columnHelper.accessor("student.name", {
|
||||
header: "Student",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("student.studentID", {
|
||||
header: "Student ID",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("student.email", {
|
||||
header: "E-mail",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("entity.label", {
|
||||
header: "Entity",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("assignment.name", {
|
||||
header: "Assignment",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("assignment.startDate", {
|
||||
header: "Date",
|
||||
cell: (info) => moment(info.getValue()).format("DD/MM/YYYY"),
|
||||
}),
|
||||
columnHelper.accessor("result", {
|
||||
header: "Progress",
|
||||
cell: (info) => {
|
||||
const student = info.row.original.student
|
||||
const session = info.row.original.session
|
||||
const columns = [
|
||||
columnHelper.accessor("student.name", {
|
||||
header: "Student",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("student.studentID", {
|
||||
header: "Student ID",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("student.email", {
|
||||
header: "E-mail",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("entity.label", {
|
||||
header: "Entity",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("assignment.name", {
|
||||
header: "Assignment",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("assignment.startDate", {
|
||||
header: "Date",
|
||||
cell: (info) => moment(info.getValue()).format("DD/MM/YYYY"),
|
||||
}),
|
||||
columnHelper.accessor("result", {
|
||||
header: "Progress",
|
||||
cell: (info) => {
|
||||
const student = info.row.original.student;
|
||||
const session = info.row.original.session;
|
||||
|
||||
if (!student.lastLogin) return <span className="text-mti-red-dark">Never logged in</span>
|
||||
if (info.getValue()) return <span className="text-mti-green font-semibold">Submitted</span>
|
||||
if (!session) return <span className="text-mti-rose">Not started</span>
|
||||
if (!student.lastLogin)
|
||||
return <span className="text-mti-red-dark">Never logged in</span>;
|
||||
if (info.getValue())
|
||||
return (
|
||||
<span className="text-mti-green font-semibold">Submitted</span>
|
||||
);
|
||||
if (!session) return <span className="text-mti-rose">Not started</span>;
|
||||
|
||||
return <span className="font-semibold">
|
||||
{capitalize(session.exam?.module || "")} Module, Part {session.partIndex + 1}, Exercise {session.exerciseIndex + 1}
|
||||
</span>
|
||||
},
|
||||
})
|
||||
]
|
||||
return (
|
||||
<span className="font-semibold">
|
||||
{capitalize(session.exam?.module || "")} Module, Part{" "}
|
||||
{session.partIndex + 1}, Exercise {session.exerciseIndex + 1}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Statistical | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Statistical | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link href="/dashboard" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
|
||||
<BsChevronLeft />
|
||||
</Link>
|
||||
<h2 className="font-bold text-2xl">Statistical</h2>
|
||||
</div>
|
||||
<Checkbox
|
||||
onChange={value => setSelectedEntities(value ? mapBy(entities, 'id') : [])}
|
||||
isChecked={selectedEntities.length === entities.length}
|
||||
>
|
||||
Select All
|
||||
</Checkbox>
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
<>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
|
||||
>
|
||||
<BsChevronLeft />
|
||||
</Link>
|
||||
<h2 className="font-bold text-2xl">Statistical</h2>
|
||||
</div>
|
||||
<Checkbox
|
||||
onChange={(value) =>
|
||||
setSelectedEntities(value ? mapBy(entities, "id") : [])
|
||||
}
|
||||
isChecked={selectedEntities.length === entities.length}
|
||||
>
|
||||
Select All
|
||||
</Checkbox>
|
||||
</div>
|
||||
<Separator />
|
||||
</div>
|
||||
|
||||
<section className="flex flex-col gap-3">
|
||||
<div className="w-full flex items-center justify-between gap-4 flex-wrap">
|
||||
{entities.map(entity => (
|
||||
<button
|
||||
onClick={() => toggleEntity(entity.id)}
|
||||
className={clsx(
|
||||
"flex flex-col items-center justify-between gap-3 border-2 drop-shadow rounded-xl bg-white p-8 px-2 w-48 h-52",
|
||||
"transition ease-in-out duration-300 hover:shadow-xl hover:border-mti-purple",
|
||||
selectedEntities.includes(entity.id) && "border-mti-purple text-mti-purple"
|
||||
)}
|
||||
key={entity.id}
|
||||
>
|
||||
<BsBank size={48} />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span>{entity.label}</span>
|
||||
<span className={clsx("font-semibold")}>
|
||||
{renderAssignmentResolution(entity.id)}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<section className="flex flex-col gap-3">
|
||||
<div className="w-full flex items-center justify-between gap-4 flex-wrap">
|
||||
{entities.map((entity) => (
|
||||
<button
|
||||
onClick={() => toggleEntity(entity.id)}
|
||||
className={clsx(
|
||||
"flex flex-col items-center justify-between gap-3 border-2 drop-shadow rounded-xl bg-white p-8 px-2 w-48 h-52",
|
||||
"transition ease-in-out duration-300 hover:shadow-xl hover:border-mti-purple",
|
||||
selectedEntities.includes(entity.id) &&
|
||||
"border-mti-purple text-mti-purple"
|
||||
)}
|
||||
key={entity.id}
|
||||
>
|
||||
<BsBank size={48} />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span>{entity.label}</span>
|
||||
<span className={clsx("font-semibold")}>
|
||||
{renderAssignmentResolution(entity.id)}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<ReactDatePicker
|
||||
className={clsx(
|
||||
"p-6 px-12 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||
"hover:border-mti-purple tooltip",
|
||||
"transition duration-300 ease-in-out",
|
||||
)}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
selectsRange
|
||||
selected={startDate}
|
||||
onChange={updateDateRange}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
/>
|
||||
{startDate !== null && endDate !== null && (
|
||||
<button onClick={resetDateRange} className="transition ease-in-out duration-300 rounded-full p-2 hover:bg-mti-gray-cool/10">
|
||||
<BsX size={24} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<span className="font-semibold text-lg pr-1">
|
||||
Total: {totalAssignmentResolution.results} / {totalAssignmentResolution.total}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<ReactDatePicker
|
||||
className={clsx(
|
||||
"p-6 px-12 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||
"hover:border-mti-purple tooltip",
|
||||
"transition duration-300 ease-in-out"
|
||||
)}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
selectsRange
|
||||
selected={startDate}
|
||||
onChange={updateDateRange}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
/>
|
||||
{startDate !== null && endDate !== null && (
|
||||
<button
|
||||
onClick={resetDateRange}
|
||||
className="transition ease-in-out duration-300 rounded-full p-2 hover:bg-mti-gray-cool/10"
|
||||
>
|
||||
<BsX size={24} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<span className="font-semibold text-lg pr-1">
|
||||
Total: {totalAssignmentResolution.results} /{" "}
|
||||
{totalAssignmentResolution.total}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{selectedEntities.length > 0 && (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={sortedData}
|
||||
searchFields={[["student", "name"], ["student", "email"], ["student", "studentID"], ["exams", "id"], ["assignment", "name"]]}
|
||||
searchPlaceholder="Search by student, assignment or exam..."
|
||||
onDownload={entitiesAllowDownload.length > 0 ? downloadExcel : undefined}
|
||||
isDownloadLoading={isDownloading}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</>
|
||||
)
|
||||
{selectedEntities.length > 0 && (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={sortedData}
|
||||
searchFields={[
|
||||
["student", "name"],
|
||||
["student", "email"],
|
||||
["student", "studentID"],
|
||||
["exams", "id"],
|
||||
["assignment", "name"],
|
||||
]}
|
||||
searchPlaceholder="Search by student, assignment or exam..."
|
||||
onDownload={
|
||||
entitiesAllowDownload.length > 0 ? downloadExcel : undefined
|
||||
}
|
||||
isDownloadLoading={isDownloading}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -32,10 +32,7 @@ import { capitalize } from "lodash";
|
||||
import { Module } from "@/interfaces";
|
||||
import ProgressBar from "@/components/Low/ProgressBar";
|
||||
import { calculateBandScore } from "@/utils/score";
|
||||
import {
|
||||
MODULE_ARRAY,
|
||||
sortByModule,
|
||||
} from "@/utils/moduleUtils";
|
||||
import { MODULE_ARRAY, sortByModule } from "@/utils/moduleUtils";
|
||||
import { Chart } from "react-chartjs-2";
|
||||
import DatePicker from "react-datepicker";
|
||||
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||
@@ -45,7 +42,6 @@ import { Stat, User } from "@/interfaces/user";
|
||||
import { Divider } from "primereact/divider";
|
||||
import Badge from "@/components/Low/Badge";
|
||||
import { mapBy, redirect, serialize } from "@/utils";
|
||||
import { getEntities } from "@/utils/entities.be";
|
||||
import { checkAccess } from "@/utils/permissions";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import Select from "@/components/Low/Select";
|
||||
@@ -69,19 +65,10 @@ const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8", "#414288"];
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (shouldRedirectHome(user)) return redirect("/");
|
||||
|
||||
const entityIDs = mapBy(user.entities, "id");
|
||||
const isAdmin = checkAccess(user, ["admin", "developer"]);
|
||||
|
||||
const entities = await getEntities(isAdmin ? undefined : entityIDs, {
|
||||
id: 1,
|
||||
label: 1,
|
||||
});
|
||||
|
||||
return {
|
||||
props: serialize({ user, entities, isAdmin }),
|
||||
props: serialize({ user, isAdmin }),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
|
||||
@@ -1,225 +1,269 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import Head from "next/head";
|
||||
import {withIronSessionSsr} from "iron-session/next";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import {User} from "@/interfaces/user";
|
||||
import {ToastContainer} from "react-toastify";
|
||||
import {shouldRedirectHome} from "@/utils/navigation.disabled";
|
||||
import {useEffect, useState} from "react";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { User } from "@/interfaces/user";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||
import { useEffect, useState } from "react";
|
||||
import clsx from "clsx";
|
||||
import {FaPlus} from "react-icons/fa";
|
||||
import { FaPlus } from "react-icons/fa";
|
||||
import useRecordStore from "@/stores/recordStore";
|
||||
import router from "next/router";
|
||||
import useTrainingContentStore from "@/stores/trainingContentStore";
|
||||
import axios from "axios";
|
||||
import {ITrainingContent} from "@/training/TrainingInterfaces";
|
||||
import { ITrainingContent } from "@/training/TrainingInterfaces";
|
||||
import moment from "moment";
|
||||
import {uuidv4} from "@firebase/util";
|
||||
import { uuidv4 } from "@firebase/util";
|
||||
import TrainingScore from "@/training/TrainingScore";
|
||||
import ModuleBadge from "@/components/ModuleBadge";
|
||||
import RecordFilter from "@/components/Medium/RecordFilter";
|
||||
import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
|
||||
import { mapBy, redirect, serialize } from "@/utils";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { getEntitiesUsers } from "@/utils/users.be";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import { checkAccess } from "../../utils/permissions";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
|
||||
const user = await requestUser(req, res)
|
||||
if (!user) return redirect("/login")
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (shouldRedirectHome(user)) return redirect("/")
|
||||
if (shouldRedirectHome(user)) return redirect("/");
|
||||
const isAdmin = checkAccess(user, ["admin", "developer"]);
|
||||
const entityIDs = mapBy(user.entities, "id");
|
||||
const users = await getEntitiesUsers(entityIDs);
|
||||
|
||||
const entityIDs = mapBy(user.entities, 'id')
|
||||
const entities = await getEntitiesWithRoles(entityIDs)
|
||||
const users = await getEntitiesUsers(entityIDs)
|
||||
|
||||
return {
|
||||
props: serialize({user, users, entities}),
|
||||
};
|
||||
return {
|
||||
props: serialize({ user, users, isAdmin }),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
const Training: React.FC<{user: User, entities: EntityWithRoles[], users: User[] }> = ({user, entities, users}) => {
|
||||
const [recordUserId, setRecordTraining] = useRecordStore((state) => [state.selectedUser, state.setTraining]);
|
||||
const [filter, setFilter] = useState<"months" | "weeks" | "days" | "assignments">();
|
||||
const Training: React.FC<{
|
||||
user: User;
|
||||
entities: EntityWithRoles[];
|
||||
users: User[];
|
||||
isAdmin: boolean;
|
||||
}> = ({ user, entities, isAdmin }) => {
|
||||
const [recordUserId, setRecordTraining] = useRecordStore((state) => [
|
||||
state.selectedUser,
|
||||
state.setTraining,
|
||||
]);
|
||||
const [filter, setFilter] = useState<
|
||||
"months" | "weeks" | "days" | "assignments"
|
||||
>();
|
||||
|
||||
const [stats, setTrainingStats] = useTrainingContentStore((state) => [state.stats, state.setStats]);
|
||||
const [isNewContentLoading, setIsNewContentLoading] = useState(stats.length != 0);
|
||||
const [groupedByTrainingContent, setGroupedByTrainingContent] = useState<{[key: string]: ITrainingContent}>();
|
||||
const [stats, setTrainingStats] = useTrainingContentStore((state) => [
|
||||
state.stats,
|
||||
state.setStats,
|
||||
]);
|
||||
const [isNewContentLoading, setIsNewContentLoading] = useState(
|
||||
stats.length != 0
|
||||
);
|
||||
const [groupedByTrainingContent, setGroupedByTrainingContent] = useState<{
|
||||
[key: string]: ITrainingContent;
|
||||
}>();
|
||||
|
||||
const {data: trainingContent, isLoading: areRecordsLoading} = useFilterRecordsByUser<ITrainingContent[]>(
|
||||
recordUserId || user?.id,
|
||||
undefined,
|
||||
"training",
|
||||
);
|
||||
const { data: trainingContent, isLoading: areRecordsLoading } =
|
||||
useFilterRecordsByUser<ITrainingContent[]>(
|
||||
recordUserId || user?.id,
|
||||
undefined,
|
||||
"training"
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleRouteChange = (url: string) => {
|
||||
setTrainingStats([]);
|
||||
};
|
||||
router.events.on("routeChangeStart", handleRouteChange);
|
||||
return () => {
|
||||
router.events.off("routeChangeStart", handleRouteChange);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [router.events, setTrainingStats]);
|
||||
useEffect(() => {
|
||||
const handleRouteChange = (url: string) => {
|
||||
setTrainingStats([]);
|
||||
};
|
||||
router.events.on("routeChangeStart", handleRouteChange);
|
||||
return () => {
|
||||
router.events.off("routeChangeStart", handleRouteChange);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [router.events, setTrainingStats]);
|
||||
|
||||
useEffect(() => {
|
||||
const postStats = async () => {
|
||||
try {
|
||||
const response = await axios.post<{id: string}>(`/api/training`, {userID: user.id, stats: stats});
|
||||
return response.data.id;
|
||||
} catch (error) {
|
||||
setIsNewContentLoading(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
const postStats = async () => {
|
||||
try {
|
||||
const response = await axios.post<{ id: string }>(`/api/training`, {
|
||||
userID: user.id,
|
||||
stats: stats,
|
||||
});
|
||||
return response.data.id;
|
||||
} catch (error) {
|
||||
setIsNewContentLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isNewContentLoading) {
|
||||
postStats().then((id) => {
|
||||
setTrainingStats([]);
|
||||
if (id) {
|
||||
router.push(`/training/${id}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isNewContentLoading]);
|
||||
if (isNewContentLoading) {
|
||||
postStats().then((id) => {
|
||||
setTrainingStats([]);
|
||||
if (id) {
|
||||
router.push(`/training/${id}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isNewContentLoading]);
|
||||
|
||||
const handleNewTrainingContent = () => {
|
||||
setRecordTraining(true);
|
||||
router.push("/record");
|
||||
};
|
||||
const handleNewTrainingContent = () => {
|
||||
setRecordTraining(true);
|
||||
router.push("/record");
|
||||
};
|
||||
|
||||
const filterTrainingContentByDate = (trainingContent: {[key: string]: ITrainingContent}) => {
|
||||
if (filter) {
|
||||
const filterDate = moment()
|
||||
.subtract({[filter as string]: 1})
|
||||
.format("x");
|
||||
const filteredTrainingContent: {[key: string]: ITrainingContent} = {};
|
||||
const filterTrainingContentByDate = (trainingContent: {
|
||||
[key: string]: ITrainingContent;
|
||||
}) => {
|
||||
if (filter) {
|
||||
const filterDate = moment()
|
||||
.subtract({ [filter as string]: 1 })
|
||||
.format("x");
|
||||
const filteredTrainingContent: { [key: string]: ITrainingContent } = {};
|
||||
|
||||
Object.keys(trainingContent).forEach((timestamp) => {
|
||||
if (timestamp >= filterDate) filteredTrainingContent[timestamp] = trainingContent[timestamp];
|
||||
});
|
||||
return filteredTrainingContent;
|
||||
}
|
||||
return trainingContent;
|
||||
};
|
||||
Object.keys(trainingContent).forEach((timestamp) => {
|
||||
if (timestamp >= filterDate)
|
||||
filteredTrainingContent[timestamp] = trainingContent[timestamp];
|
||||
});
|
||||
return filteredTrainingContent;
|
||||
}
|
||||
return trainingContent;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (trainingContent.length > 0) {
|
||||
const grouped = trainingContent.reduce((acc, content) => {
|
||||
acc[content.created_at] = content;
|
||||
return acc;
|
||||
}, {} as {[key: number]: ITrainingContent});
|
||||
useEffect(() => {
|
||||
if (trainingContent.length > 0) {
|
||||
const grouped = trainingContent.reduce((acc, content) => {
|
||||
acc[content.created_at] = content;
|
||||
return acc;
|
||||
}, {} as { [key: number]: ITrainingContent });
|
||||
|
||||
setGroupedByTrainingContent(grouped);
|
||||
} else {
|
||||
setGroupedByTrainingContent(undefined);
|
||||
}
|
||||
}, [trainingContent]);
|
||||
setGroupedByTrainingContent(grouped);
|
||||
} else {
|
||||
setGroupedByTrainingContent(undefined);
|
||||
}
|
||||
}, [trainingContent]);
|
||||
|
||||
const formatTimestamp = (timestamp: string) => {
|
||||
const date = moment(parseInt(timestamp));
|
||||
const formatter = "YYYY/MM/DD - HH:mm";
|
||||
const formatTimestamp = (timestamp: string) => {
|
||||
const date = moment(parseInt(timestamp));
|
||||
const formatter = "YYYY/MM/DD - HH:mm";
|
||||
|
||||
return date.format(formatter);
|
||||
};
|
||||
return date.format(formatter);
|
||||
};
|
||||
|
||||
const selectTrainingContent = (trainingContent: ITrainingContent) => {
|
||||
router.push(`/training/${trainingContent.id}`);
|
||||
};
|
||||
const selectTrainingContent = (trainingContent: ITrainingContent) => {
|
||||
router.push(`/training/${trainingContent.id}`);
|
||||
};
|
||||
|
||||
const trainingContentContainer = (timestamp: string) => {
|
||||
if (!groupedByTrainingContent) return <></>;
|
||||
const trainingContentContainer = (timestamp: string) => {
|
||||
if (!groupedByTrainingContent) return <></>;
|
||||
|
||||
const trainingContent: ITrainingContent = groupedByTrainingContent[timestamp];
|
||||
const uniqueModules = [...new Set(trainingContent.exams.map((exam) => exam.module))];
|
||||
const trainingContent: ITrainingContent =
|
||||
groupedByTrainingContent[timestamp];
|
||||
const uniqueModules = [
|
||||
...new Set(trainingContent.exams.map((exam) => exam.module)),
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
key={uuidv4()}
|
||||
className={clsx(
|
||||
"flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
|
||||
)}
|
||||
onClick={() => selectTrainingContent(trainingContent)}
|
||||
role="button">
|
||||
<div className="w-full flex justify-between -md:items-center 2xl:items-center">
|
||||
<div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
|
||||
<span className="font-medium">{formatTimestamp(timestamp)}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="w-full flex flex-row gap-1">
|
||||
{uniqueModules.map((module) => (
|
||||
<ModuleBadge key={module} module={module} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TrainingScore trainingContent={trainingContent} gridView={true} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
key={uuidv4()}
|
||||
className={clsx(
|
||||
"flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden"
|
||||
)}
|
||||
onClick={() => selectTrainingContent(trainingContent)}
|
||||
role="button"
|
||||
>
|
||||
<div className="w-full flex justify-between -md:items-center 2xl:items-center">
|
||||
<div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
|
||||
<span className="font-medium">{formatTimestamp(timestamp)}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="w-full flex flex-row gap-1">
|
||||
{uniqueModules.map((module) => (
|
||||
<ModuleBadge key={module} module={module} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TrainingScore trainingContent={trainingContent} gridView={true} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Training | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Training | EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
|
||||
<>
|
||||
{isNewContentLoading || areRecordsLoading ? (
|
||||
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
|
||||
<span className="loading loading-infinity w-32 bg-mti-green-light" />
|
||||
{isNewContentLoading && (
|
||||
<span className="text-center text-2xl font-bold text-mti-green-light">Assessing your exams, please be patient...</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<RecordFilter entities={entities} user={user} filterState={{filter: filter, setFilter: setFilter}} assignments={false}>
|
||||
{user.type === "student" && (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<div className="font-semibold text-2xl">Generate New Training Material</div>
|
||||
<button
|
||||
className={clsx(
|
||||
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4",
|
||||
"transition duration-300 ease-in-out",
|
||||
)}
|
||||
onClick={handleNewTrainingContent}>
|
||||
<FaPlus />
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</RecordFilter>
|
||||
{trainingContent.length == 0 && (
|
||||
<div className="flex flex-grow justify-center items-center">
|
||||
<span className="font-semibold ml-1">No training content to display...</span>
|
||||
</div>
|
||||
)}
|
||||
{!areRecordsLoading && groupedByTrainingContent && Object.keys(groupedByTrainingContent).length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 w-full gap-4 xl:gap-6">
|
||||
{Object.keys(filterTrainingContentByDate(groupedByTrainingContent))
|
||||
.sort((a, b) => parseInt(b) - parseInt(a))
|
||||
.map(trainingContentContainer)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
</>
|
||||
);
|
||||
<>
|
||||
{isNewContentLoading || areRecordsLoading ? (
|
||||
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
|
||||
<span className="loading loading-infinity w-32 bg-mti-green-light" />
|
||||
{isNewContentLoading && (
|
||||
<span className="text-center text-2xl font-bold text-mti-green-light">
|
||||
Assessing your exams, please be patient...
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<RecordFilter
|
||||
entities={entities}
|
||||
user={user}
|
||||
isAdmin={isAdmin}
|
||||
filterState={{ filter: filter, setFilter: setFilter }}
|
||||
assignments={false}
|
||||
>
|
||||
{user.type === "student" && (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<div className="font-semibold text-2xl">
|
||||
Generate New Training Material
|
||||
</div>
|
||||
<button
|
||||
className={clsx(
|
||||
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4",
|
||||
"transition duration-300 ease-in-out"
|
||||
)}
|
||||
onClick={handleNewTrainingContent}
|
||||
>
|
||||
<FaPlus />
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</RecordFilter>
|
||||
{trainingContent.length == 0 && (
|
||||
<div className="flex flex-grow justify-center items-center">
|
||||
<span className="font-semibold ml-1">
|
||||
No training content to display...
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{!areRecordsLoading &&
|
||||
groupedByTrainingContent &&
|
||||
Object.keys(groupedByTrainingContent).length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 w-full gap-4 xl:gap-6">
|
||||
{Object.keys(
|
||||
filterTrainingContentByDate(groupedByTrainingContent)
|
||||
)
|
||||
.sort((a, b) => parseInt(b) - parseInt(a))
|
||||
.map(trainingContentContainer)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Training;
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
|
||||
import { Group, Stat, StudentUser, User } from "@/interfaces/user";
|
||||
import { useRouter } from "next/router";
|
||||
import { BsChevronLeft } from "react-icons/bs";
|
||||
import { BsChevronLeft } from "react-icons/bs";
|
||||
import { mapBy, serialize } from "@/utils";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import { getEntitiesUsers, getUsers } from "@/utils/users.be";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { checkAccess, findAllowedEntities } from "@/utils/permissions";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { Entity } from "@/interfaces/entity";
|
||||
import { getParticipantsGroups } from "@/utils/groups.be";
|
||||
import { getParticipantsGroups } from "@/utils/groups.be";
|
||||
import StudentPerformanceList from "../(admin)/Lists/StudentPerformanceList";
|
||||
import Head from "next/head";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
@@ -17,73 +17,84 @@ import { requestUser } from "@/utils/api";
|
||||
import { redirect } from "@/utils";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res)
|
||||
if (!user) return redirect("/login")
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
const entityIDs = mapBy(user.entities, 'id')
|
||||
const entityIDs = mapBy(user.entities, "id");
|
||||
|
||||
const entities = await getEntitiesWithRoles(checkAccess(user, ["admin", 'developer']) ? undefined : entityIDs)
|
||||
const allowedEntities = findAllowedEntities(user, entities, "view_student_performance")
|
||||
const entities = await getEntitiesWithRoles(
|
||||
checkAccess(user, ["admin", "developer"]) ? undefined : entityIDs
|
||||
);
|
||||
const allowedEntities = findAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"view_student_performance"
|
||||
);
|
||||
|
||||
if (allowedEntities.length === 0) return redirect("/")
|
||||
if (allowedEntities.length === 0) return redirect("/");
|
||||
|
||||
const students = await (checkAccess(user, ["admin", 'developer'])
|
||||
? getUsers({ type: 'student' })
|
||||
: getEntitiesUsers(mapBy(allowedEntities, 'id'), { type: 'student' })
|
||||
)
|
||||
const groups = await getParticipantsGroups(mapBy(students, 'id'))
|
||||
const students = await (checkAccess(user, ["admin", "developer"])
|
||||
? getUsers({ type: "student" })
|
||||
: getEntitiesUsers(mapBy(allowedEntities, "id"), { type: "student" }));
|
||||
const groups = await getParticipantsGroups(mapBy(students, "id"));
|
||||
|
||||
return {
|
||||
props: serialize({ user, students, entities, groups }),
|
||||
};
|
||||
return {
|
||||
props: serialize({ user, students, entities, groups }),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
students: StudentUser[]
|
||||
entities: Entity[]
|
||||
groups: Group[]
|
||||
user: User;
|
||||
students: StudentUser[];
|
||||
entities: Entity[];
|
||||
groups: Group[];
|
||||
}
|
||||
|
||||
const StudentPerformance = ({ user, students, entities, groups }: Props) => {
|
||||
const { data: stats } = useFilterRecordsByUser<Stat[]>();
|
||||
const { data: stats } = useFilterRecordsByUser<Stat[]>();
|
||||
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
const performanceStudents = students.map((u) => ({
|
||||
...u,
|
||||
group: groups.find((x) => x.participants.includes(u.id))?.name || "N/A",
|
||||
entitiesLabel: mapBy(u.entities, 'id').map((id) => entities.find((e) => e.id === id)?.label).filter((e) => !!e).join(', '),
|
||||
}));
|
||||
const performanceStudents = students.map((u) => ({
|
||||
...u,
|
||||
group: groups.find((x) => x.participants.includes(u.id))?.name || "N/A",
|
||||
entitiesLabel: mapBy(u.entities, "id")
|
||||
.map((id) => entities.find((e) => e.id === id)?.label)
|
||||
.filter((e) => !!e)
|
||||
.join(", "),
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>EnCoach</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
router.back()
|
||||
}}
|
||||
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
|
||||
<BsChevronLeft />
|
||||
</button>
|
||||
<h2 className="font-bold text-2xl">Student Performance ({students.length})</h2>
|
||||
</div>
|
||||
<StudentPerformanceList items={performanceStudents} stats={stats} />
|
||||
</>
|
||||
</>
|
||||
);
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
router.back();
|
||||
}}
|
||||
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
|
||||
>
|
||||
<BsChevronLeft />
|
||||
</button>
|
||||
<h2 className="font-bold text-2xl">
|
||||
Student Performance ({students.length})
|
||||
</h2>
|
||||
</div>
|
||||
<StudentPerformanceList items={performanceStudents} stats={stats} />
|
||||
</>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StudentPerformance;
|
||||
|
||||
Reference in New Issue
Block a user