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

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

@@ -11,7 +11,7 @@ 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 { BsFillMortarboardFill, BsPlus } from "react-icons/bs";
import CardList from "@/components/High/CardList";
import Separator from "@/components/Low/Separator";
import { mapBy, redirect, serialize } from "@/utils";
@@ -20,6 +20,7 @@ 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)
@@ -33,7 +34,7 @@ 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 {
@@ -63,27 +64,35 @@ export default function Home({user, groups, entities}: Props) {
<Link
href={`/classrooms/${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">
<span>
<b>Group: </b>
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>
<b>Admin: </b>
<span className="flex items-center gap-1">
<span className="bg-mti-purple text-white font-semibold px-2">Admin</span>
{getUserName(group.admin)}
</span>
<b>Participants ({group.participants.length}): </b>
<span>
{group.participants.slice(0, 5).map(getUserName).join(", ")}
{group.participants.length > 5 ? <span className="opacity-60"> and {group.participants.length - 5} more</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 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} />
<span className="font-semibold">Create Classroom</span>
</Link>

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

@@ -12,7 +12,7 @@ import {countEntityUsers, getEntityUsers, getSpecificUsers} from "@/utils/users.
import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions";
import Link from "next/link";
import { uniq } from "lodash";
import {BsPlus} from "react-icons/bs";
import { BsBank, BsPlus } from "react-icons/bs";
import CardList from "@/components/High/CardList";
import { getEntitiesWithRoles } from "@/utils/entities.be";
import { EntityWithRoles } from "@/interfaces/entity";
@@ -52,23 +52,31 @@ export default function Home({user, entities}: Props) {
<Link
href={`/entities/${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">
<span>
<b>Entity: </b>
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">Entity</span>
{entity.label}
</span>
<b>Members ({count}): </b>
<span>
{users.map(getUserName).join(", ")}
{count > 5 ? <span className="opacity-60"> and {count - 5} more</span> : ""}
<span className="flex items-center gap-1">
<span className="bg-mti-purple text-white font-semibold px-2">Members</span>
<span className="bg-mti-purple-light/50 px-2">{count}</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>
);
const firstCard = () => (
<Link
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} />
<span className="font-semibold">Create Entity</span>
</Link>