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

Created a new system for the Groups that will persist after having entities

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-09-25 16:18:43 +01:00
parent 8c392f8b49
commit dd94228672
18 changed files with 823 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Low/Checkbox.tsx
View File

@@ -5,7 +5,7 @@ import {BsCheck} from "react-icons/bs";
interface Props { interface Props {
isChecked: boolean; isChecked: boolean;
onChange: (isChecked: boolean) => void; onChange: (isChecked: boolean) => void;
children: ReactNode; children?: ReactNode;
disabled?: boolean; disabled?: boolean;
} }

3
src/components/Low/Separator.tsx Normal file
View File

@@ -0,0 +1,3 @@
const Separator = () => <div className="w-full h-[1px] bg-mti-gray-platinum rounded-full" />;
export default Separator;

17
src/components/Low/Tooltip.tsx Normal file
View File

@@ -0,0 +1,17 @@
import clsx from "clsx";
import {ReactNode} from "react";
interface Props {
tooltip: string;
disabled?: boolean;
className?: string;
children: ReactNode;
}
export default function Tooltip({tooltip, disabled = false, className, children}: Props) {
return (
<div className={clsx(!disabled && "tooltip", className)} data-tip={tooltip}>
{children}
</div>
);
}

4
src/components/Sidebar.tsx
View File

