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

Merged develop into approval-workflows

Browse Source
This commit is contained in:
Tiago Ribeiro
2025-02-06 18:50:07 +00:00
parent 752881df41 63604b68e2
commit 8711802b97
7 changed files with 658 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/pages/(admin)/Lists/ExamList.tsx
View File

@@ -1,33 +1,32 @@
import { useMemo, useState } from "react";
import { PERMISSIONS } from "@/constants/userPermissions";
import {useMemo, useState} from "react";
import {PERMISSIONS} from "@/constants/userPermissions";
import useExams from "@/hooks/useExams";
import useUsers from "@/hooks/useUsers";
import { Module } from "@/interfaces";
import { Exam } from "@/interfaces/exam";
import { Type, User } from "@/interfaces/user";
import {Module} from "@/interfaces";
import {Exam} from "@/interfaces/exam";
import {User} from "@/interfaces/user";
import useExamStore from "@/stores/exam";
import { getExamById } from "@/utils/exams";
import { countExercises } from "@/utils/moduleUtils";
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import {getExamById} from "@/utils/exams";
import {countExercises} from "@/utils/moduleUtils";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
import axios from "axios";
import clsx from "clsx";
import { capitalize, uniq } from "lodash";
import { useRouter } from "next/router";
import { BsBan, BsBanFill, BsCheck, BsCircle, BsPencil, BsStop, BsTrash, BsUpload, BsX } from "react-icons/bs";
import { toast } from "react-toastify";
import { useListSearch } from "@/hooks/useListSearch";
import {capitalize, uniq} from "lodash";
import {useRouter} from "next/router";
import {BsBan, BsCheck, BsCircle, BsPencil, BsTrash, BsUpload, BsX} from "react-icons/bs";
import {toast} from "react-toastify";
import {useListSearch} from "@/hooks/useListSearch";
import Modal from "@/components/Modal";
import { checkAccess } from "@/utils/permissions";
import {checkAccess} from "@/utils/permissions";
import useGroups from "@/hooks/useGroups";
import Button from "@/components/Low/Button";
import { EntityWithRoles } from "@/interfaces/entity";
import { FiEdit, FiArrowRight } from 'react-icons/fi';
import { HiArrowRight } from "react-icons/hi";
import { BiEdit } from "react-icons/bi";
import {EntityWithRoles} from "@/interfaces/entity";
import {BiEdit} from "react-icons/bi";
import {findBy, mapBy} from "@/utils";
import {getUserName} from "@/utils/users";
const searchFields = [["module"], ["id"], ["createdBy"]];
const CLASSES: { [key in Module]: string } = {
const CLASSES: {[key in Module]: string} = {
reading: "text-ielts-reading",
listening: "text-ielts-listening",
speaking: "text-ielts-speaking",
@@ -37,45 +36,20 @@ const CLASSES: { [key in Module]: string } = {
const columnHelper = createColumnHelper<Exam>();
const ExamOwnerSelector = ({ options, exam, onSave }: { options: User[]; exam: Exam; onSave: (owners: string[]) => void }) => {
const [owners, setOwners] = useState(exam.owners || []);
return (
<div className="w-full flex flex-col gap-4">
<div className="grid grid-cols-4 mt-4">
{options.map((c) => (
<Button
variant={owners.includes(c.id) ? "solid" : "outline"}
onClick={() => setOwners((prev) => (prev.includes(c.id) ? prev.filter((x) => x !== c.id) : [...prev, c.id]))}
className="max-w-[200px] w-full"
key={c.id}>
{c.name}
</Button>
))}
</div>
<Button onClick={() => onSave(owners)} className="w-full max-w-[200px] self-end">
Save
</Button>
</div>
);
};
export default function ExamList({ user, entities }: { user: User; entities: EntityWithRoles[]; }) {
export default function ExamList({user, entities}: {user: User; entities: EntityWithRoles[]}) {
const [selectedExam, setSelectedExam] = useState<Exam>();
const { exams, reload } = useExams();
const { users } = useUsers();
const { groups } = useGroups({ admin: user?.id, userType: user?.type });
const {exams, reload} = useExams();
const {users} = useUsers();
const filteredExams = useMemo(() => exams.filter((e) => {
if (!e.private) return true
return (e.owners || []).includes(user?.id || "")
}), [exams, user?.id])
const filteredCorporates = useMemo(() => {
const participantsAndAdmins = uniq(groups.flatMap((x) => [...x.participants, x.admin])).filter((x) => x !== user?.id);
return users.filter((x) => participantsAndAdmins.includes(x.id) && x.type === "corporate");
}, [users, groups, user]);
const filteredExams = useMemo(
() =>
exams.filter((e) => {
if (!e.private) return true;
return (e.entities || []).some((ent) => mapBy(user.entities, "id").includes(ent));
}),
[exams, user?.entities],
);
const parsedExams = useMemo(() => {
return filteredExams.map((exam) => {
@@ -93,7 +67,7 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
});
}, [filteredExams, users]);
const { rows: filteredRows, renderSearch } = useListSearch<Exam>(searchFields, parsedExams);
const {rows: filteredRows, renderSearch} = useListSearch<Exam>(searchFields, parsedExams);
const dispatch = useExamStore((state) => state.dispatch);
@@ -108,7 +82,7 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
return;
}
dispatch({ type: "INIT_EXAM", payload: { exams: [exam], modules: [module] } })
dispatch({type: "INIT_EXAM", payload: {exams: [exam], modules: [module]}});
router.push("/exam");
};
@@ -117,7 +91,7 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
if (!confirm(`Are you sure you want to make this ${capitalize(exam.module)} exam ${exam.private ? "public" : "private"}?`)) return;
axios
.patch(`/api/exam/${exam.module}/${exam.id}`, { private: !exam.private })
.patch(`/api/exam/${exam.module}/${exam.id}`, {private: !exam.private})
.then(() => toast.success(`Updated the "${exam.id}" exam`))
.catch((reason) => {
if (reason.response.status === 404) {
@@ -135,29 +109,6 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
.finally(reload);
};
const updateExam = async (exam: Exam, body: object) => {
if (!confirm(`Are you sure you want to update this ${capitalize(exam.module)} exam?`)) return;
axios
.patch(`/api/exam/${exam.module}/${exam.id}`, body)
.then(() => toast.success(`Updated the "${exam.id}" exam`))
.catch((reason) => {
if (reason.response.status === 404) {
toast.error("Exam not found!");
return;
}
if (reason.response.status === 403) {
toast.error("You do not have permission to update this exam!");
return;
}
toast.error("Something went wrong, please try again later.");
})
.finally(reload)
.finally(() => setSelectedExam(undefined));
};
const deleteExam = async (exam: Exam) => {
if (!confirm(`Are you sure you want to delete this ${capitalize(exam.module)} exam?`)) return;
@@ -222,12 +173,12 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
}),
columnHelper.accessor("createdBy", {
header: "Created By",
cell: (info) => info.getValue(),
cell: (info) => (!info.getValue() ? "System" : findBy(users, "id", info.getValue())?.name || "N/A"),
}),
{
header: "",
id: "actions",
cell: ({ row }: { row: { original: Exam } }) => {
cell: ({row}: {row: {original: Exam}}) => {
return (
<div className="flex gap-4">
{(row.original.owners?.includes(user.id) || checkAccess(user, ["admin", "developer"])) && (
@@ -270,7 +221,7 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
const handleExamEdit = () => {
router.push(`/generation?id=${selectedExam!.id}&module=${selectedExam!.module}`);
}
};
return (
<div className="flex flex-col gap-4 w-full h-full">
@@ -286,30 +237,17 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
</div>
<div className="bg-gray-50 rounded-lg p-4 mb-3">
<p className="font-medium mb-1">
Exam ID: {selectedExam.id}
</p>
<p className="font-medium mb-1">Exam ID: {selectedExam.id}</p>
</div>
<p className="text-gray-500 text-sm">
Click &apos;Next&apos; to proceed to the exam editor.
</p>
<p className="text-gray-500 text-sm">Click &apos;Next&apos; to proceed to the exam editor.</p>
</div>
<div className="flex justify-between gap-4 mt-8">
<Button
color="purple"
variant="outline"
onClick={() => setSelectedExam(undefined)}
className="w-32"
>
<Button color="purple" variant="outline" onClick={() => setSelectedExam(undefined)} className="w-32">
Cancel
</Button>
<Button
color="purple"
onClick={handleExamEdit}
className="w-32 text-white flex items-center justify-center gap-2"
>
<Button color="purple" onClick={handleExamEdit} className="w-32 text-white flex items-center justify-center gap-2">
Proceed
</Button>
</div>

318
src/pages/entities/[id]/roles/[role].tsx
View File

@@ -1,136 +1,132 @@
import Checkbox from "@/components/Low/Checkbox";
import Separator from "@/components/Low/Separator";
import { useEntityPermission } from "@/hooks/useEntityPermissions";
import { EntityWithRoles, Role } from "@/interfaces/entity";
import { User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { RolePermission } from "@/resources/entityPermissions";
import { findBy, mapBy, redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { getEntityWithRoles } from "@/utils/entities.be";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { doesEntityAllow } from "@/utils/permissions";
import { isAdmin } from "@/utils/users";
import { countEntityUsers } from "@/utils/users.be";
import {useEntityPermission} from "@/hooks/useEntityPermissions";
import {EntityWithRoles, Role} from "@/interfaces/entity";
import {User} from "@/interfaces/user";
import {sessionOptions} from "@/lib/session";
import {RolePermission} from "@/resources/entityPermissions";
import {findBy, mapBy, redirect, serialize} from "@/utils";
import {requestUser} from "@/utils/api";
import {getEntityWithRoles} from "@/utils/entities.be";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import {doesEntityAllow} from "@/utils/permissions";
import {isAdmin} from "@/utils/users";
import {countEntityUsers} from "@/utils/users.be";
import axios from "axios";
import { withIronSessionSsr } from "iron-session/next";
import {withIronSessionSsr} from "iron-session/next";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { Divider } from "primereact/divider";
import { useState } from "react";
import {
BsCheck,
BsChevronLeft,
BsTag,
BsTrash,
} from "react-icons/bs";
import { toast } from "react-toastify";
import {useRouter} from "next/router";
import {Divider} from "primereact/divider";
import {useState} from "react";
import {BsCheck, BsChevronLeft, BsTag, BsTrash} from "react-icons/bs";
import {toast} from "react-toastify";
type PermissionLayout = { label: string, key: RolePermission }
type PermissionLayout = {label: string; key: RolePermission};
const USER_MANAGEMENT: PermissionLayout[] = [
{ label: "View Students", key: "view_students" },
{ label: "View Teachers", key: "view_teachers" },
{ label: "View Corporate Accounts", key: "view_corporates" },
{ label: "View Master Corporate Accounts", key: "view_mastercorporates" },
{ label: "Edit Students", key: "edit_students" },
{ label: "Edit Teachers", key: "edit_teachers" },
{ label: "Edit Corporate Accounts", key: "edit_corporates" },
{ label: "Edit Master Corporate Accounts", key: "edit_mastercorporates" },
{ label: "Delete Students", key: "delete_students" },
{ label: "Delete Teachers", key: "delete_teachers" },
{ label: "Delete Corporate Accounts", key: "delete_corporates" },
{ label: "Delete Master Corporate Accounts", key: "delete_mastercorporates" },
{ label: "Create a Single User", key: "create_user" },
{ label: "Create Users in Batch", key: "create_user_batch" },
{ label: "Create a Single Code", key: "create_code" },
{ label: "Create Codes in Batch", key: "create_code_batch" },
{ label: "Download User List", key: "download_user_list" },
{ label: "View Code List", key: "view_code_list" },
{ label: "Delete Code", key: "delete_code" },
]
{label: "View Students", key: "view_students"},
{label: "View Teachers", key: "view_teachers"},
{label: "View Corporate Accounts", key: "view_corporates"},
{label: "View Master Corporate Accounts", key: "view_mastercorporates"},
{label: "Edit Students", key: "edit_students"},
{label: "Edit Teachers", key: "edit_teachers"},
{label: "Edit Corporate Accounts", key: "edit_corporates"},
{label: "Edit Master Corporate Accounts", key: "edit_mastercorporates"},
{label: "Delete Students", key: "delete_students"},
{label: "Delete Teachers", key: "delete_teachers"},
{label: "Delete Corporate Accounts", key: "delete_corporates"},
{label: "Delete Master Corporate Accounts", key: "delete_mastercorporates"},
{label: "Create a Single User", key: "create_user"},
{label: "Create Users in Batch", key: "create_user_batch"},
{label: "Create a Single Code", key: "create_code"},
{label: "Create Codes in Batch", key: "create_code_batch"},
{label: "Download User List", key: "download_user_list"},
{label: "View Code List", key: "view_code_list"},
{label: "Delete Code", key: "delete_code"},
];
const EXAM_MANAGEMENT: PermissionLayout[] = [
{ label: "View Reading", key: "view_reading" },
{ label: "Generate Reading", key: "generate_reading" },
{ label: "Delete Reading", key: "delete_reading" },
{ label: "View Listening", key: "view_listening" },
{ label: "Generate Listening", key: "generate_listening" },
{ label: "Delete Listening", key: "delete_listening" },
{ label: "View Writing", key: "view_writing" },
{ label: "Generate Writing", key: "generate_writing" },
{ label: "Delete Writing", key: "delete_writing" },
{ label: "View Speaking", key: "view_speaking" },
{ label: "Generate Speaking", key: "generate_speaking" },
{ label: "Delete Speaking", key: "delete_speaking" },
{ label: "View Level", key: "view_level" },
{ label: "Generate Level", key: "generate_level" },
{ label: "Delete Level", key: "delete_level" },
{ label: "View Statistics", key: "view_statistics" },
]
{label: "View Reading", key: "view_reading"},
{label: "Generate Reading", key: "generate_reading"},
{label: "Delete Reading", key: "delete_reading"},
{label: "View Listening", key: "view_listening"},
{label: "Generate Listening", key: "generate_listening"},
{label: "Delete Listening", key: "delete_listening"},
{label: "View Writing", key: "view_writing"},
{label: "Generate Writing", key: "generate_writing"},
{label: "Delete Writing", key: "delete_writing"},
{label: "View Speaking", key: "view_speaking"},
{label: "Generate Speaking", key: "generate_speaking"},
{label: "Delete Speaking", key: "delete_speaking"},
{label: "View Level", key: "view_level"},
{label: "Generate Level", key: "generate_level"},
{label: "Delete Level", key: "delete_level"},
{label: "Set as Private/Public", key: "update_exam_privacy"},
{label: "View Statistics", key: "view_statistics"},
];
const CLASSROOM_MANAGEMENT: PermissionLayout[] = [
{ label: "View Classrooms", key: "view_classrooms" },
{ label: "Create Classrooms", key: "create_classroom" },
{ label: "Rename Classrooms", key: "rename_classrooms" },
{ label: "Add to Classroom", key: "add_to_classroom" },
{ label: "Upload to Classroom", key: "upload_classroom" },
{ label: "Remove from Classroom", key: "remove_from_classroom" },
{ label: "Delete Classroom", key: "delete_classroom" },
{ label: "View Student Record", key: "view_student_record" },
{ label: "Download Student Report", key: "download_student_record" },
]
{label: "View Classrooms", key: "view_classrooms"},
{label: "Create Classrooms", key: "create_classroom"},
{label: "Rename Classrooms", key: "rename_classrooms"},
{label: "Add to Classroom", key: "add_to_classroom"},
{label: "Upload to Classroom", key: "upload_classroom"},
{label: "Remove from Classroom", key: "remove_from_classroom"},
{label: "Delete Classroom", key: "delete_classroom"},
{label: "View Student Record", key: "view_student_record"},
{label: "Download Student Report", key: "download_student_record"},
];
const ENTITY_MANAGEMENT: PermissionLayout[] = [
{ label: "View Entities", key: "view_entities" },
{ label: "View Entity Statistics", key: "view_entity_statistics" },
{ label: "Rename Entity", key: "rename_entity" },
{ label: "Add to Entity", key: "add_to_entity" },
{ label: "Remove from Entity", key: "remove_from_entity" },
{ label: "Delete Entity", key: "delete_entity" },
{ label: "View Entity Roles", key: "view_entity_roles" },
{ label: "Create Entity Role", key: "create_entity_role" },
{ label: "Rename Entity Role", key: "rename_entity_role" },
{ label: "Edit Role Permissions", key: "edit_role_permissions" },
{ label: "Assign Role to User", key: "assign_to_role" },
{ label: "Delete Entity Role", key: "delete_entity_role" },
{ label: "Download Statistics Report", key: "download_statistics_report" },
{ label: "Edit Grading System", key: "edit_grading_system" },
{ label: "View Student Performance", key: "view_student_performance" },
{ label: "Pay for Entity", key: "pay_entity" },
{ label: "View Payment Record", key: "view_payment_record" }
]
{label: "View Entities", key: "view_entities"},
{label: "View Entity Statistics", key: "view_entity_statistics"},
{label: "Rename Entity", key: "rename_entity"},
{label: "Add to Entity", key: "add_to_entity"},
{label: "Remove from Entity", key: "remove_from_entity"},
{label: "Delete Entity", key: "delete_entity"},
{label: "View Entity Roles", key: "view_entity_roles"},
{label: "Create Entity Role", key: "create_entity_role"},
{label: "Rename Entity Role", key: "rename_entity_role"},
{label: "Edit Role Permissions", key: "edit_role_permissions"},
{label: "Assign Role to User", key: "assign_to_role"},
{label: "Delete Entity Role", key: "delete_entity_role"},
{label: "Download Statistics Report", key: "download_statistics_report"},
{label: "Edit Grading System", key: "edit_grading_system"},
{label: "View Student Performance", key: "view_student_performance"},
{label: "Pay for Entity", key: "pay_entity"},
{label: "View Payment Record", key: "view_payment_record"},
];
const ASSIGNMENT_MANAGEMENT: PermissionLayout[] = [
{ label: "View Assignments", key: "view_assignments" },
{ label: "Create Assignments", key: "create_assignment" },
{ label: "Start Assignments", key: "start_assignment" },
{ label: "Edit Assignments", key: "edit_assignment" },
{ label: "Delete Assignments", key: "delete_assignment" },
{ label: "Archive Assignments", key: "archive_assignment" },
]
{label: "View Assignments", key: "view_assignments"},
{label: "Create Assignments", key: "create_assignment"},
{label: "Start Assignments", key: "start_assignment"},
{label: "Edit Assignments", key: "edit_assignment"},
{label: "Delete Assignments", key: "delete_assignment"},
{label: "Archive Assignments", key: "archive_assignment"},
];
export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
const user = await requestUser(req, res)
if (!user) return redirect("/login")
export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
const user = await requestUser(req, res);
if (!user) return redirect("/login");
if (shouldRedirectHome(user)) return redirect("/")
if (shouldRedirectHome(user)) return redirect("/");
const { id, role } = params as { id: string, role: string };
const {id, role} = params as {id: string; role: string};
if (!mapBy(user.entities, 'id').includes(id) && !["admin", "developer"].includes(user.type)) return redirect("/entities")
if (!mapBy(user.entities, "id").includes(id) && !["admin", "developer"].includes(user.type)) return redirect("/entities");
const entity = await getEntityWithRoles(id);
if (!entity) return redirect("/entities")
if (!entity) return redirect("/entities");
const entityRole = findBy(entity.roles, 'id', role)
if (!entityRole) return redirect(`/entities/${id}/roles`)
const entityRole = findBy(entity.roles, "id", role);
if (!entityRole) return redirect(`/entities/${id}/roles`);
if (!doesEntityAllow(user, entity, "view_entity_roles")) return redirect(`/entities/${id}`)
const disableEdit = !isAdmin(user) && findBy(user.entities, 'id', entity.id)?.role === entityRole.id
if (!doesEntityAllow(user, entity, "view_entity_roles")) return redirect(`/entities/${id}`);
const disableEdit = !isAdmin(user) && findBy(user.entities, "id", entity.id)?.role === entityRole.id;
const userCount = await countEntityUsers(id, { "entities.role": role });
const userCount = await countEntityUsers(id, {"entities.role": role});
return {
props: serialize({
@@ -138,7 +134,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
entity,
role: entityRole,
userCount,
disableEdit
disableEdit,
}),
};
}, sessionOptions);
@@ -148,19 +144,18 @@ interface Props {
entity: EntityWithRoles;
role: Role;
userCount: number;
disableEdit?: boolean
disableEdit?: boolean;
}
export default function EntityRole({ user, entity, role, userCount, disableEdit }: Props) {
const [permissions, setPermissions] = useState(role.permissions)
export default function EntityRole({user, entity, role, userCount, disableEdit}: Props) {
const [permissions, setPermissions] = useState(role.permissions);
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
const canEditPermissions = useEntityPermission(user, entity, "edit_role_permissions")
const canRenameRole = useEntityPermission(user, entity, "rename_entity_role")
const canDeleteRole = useEntityPermission(user, entity, "delete_entity_role")
const canEditPermissions = useEntityPermission(user, entity, "edit_role_permissions");
const canRenameRole = useEntityPermission(user, entity, "rename_entity_role");
const canDeleteRole = useEntityPermission(user, entity, "delete_entity_role");
const renameRole = () => {
if (!canRenameRole || disableEdit) return;
@@ -170,7 +165,7 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
setIsLoading(true);
axios
.patch(`/api/roles/${role.id}`, { label })
.patch(`/api/roles/${role.id}`, {label})
.then(() => {
toast.success("The role has been updated successfully!");
router.replace(router.asPath);
@@ -202,12 +197,12 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
};
const editPermissions = () => {
if (!canEditPermissions || disableEdit) return
if (!canEditPermissions || disableEdit) return;
setIsLoading(true);
axios
.patch(`/api/roles/${role.id}`, { permissions })
.patch(`/api/roles/${role.id}`, {permissions})
.then(() => {
toast.success("This role has been successfully updated!");
router.replace(router.asPath);
@@ -217,21 +212,23 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
toast.error("Something went wrong!");
})
.finally(() => setIsLoading(false));
}
};
const enableCheckbox = (permission: RolePermission) => {
if (!canEditPermissions || disableEdit) return false
return doesEntityAllow(user, entity, permission)
}
if (!canEditPermissions || disableEdit) return false;
return doesEntityAllow(user, entity, permission);
};
const togglePermissions = (p: RolePermission) => setPermissions(prev => prev.includes(p) ? prev.filter(x => x !== p) : [...prev, p])
const togglePermissions = (p: RolePermission) => setPermissions((prev) => (prev.includes(p) ? prev.filter((x) => x !== p) : [...prev, p]));
const toggleMultiplePermissions = (p: RolePermission[]) =>
setPermissions(prev => [...prev.filter(x => !p.includes(x)), ...(p.every(x => prev.includes(x)) ? [] : p)])
setPermissions((prev) => [...prev.filter((x) => !p.includes(x)), ...(p.every((x) => prev.includes(x)) ? [] : p)]);
return (
<>
<Head>
<title>{role.label} | {entity.label} | EnCoach</title>
<title>
{role.label} | {entity.label} | EnCoach
</title>
<meta
name="description"
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -249,7 +246,9 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
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">{role.label} Role ({userCount} users)</h2>
<h2 className="font-bold text-2xl">
{role.label} Role ({userCount} users)
</h2>
</div>
</div>
<div className="flex items-center justify-between w-full">
@@ -286,16 +285,19 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
<b>User Management</b>
<Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(USER_MANAGEMENT, 'key').every(k => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(USER_MANAGEMENT, 'key').filter(enableCheckbox))}
>
isChecked={mapBy(USER_MANAGEMENT, "key").every((k) => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(USER_MANAGEMENT, "key").filter(enableCheckbox))}>
Select all
</Checkbox>
</div>
<Separator />
<div className="grid grid-cols-2 gap-4">
{USER_MANAGEMENT.map(({ label, key }) => (
<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
{USER_MANAGEMENT.map(({label, key}) => (
<Checkbox
disabled={!enableCheckbox(key)}
key={key}
isChecked={permissions.includes(key)}
onChange={() => togglePermissions(key)}>
{label}
</Checkbox>
))}
@@ -307,16 +309,19 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
<b>Exam Management</b>
<Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(EXAM_MANAGEMENT, 'key').every(k => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(EXAM_MANAGEMENT, 'key').filter(enableCheckbox))}
>
isChecked={mapBy(EXAM_MANAGEMENT, "key").every((k) => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(EXAM_MANAGEMENT, "key").filter(enableCheckbox))}>
Select all
</Checkbox>
</div>
<Separator />
<div className="grid grid-cols-3 gap-4">
{EXAM_MANAGEMENT.map(({ label, key }) => (
<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
{EXAM_MANAGEMENT.map(({label, key}) => (
<Checkbox
disabled={!enableCheckbox(key)}
key={key}
isChecked={permissions.includes(key)}
onChange={() => togglePermissions(key)}>
{label}
</Checkbox>
))}
@@ -328,16 +333,19 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
<b>Clasroom Management</b>
<Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(CLASSROOM_MANAGEMENT, 'key').every(k => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(CLASSROOM_MANAGEMENT, 'key').filter(enableCheckbox))}
>
isChecked={mapBy(CLASSROOM_MANAGEMENT, "key").every((k) => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(CLASSROOM_MANAGEMENT, "key").filter(enableCheckbox))}>
Select all
</Checkbox>
</div>
<Separator />
<div className="grid grid-cols-2 gap-4">
{CLASSROOM_MANAGEMENT.map(({ label, key }) => (
<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
{CLASSROOM_MANAGEMENT.map(({label, key}) => (
<Checkbox
disabled={!enableCheckbox(key)}
key={key}
isChecked={permissions.includes(key)}
onChange={() => togglePermissions(key)}>
{label}
</Checkbox>
))}
@@ -349,16 +357,19 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
<b>Entity Management</b>
<Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(ENTITY_MANAGEMENT, 'key').every(k => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(ENTITY_MANAGEMENT, 'key').filter(enableCheckbox))}
>
isChecked={mapBy(ENTITY_MANAGEMENT, "key").every((k) => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(ENTITY_MANAGEMENT, "key").filter(enableCheckbox))}>
Select all
</Checkbox>
</div>
<Separator />
<div className="grid grid-cols-2 gap-4">
{ENTITY_MANAGEMENT.map(({ label, key }) => (
<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
{ENTITY_MANAGEMENT.map(({label, key}) => (
<Checkbox
disabled={!enableCheckbox(key)}
key={key}
isChecked={permissions.includes(key)}
onChange={() => togglePermissions(key)}>
{label}
</Checkbox>
))}
@@ -370,16 +381,19 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
<b>Assignment Management</b>
<Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(ASSIGNMENT_MANAGEMENT, 'key').every(k => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(ASSIGNMENT_MANAGEMENT, 'key').filter(enableCheckbox))}
>
isChecked={mapBy(ASSIGNMENT_MANAGEMENT, "key").every((k) => permissions.includes(k))}
onChange={() => toggleMultiplePermissions(mapBy(ASSIGNMENT_MANAGEMENT, "key").filter(enableCheckbox))}>
Select all
</Checkbox>
</div>
<Separator />
<div className="grid grid-cols-2 gap-4">
{ASSIGNMENT_MANAGEMENT.map(({ label, key }) => (
<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
{ASSIGNMENT_MANAGEMENT.map(({label, key}) => (
<Checkbox
disabled={!enableCheckbox(key)}
key={key}
isChecked={permissions.includes(key)}
onChange={() => togglePermissions(key)}>
{label}
</Checkbox>
))}

223
src/pages/generation.tsx
View File

@@ -1,39 +1,40 @@
/* 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 { shouldRedirectHome } from "@/utils/navigation.disabled";
import { Radio, RadioGroup } from "@headlessui/react";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {ToastContainer} from "react-toastify";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import {Radio, RadioGroup} from "@headlessui/react";
import clsx from "clsx";
import { MODULE_ARRAY } from "@/utils/moduleUtils";
import { capitalize } from "lodash";
import {MODULE_ARRAY} from "@/utils/moduleUtils";
import {capitalize} from "lodash";
import Input from "@/components/Low/Input";
import { findAllowedEntities } from "@/utils/permissions";
import { User } from "@/interfaces/user";
import {findAllowedEntities} from "@/utils/permissions";
import {User} from "@/interfaces/user";
import useExamEditorStore from "@/stores/examEditor";
import ExamEditorStore from "@/stores/examEditor/types";
import ExamEditor from "@/components/ExamEditor";
import { mapBy, redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { Module } from "@/interfaces";
import { getExam, } from "@/utils/exams.be";
import { Exam, Exercise, InteractiveSpeakingExercise, ListeningPart, SpeakingExercise } from "@/interfaces/exam";
import { useEffect, useState } from "react";
import { getEntitiesWithRoles } from "@/utils/entities.be";
import { isAdmin } from "@/utils/users";
import {mapBy, redirect, serialize} from "@/utils";
import {requestUser} from "@/utils/api";
import {Module} from "@/interfaces";
import {getExam} from "@/utils/exams.be";
import {Exam, Exercise, InteractiveSpeakingExercise, ListeningPart, SpeakingExercise} from "@/interfaces/exam";
import {useEffect, useState} from "react";
import {getEntitiesWithRoles} from "@/utils/entities.be";
import {isAdmin} from "@/utils/users";
import axios from "axios";
import {EntityWithRoles} from "@/interfaces/entity";
type Permission = { [key in Module]: boolean }
type Permission = {[key in Module]: boolean};
export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
const user = await requestUser(req, res)
if (!user) return redirect("/login")
export const getServerSideProps = withIronSessionSsr(async ({req, res, query}) => {
const user = await requestUser(req, res);
if (!user) return redirect("/login");
if (shouldRedirectHome(user)) return redirect("/")
if (shouldRedirectHome(user)) return redirect("/");
const entityIDs = mapBy(user.entities, 'id')
const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDs)
const entityIDs = mapBy(user.entities, "id");
const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDs);
const permissions: Permission = {
reading: findAllowedEntities(user, entities, `generate_reading`).length > 0,
@@ -41,29 +42,46 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, query })
writing: findAllowedEntities(user, entities, `generate_writing`).length > 0,
speaking: findAllowedEntities(user, entities, `generate_speaking`).length > 0,
level: findAllowedEntities(user, entities, `generate_level`).length > 0,
}
};
if (Object.keys(permissions).every(p => !permissions[p as Module])) return redirect("/")
const entitiesAllowEditPrivacy = findAllowedEntities(user, entities, "update_exam_privacy");
console.log(entitiesAllowEditPrivacy);
const { id, module: examModule } = query as { id?: string, module?: Module }
if (!id || !examModule) return { props: serialize({ user, permissions }) };
if (Object.keys(permissions).every((p) => !permissions[p as Module])) return redirect("/");
const {id, module: examModule} = query as {id?: string; module?: Module};
if (!id || !examModule) return {props: serialize({user, permissions})};
//if (!permissions[module]) return redirect("/generation")
const exam = await getExam(examModule, id)
if (!exam) return redirect("/generation")
const exam = await getExam(examModule, id);
if (!exam) return redirect("/generation");
return {
props: serialize({ id, user, exam, examModule, permissions }),
props: serialize({id, user, exam, examModule, permissions, entitiesAllowEditPrivacy}),
};
}, sessionOptions);
export default function Generation({ id, user, exam, examModule, permissions }: { id: string, user: User; exam?: Exam, examModule?: Module, permissions: Permission }) {
const { title, currentModule, modules, dispatch } = useExamEditorStore();
export default function Generation({
id,
user,
exam,
examModule,
permissions,
entitiesAllowEditPrivacy,
}: {
id: string;
user: User;
exam?: Exam;
examModule?: Module;
permissions: Permission;
entitiesAllowEditPrivacy: EntityWithRoles[];
}) {
const {title, currentModule, modules, dispatch} = useExamEditorStore();
const [examLevelParts, setExamLevelParts] = useState<number | undefined>(undefined);
const updateRoot = (updates: Partial<ExamEditorStore>) => {
dispatch({ type: 'UPDATE_ROOT', payload: { updates } });
dispatch({type: "UPDATE_ROOT", payload: {updates}});
};
useEffect(() => {
@@ -71,16 +89,16 @@ export default function Generation({ id, user, exam, examModule, permissions }:
if (examModule === "level" && exam.module === "level") {
setExamLevelParts(exam.parts.length);
}
updateRoot({currentModule: examModule})
dispatch({ type: "INIT_EXAM_EDIT", payload: { exam, id, examModule } })
updateRoot({currentModule: examModule});
dispatch({type: "INIT_EXAM_EDIT", payload: {exam, id, examModule}});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id, exam, module])
}, [id, exam, module]);
useEffect(() => {
const fetchAvatars = async () => {
const response = await axios.get("/api/exam/avatars");
updateRoot({ speakingAvatars: response.data });
updateRoot({speakingAvatars: response.data});
};
fetchAvatars();
@@ -96,48 +114,61 @@ export default function Generation({ id, user, exam, examModule, permissions }:
URL.revokeObjectURL(state.writing.academic_url);
}
state.listening.sections.forEach(section => {
state.listening.sections.forEach((section) => {
const listeningPart = section.state as ListeningPart;
if (listeningPart.audio?.source) {
URL.revokeObjectURL(listeningPart.audio.source);
dispatch({
type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
sectionId: section.sectionId, module: "listening", field: "state", value: { ...listeningPart, audio: undefined }
}
})
type: "UPDATE_SECTION_SINGLE_FIELD",
payload: {
sectionId: section.sectionId,
module: "listening",
field: "state",
value: {...listeningPart, audio: undefined},
},
});
}
});
if (state.listening.instructionsState.customInstructionsURL.startsWith('blob:')) {
if (state.listening.instructionsState.customInstructionsURL.startsWith("blob:")) {
URL.revokeObjectURL(state.listening.instructionsState.customInstructionsURL);
}
state.speaking.sections.forEach(section => {
state.speaking.sections.forEach((section) => {
const sectionState = section.state as Exercise;
if (sectionState.type === 'speaking') {
if (sectionState.type === "speaking") {
const speakingExercise = sectionState as SpeakingExercise;
URL.revokeObjectURL(speakingExercise.video_url);
dispatch({
type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
sectionId: section.sectionId, module: "listening", field: "state", value: { ...speakingExercise, video_url: undefined }
}
})
type: "UPDATE_SECTION_SINGLE_FIELD",
payload: {
sectionId: section.sectionId,
module: "listening",
field: "state",
value: {...speakingExercise, video_url: undefined},
},
});
}
if (sectionState.type === 'interactiveSpeaking') {
if (sectionState.type === "interactiveSpeaking") {
const interactiveSpeaking = sectionState as InteractiveSpeakingExercise;
interactiveSpeaking.prompts.forEach(prompt => {
interactiveSpeaking.prompts.forEach((prompt) => {
URL.revokeObjectURL(prompt.video_url);
});
dispatch({
type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
sectionId: section.sectionId, module: "listening", field: "state", value: {
...interactiveSpeaking, prompts: interactiveSpeaking.prompts.map((p) => ({ ...p, video_url: undefined }))
}
}
})
type: "UPDATE_SECTION_SINGLE_FIELD",
payload: {
sectionId: section.sectionId,
module: "listening",
field: "state",
value: {
...interactiveSpeaking,
prompts: interactiveSpeaking.prompts.map((p) => ({...p, video_url: undefined})),
},
},
});
}
});
dispatch({ type: 'FULL_RESET' });
dispatch({type: "FULL_RESET"});
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -163,7 +194,7 @@ export default function Generation({ id, user, exam, examModule, permissions }:
placeholder="Insert a title here"
name="title"
label="Title"
onChange={(title) => updateRoot({ title })}
onChange={(title) => updateRoot({title})}
roundness="xl"
value={title}
defaultValue={title}
@@ -172,44 +203,46 @@ export default function Generation({ id, user, exam, examModule, permissions }:
<label className="font-normal text-base text-mti-gray-dim">Module</label>
<RadioGroup
value={currentModule}
onChange={(currentModule) => updateRoot({ currentModule })}
onChange={(currentModule) => updateRoot({currentModule})}
className="flex flex-row flex-wrap w-full gap-4 -md:justify-center justify-between">
{[...MODULE_ARRAY].filter(m => permissions[m]).map((x) => (
<Radio value={x} key={x}>
{({ checked }) => (
<span
className={clsx(
"px-6 py-4 w-64 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
x === "reading" &&
(!checked
? "bg-white border-mti-gray-platinum"
: "bg-ielts-reading/70 border-ielts-reading text-white"),
x === "listening" &&
(!checked
? "bg-white border-mti-gray-platinum"
: "bg-ielts-listening/70 border-ielts-listening text-white"),
x === "writing" &&
(!checked
? "bg-white border-mti-gray-platinum"
: "bg-ielts-writing/70 border-ielts-writing text-white"),
x === "speaking" &&
(!checked
? "bg-white border-mti-gray-platinum"
: "bg-ielts-speaking/70 border-ielts-speaking text-white"),
x === "level" &&
(!checked
? "bg-white border-mti-gray-platinum"
: "bg-ielts-level/70 border-ielts-level text-white"),
)}>
{capitalize(x)}
</span>
)}
</Radio>
))}
{[...MODULE_ARRAY]
.filter((m) => permissions[m])
.map((x) => (
<Radio value={x} key={x}>
{({checked}) => (
<span
className={clsx(
"px-6 py-4 w-64 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
x === "reading" &&
(!checked
? "bg-white border-mti-gray-platinum"
: "bg-ielts-reading/70 border-ielts-reading text-white"),
x === "listening" &&
(!checked
? "bg-white border-mti-gray-platinum"
: "bg-ielts-listening/70 border-ielts-listening text-white"),
x === "writing" &&
(!checked
? "bg-white border-mti-gray-platinum"
: "bg-ielts-writing/70 border-ielts-writing text-white"),
x === "speaking" &&
(!checked
? "bg-white border-mti-gray-platinum"
: "bg-ielts-speaking/70 border-ielts-speaking text-white"),
x === "level" &&
(!checked
? "bg-white border-mti-gray-platinum"
: "bg-ielts-level/70 border-ielts-level text-white"),
)}>
{capitalize(x)}
</span>
)}
</Radio>
))}
</RadioGroup>
</div>
<ExamEditor levelParts={examLevelParts} />
<ExamEditor levelParts={examLevelParts} entitiesAllowEditPrivacy={entitiesAllowEditPrivacy} />
</>
)}
</>