diff --git a/src/pages/classrooms/index.tsx b/src/pages/classrooms/index.tsx index 33615603..3ffb6a18 100644 --- a/src/pages/classrooms/index.tsx +++ b/src/pages/classrooms/index.tsx @@ -1,27 +1,28 @@ /* 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 { 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 { 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 {BsPlus} from "react-icons/bs"; +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 { 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}) => { +export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => { const user = await requestUser(req, res) if (!user) return redirect("/login") @@ -33,11 +34,11 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => { const groups = await getGroupsForEntities(mapBy(allowedEntities, 'id')); - const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants.slice(0, 5), g.admin]))); + const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants, g.admin]))); const groupsWithUsers: GroupWithUsers[] = groups.map((g) => convertToUsers(g, users)); return { - props: serialize({user, groups: groupsWithUsers, entities: allowedEntities}), + props: serialize({ user, groups: groupsWithUsers, entities: allowedEntities }), }; }, sessionOptions); @@ -56,34 +57,42 @@ interface Props { groups: GroupWithUsers[]; entities: EntityWithRoles[] } -export default function Home({user, groups, entities}: Props) { +export default function Home({ user, groups, entities }: Props) { const entitiesAllowCreate = useAllowedEntities(user, entities, 'create_classroom') const renderCard = (group: GroupWithUsers) => ( - - Group: - {group.name} - - - Admin: - {getUserName(group.admin)} - - Participants ({group.participants.length}): - - {group.participants.slice(0, 5).map(getUserName).join(", ")} - {group.participants.length > 5 ? and {group.participants.length - 5} more : ""} - + 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"> +
+ + Classroom + {group.name} + + + Admin + {getUserName(group.admin)} + + + Participants + {group.participants.length} + + + {group.participants.slice(0, 3).map(getUserName).join(", ")}{' '} + {group.participants.length > 3 ? and {group.participants.length - 3} more : ""} + +
+
+ +
); const firstCard = () => ( + 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"> Create Classroom diff --git a/src/pages/entities/index.tsx b/src/pages/entities/index.tsx index 2ae539a2..0358ffdf 100644 --- a/src/pages/entities/index.tsx +++ b/src/pages/entities/index.tsx @@ -1,28 +1,28 @@ /* 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 { 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} from "@/utils/users"; -import {convertToUsers, getGroupsForUser} from "@/utils/groups.be"; -import {countEntityUsers, getEntityUsers, getSpecificUsers} from "@/utils/users.be"; -import {checkAccess, findAllowedEntities, getTypesOfUser} from "@/utils/permissions"; +import { GroupWithUsers, User } from "@/interfaces/user"; +import { shouldRedirectHome } from "@/utils/navigation.disabled"; +import { getUserName } from "@/utils/users"; +import { convertToUsers, getGroupsForUser } from "@/utils/groups.be"; +import { countEntityUsers, getEntityUsers, getSpecificUsers } from "@/utils/users.be"; +import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions"; import Link from "next/link"; -import {uniq} from "lodash"; -import {BsPlus} from "react-icons/bs"; +import { uniq } from "lodash"; +import { BsBank, BsPlus } from "react-icons/bs"; import CardList from "@/components/High/CardList"; -import {getEntitiesWithRoles} from "@/utils/entities.be"; -import {EntityWithRoles} from "@/interfaces/entity"; +import { getEntitiesWithRoles } from "@/utils/entities.be"; +import { EntityWithRoles } from "@/interfaces/entity"; import Separator from "@/components/Low/Separator"; import { requestUser } from "@/utils/api"; import { mapBy, redirect, serialize } from "@/utils"; -type EntitiesWithCount = {entity: EntityWithRoles; users: User[]; count: number}; +type EntitiesWithCount = { entity: EntityWithRoles; users: User[]; count: number }; -export const getServerSideProps = withIronSessionSsr(async ({req, res}) => { +export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => { const user = await requestUser(req, res) if (!user) return redirect("/login") @@ -33,11 +33,11 @@ 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), users: await getEntityUsers(e.id, 5)})), + allowedEntities.map(async (e) => ({ entity: e, count: await countEntityUsers(e.id), users: await getEntityUsers(e.id, 5) })), ); return { - props: serialize({user, entities: entitiesWithCount}), + props: serialize({ user, entities: entitiesWithCount }), }; }, sessionOptions); @@ -47,28 +47,36 @@ interface Props { user: User; entities: EntitiesWithCount[]; } -export default function Home({user, entities}: Props) { - const renderCard = ({entity, users, count}: EntitiesWithCount) => ( +export default function Home({ user, entities }: Props) { + const renderCard = ({ entity, users, count }: EntitiesWithCount) => ( - - Entity: - {entity.label} - - Members ({count}): - - {users.map(getUserName).join(", ")} - {count > 5 ? and {count - 5} more : ""} - + 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"> +
+ + Entity + {entity.label} + + + Members + {count} + + + {users.map(getUserName).join(", ")}{' '} + {count > 5 ? and {count - 5} more : ""} + +
+
+ +
); const firstCard = () => ( + 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"> Create Entity