131 lines
5.0 KiB
TypeScript
131 lines
5.0 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import Head from "next/head";
|
|
import { withIronSessionSsr } from "iron-session/next";
|
|
import { sessionOptions } from "@/lib/session";
|
|
import { ToastContainer } from "react-toastify";
|
|
import Layout from "@/components/High/Layout";
|
|
import { GroupWithUsers, User } from "@/interfaces/user";
|
|
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
|
import { getUserName, isAdmin } from "@/utils/users";
|
|
import { convertToUsers, getGroupsForEntities } from "@/utils/groups.be";
|
|
import { getSpecificUsers } from "@/utils/users.be";
|
|
import Link from "next/link";
|
|
import { uniq } from "lodash";
|
|
import { BsFillMortarboardFill, BsPlus } from "react-icons/bs";
|
|
import CardList from "@/components/High/CardList";
|
|
import Separator from "@/components/Low/Separator";
|
|
import { mapBy, redirect, serialize } from "@/utils";
|
|
import { requestUser } from "@/utils/api";
|
|
import { findAllowedEntities } from "@/utils/permissions";
|
|
import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
|
|
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
|
|
import { EntityWithRoles } from "@/interfaces/entity";
|
|
import { FaPersonChalkboard } from "react-icons/fa6";
|
|
|
|
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 entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS)
|
|
const allowedEntities = findAllowedEntities(user, entities, "view_classrooms")
|
|
|
|
const groups = await getGroupsForEntities(mapBy(allowedEntities, 'id'));
|
|
|
|
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))));
|
|
|
|
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"],
|
|
];
|
|
|
|
interface Props {
|
|
user: User;
|
|
groups: GroupWithUsers[];
|
|
entities: EntityWithRoles[]
|
|
}
|
|
export default function Home({ user, groups, entities }: Props) {
|
|
const entitiesAllowCreate = useAllowedEntities(user, entities, 'create_classroom')
|
|
|
|
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>
|
|
<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>
|
|
);
|
|
|
|
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 />
|
|
<Layout user={user} className="!gap-4">
|
|
<section className="flex flex-col gap-4 w-full h-full">
|
|
<div className="flex flex-col gap-4">
|
|
<h2 className="font-bold text-2xl">Classrooms</h2>
|
|
<Separator />
|
|
</div>
|
|
|
|
<CardList<GroupWithUsers>
|
|
list={groups}
|
|
searchFields={SEARCH_FIELDS}
|
|
renderCard={renderCard}
|
|
firstCard={entitiesAllowCreate.length === 0 ? undefined : firstCard}
|
|
/>
|
|
</section>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|