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

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

@@ -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) => (
<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>
{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="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>
<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>