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

Added the ability to create an agent using the CodeGenerator

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-11-21 13:24:07 +00:00
parent 51e7c535df
commit 8072cefbe6
9 changed files with 55 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/MobileMenu.tsx
View File

@@ -105,12 +105,12 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
</Link>
{user.type !== "student" && (
<Link
href="/manage"
href="/settings"
className={clsx(
"transition ease-in-out duration-300 w-fit",
path === "/manage" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
path === "/settings" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
)}>
Management
Settings
</Link>
)}
<Link

3
src/components/ProfileSummary.tsx
View File

@@ -1,5 +1,6 @@
/* eslint-disable @next/next/no-img-element */
import {User} from "@/interfaces/user";
import {USER_TYPE_LABELS} from "@/resources/user";
import {calculateAverageLevel} from "@/utils/score";
import {capitalize} from "lodash";
import {ReactElement} from "react";
@@ -28,7 +29,7 @@ export default function ProfileSummary({user, items}: Props) {
<div className="flex -md:flex-col justify-between w-full gap-8">
<div className="flex flex-col gap-2 py-2">
<h1 className="font-bold text-2xl md:text-4xl">{user.name}</h1>
<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
</div>
<ProgressBar
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}

6
src/components/Sidebar.tsx
View File

@@ -93,9 +93,9 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
<Nav
disabled={disableNavigation}
Icon={BsShieldFill}
label="Management"
label="Settings"
path={path}
keyPath="/manage"
keyPath="/settings"
isMinimized={isMinimized}
/>
)}
@@ -107,7 +107,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
{userType !== "student" && (
<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Management" path={path} keyPath="/manage" isMinimized={true} />
<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
)}
</div>

12
src/components/UserCard.tsx
View File

@@ -17,6 +17,7 @@ import Input from "./Low/Input";
import ProfileSummary from "./ProfileSummary";
import Select from "react-select";
import useUsers from "@/hooks/useUsers";
import {USER_TYPE_LABELS} from "@/resources/user";
const expirationDateColor = (date: Date) => {
const momentDate = moment(date);
@@ -255,12 +256,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
defaultValue={user.type}
onChange={(e) => setType(e.target.value as typeof user.type)}
className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="corporate">Corporate</option>
<option value="agent">Country Agent</option>
<option value="admin">Admin</option>
<option value="developer">Developer</option>
{Object.keys(USER_TYPE_LABELS).map((type) => (
<option key={type} value={type}>
{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
</option>
))}
</select>
</div>
</div>

43
src/pages/(admin)/BatchCodeGenerator.tsx
View File

@@ -2,6 +2,7 @@ import Button from "@/components/Low/Button";
import Checkbox from "@/components/Low/Checkbox";
import {PERMISSIONS} from "@/constants/userPermissions";
import {Type, User} from "@/interfaces/user";
import {USER_TYPE_LABELS} from "@/resources/user";
import axios from "axios";
import clsx from "clsx";
import {capitalize} from "lodash";
@@ -17,6 +18,7 @@ export default function BatchCodeGenerator({user}: {user: User}) {
const [isLoading, setIsLoading] = useState(false);
const [expiryDate, setExpiryDate] = useState<Date | null>(null);
const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
const [type, setType] = useState<Type>("student");
const {openFilePicker, filesContent} = useFilePicker({
accept: ".txt",
@@ -108,37 +110,18 @@ export default function BatchCodeGenerator({user}: {user: User}) {
)}
<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
{user && (
<div className="grid -md:grid-cols-2 md:grid-cols-1 xl:grid-cols-2 gap-4 place-items-center">
<Button
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("student")}
disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.student.includes(user.type)}>
Student
</Button>
<Button
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("teacher")}
disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.teacher.includes(user.type)}>
Teacher
</Button>
<Button
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("corporate")}
disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.corporate.includes(user.type)}>
Corporate
</Button>
<Button
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("admin")}
disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.admin.includes(user.type)}>
Admin
</Button>
</div>
<select
defaultValue="student"
onChange={(e) => setType(e.target.value as typeof user.type)}
className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
{Object.keys(USER_TYPE_LABELS).map((type) => (
<option key={type} value={type}>
{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
</option>
))}
</select>
)}
<Button onClick={() => generateCode(type)}>Generate & Send</Button>
</div>
);
}