@@ -57,7 +57,7 @@ const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false,
"flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white", "flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
"transition-all duration-300 ease-in-out relative", "transition-all duration-300 ease-in-out relative",
disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer", disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
path === keyPath && "bg-mti-purple-light text-white", (keyPath === "/" ? path === keyPath : path.startsWith(keyPath)) && "bg-mti-purple-light text-white",
isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]", isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
)}> )}>
<Icon size={24} /> <Icon size={24} />
@@ -110,7 +110,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && ( {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} /> <Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
)} )}
{checkAccess(user, ["developer", "admin", "teacher", "student"], permissions) && ( {checkAccess(user, ["developer", "admin", "mastercorporate", "corporate", "teacher", "student"], permissions) && (
<Nav disabled={disableNavigation} Icon={BsPeople} label="Groups" path={path} keyPath="/groups" isMinimized={isMinimized} /> <Nav disabled={disableNavigation} Icon={BsPeople} label="Groups" path={path} keyPath="/groups" isMinimized={isMinimized} />
)} )}
{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && ( {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (

16
src/email/templates/resetPassword.handlebars Normal file
View File

@@ -0,0 +1,16 @@
<html>
<head>
<style>
</style>
</head>
<body>
<p>Hi {{name}},</p>
<p>You requested to reset your password.</p>
<p> Please, click the link below to reset your password</p>
<a href="https://{{link}}">Reset Password</a>
</body>
</html>

2
src/hooks/useListSearch.tsx
View File

@@ -5,7 +5,7 @@ import {search} from "@/utils/search";
export function useListSearch<T>(fields: string[][], rows: T[]) { export function useListSearch<T>(fields: string[][], rows: T[]) {
const [text, setText] = useState(""); const [text, setText] = useState("");
const renderSearch = () => <Input label="Search" type="text" name="search" onChange={setText} placeholder="Enter search text" value={text} />; const renderSearch = () => <Input type="text" name="search" onChange={setText} placeholder="Enter search text" value={text} />;
const updatedRows = useMemo(() => { const updatedRows = useMemo(() => {
if (text.length > 0) return search(text, fields, rows); if (text.length > 0) return search(text, fields, rows);

34
src/hooks/usePagination.tsx
View File

@@ -1,5 +1,7 @@
import Button from "@/components/Low/Button"; import Button from "@/components/Low/Button";
import {useMemo, useState} from "react"; import {useMemo, useState} from "react";
import {BiChevronLeft} from "react-icons/bi";
import {BsChevronDoubleLeft, BsChevronDoubleRight, BsChevronLeft, BsChevronRight} from "react-icons/bs";
export default function usePagination<T>(list: T[], size = 25) { export default function usePagination<T>(list: T[], size = 25) {
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
@@ -24,5 +26,35 @@ export default function usePagination<T>(list: T[], size = 25) {
</div> </div>
); );
return {page, items, setPage, render}; const renderMinimal = () => (
<div className="flex gap-4 items-center">
<div className="flex gap-2 items-center">
<button disabled={page === 0} onClick={() => setPage(0)} className="disabled:opacity-60 disabled:cursor-not-allowed">
<BsChevronDoubleLeft />
</button>
<button disabled={page === 0} onClick={() => setPage((prev) => prev - 1)} className="disabled:opacity-60 disabled:cursor-not-allowed">
<BsChevronLeft />
</button>
</div>
<span className="opacity-80 w-32 text-center">
{page * size + 1} - {(page + 1) * size > list.length ? list.length : (page + 1) * size} / {list.length}
</span>
<div className="flex gap-2 items-center">
<button
disabled={(page + 1) * size >= list.length}
onClick={() => setPage((prev) => prev + 1)}
className="disabled:opacity-60 disabled:cursor-not-allowed">
<BsChevronRight />
</button>
<button
disabled={(page + 1) * size >= list.length}
onClick={() => setPage(Math.floor(list.length / size))}
className="disabled:opacity-60 disabled:cursor-not-allowed">
<BsChevronDoubleRight />
</button>
</div>
</div>
);
return {page, items, setPage, render, renderMinimal};
} }

16
src/interfaces/entity.ts Normal file
View File

@@ -0,0 +1,16 @@
export interface Entity {
id: string;
label: string;
}
export interface Roles {
id: string;
permissions: string[];
label: string;
}
export interface EntityWithPermissions extends Entity {
roles: Roles[];
}
export type WithEntity<T> = T extends {entities: string[]} ? T & {entities: Entity[]} : T;

10
src/interfaces/user.ts
View File

@@ -22,6 +22,7 @@ export interface BasicUser {
status: UserStatus; status: UserStatus;
permissions: PermissionType[]; permissions: PermissionType[];
lastLogin?: Date; lastLogin?: Date;
entities: string[];
} }
export interface StudentUser extends BasicUser { export interface StudentUser extends BasicUser {
@@ -151,6 +152,11 @@ export interface Group {
disableEditing?: boolean; disableEditing?: boolean;
} }
export interface GroupWithUsers extends Omit<Group, "participants" | "admin"> {
admin: User;
participants: User[];
}
export interface Code { export interface Code {
id: string; id: string;
code: string; code: string;
@@ -165,4 +171,6 @@ export interface Code {
} }
export type Type = "student" | "teacher" | "corporate" | "admin" | "developer" | "agent" | "mastercorporate"; export type Type = "student" | "teacher" | "corporate" | "admin" | "developer" | "agent" | "mastercorporate";
export const userTypes: Type[] = ["student", "teacher", "corporate", "admin", "developer", "agent", "mastercorporate"]; export const userTypes: Type[] = ["student", "teacher", "corporate", "admin", "developer", "agent", "mastercorporate"];
export type WithUser<T> = T extends {participants: string[]} ? Omit<T, "participants"> & {participants: User[]} : T;

13
src/pages/api/groups/[id].ts
View File

@@ -75,13 +75,20 @@ async function patch(req: NextApiRequest, res: NextApiResponse) {
} }
const user = req.session.user; const user = req.session.user;
if (user.type === "admin" || user.type === "developer" || user.id === group.admin) { if (
if ("participants" in req.body) { user.type === "admin" ||
user.type === "developer" ||
user.type === "mastercorporate" ||
user.type === "corporate" ||
user.id === group.admin
) {
if ("participants" in req.body && req.body.participants.length > 0) {
const newParticipants = (req.body.participants as string[]).filter((x) => !group.participants.includes(x)); const newParticipants = (req.body.participants as string[]).filter((x) => !group.participants.includes(x));
await Promise.all(newParticipants.map(async (p) => await updateExpiryDateOnGroup(p, group.admin))); await Promise.all(newParticipants.map(async (p) => await updateExpiryDateOnGroup(p, group.admin)));
} }
await db.collection("groups").updateOne({id: req.session.user.id}, {$set: {id, ...req.body}}, {upsert: true}); console.log(req.body);
await db.collection("groups").updateOne({id}, {$set: {id, ...req.body}}, {upsert: true});
res.status(200).json({ok: true}); res.status(200).json({ok: true});
return; return;

15
src/pages/api/groups/index.ts
View File

@@ -39,11 +39,12 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
await Promise.all(body.participants.map(async (p) => await updateExpiryDateOnGroup(p, body.admin))); await Promise.all(body.participants.map(async (p) => await updateExpiryDateOnGroup(p, body.admin)));
await db.collection("groups").insertOne({ const id = v4();
id: v4(), await db.collection<Group>("groups").insertOne({
name: body.name, id,
admin: body.admin, name: body.name,
participants: body.participants, admin: body.admin,
}) participants: body.participants,
res.status(200).json({ok: true}); });
res.status(200).json({ok: true, id});
} }

114
src/pages/groups.tsx
View File

@@ -1,114 +0,0 @@
/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import Navbar from "@/components/Navbar";
import {BsFileEarmarkText, BsPencil, BsStar, BsBook, BsHeadphones, BsPen, BsMegaphone} from "react-icons/bs";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {useEffect, useState} from "react";
import {averageScore, groupBySession, totalExams} from "@/utils/stats";
import useUser from "@/hooks/useUser";
import Diagnostic from "@/components/Diagnostic";
import {ToastContainer} from "react-toastify";
import {capitalize} from "lodash";
import {Module} from "@/interfaces";
import ProgressBar from "@/components/Low/ProgressBar";
import Layout from "@/components/High/Layout";
import {calculateAverageLevel} from "@/utils/score";
import axios from "axios";
import DemographicInformationInput from "@/components/DemographicInformationInput";
import moment from "moment";
import Link from "next/link";
import {MODULE_ARRAY} from "@/utils/moduleUtils";
import ProfileSummary from "@/components/ProfileSummary";
import StudentDashboard from "@/dashboards/Student";
import AdminDashboard from "@/dashboards/Admin";
import CorporateDashboard from "@/dashboards/Corporate";
import TeacherDashboard from "@/dashboards/Teacher";
import AgentDashboard from "@/dashboards/Agent";
import MasterCorporateDashboard from "@/dashboards/MasterCorporate";
import PaymentDue from "./(status)/PaymentDue";
import {useRouter} from "next/router";
import {PayPalScriptProvider} from "@paypal/react-paypal-js";
import {CorporateUser, Group, MasterCorporateUser, Type, User, userTypes} from "@/interfaces/user";
import Select from "react-select";
import {USER_TYPE_LABELS} from "@/resources/user";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import useGroups from "@/hooks/useGroups";
import useUsers from "@/hooks/useUsers";
import {getUserName} from "@/utils/users";
import {getParticipantGroups, getUserGroups} from "@/utils/groups.be";
import {getUsers} from "@/utils/users.be";
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = req.session.user;
if (!user) {
return {
redirect: {
destination: "/login",
permanent: false,
},
};
}
if (shouldRedirectHome(user)) {
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
const groups = await getParticipantGroups(user.id);
const users = await getUsers();
return {
props: {user, groups, users},
};
}, sessionOptions);
interface Props {
user: User;
groups: Group[];
users: User[];
}
export default function Home({user, groups, users}: Props) {
return (
<>
<Head>
<title>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 />
{user && (
<Layout user={user}>
<div className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{groups
.filter((x) => x.participants.includes(user.id))
.map((group) => (
<div key={group.id} className="p-4 border rounded-xl flex flex-col gap-2">
<span>
<b>Group: </b>
{group.name}
</span>
<span>
<b>Admin: </b>
{getUserName(users.find((x) => x.id === group.admin))}
</span>
<b>Participants: </b>
<span>{group.participants.map((x) => getUserName(users.find((u) => u.id === x))).join(", ")}</span>
</div>
))}
</div>
</Layout>
)}
</>
);
}

336
src/pages/groups/[id].tsx Normal file
View File

@@ -0,0 +1,336 @@
/* eslint-disable @next/next/no-img-element */
import Layout from "@/components/High/Layout";
import Checkbox from "@/components/Low/Checkbox";
import Tooltip from "@/components/Low/Tooltip";
import {useListSearch} from "@/hooks/useListSearch";
import usePagination from "@/hooks/usePagination";
import {GroupWithUsers, User} from "@/interfaces/user";
import {sessionOptions} from "@/lib/session";
import {USER_TYPE_LABELS} from "@/resources/user";
import {convertToUsers, getGroup} from "@/utils/groups.be";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
import {getUserName} from "@/utils/users";
import {getLinkedUsers, getSpecificUsers, getUsers} from "@/utils/users.be";
import axios from "axios";
import clsx from "clsx";
import {withIronSessionSsr} from "iron-session/next";
import moment from "moment";
import Head from "next/head";
import Link from "next/link";
import {useRouter} from "next/router";
import {Divider} from "primereact/divider";
import {useEffect, useMemo, useState} from "react";
import {
BsArrowLeft,
BsChevronLeft,
BsClockFill,
BsEnvelopeFill,
BsFillPersonVcardFill,
BsPencil,
BsPerson,
BsPlus,
BsStopwatchFill,
BsTag,
BsTrash,
BsX,
} from "react-icons/bs";
import {toast, ToastContainer} from "react-toastify";
export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
const user = req.session.user as User;
if (!user) {
return {
redirect: {
destination: "/login",
permanent: false,
},
};
}
if (shouldRedirectHome(user)) {
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
const {id} = params as {id: string};
const group = await getGroup(id);
if (!group || (checkAccess(user, getTypesOfUser(["admin", "developer"])) && group.admin !== user.id && !group.participants.includes(user.id))) {
return {
redirect: {
destination: "/groups",
permanent: false,
},
};
}
const linkedUsers = await getLinkedUsers(user.id, user.type);
const users = await getSpecificUsers([...group.participants, group.admin]);
const groupWithUser = convertToUsers(group, users);
return {
props: {user, group: JSON.parse(JSON.stringify(groupWithUser)), users: JSON.parse(JSON.stringify(linkedUsers.users))},
};
}, sessionOptions);
interface Props {
user: User;
group: GroupWithUsers;
users: User[];
}
export default function Home({user, group, users}: Props) {
const [isAdding, setIsAdding] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
const nonParticipantUsers = useMemo(
() => users.filter((x) => ![...group.participants.map((g) => g.id), group.admin.id, user.id].includes(x.id)),
[users, group.participants, group.admin],
);
const {rows, renderSearch} = useListSearch<User>(
[["name"], ["corporateInformation", "companyInformation", "name"]],
isAdding ? nonParticipantUsers : group.participants,
);
const {items, renderMinimal} = usePagination<User>(rows, 20);
const router = useRouter();
const allowGroupEdit = useMemo(() => checkAccess(user, ["admin", "developer", "mastercorporate"]) || user.id === group.admin.id, [user, group]);
const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
const removeParticipants = () => {
if (selectedUsers.length === 0) return;
if (!allowGroupEdit) return;
if (!confirm(`Are you sure you want to remove ${selectedUsers.length} participant${selectedUsers.length === 1 ? "" : "s"} from this group?`))
return;
setIsLoading(true);
axios
.patch(`/api/groups/${group.id}`, {participants: group.participants.map((x) => x.id).filter((x) => !selectedUsers.includes(x))})
.then(() => {
toast.success("The group has been updated successfully!");
setTimeout(() => router.reload(), 500);
})
.catch((e) => {
console.error(e);
toast.error("Something went wrong!");
})
.finally(() => setIsLoading(false));
};
const addParticipants = () => {
if (selectedUsers.length === 0) return;
if (!allowGroupEdit || !isAdding) return;
if (!confirm(`Are you sure you want to add ${selectedUsers.length} participant${selectedUsers.length === 1 ? "" : "s"} to this group?`))
return;
setIsLoading(true);
console.log([...group.participants.map((x) => x.id), selectedUsers]);
axios
.patch(`/api/groups/${group.id}`, {participants: [...group.participants.map((x) => x.id), ...selectedUsers]})
.then(() => {
toast.success("The group has been updated successfully!");
setTimeout(() => router.reload(), 500);
})
.catch((e) => {
console.error(e);
toast.error("Something went wrong!");
})
.finally(() => setIsLoading(false));
};
const renameGroup = () => {
if (!allowGroupEdit) return;
const name = prompt("Rename this group:", group.name);
if (!name) return;
setIsLoading(true);
axios
.patch(`/api/groups/${group.id}`, {name})
.then(() => {
toast.success("The group has been updated successfully!");
setTimeout(() => router.reload(), 500);
})
.catch((e) => {
console.error(e);
toast.error("Something went wrong!");
})
.finally(() => setIsLoading(false));
};
const deleteGroup = () => {
if (!allowGroupEdit) return;
if (!confirm("Are you sure you want to delete this group?")) return;
setIsLoading(true);
axios
.delete(`/api/groups/${group.id}`)
.then(() => {
toast.success("This group has been successfully deleted!");
setTimeout(() => router.push("/groups"), 1000);
})
.catch((e) => {
console.error(e);
toast.error("Something went wrong!");
})
.finally(() => setIsLoading(false));
};
useEffect(() => setSelectedUsers([]), [isAdding]);
return (
<>
<Head>
<title>{group.name} | 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 />
{user && (
<Layout user={user}>
<section className="flex flex-col gap-0">
<div className="flex flex-col gap-3">
<div className="flex items-end justify-between">
<div className="flex items-center gap-2">
<Link
href="/groups"
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
<BsChevronLeft />
</Link>
<h2 className="font-bold text-2xl">{group.name}</h2>
</div>
<span className="flex items-center gap-2">
<BsFillPersonVcardFill className="text-xl" /> {getUserName(group.admin)}
</span>
</div>
{allowGroupEdit && !isAdding && (
<div className="flex items-center gap-2">
<button
onClick={renameGroup}
disabled={isLoading}
className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
<BsTag />
<span className="text-xs">Rename Group</span>
</button>
<button
onClick={deleteGroup}
disabled={isLoading}
className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
<BsTrash />
<span className="text-xs">Delete Group</span>
</button>
</div>
)}
</div>
<Divider />
<div className="flex items-center justify-between mb-4">
<span className="font-semibold text-xl">Participants</span>
{allowGroupEdit && !isAdding && (
<div className="flex items-center gap-2">
<button
onClick={() => setIsAdding(true)}
disabled={isLoading}
className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
<BsPlus />
<span className="text-xs">Add Participants</span>
</button>
<button
onClick={removeParticipants}
disabled={selectedUsers.length === 0 || isLoading}
className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
<BsTrash />
<span className="text-xs">Remove Participants</span>
</button>
</div>
)}
{allowGroupEdit && isAdding && (
<div className="flex items-center gap-2">
<button
onClick={() => setIsAdding(false)}
disabled={isLoading}
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
<BsX />
<span className="text-xs">Discard Selection</span>
</button>
<button
onClick={addParticipants}
disabled={selectedUsers.length === 0 || isLoading}
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
<BsPlus />
<span className="text-xs">Add Participants</span>
</button>
</div>
)}
</div>
<div className="w-full flex items-center gap-4">
{renderSearch()}
{renderMinimal()}
</div>
</section>
<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{items.map((u) => (
<button
onClick={() => toggleUser(u)}
disabled={!allowGroupEdit}
key={u.id}
className={clsx(
"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
"hover:border-mti-purple transition ease-in-out duration-300",
selectedUsers.includes(u.id) && "border-mti-purple",
)}>
<div className="flex items-center gap-2">
<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
<img src={u.profilePicture} alt={u.name} />
</div>
<div className="flex flex-col">
<span className="font-semibold">{getUserName(u)}</span>
<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
</div>
</div>
<div className="flex flex-col gap-1">
<span className="flex items-center gap-2">
<Tooltip tooltip="E-mail address">
<BsEnvelopeFill />
</Tooltip>
{u.email}
</span>
<span className="flex items-center gap-2">
<Tooltip tooltip="Expiration Date">
<BsStopwatchFill />
</Tooltip>
{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
</span>
<span className="flex items-center gap-2">
<Tooltip tooltip="Last Login">
<BsClockFill />
</Tooltip>
{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
</span>
</div>
</button>
))}
</section>
</Layout>
)}
</>
);
}

204
src/pages/groups/create.tsx Normal file
View File

@@ -0,0 +1,204 @@
/* eslint-disable @next/next/no-img-element */
import Layout from "@/components/High/Layout";
import Button from "@/components/Low/Button";
import Checkbox from "@/components/Low/Checkbox";
import Input from "@/components/Low/Input";
import Tooltip from "@/components/Low/Tooltip";
import {useListSearch} from "@/hooks/useListSearch";
import usePagination from "@/hooks/usePagination";
import {GroupWithUsers, User} from "@/interfaces/user";
import {sessionOptions} from "@/lib/session";
import {USER_TYPE_LABELS} from "@/resources/user";
import {convertToUsers, getGroup} from "@/utils/groups.be";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
import {getUserName} from "@/utils/users";
import {getLinkedUsers, getSpecificUsers, getUsers} from "@/utils/users.be";
import axios from "axios";
import clsx from "clsx";
import {withIronSessionSsr} from "iron-session/next";
import moment from "moment";
import Head from "next/head";
import Link from "next/link";
import {useRouter} from "next/router";
import {Divider} from "primereact/divider";
import {useEffect, useMemo, useState} from "react";
import {
BsArrowLeft,
BsCheck,
BsChevronLeft,
BsClockFill,
BsEnvelopeFill,
BsFillPersonVcardFill,
BsPencil,
BsPerson,
BsPlus,
BsStopwatchFill,
BsTag,
BsTrash,
BsX,
} from "react-icons/bs";
import {toast, ToastContainer} from "react-toastify";
export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
const user = req.session.user as User;
if (!user) {
return {
redirect: {
destination: "/login",
permanent: false,
},
};
}
if (shouldRedirectHome(user)) {
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
const linkedUsers = await getLinkedUsers(user.id, user.type);
return {
props: {user, users: JSON.parse(JSON.stringify(linkedUsers.users.filter((x) => x.id !== user.id)))},
};
}, sessionOptions);
interface Props {
user: User;
users: User[];
}
export default function Home({user, users}: Props) {
const [isLoading, setIsLoading] = useState(false);
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
const [name, setName] = useState("");
const {rows, renderSearch} = useListSearch<User>([["name"], ["corporateInformation", "companyInformation", "name"]], users);
const {items, renderMinimal} = usePagination<User>(rows, 16);
const router = useRouter();
const createGroup = () => {
if (!name.trim()) return;
if (!confirm(`Are you sure you want to create this group with ${selectedUsers.length} participants?`)) return;
setIsLoading(true);
axios
.post<{id: string}>(`/api/groups`, {name, participants: selectedUsers, admin: user.id})
.then((result) => {
toast.success("Your group has been created successfully!");
setTimeout(() => router.push(`/groups/${result.data.id}`), 250);
})
.catch((e) => {
console.error(e);
toast.error("Something went wrong!");
})
.finally(() => setIsLoading(false));
};
const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
return (
<>
<Head>
<title>Create Group | 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 />
{user && (
<Layout user={user}>
<section className="flex flex-col gap-0">
<div className="flex gap-3 justify-between">
<div className="flex items-center gap-2">
<Link
href="/groups"
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
<BsChevronLeft />
</Link>
<h2 className="font-bold text-2xl">Create Group</h2>
</div>
<div className="flex items-center gap-4">
<button
onClick={createGroup}
disabled={!name.trim() || isLoading}
className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
<BsCheck />
<span className="text-xs">Create Group</span>
</button>
</div>
</div>
<Divider />
<div className="flex flex-col gap-4">
<span className="font-semibold text-xl">Group Name:</span>
<Input name="name" onChange={setName} type="text" placeholder="Classroom A" />
</div>
<Divider />
<div className="flex items-center justify-between mb-4">
<span className="font-semibold text-xl">Participants ({selectedUsers.length} selected):</span>
</div>
<div className="w-full flex items-center gap-4">
{renderSearch()}
{renderMinimal()}
</div>
</section>
<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{items.map((u) => (
<button
onClick={() => toggleUser(u)}
disabled={isLoading}
key={u.id}
className={clsx(
"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
"hover:border-mti-purple transition ease-in-out duration-300",
selectedUsers.includes(u.id) && "border-mti-purple",
)}>
<div className="flex items-center gap-2">
<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
<img src={u.profilePicture} alt={u.name} />
</div>
<div className="flex flex-col">
<span className="font-semibold">{getUserName(u)}</span>
<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
</div>
</div>
<div className="flex flex-col gap-1">
<span className="flex items-center gap-2">
<Tooltip tooltip="E-mail address">
<BsEnvelopeFill />
</Tooltip>
{u.email}
</span>
<span className="flex items-center gap-2">
<Tooltip tooltip="Expiration Date">
<BsStopwatchFill />
</Tooltip>
{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
</span>
<span className="flex items-center gap-2">
<Tooltip tooltip="Last Login">
<BsClockFill />
</Tooltip>
{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
</span>
</div>
</button>
))}
</section>
</Layout>
)}
</>
);
}

137
src/pages/groups/index.tsx Normal file
View File

@@ -0,0 +1,137 @@
/* 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 {Group, GroupWithUsers, User, WithUser} from "@/interfaces/user";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import {getUserName} from "@/utils/users";
import {convertToUsers, getGroupsForUser, getParticipantGroups, getUserGroups} from "@/utils/groups.be";
import {getSpecificUsers, getUsers} from "@/utils/users.be";
import {checkAccess} from "@/utils/permissions";
import usePagination from "@/hooks/usePagination";
import {useListSearch} from "@/hooks/useListSearch";
import Link from "next/link";
import {uniq} from "lodash";
import {BsPlus} from "react-icons/bs";
import {Divider} from "primereact/divider";
import Separator from "@/components/Low/Separator";
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = req.session.user;
if (!user) {
return {
redirect: {
destination: "/login",
permanent: false,
},
};
}
if (shouldRedirectHome(user)) {
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
const groups = await getGroupsForUser(
checkAccess(user, ["corporate", "mastercorporate"]) ? user.id : undefined,
checkAccess(user, ["teacher", "student"]) ? user.id : undefined,
);
const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants.slice(0, 5), g.admin])));
const groupsWithUsers: GroupWithUsers[] = groups.map((g) => convertToUsers(g, users));
return {
props: {user, groups: JSON.parse(JSON.stringify(groupsWithUsers))},
};
}, sessionOptions);
interface Props {
user: User;
groups: GroupWithUsers[];
}
export default function Home({user, groups}: Props) {
const {rows, renderSearch} = useListSearch(
[
["name"],
["admin", "name"],
["admin", "email"],
["admin", "corporateInformation", "companyInformation", "name"],
["participants", "name"],
["participants", "email"],
["participants", "corporateInformation", "companyInformation", "name"],
],
groups,
);
const {items, page, renderMinimal} = usePagination(rows, 20);
return (
<>
<Head>
<title>Groups | 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 />
{user && (
<Layout user={user} className="!gap-4">
<div className="flex flex-col gap-4">
<h2 className="font-bold text-2xl">Groups</h2>
<Separator />
</div>
<section className="flex flex-col gap-4 w-full">
<div className="w-full flex items-center gap-4">
{renderSearch()}
{renderMinimal()}
</div>
<div className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{page === 0 && (
<Link
href={`/groups/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">
<BsPlus size={40} />
<span className="font-semibold">Create Group</span>
</Link>
)}
{items.map((group) => (
<Link
href={`/groups/${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>
{group.name}
</span>
<span>
<b>Admin: </b>
{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>
</Link>
))}
</div>
</section>
</Layout>
)}
</>
);
}

8
src/utils/groups.be.ts
View File

@@ -1,6 +1,6 @@
import {app} from "@/firebase"; import {app} from "@/firebase";
import {Assignment} from "@/interfaces/results"; import {Assignment} from "@/interfaces/results";
import {CorporateUser, Group, MasterCorporateUser, StudentUser, TeacherUser, Type, User} from "@/interfaces/user"; import {CorporateUser, Group, GroupWithUsers, MasterCorporateUser, StudentUser, TeacherUser, Type, User} from "@/interfaces/user";
import client from "@/lib/mongodb"; import client from "@/lib/mongodb";
import moment from "moment"; import moment from "moment";
import {getLinkedUsers, getUser} from "./users.be"; import {getLinkedUsers, getUser} from "./users.be";
@@ -71,6 +71,12 @@ export const getUsersGroups = async (ids: string[]) => {
.toArray(); .toArray();
}; };
export const convertToUsers = (group: Group, users: User[]): GroupWithUsers =>
Object.assign(group, {
admin: users.find((u) => u.id === group.admin),
participants: group.participants.map((p) => users.find((u) => u.id === p)).filter((x) => !!x) as User[],
});
export const getAllAssignersByCorporate = async (corporateID: string, type: Type): Promise<string[]> => { export const getAllAssignersByCorporate = async (corporateID: string, type: Type): Promise<string[]> => {
const linkedTeachers = await getLinkedUsers(corporateID, type, "teacher"); const linkedTeachers = await getLinkedUsers(corporateID, type, "teacher");
const linkedCorporates = await getLinkedUsers(corporateID, type, "corporate"); const linkedCorporates = await getLinkedUsers(corporateID, type, "corporate");

18
src/utils/search.ts
View File

@@ -3,11 +3,20 @@
['companyInformation', 'companyInformation', 'name'] ['companyInformation', 'companyInformation', 'name']
]*/ ]*/
const getFieldValue = (fields: string[], data: any): string => { const getFieldValue = (fields: string[], data: any): string | string[] => {
if (fields.length === 0) return data; if (fields.length === 0) return data;
const [key, ...otherFields] = fields; const [key, ...otherFields] = fields;
if (data[key]) return getFieldValue(otherFields, data[key]); if (Array.isArray(data[key])) {
// If the key points to an array, like "participants", iterate through each item in the array
return data[key]
.map((item: any) => getFieldValue(otherFields, item)) // Get the value for each item
.filter(Boolean); // Filter out undefined or null values
} else if (data[key] !== undefined) {
// If it's not an array, just go deeper in the object
return getFieldValue(otherFields, data[key]);
}
return data; return data;
}; };
@@ -16,6 +25,11 @@ export const search = (text: string, fields: string[][], rows: any[]) => {
return rows.filter((row) => { return rows.filter((row) => {
return fields.some((fieldsKeys) => { return fields.some((fieldsKeys) => {
const value = getFieldValue(fieldsKeys, row); const value = getFieldValue(fieldsKeys, row);
if (Array.isArray(value)) {
// If it's an array (e.g., participants' names), check each value in the array
return value.some((v) => v && typeof v === "string" && v.toLowerCase().includes(searchText));
}
if (typeof value === "string") { if (typeof value === "string") {
return value.toLowerCase().includes(searchText); return value.toLowerCase().includes(searchText);
} }

10
src/utils/users.be.ts
View File

@@ -8,11 +8,14 @@ import client from "@/lib/mongodb";
const db = client.db(process.env.MONGODB_DB); const db = client.db(process.env.MONGODB_DB);
export async function getUsers() { export async function getUsers() {
return await db.collection("users").find<User>({}, { projection: { _id: 0 } }).toArray(); return await db
.collection("users")
.find<User>({}, {projection: {_id: 0}})
.toArray();
} }
export async function getUser(id: string): Promise<User | undefined> { export async function getUser(id: string): Promise<User | undefined> {
const user = await db.collection("users").findOne<User>({id: id}, { projection: { _id: 0 } }); const user = await db.collection("users").findOne<User>({id: id}, {projection: {_id: 0}});
return !!user ? user : undefined; return !!user ? user : undefined;
} }
@@ -21,7 +24,7 @@ export async function getSpecificUsers(ids: string[]) {
return await db return await db
.collection("users") .collection("users")
.find<User>({id: {$in: ids}}, { projection: { _id: 0 } }) .find<User>({id: {$in: ids}}, {projection: {_id: 0}})
.toArray(); .toArray();
} }
@@ -46,6 +49,7 @@ export async function getLinkedUsers(
.skip(page && size ? page * size : 0) .skip(page && size ? page * size : 0)
.limit(size || 0) .limit(size || 0)
.toArray(); .toArray();
const total = await db.collection("users").countDocuments(filters); const total = await db.collection("users").countDocuments(filters);
return {users, total}; return {users, total};
} }