devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the look of the Entities and Classrooms selectors

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-11-25 10:15:16 +00:00
parent 2160a42964
commit e5087d4d58
2 changed files with 77 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/classrooms/index.tsx
View File

@@ -1,27 +1,28 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import Head from "next/head"; import Head from "next/head";
import {withIronSessionSsr} from "iron-session/next"; import { withIronSessionSsr } from "iron-session/next";
import {sessionOptions} from "@/lib/session"; import { sessionOptions } from "@/lib/session";
import {ToastContainer} from "react-toastify"; import { ToastContainer } from "react-toastify";
import Layout from "@/components/High/Layout"; import Layout from "@/components/High/Layout";
import {GroupWithUsers, User} from "@/interfaces/user"; import { GroupWithUsers, User } from "@/interfaces/user";
import {shouldRedirectHome} from "@/utils/navigation.disabled"; import { shouldRedirectHome } from "@/utils/navigation.disabled";
import {getUserName, isAdmin} from "@/utils/users"; import { getUserName, isAdmin } from "@/utils/users";
import {convertToUsers, getGroupsForEntities} from "@/utils/groups.be"; import { convertToUsers, getGroupsForEntities } from "@/utils/groups.be";
import {getSpecificUsers} from "@/utils/users.be"; import { getSpecificUsers } from "@/utils/users.be";
import Link from "next/link"; import Link from "next/link";
import {uniq} from "lodash"; import { uniq } from "lodash";
import {BsPlus} from "react-icons/bs"; import { BsFillMortarboardFill, BsPlus } from "react-icons/bs";
import CardList from "@/components/High/CardList"; import CardList from "@/components/High/CardList";
import Separator from "@/components/Low/Separator"; import Separator from "@/components/Low/Separator";
import {mapBy, redirect, serialize} from "@/utils"; import { mapBy, redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api"; import { requestUser } from "@/utils/api";
import { findAllowedEntities } from "@/utils/permissions"; import { findAllowedEntities } from "@/utils/permissions";
import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be"; import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
import { useAllowedEntities } from "@/hooks/useEntityPermissions"; import { useAllowedEntities } from "@/hooks/useEntityPermissions";
import { EntityWithRoles } from "@/interfaces/entity"; 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) const user = await requestUser(req, res)
if (!user) return redirect("/login") if (!user) return redirect("/login")
@@ -33,11 +34,11 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const groups = await getGroupsForEntities(mapBy(allowedEntities, 'id')); 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)); const groupsWithUsers: GroupWithUsers[] = groups.map((g) => convertToUsers(g, users));
return { return {
props: serialize({user, groups: groupsWithUsers, entities: allowedEntities}), props: serialize({ user, groups: groupsWithUsers, entities: allowedEntities }),
}; };
}, sessionOptions); }, sessionOptions);
@@ -56,34 +57,42 @@ interface Props {
groups: GroupWithUsers[]; groups: GroupWithUsers[];
entities: EntityWithRoles[] 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 entitiesAllowCreate = useAllowedEntities(user, entities, 'create_classroom')
const renderCard = (group: GroupWithUsers) => ( const renderCard = (group: GroupWithUsers) => (
<Link <Link
href={`/classrooms/${group.id}`} href={`/classrooms/${group.id}`}
key={group.id} key={group.id}
className="p-4 border rounded-xl flex flex-col gap-2 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"> 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">
<span> <div className="flex flex-col gap-2 w-full">
<b>Group: </b> <span className="flex items-center gap-1">
<span className="bg-mti-purple text-white font-semibold px-2">Classroom</span>
{group.name} {group.name}
</span> </span>
<span> <span className="flex items-center gap-1">
<b>Admin: </b> <span className="bg-mti-purple text-white font-semibold px-2">Admin</span>
{getUserName(group.admin)} {getUserName(group.admin)}
</span> </span>
<b>Participants ({group.participants.length}): </b> <span className="flex items-center gap-1">
<span> <span className="bg-mti-purple text-white font-semibold px-2">Participants</span>
{group.participants.slice(0, 5).map(getUserName).join(", ")} <span className="bg-mti-purple-light/50 px-2">{group.participants.length}</span>
{group.participants.length > 5 ? <span className="opacity-60"> and {group.participants.length - 5} more</span> : ""}
</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> </Link>
); );
const firstCard = () => ( const firstCard = () => (
<Link <Link
href={`/classrooms/create`} href={`/classrooms/create`}
className="p-4 border 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"> 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} /> <BsPlus size={40} />
<span className="font-semibold">Create Classroom</span> <span className="font-semibold">Create Classroom</span>
</Link> </Link>

62
src/pages/entities/index.tsx
View File

@@ -1,28 +1,28 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import Head from "next/head"; import Head from "next/head";
import {withIronSessionSsr} from "iron-session/next"; import { withIronSessionSsr } from "iron-session/next";
import {sessionOptions} from "@/lib/session"; import { sessionOptions } from "@/lib/session";
import {ToastContainer} from "react-toastify"; import { ToastContainer } from "react-toastify";
import Layout from "@/components/High/Layout"; import Layout from "@/components/High/Layout";
import {GroupWithUsers, User} from "@/interfaces/user"; import { GroupWithUsers, User } from "@/interfaces/user";
import {shouldRedirectHome} from "@/utils/navigation.disabled"; import { shouldRedirectHome } from "@/utils/navigation.disabled";
import {getUserName} from "@/utils/users"; import { getUserName } from "@/utils/users";
import {convertToUsers, getGroupsForUser} from "@/utils/groups.be"; import { convertToUsers, getGroupsForUser } from "@/utils/groups.be";
import {countEntityUsers, getEntityUsers, getSpecificUsers} from "@/utils/users.be"; import { countEntityUsers, getEntityUsers, getSpecificUsers } from "@/utils/users.be";
import {checkAccess, findAllowedEntities, getTypesOfUser} from "@/utils/permissions"; import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions";
import Link from "next/link"; import Link from "next/link";
import {uniq} from "lodash"; import { uniq } from "lodash";
import {BsPlus} from "react-icons/bs"; import { BsBank, BsPlus } from "react-icons/bs";
import CardList from "@/components/High/CardList"; import CardList from "@/components/High/CardList";
import {getEntitiesWithRoles} from "@/utils/entities.be"; import { getEntitiesWithRoles } from "@/utils/entities.be";
import {EntityWithRoles} from "@/interfaces/entity"; import { EntityWithRoles } from "@/interfaces/entity";
import Separator from "@/components/Low/Separator"; import Separator from "@/components/Low/Separator";
import { requestUser } from "@/utils/api"; import { requestUser } from "@/utils/api";
import { mapBy, redirect, serialize } from "@/utils"; 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) const user = await requestUser(req, res)
if (!user) return redirect("/login") if (!user) return redirect("/login")
@@ -33,11 +33,11 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const allowedEntities = findAllowedEntities(user, entities, 'view_entities') const allowedEntities = findAllowedEntities(user, entities, 'view_entities')
const entitiesWithCount = await Promise.all( 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 { return {
props: serialize({user, entities: entitiesWithCount}), props: serialize({ user, entities: entitiesWithCount }),
}; };
}, sessionOptions); }, sessionOptions);
@@ -47,28 +47,36 @@ interface Props {
user: User; user: User;
entities: EntitiesWithCount[]; entities: EntitiesWithCount[];
} }
export default function Home({user, entities}: Props) { export default function Home({ user, entities }: Props) {
const renderCard = ({entity, users, count}: EntitiesWithCount) => ( const renderCard = ({ entity, users, count }: EntitiesWithCount) => (
<Link <Link
href={`/entities/${entity.id}`} href={`/entities/${entity.id}`}
key={entity.id} key={entity.id}
className="p-4 border rounded-xl flex flex-col gap-2 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"> 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">
<span> <div className="flex flex-col gap-2 w-full">
<b>Entity: </b> <span className="flex items-center gap-1">
<span className="bg-mti-purple text-white font-semibold px-2">Entity</span>
{entity.label} {entity.label}
</span> </span>
<b>Members ({count}): </b> <span className="flex items-center gap-1">
<span> <span className="bg-mti-purple text-white font-semibold px-2">Members</span>
{users.map(getUserName).join(", ")} <span className="bg-mti-purple-light/50 px-2">{count}</span>
{count > 5 ? <span className="opacity-60"> and {count - 5} more</span> : ""}
</span> </span>
<span>
{users.map(getUserName).join(", ")}{' '}
{count > 5 ? <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">and {count - 5} more</span> : ""}
</span>
</div>
<div className="w-fit">
<BsBank className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
</div>
</Link> </Link>
); );
const firstCard = () => ( const firstCard = () => (
<Link <Link
href={`/entities/create`} href={`/entities/create`}
className="p-4 border 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"> 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} /> <BsPlus size={40} />
<span className="font-semibold">Create Entity</span> <span className="font-semibold">Create Entity</span>
</Link> </Link>