43
src/pages/(admin)/CodeGenerator.tsx
View File

@@ -2,6 +2,7 @@ import Button from "@/components/Low/Button";
import Checkbox from "@/components/Low/Checkbox";
import {PERMISSIONS} from "@/constants/userPermissions";
import {Type, User} from "@/interfaces/user";
import {USER_TYPE_LABELS} from "@/resources/user";
import axios from "axios";
import clsx from "clsx";
import {capitalize} from "lodash";
@@ -15,6 +16,7 @@ export default function CodeGenerator({user}: {user: User}) {
const [generatedCode, setGeneratedCode] = useState<string>();
const [expiryDate, setExpiryDate] = useState<Date | null>(null);
const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
const [type, setType] = useState<Type>("student");
useEffect(() => {
if (user && (user.type === "corporate" || user.type === "teacher")) {
@@ -57,36 +59,16 @@ export default function CodeGenerator({user}: {user: User}) {
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
<label className="font-normal text-base text-mti-gray-dim">User Code Generator</label>
{user && (
<div className="grid -md:grid-cols-2 md:grid-cols-1 place-items-center 2xl:grid-cols-2 gap-4">
<Button
className="w-44 md:w-48"
variant="outline"
onClick={() => generateCode("student")}
disabled={!PERMISSIONS.generateCode.student.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
Student
</Button>
<Button
className="w-44 md:w-48"
variant="outline"
onClick={() => generateCode("teacher")}
disabled={!PERMISSIONS.generateCode.teacher.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
Teacher
</Button>
<Button
className="w-44 md:w-48"
variant="outline"
onClick={() => generateCode("corporate")}
disabled={!PERMISSIONS.generateCode.corporate.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
Corporate
</Button>
<Button
className="w-44 md:w-48"
variant="outline"
onClick={() => generateCode("admin")}
disabled={!PERMISSIONS.generateCode.admin.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
Admin
</Button>
</div>
<select
defaultValue="student"
onChange={(e) => setType(e.target.value as typeof user.type)}
className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
{Object.keys(USER_TYPE_LABELS).map((type) => (
<option key={type} value={type}>
{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
</option>
))}
</select>
)}
{user && (user.type === "developer" || user.type === "admin") && (
<>
@@ -111,6 +93,7 @@ export default function CodeGenerator({user}: {user: User}) {
)}
</>
)}
<Button onClick={() => generateCode(type)}>Generate</Button>
<label className="font-normal text-base text-mti-gray-dim">Generated Code:</label>
<div
className={clsx(

3
src/pages/(admin)/Lists/UserList.tsx
View File

@@ -16,6 +16,7 @@ import {countries, TCountries} from "countries-list";
import countryCodes from "country-codes-list";
import Modal from "@/components/Modal";
import UserCard from "@/components/UserCard";
import {USER_TYPE_LABELS} from "@/resources/user";
const columnHelper = createColumnHelper<User>();
@@ -316,7 +317,7 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
<SorterArrow name="type" />
</button>
) as any,
cell: (info) => capitalize(info.getValue()),
cell: (info) => USER_TYPE_LABELS[info.getValue()],
}),
columnHelper.accessor("subscriptionExpirationDate", {
header: (

6
src/pages/manage.tsx → src/pages/settings.tsx
View File

@@ -50,7 +50,7 @@ export default function Admin() {
return (
<>
<Head>
<title>Management Panel | EnCoach</title>
<title>Settings Panel | EnCoach</title>
<meta
name="description"
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -61,8 +61,8 @@ export default function Admin() {
<ToastContainer />
{user && (
<Layout user={user} className="gap-6">
<section className="w-full flex -md:flex-col -xl:gap-2 gap-8 justify-between">
{user.email === "tiago.ribeiro@ecrop.dev" ? <ExamGenerator /> : <ExamLoader />}
<section className="w-full flex -lg:flex-col -xl:gap-2 gap-8 justify-between">
<ExamLoader />
<CodeGenerator user={user} />
<BatchCodeGenerator user={user} />
</section>

10
src/resources/user.ts Normal file
View File

@@ -0,0 +1,10 @@
import {Type} from "@/interfaces/user";
export const USER_TYPE_LABELS: {[key in Type]: string} = {
student: "Student",
teacher: "Teacher",
corporate: "Corporate",
agent: "Country Manager",
admin: "Admin",
developer: "Developer",
};