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

Merge branch 'develop'

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-04-02 14:53:48 +01:00
parent 0b9e1bd734 f374d91ef8
commit 9ab7c3ed59
8 changed files with 148 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/UserCard.tsx
View File

@@ -114,7 +114,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
agentInformation:
type === "agent"
? {
name: companyName,
companyName,
commercialRegistration,
}
: undefined,
@@ -157,7 +157,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
{
icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: stats.length,
label: "Exercises",
label: "Modules",
},
{
icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,

14
src/dashboards/Student.tsx
View File

@@ -13,7 +13,7 @@ import {CorporateUser, User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import {getExamById} from "@/utils/exams";
import {getUserCorporate} from "@/utils/groups";
import {MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
import {countExamModules, countFullExams, MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
import {getLevelLabel, getLevelScore} from "@/utils/score";
import {averageScore, groupBySession} from "@/utils/stats";
import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
@@ -84,16 +84,16 @@ export default function StudentDashboard({user}: Props) {
user={user}
items={[
{
icon: <BsFileEarmarkText className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,
value: Object.keys(groupBySession(stats)).length,
icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: countFullExams(stats),
label: "Exams",
tooltip: "Number of all conducted completed exams",
},
{
icon: <BsPencil className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,
value: stats.length,
label: "Exercises",
tooltip: "Number of all conducted exercises including Level Test",
icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: countExamModules(stats),
label: "Modules",
tooltip: "Number of all exam modules performed including Level Test",
},
{
icon: <BsStar className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,

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

@@ -16,18 +16,14 @@ 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";
import {isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
import useFilterStore from "@/stores/listFilterStore";
import {useRouter} from "next/router";
import {isCorporateUser} from '@/resources/user';
import { useListSearch } from "@/hooks/useListSearch";
import {isCorporateUser} from "@/resources/user";
import {useListSearch} from "@/hooks/useListSearch";
const columnHelper = createColumnHelper<User>();
const searchFields = [
['name'],
['email'],
['corporateInformation', 'companyInformation', 'name'],
];
const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
export default function UserList({user, filters = []}: {user: User; filters?: ((user: User) => boolean)[]}) {
const [showDemographicInformation, setShowDemographicInformation] = useState(false);
const [sorter, setSorter] = useState<string>();
@@ -331,14 +327,14 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
) as any,
cell: (info) => USER_TYPE_LABELS[info.getValue()],
}),
columnHelper.accessor('corporateInformation.companyInformation.name', {
columnHelper.accessor("corporateInformation.companyInformation.name", {
header: (
<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
<span>Company Name</span>
<SorterArrow name="companyName" />
</button>
) as any,
cell: (info) => getCorporateName(info.row.original),
cell: (info) => getCompanyName(info.row.original),
}),
columnHelper.accessor("subscriptionExpirationDate", {
header: (
@@ -393,13 +389,16 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
return undefined;
};
const getCorporateName = (user: User) => {
if(isCorporateUser(user)) {
return user.corporateInformation?.companyInformation?.name
const getCompanyName = (user: User) => {
if (isCorporateUser(user)) {
return user.corporateInformation?.companyInformation?.name;
}
if (isAgentUser(user)) {
return user.agentInformation.companyName;
}
return '';
}
return "";
};
const sortFunction = (a: User, b: User) => {
if (sorter === "name" || sorter === reverseString("name"))
@@ -468,25 +467,20 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
}
if(sorter === 'companyName' || sorter === reverseString('companyName')) {
const aCorporateName = getCorporateName(a);
const bCorporateName = getCorporateName(b);
if (sorter === "companyName" || sorter === reverseString("companyName")) {
const aCorporateName = getCompanyName(a);
const bCorporateName = getCompanyName(b);
if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
if (!aCorporateName && !bCorporateName) return 0;
return sorter === "companyName"
? aCorporateName.localeCompare(bCorporateName)
: bCorporateName.localeCompare(aCorporateName);
return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName);
}
return a.id.localeCompare(b.id);
};
const { rows: filteredRows, renderSearch } = useListSearch(
searchFields,
displayUsers,
)
const {rows: filteredRows, renderSearch} = useListSearch(searchFields, displayUsers);
const table = useReactTable({
data: filteredRows,

95
src/pages/(generation)/LevelGeneration.tsx
View File

@@ -1,5 +1,5 @@
import Select from "@/components/Low/Select";
import {Difficulty, LevelExam, MultipleChoiceExercise} from "@/interfaces/exam";
import {Difficulty, LevelExam, MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
import useExamStore from "@/stores/examStore";
import {getExamById} from "@/utils/exams";
import {playSound} from "@/utils/sound";
@@ -9,12 +9,69 @@ import clsx from "clsx";
import {capitalize, sample} from "lodash";
import {useRouter} from "next/router";
import {useState} from "react";
import {BsArrowRepeat} from "react-icons/bs";
import {BsArrowRepeat, BsCheck, BsPencilSquare, BsX} from "react-icons/bs";
import {toast} from "react-toastify";
import {v4} from "uuid";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion; onUpdate: (question: MultipleChoiceQuestion) => void}) => {
const [isEditing, setIsEditing] = useState(false);
const [options, setOptions] = useState(question.options);
return (
<div key={question.id} className="flex flex-col gap-1">
<span className="font-semibold">
{question.id}. {question.prompt}{" "}
</span>
<div className="flex flex-col gap-1">
{question.options.map((option, index) => (
<span key={option.id} className={clsx(question.solution === option.id && "font-bold")}>
<span className={clsx("font-semibold", question.solution === option.id ? "text-mti-green-light" : "text-ielts-level")}>
({option.id})
</span>{" "}
{isEditing ? (
<input
defaultValue={option.text}
className="w-60"
onChange={(e) => setOptions((prev) => prev.map((x, idx) => (idx === index ? {...x, text: e.target.value} : x)))}
/>
) : (
<span>{option.text}</span>
)}
</span>
))}
</div>
<div className="flex gap-2 mt-2 w-full">
{!isEditing && (
<button
onClick={() => setIsEditing(true)}
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
<BsPencilSquare />
</button>
)}
{isEditing && (
<>
<button
onClick={() => {
onUpdate({...question, options});
setIsEditing(false);
}}
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
<BsCheck />
</button>
<button
onClick={() => setIsEditing(false)}
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
<BsX />
</button>
</>
)}
</div>
</div>
);
};
const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Difficulty; setExam: (exam: LevelExam) => void}) => {
const [isLoading, setIsLoading] = useState(false);
@@ -37,6 +94,20 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
.finally(() => setIsLoading(false));
};
const onUpdate = (question: MultipleChoiceQuestion) => {
if (!exam) return;
const updatedExam = {
...exam,
exercises: exam.exercises.map((x) => ({
...x,
questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)),
})),
};
console.log(updatedExam);
setExam(updatedExam as any);
};
return (
<Tab.Panel className="w-full bg-ielts-level/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
<div className="flex gap-4 items-end">
@@ -80,25 +151,7 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{exercise.questions.map((question) => (
<div key={question.id} className="flex flex-col gap-1">
<span className="font-semibold">
{question.id}. {question.prompt}
</span>
<div className="flex flex-col gap-1">
{question.options.map((option) => (
<span key={option.id} className={clsx(question.solution === option.id && "font-bold")}>
<span
className={clsx(
"font-semibold",
question.solution === option.id ? "text-mti-green-light" : "text-ielts-level",
)}>
({option.id})
</span>{" "}
{option.text}
</span>
))}
</div>
</div>
<QuestionDisplay question={question} onUpdate={onUpdate} key={question.id} />
))}
</div>
</div>

2
src/pages/api/users/update.ts
View File

@@ -85,7 +85,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
const user = await setDoc(userRef, updatedUser, {merge: true});
await managePaymentRecords(updatedUser, updatedUser.id);
if (updatedUser.status) {
if (updatedUser.status || updatedUser.type === "corporate") {
// there's no await as this does not affect the user
propagateStatusChange(queryId, updatedUser.status);
}

18
src/pages/stats.tsx
View File

@@ -14,7 +14,7 @@ import {Module} from "@/interfaces";
import ProgressBar from "@/components/Low/ProgressBar";
import Layout from "@/components/High/Layout";
import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
import {MODULE_ARRAY, sortByModule} from "@/utils/moduleUtils";
import {countExamModules, countFullExams, MODULE_ARRAY, sortByModule} from "@/utils/moduleUtils";
import {Chart} from "react-chartjs-2";
import useUsers from "@/hooks/useUsers";
import Select from "react-select";
@@ -39,7 +39,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
redirect: {
destination: "/login",
permanent: false,
}
},
};
}
@@ -48,7 +48,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
redirect: {
destination: "/",
permanent: false,
}
},
};
}
@@ -164,21 +164,21 @@ export default function Stats() {
items={[
{
icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: Object.keys(groupBySession(userStats)).length,
value: countFullExams(userStats),
label: "Exams",
tooltip: 'Number of all conducted completed exams',
tooltip: "Number of all conducted completed exams",
},
{
icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: userStats.length,
label: "Exercises",
tooltip: 'Number of all conducted exercises including Level Test',
value: countExamModules(userStats),
label: "Modules",
tooltip: "Number of all exam modules performed including Level Test",
},
{
icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: `${userStats.length > 0 ? averageScore(userStats) : 0}%`,
label: "Average Score",
tooltip: 'Average success rate for questions responded',
tooltip: "Average success rate for questions responded",
},
]}
/>

8
src/resources/user.ts
View File

@@ -1,4 +1,4 @@
import {Type, User, CorporateUser} from "@/interfaces/user";
import {Type, User, CorporateUser, AgentUser} from "@/interfaces/user";
export const USER_TYPE_LABELS: {[key in Type]: string} = {
student: "Student",
@@ -11,4 +11,8 @@ export const USER_TYPE_LABELS: {[key in Type]: string} = {
export function isCorporateUser(user: User): user is CorporateUser {
return (user as CorporateUser).corporateInformation !== undefined;
}
}
export function isAgentUser(user: User): user is AgentUser {
return (user as AgentUser).agentInformation !== undefined;
}

30
src/utils/moduleUtils.ts
View File

@@ -1,5 +1,8 @@
import {Module} from "@/interfaces";
import {Exercise} from "@/interfaces/exam";
import {Stat} from "@/interfaces/user";
import {uniq} from "lodash";
import {groupBySession} from "./stats";
export const MODULE_ARRAY: Module[] = ["reading", "listening", "writing", "speaking", "level"];
@@ -29,3 +32,30 @@ export const countExercises = (exercises: Exercise[]) => {
return lengthMap.reduce((accumulator, current) => accumulator + current, 0);
};
export const countFullExams = (stats: Stat[]) => {
const sessionExams = groupBySession(stats);
return Object.keys(sessionExams).filter((x) => {
const sessionStats = sessionExams[x as keyof typeof sessionExams];
const sessionModules = uniq(sessionStats.map((x) => x.module));
return (
sessionModules.includes("reading") &&
sessionModules.includes("listening") &&
sessionModules.includes("writing") &&
sessionModules.includes("speaking")
);
}).length;
};
export const countExamModules = (stats: Stat[]) => {
const sessionExams = groupBySession(stats);
const modulesPerSession = Object.keys(sessionExams).map((x) => {
const sessionStats = sessionExams[x as keyof typeof sessionExams];
const sessionModules = uniq(sessionStats.map((x) => x.module));
return sessionModules.length;
});
return modulesPerSession.reduce((acc, curr) => curr + acc, 0);
};