Compare commits
24 Commits
workflow-p
...
addedAcces
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fec3b51553 | ||
|
|
d8386bdd8e | ||
|
|
df2f83e496 | ||
|
|
e214d8b598 | ||
|
|
c14f16c97a | ||
|
|
ca2cf739ee | ||
|
|
d432fb4bc4 | ||
|
|
d5bffc9bad | ||
|
|
75b4643918 | ||
|
|
9ae6b8e894 | ||
|
|
6f6c5a4209 | ||
|
|
769b1b39d3 | ||
|
|
4bb12c7f01 | ||
|
|
a80a342ae2 | ||
|
|
e5e60fcce9 | ||
|
|
b175d8797e | ||
|
|
f06349e350 | ||
|
|
34caf9986c | ||
|
|
3a3d3d014d | ||
|
|
c49c303f20 | ||
|
|
cbe353c2c5 | ||
|
|
991adede96 | ||
|
|
f95bce6fa2 | ||
|
|
1dd6cead9e |
51
scripts/updatePrivateFieldExams.js
Normal file
51
scripts/updatePrivateFieldExams.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import dotenv from "dotenv";
|
||||
dotenv.config();
|
||||
import { MongoClient } from "mongodb";
|
||||
const uri = process.env.MONGODB_URI || "";
|
||||
const options = {
|
||||
maxPoolSize: 10,
|
||||
};
|
||||
const dbName = process.env.MONGODB_DB; // change this to prod db when needed
|
||||
async function migrateData() {
|
||||
const MODULE_ARRAY = ["reading", "listening", "writing", "speaking", "level"];
|
||||
const client = new MongoClient(uri, options);
|
||||
|
||||
try {
|
||||
await client.connect();
|
||||
console.log("Connected to MongoDB");
|
||||
if (!process.env.MONGODB_DB) {
|
||||
throw new Error("Missing env var: MONGODB_DB");
|
||||
}
|
||||
const db = client.db(dbName);
|
||||
for (const string of MODULE_ARRAY) {
|
||||
const collection = db.collection(string);
|
||||
const result = await collection.updateMany(
|
||||
{ private: { $exists: false } },
|
||||
{ $set: { access: "public" } }
|
||||
);
|
||||
const result2 = await collection.updateMany(
|
||||
{ private: true },
|
||||
{ $set: { access: "private" }, $unset: { private: "" } }
|
||||
);
|
||||
const result1 = await collection.updateMany(
|
||||
{ private: { $exists: true } },
|
||||
{ $set: { access: "public" } }
|
||||
);
|
||||
console.log(
|
||||
`Updated ${
|
||||
result.modifiedCount + result1.modifiedCount
|
||||
} documents to "access: public" in ${string}`
|
||||
);
|
||||
console.log(
|
||||
`Updated ${result2.modifiedCount} documents to "access: private" and removed private var in ${string}`
|
||||
);
|
||||
}
|
||||
console.log("Migration completed successfully!");
|
||||
} catch (error) {
|
||||
console.error("Migration failed:", error);
|
||||
} finally {
|
||||
await client.close();
|
||||
console.log("MongoDB connection closed.");
|
||||
}
|
||||
}
|
||||
//migrateData(); // uncomment to run the migration
|
||||
@@ -1,17 +1,12 @@
|
||||
import {infoButtonStyle} from "@/constants/buttonStyles";
|
||||
import {Module} from "@/interfaces";
|
||||
import {User} from "@/interfaces/user";
|
||||
import useExamStore from "@/stores/exam";
|
||||
import {getExam, getExamById} from "@/utils/exams";
|
||||
import {getExam} from "@/utils/exams";
|
||||
import {MODULE_ARRAY} from "@/utils/moduleUtils";
|
||||
import {writingMarking} from "@/utils/score";
|
||||
import {Menu} from "@headlessui/react";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import {capitalize} from "lodash";
|
||||
import {useRouter} from "next/router";
|
||||
import {useEffect, useState} from "react";
|
||||
import {BsBook, BsChevronDown, BsHeadphones, BsMegaphone, BsPen, BsQuestionSquare} from "react-icons/bs";
|
||||
import { useState} from "react";
|
||||
import { BsQuestionSquare} from "react-icons/bs";
|
||||
import {toast} from "react-toastify";
|
||||
import Button from "./Low/Button";
|
||||
import ModuleLevelSelector from "./Medium/ModuleLevelSelector";
|
||||
|
||||
@@ -19,7 +19,7 @@ interface SettingsEditorProps {
|
||||
children?: ReactNode;
|
||||
canPreview: boolean;
|
||||
canSubmit: boolean;
|
||||
submitModule: () => void;
|
||||
submitModule: (requiresApproval: boolean) => void;
|
||||
preview: () => void;
|
||||
}
|
||||
|
||||
@@ -148,18 +148,33 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
|
||||
</div>
|
||||
</Dropdown>
|
||||
{children}
|
||||
<div className="flex flex-row justify-between mt-4">
|
||||
<div className="flex flex-col gap-3 mt-4">
|
||||
<button
|
||||
className={clsx(
|
||||
"flex items-center justify-center px-4 py-2 text-white rounded-xl transition-colors duration-300",
|
||||
`bg-ielts-${module}/70 border border-ielts-${module} hover:bg-ielts-${module} disabled:bg-ielts-${module}/30`,
|
||||
"disabled:cursor-not-allowed disabled:text-gray-200"
|
||||
)}
|
||||
onClick={submitModule}
|
||||
onClick={() => submitModule(true)}
|
||||
disabled={!canSubmit}
|
||||
>
|
||||
<FaFileUpload className="mr-2" size={18} />
|
||||
Submit Module as Exam
|
||||
Submit module as exam for approval
|
||||
</button>
|
||||
<button
|
||||
className={clsx(
|
||||
"flex items-center justify-center px-4 py-2 text-white rounded-xl transition-colors duration-300",
|
||||
`bg-ielts-${module}/70 border border-ielts-${module} hover:bg-ielts-${module} disabled:bg-ielts-${module}/30`,
|
||||
"disabled:cursor-not-allowed disabled:text-gray-200"
|
||||
)}
|
||||
onClick={() => {
|
||||
if (!confirm(`Are you sure you want to skip the approval process for this exam?`)) return;
|
||||
submitModule(false);
|
||||
}}
|
||||
disabled={!canSubmit}
|
||||
>
|
||||
<FaFileUpload className="mr-2" size={18} />
|
||||
Submit module as exam and skip approval process
|
||||
</button>
|
||||
<button
|
||||
className={clsx(
|
||||
@@ -171,7 +186,7 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
|
||||
disabled={!canPreview}
|
||||
>
|
||||
<FaEye className="mr-2" size={18} />
|
||||
Preview Module
|
||||
Preview module
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,7 +38,7 @@ const LevelSettings: React.FC = () => {
|
||||
difficulty,
|
||||
sections,
|
||||
minTimer,
|
||||
isPrivate,
|
||||
access,
|
||||
} = useExamEditorStore(state => state.modules[currentModule]);
|
||||
|
||||
const { localSettings, updateLocalAndScheduleGlobal } = useSettingsState<LevelSectionSettings>(
|
||||
@@ -76,7 +76,7 @@ const LevelSettings: React.FC = () => {
|
||||
});
|
||||
});
|
||||
|
||||
const submitLevel = async () => {
|
||||
const submitLevel = async (requiresApproval: boolean) => {
|
||||
if (title === "") {
|
||||
toast.error("Enter a title for the exam!");
|
||||
return;
|
||||
@@ -195,12 +195,13 @@ const LevelSettings: React.FC = () => {
|
||||
category: s.settings.category
|
||||
};
|
||||
}).filter(part => part.exercises.length > 0),
|
||||
isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
|
||||
requiresApproval: requiresApproval,
|
||||
isDiagnostic: false,
|
||||
minTimer,
|
||||
module: "level",
|
||||
id: title,
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
access,
|
||||
};
|
||||
|
||||
const result = await axios.post('/api/exam/level', exam);
|
||||
@@ -243,7 +244,7 @@ const LevelSettings: React.FC = () => {
|
||||
isDiagnostic: false,
|
||||
variant: undefined,
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
access,
|
||||
} as LevelExam);
|
||||
setExerciseIndex(0);
|
||||
setQuestionIndex(0);
|
||||
|
||||
@@ -27,7 +27,7 @@ const ListeningSettings: React.FC = () => {
|
||||
difficulty,
|
||||
sections,
|
||||
minTimer,
|
||||
isPrivate,
|
||||
access,
|
||||
instructionsState
|
||||
} = useExamEditorStore(state => state.modules[currentModule]);
|
||||
|
||||
@@ -65,7 +65,7 @@ const ListeningSettings: React.FC = () => {
|
||||
}
|
||||
];
|
||||
|
||||
const submitListening = async () => {
|
||||
const submitListening = async (requiresApproval: boolean) => {
|
||||
if (title === "") {
|
||||
toast.error("Enter a title for the exam!");
|
||||
return;
|
||||
@@ -138,13 +138,14 @@ const ListeningSettings: React.FC = () => {
|
||||
category: s.settings.category
|
||||
};
|
||||
}),
|
||||
isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
|
||||
requiresApproval: requiresApproval,
|
||||
isDiagnostic: false,
|
||||
minTimer,
|
||||
module: "listening",
|
||||
id: title,
|
||||
variant: sections.length === 4 ? "full" : "partial",
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
access,
|
||||
instructions: instructionsURL
|
||||
};
|
||||
|
||||
@@ -191,7 +192,7 @@ const ListeningSettings: React.FC = () => {
|
||||
isDiagnostic: false,
|
||||
variant: sections.length === 4 ? "full" : "partial",
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
access,
|
||||
instructions: instructionsState.currentInstructionsURL
|
||||
} as ListeningExam);
|
||||
setExerciseIndex(0);
|
||||
|
||||
@@ -15,135 +15,138 @@ import ReadingComponents from "./components";
|
||||
import { getExamById } from "@/utils/exams";
|
||||
|
||||
const ReadingSettings: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
setExam,
|
||||
setExerciseIndex,
|
||||
setPartIndex,
|
||||
setQuestionIndex,
|
||||
setBgColor,
|
||||
} = usePersistentExamStore();
|
||||
const {
|
||||
setExam,
|
||||
setExerciseIndex,
|
||||
setPartIndex,
|
||||
setQuestionIndex,
|
||||
setBgColor,
|
||||
} = usePersistentExamStore();
|
||||
|
||||
const { currentModule, title } = useExamEditorStore();
|
||||
const {
|
||||
focusedSection,
|
||||
difficulty,
|
||||
sections,
|
||||
minTimer,
|
||||
isPrivate,
|
||||
type,
|
||||
} = useExamEditorStore(state => state.modules[currentModule]);
|
||||
const { currentModule, title } = useExamEditorStore();
|
||||
const { focusedSection, difficulty, sections, minTimer, access, type } =
|
||||
useExamEditorStore((state) => state.modules[currentModule]);
|
||||
|
||||
const { localSettings, updateLocalAndScheduleGlobal } = useSettingsState<ReadingSectionSettings>(
|
||||
currentModule,
|
||||
focusedSection
|
||||
);
|
||||
const { localSettings, updateLocalAndScheduleGlobal } =
|
||||
useSettingsState<ReadingSectionSettings>(currentModule, focusedSection);
|
||||
|
||||
const currentSection = sections.find((section) => section.sectionId == focusedSection)?.state as ReadingPart;
|
||||
const currentSection = sections.find(
|
||||
(section) => section.sectionId == focusedSection
|
||||
)?.state as ReadingPart;
|
||||
|
||||
const defaultPresets: Option[] = [
|
||||
{
|
||||
label: "Preset: Reading Passage 1",
|
||||
value:
|
||||
"Welcome to {part} of the {label}. You will read texts relating to everyday topics and situations. These may include advertisements, brochures, manuals, or official documents. Answer questions that test your ability to locate specific information and understand main ideas.",
|
||||
},
|
||||
{
|
||||
label: "Preset: Reading Passage 2",
|
||||
value:
|
||||
"Welcome to {part} of the {label}. You will read texts dealing with general interest topics that may include news articles, company policies, or workplace documents. Answer questions testing your understanding of main ideas, specific details, and the author's views.",
|
||||
},
|
||||
{
|
||||
label: "Preset: Reading Passage 3",
|
||||
value:
|
||||
"Welcome to {part} of the {label}. You will read longer academic texts that may include journal articles, academic essays, or research papers. Answer questions testing your ability to understand complex arguments, identify key points, and follow the development of ideas.",
|
||||
},
|
||||
];
|
||||
|
||||
const defaultPresets: Option[] = [
|
||||
{
|
||||
label: "Preset: Reading Passage 1",
|
||||
value: "Welcome to {part} of the {label}. You will read texts relating to everyday topics and situations. These may include advertisements, brochures, manuals, or official documents. Answer questions that test your ability to locate specific information and understand main ideas."
|
||||
},
|
||||
{
|
||||
label: "Preset: Reading Passage 2",
|
||||
value: "Welcome to {part} of the {label}. You will read texts dealing with general interest topics that may include news articles, company policies, or workplace documents. Answer questions testing your understanding of main ideas, specific details, and the author's views."
|
||||
},
|
||||
{
|
||||
label: "Preset: Reading Passage 3",
|
||||
value: "Welcome to {part} of the {label}. You will read longer academic texts that may include journal articles, academic essays, or research papers. Answer questions testing your ability to understand complex arguments, identify key points, and follow the development of ideas."
|
||||
}
|
||||
];
|
||||
const canPreviewOrSubmit = sections.some(
|
||||
(s) =>
|
||||
(s.state as ReadingPart).exercises &&
|
||||
(s.state as ReadingPart).exercises.length > 0
|
||||
);
|
||||
|
||||
const canPreviewOrSubmit = sections.some(
|
||||
(s) => (s.state as ReadingPart).exercises && (s.state as ReadingPart).exercises.length > 0
|
||||
);
|
||||
|
||||
const submitReading = () => {
|
||||
if (title === "") {
|
||||
toast.error("Enter a title for the exam!");
|
||||
return;
|
||||
}
|
||||
const exam: ReadingExam = {
|
||||
parts: sections.map((s) => {
|
||||
const exercise = s.state as ReadingPart;
|
||||
return {
|
||||
...exercise,
|
||||
intro: localSettings.currentIntro,
|
||||
category: localSettings.category
|
||||
};
|
||||
}),
|
||||
isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
|
||||
minTimer,
|
||||
module: "reading",
|
||||
id: title,
|
||||
variant: sections.length === 3 ? "full" : "partial",
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
type: type!
|
||||
const submitReading = (requiresApproval: boolean) => {
|
||||
if (title === "") {
|
||||
toast.error("Enter a title for the exam!");
|
||||
return;
|
||||
}
|
||||
const exam: ReadingExam = {
|
||||
parts: sections.map((s) => {
|
||||
const exercise = s.state as ReadingPart;
|
||||
return {
|
||||
...exercise,
|
||||
intro: localSettings.currentIntro,
|
||||
category: localSettings.category,
|
||||
};
|
||||
}),
|
||||
requiresApproval: requiresApproval,
|
||||
isDiagnostic: false,
|
||||
minTimer,
|
||||
module: "reading",
|
||||
id: title,
|
||||
variant: sections.length === 3 ? "full" : "partial",
|
||||
difficulty,
|
||||
access,
|
||||
type: type!,
|
||||
};
|
||||
|
||||
axios.post(`/api/exam/reading`, exam)
|
||||
.then((result) => {
|
||||
playSound("sent");
|
||||
// Successfully submitted exam
|
||||
if (result.status === 200) {
|
||||
toast.success(result.data.message);
|
||||
} else if (result.status === 207) {
|
||||
toast.warning(result.data.message);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
|
||||
})
|
||||
}
|
||||
axios
|
||||
.post(`/api/exam/reading`, exam)
|
||||
.then((result) => {
|
||||
playSound("sent");
|
||||
// Successfully submitted exam
|
||||
if (result.status === 200) {
|
||||
toast.success(result.data.message);
|
||||
} else if (result.status === 207) {
|
||||
toast.warning(result.data.message);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error(
|
||||
error.response.data.error ||
|
||||
"Something went wrong while submitting, please try again later."
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const preview = () => {
|
||||
setExam({
|
||||
parts: sections.map((s) => {
|
||||
const exercises = s.state as ReadingPart;
|
||||
return {
|
||||
...exercises,
|
||||
intro: s.settings.currentIntro,
|
||||
category: s.settings.category
|
||||
};
|
||||
}),
|
||||
minTimer,
|
||||
module: "reading",
|
||||
id: title,
|
||||
isDiagnostic: false,
|
||||
variant: undefined,
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
type: type!
|
||||
} as ReadingExam);
|
||||
setExerciseIndex(0);
|
||||
setQuestionIndex(0);
|
||||
setPartIndex(0);
|
||||
setBgColor("bg-white");
|
||||
openDetachedTab("popout?type=Exam&module=reading", router)
|
||||
}
|
||||
const preview = () => {
|
||||
setExam({
|
||||
parts: sections.map((s) => {
|
||||
const exercises = s.state as ReadingPart;
|
||||
return {
|
||||
...exercises,
|
||||
intro: s.settings.currentIntro,
|
||||
category: s.settings.category,
|
||||
};
|
||||
}),
|
||||
minTimer,
|
||||
module: "reading",
|
||||
id: title,
|
||||
isDiagnostic: false,
|
||||
variant: undefined,
|
||||
difficulty,
|
||||
access: access,
|
||||
type: type!,
|
||||
} as ReadingExam);
|
||||
setExerciseIndex(0);
|
||||
setQuestionIndex(0);
|
||||
setPartIndex(0);
|
||||
setBgColor("bg-white");
|
||||
openDetachedTab("popout?type=Exam&module=reading", router);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsEditor
|
||||
sectionLabel={`Passage ${focusedSection}`}
|
||||
sectionId={focusedSection}
|
||||
module="reading"
|
||||
introPresets={[defaultPresets[focusedSection - 1]]}
|
||||
preview={preview}
|
||||
canPreview={canPreviewOrSubmit}
|
||||
canSubmit={canPreviewOrSubmit}
|
||||
submitModule={submitReading}
|
||||
>
|
||||
<ReadingComponents
|
||||
{...{ localSettings, updateLocalAndScheduleGlobal, currentSection }}
|
||||
/>
|
||||
</SettingsEditor>
|
||||
);
|
||||
return (
|
||||
<SettingsEditor
|
||||
sectionLabel={`Passage ${focusedSection}`}
|
||||
sectionId={focusedSection}
|
||||
module="reading"
|
||||
introPresets={[defaultPresets[focusedSection - 1]]}
|
||||
preview={preview}
|
||||
canPreview={canPreviewOrSubmit}
|
||||
canSubmit={canPreviewOrSubmit}
|
||||
submitModule={submitReading}
|
||||
>
|
||||
<ReadingComponents
|
||||
{...{ localSettings, updateLocalAndScheduleGlobal, currentSection }}
|
||||
/>
|
||||
</SettingsEditor>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReadingSettings;
|
||||
|
||||
@@ -30,7 +30,7 @@ const SpeakingSettings: React.FC = () => {
|
||||
} = usePersistentExamStore();
|
||||
|
||||
const { title, currentModule } = useExamEditorStore();
|
||||
const { focusedSection, difficulty, sections, minTimer, isPrivate } = useExamEditorStore((store) => store.modules[currentModule])
|
||||
const { focusedSection, difficulty, sections, minTimer, access } = useExamEditorStore((store) => store.modules[currentModule])
|
||||
|
||||
const section = sections.find((section) => section.sectionId == focusedSection)?.state;
|
||||
|
||||
@@ -84,7 +84,7 @@ const SpeakingSettings: React.FC = () => {
|
||||
});
|
||||
})();
|
||||
|
||||
const submitSpeaking = async () => {
|
||||
const submitSpeaking = async (requiresApproval: boolean) => {
|
||||
if (title === "") {
|
||||
toast.error("Enter a title for the exam!");
|
||||
return;
|
||||
@@ -181,11 +181,12 @@ const SpeakingSettings: React.FC = () => {
|
||||
minTimer,
|
||||
module: "speaking",
|
||||
id: title,
|
||||
isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
|
||||
requiresApproval: requiresApproval,
|
||||
isDiagnostic: false,
|
||||
variant: undefined,
|
||||
difficulty,
|
||||
instructorGender: "varied",
|
||||
private: isPrivate,
|
||||
access,
|
||||
};
|
||||
|
||||
const result = await axios.post('/api/exam/speaking', exam);
|
||||
@@ -238,7 +239,7 @@ const SpeakingSettings: React.FC = () => {
|
||||
isDiagnostic: false,
|
||||
variant: undefined,
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
access,
|
||||
} as SpeakingExam);
|
||||
setExerciseIndex(0);
|
||||
setQuestionIndex(0);
|
||||
|
||||
@@ -23,7 +23,7 @@ const WritingSettings: React.FC = () => {
|
||||
const {
|
||||
minTimer,
|
||||
difficulty,
|
||||
isPrivate,
|
||||
access,
|
||||
sections,
|
||||
focusedSection,
|
||||
type,
|
||||
@@ -81,14 +81,14 @@ const WritingSettings: React.FC = () => {
|
||||
isDiagnostic: false,
|
||||
variant: undefined,
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
access,
|
||||
type: type!
|
||||
});
|
||||
setExerciseIndex(0);
|
||||
openDetachedTab("popout?type=Exam&module=writing", router)
|
||||
}
|
||||
|
||||
const submitWriting = async () => {
|
||||
const submitWriting = async (requiresApproval: boolean) => {
|
||||
if (title === "") {
|
||||
toast.error("Enter a title for the exam!");
|
||||
return;
|
||||
@@ -131,10 +131,11 @@ const WritingSettings: React.FC = () => {
|
||||
minTimer,
|
||||
module: "writing",
|
||||
id: title,
|
||||
isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
|
||||
requiresApproval: requiresApproval,
|
||||
isDiagnostic: false,
|
||||
variant: undefined,
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
access,
|
||||
type: type!
|
||||
};
|
||||
|
||||
|
||||
@@ -3,12 +3,12 @@ import SectionRenderer from "./SectionRenderer";
|
||||
import Checkbox from "../Low/Checkbox";
|
||||
import Input from "../Low/Input";
|
||||
import Select from "../Low/Select";
|
||||
import {capitalize} from "lodash";
|
||||
import {Difficulty} from "@/interfaces/exam";
|
||||
import {useCallback, useEffect, useMemo, useState} from "react";
|
||||
import {toast} from "react-toastify";
|
||||
import {ModuleState, SectionState} from "@/stores/examEditor/types";
|
||||
import {Module} from "@/interfaces";
|
||||
import { capitalize } from "lodash";
|
||||
import { AccessType, ACCESSTYPE, Difficulty } from "@/interfaces/exam";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { ModuleState, SectionState } from "@/stores/examEditor/types";
|
||||
import { Module } from "@/interfaces";
|
||||
import useExamEditorStore from "@/stores/examEditor";
|
||||
import WritingSettings from "./SettingsEditor/writing";
|
||||
import ReadingSettings from "./SettingsEditor/reading";
|
||||
@@ -16,243 +16,286 @@ import LevelSettings from "./SettingsEditor/level";
|
||||
import ListeningSettings from "./SettingsEditor/listening";
|
||||
import SpeakingSettings from "./SettingsEditor/speaking";
|
||||
import ImportOrStartFromScratch from "./ImportExam/ImportOrFromScratch";
|
||||
import {defaultSectionSettings} from "@/stores/examEditor/defaults";
|
||||
import { defaultSectionSettings } from "@/stores/examEditor/defaults";
|
||||
import Button from "../Low/Button";
|
||||
import ResetModule from "./Standalone/ResetModule";
|
||||
import ListeningInstructions from "./Standalone/ListeningInstructions";
|
||||
import {EntityWithRoles} from "@/interfaces/entity";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
|
||||
const DIFFICULTIES: Difficulty[] = ["A1", "A2", "B1", "B2", "C1", "C2"];
|
||||
|
||||
const ExamEditor: React.FC<{levelParts?: number; entitiesAllowEditPrivacy: EntityWithRoles[]}> = ({
|
||||
levelParts = 0,
|
||||
entitiesAllowEditPrivacy = [],
|
||||
}) => {
|
||||
const {currentModule, dispatch} = useExamEditorStore();
|
||||
const {sections, minTimer, expandedSections, examLabel, isPrivate, difficulty, sectionLabels, importModule} = useExamEditorStore(
|
||||
(state) => state.modules[currentModule],
|
||||
);
|
||||
const ExamEditor: React.FC<{
|
||||
levelParts?: number;
|
||||
entitiesAllowEditPrivacy: EntityWithRoles[];
|
||||
}> = ({ levelParts = 0, entitiesAllowEditPrivacy = [] }) => {
|
||||
const { currentModule, dispatch } = useExamEditorStore();
|
||||
const {
|
||||
sections,
|
||||
minTimer,
|
||||
expandedSections,
|
||||
examLabel,
|
||||
access,
|
||||
difficulty,
|
||||
sectionLabels,
|
||||
importModule,
|
||||
} = useExamEditorStore((state) => state.modules[currentModule]);
|
||||
|
||||
const [numberOfLevelParts, setNumberOfLevelParts] = useState(levelParts !== 0 ? levelParts : 1);
|
||||
const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
|
||||
const [numberOfLevelParts, setNumberOfLevelParts] = useState(
|
||||
levelParts !== 0 ? levelParts : 1
|
||||
);
|
||||
const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
|
||||
|
||||
// For exam edits
|
||||
useEffect(() => {
|
||||
if (levelParts !== 0) {
|
||||
setNumberOfLevelParts(levelParts);
|
||||
dispatch({
|
||||
type: "UPDATE_MODULE",
|
||||
payload: {
|
||||
updates: {
|
||||
sectionLabels: Array.from({length: levelParts}).map((_, i) => ({
|
||||
id: i + 1,
|
||||
label: `Part ${i + 1}`,
|
||||
})),
|
||||
},
|
||||
module: "level",
|
||||
},
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [levelParts]);
|
||||
// For exam edits
|
||||
useEffect(() => {
|
||||
if (levelParts !== 0) {
|
||||
setNumberOfLevelParts(levelParts);
|
||||
dispatch({
|
||||
type: "UPDATE_MODULE",
|
||||
payload: {
|
||||
updates: {
|
||||
sectionLabels: Array.from({ length: levelParts }).map((_, i) => ({
|
||||
id: i + 1,
|
||||
label: `Part ${i + 1}`,
|
||||
})),
|
||||
},
|
||||
module: "level",
|
||||
},
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [levelParts]);
|
||||
|
||||
useEffect(() => {
|
||||
const currentSections = sections;
|
||||
const currentLabels = sectionLabels;
|
||||
let updatedSections: SectionState[];
|
||||
let updatedLabels: any;
|
||||
if ((currentModule === "level" && currentSections.length !== currentLabels.length) || numberOfLevelParts !== currentSections.length) {
|
||||
const newSections = [...currentSections];
|
||||
const newLabels = [...currentLabels];
|
||||
for (let i = currentLabels.length; i < numberOfLevelParts; i++) {
|
||||
if (currentSections.length !== numberOfLevelParts) newSections.push(defaultSectionSettings(currentModule, i + 1));
|
||||
newLabels.push({
|
||||
id: i + 1,
|
||||
label: `Part ${i + 1}`,
|
||||
});
|
||||
}
|
||||
updatedSections = newSections;
|
||||
updatedLabels = newLabels;
|
||||
} else if (numberOfLevelParts < currentSections.length) {
|
||||
updatedSections = currentSections.slice(0, numberOfLevelParts);
|
||||
updatedLabels = currentLabels.slice(0, numberOfLevelParts);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
useEffect(() => {
|
||||
const currentSections = sections;
|
||||
const currentLabels = sectionLabels;
|
||||
let updatedSections: SectionState[];
|
||||
let updatedLabels: any;
|
||||
if (
|
||||
(currentModule === "level" &&
|
||||
currentSections.length !== currentLabels.length) ||
|
||||
numberOfLevelParts !== currentSections.length
|
||||
) {
|
||||
const newSections = [...currentSections];
|
||||
const newLabels = [...currentLabels];
|
||||
for (let i = currentLabels.length; i < numberOfLevelParts; i++) {
|
||||
if (currentSections.length !== numberOfLevelParts)
|
||||
newSections.push(defaultSectionSettings(currentModule, i + 1));
|
||||
newLabels.push({
|
||||
id: i + 1,
|
||||
label: `Part ${i + 1}`,
|
||||
});
|
||||
}
|
||||
updatedSections = newSections;
|
||||
updatedLabels = newLabels;
|
||||
} else if (numberOfLevelParts < currentSections.length) {
|
||||
updatedSections = currentSections.slice(0, numberOfLevelParts);
|
||||
updatedLabels = currentLabels.slice(0, numberOfLevelParts);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedExpandedSections = expandedSections.filter((sectionId) => updatedSections.some((section) => section.sectionId === sectionId));
|
||||
const updatedExpandedSections = expandedSections.filter((sectionId) =>
|
||||
updatedSections.some((section) => section.sectionId === sectionId)
|
||||
);
|
||||
|
||||
dispatch({
|
||||
type: "UPDATE_MODULE",
|
||||
payload: {
|
||||
updates: {
|
||||
sections: updatedSections,
|
||||
sectionLabels: updatedLabels,
|
||||
expandedSections: updatedExpandedSections,
|
||||
},
|
||||
},
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [numberOfLevelParts]);
|
||||
dispatch({
|
||||
type: "UPDATE_MODULE",
|
||||
payload: {
|
||||
updates: {
|
||||
sections: updatedSections,
|
||||
sectionLabels: updatedLabels,
|
||||
expandedSections: updatedExpandedSections,
|
||||
},
|
||||
},
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [numberOfLevelParts]);
|
||||
|
||||
const sectionIds = sections.map((section) => section.sectionId);
|
||||
const sectionIds = sections.map((section) => section.sectionId);
|
||||
|
||||
const updateModule = useCallback(
|
||||
(updates: Partial<ModuleState>) => {
|
||||
dispatch({type: "UPDATE_MODULE", payload: {updates}});
|
||||
},
|
||||
[dispatch],
|
||||
);
|
||||
const updateModule = useCallback(
|
||||
(updates: Partial<ModuleState>) => {
|
||||
dispatch({ type: "UPDATE_MODULE", payload: { updates } });
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const toggleSection = (sectionId: number) => {
|
||||
if (expandedSections.length === 1 && sectionIds.includes(sectionId)) {
|
||||
toast.error("Include at least one section!");
|
||||
return;
|
||||
}
|
||||
dispatch({type: "TOGGLE_SECTION", payload: {sectionId}});
|
||||
};
|
||||
const toggleSection = (sectionId: number) => {
|
||||
if (expandedSections.length === 1 && sectionIds.includes(sectionId)) {
|
||||
toast.error("Include at least one section!");
|
||||
return;
|
||||
}
|
||||
dispatch({ type: "TOGGLE_SECTION", payload: { sectionId } });
|
||||
};
|
||||
|
||||
const ModuleSettings: Record<Module, React.ComponentType> = {
|
||||
reading: ReadingSettings,
|
||||
writing: WritingSettings,
|
||||
speaking: SpeakingSettings,
|
||||
listening: ListeningSettings,
|
||||
level: LevelSettings,
|
||||
};
|
||||
const ModuleSettings: Record<Module, React.ComponentType> = {
|
||||
reading: ReadingSettings,
|
||||
writing: WritingSettings,
|
||||
speaking: SpeakingSettings,
|
||||
listening: ListeningSettings,
|
||||
level: LevelSettings,
|
||||
};
|
||||
|
||||
const Settings = ModuleSettings[currentModule];
|
||||
const showImport = importModule && ["reading", "listening", "level"].includes(currentModule);
|
||||
const Settings = ModuleSettings[currentModule];
|
||||
const showImport =
|
||||
importModule && ["reading", "listening", "level"].includes(currentModule);
|
||||
|
||||
const updateLevelParts = (parts: number) => {
|
||||
setNumberOfLevelParts(parts);
|
||||
};
|
||||
const updateLevelParts = (parts: number) => {
|
||||
setNumberOfLevelParts(parts);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showImport ? (
|
||||
<ImportOrStartFromScratch module={currentModule} setNumberOfLevelParts={updateLevelParts} />
|
||||
) : (
|
||||
<>
|
||||
{isResetModuleOpen && (
|
||||
<ResetModule
|
||||
module={currentModule}
|
||||
isOpen={isResetModuleOpen}
|
||||
setIsOpen={setIsResetModuleOpen}
|
||||
setNumberOfLevelParts={setNumberOfLevelParts}
|
||||
/>
|
||||
)}
|
||||
<div className="flex gap-4 w-full items-center -xl:flex-col">
|
||||
<div className="flex flex-row gap-3 w-full">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Timer</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="minTimer"
|
||||
onChange={(e) =>
|
||||
updateModule({
|
||||
minTimer: parseInt(e) < 15 ? 15 : parseInt(e),
|
||||
})
|
||||
}
|
||||
value={minTimer}
|
||||
className="max-w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 flex-grow">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
|
||||
<Select
|
||||
isMulti={true}
|
||||
options={DIFFICULTIES.map((x) => ({
|
||||
value: x,
|
||||
label: capitalize(x),
|
||||
}))}
|
||||
onChange={(values) => {
|
||||
const selectedDifficulties = values ? values.map((v) => v.value as Difficulty) : [];
|
||||
updateModule({difficulty: selectedDifficulties});
|
||||
}}
|
||||
value={
|
||||
difficulty
|
||||
? difficulty.map((d) => ({
|
||||
value: d,
|
||||
label: capitalize(d),
|
||||
}))
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{sectionLabels.length != 0 && currentModule !== "level" ? (
|
||||
<div className="flex flex-col gap-3 -xl:w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">{sectionLabels[0].label.split(" ")[0]}</label>
|
||||
<div className="flex flex-row gap-8">
|
||||
{sectionLabels.map(({id, label}) => (
|
||||
<span
|
||||
key={id}
|
||||
className={clsx(
|
||||
"px-6 py-4 w-48 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",
|
||||
sectionIds.includes(id)
|
||||
? `bg-ielts-${currentModule}/70 border-ielts-${currentModule} text-white`
|
||||
: "bg-white border-mti-gray-platinum",
|
||||
)}
|
||||
onClick={() => toggleSection(id)}>
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3 w-1/3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Number of Parts</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="Number of Parts"
|
||||
min={1}
|
||||
onChange={(v) => setNumberOfLevelParts(parseInt(v))}
|
||||
value={numberOfLevelParts}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-3 w-fit h-fit">
|
||||
<div className="h-6" />
|
||||
<Checkbox
|
||||
isChecked={isPrivate}
|
||||
onChange={(checked) => updateModule({isPrivate: checked})}
|
||||
disabled={entitiesAllowEditPrivacy.length === 0}>
|
||||
Privacy (Only available for Assignments)
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row gap-3 w-full">
|
||||
<div className="flex flex-col gap-3 flex-grow">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Exam Label *</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Exam Label"
|
||||
name="label"
|
||||
onChange={(text) => updateModule({examLabel: text})}
|
||||
roundness="xl"
|
||||
value={examLabel}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{currentModule === "listening" && <ListeningInstructions />}
|
||||
<Button
|
||||
onClick={() => setIsResetModuleOpen(true)}
|
||||
customColor={`bg-ielts-${currentModule}/70 hover:bg-ielts-${currentModule} border-ielts-${currentModule}`}
|
||||
className={`text-white self-end`}>
|
||||
Reset Module
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-row gap-8 -2xl:flex-col">
|
||||
<Settings />
|
||||
<div className="flex-grow max-w-[66%] -2xl:max-w-full">
|
||||
<SectionRenderer />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{showImport ? (
|
||||
<ImportOrStartFromScratch
|
||||
module={currentModule}
|
||||
setNumberOfLevelParts={updateLevelParts}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{isResetModuleOpen && (
|
||||
<ResetModule
|
||||
module={currentModule}
|
||||
isOpen={isResetModuleOpen}
|
||||
setIsOpen={setIsResetModuleOpen}
|
||||
setNumberOfLevelParts={setNumberOfLevelParts}
|
||||
/>
|
||||
)}
|
||||
<div className="flex gap-4 w-full items-center -xl:flex-col">
|
||||
<div className="flex flex-row gap-3 w-full">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">
|
||||
Timer
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="minTimer"
|
||||
onChange={(e) =>
|
||||
updateModule({
|
||||
minTimer: parseInt(e) < 15 ? 15 : parseInt(e),
|
||||
})
|
||||
}
|
||||
value={minTimer}
|
||||
className="max-w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 flex-grow">
|
||||
<label className="font-normal text-base text-mti-gray-dim">
|
||||
Difficulty
|
||||
</label>
|
||||
<Select
|
||||
isMulti={true}
|
||||
options={DIFFICULTIES.map((x) => ({
|
||||
value: x,
|
||||
label: capitalize(x),
|
||||
}))}
|
||||
onChange={(values) => {
|
||||
const selectedDifficulties = values
|
||||
? values.map((v) => v.value as Difficulty)
|
||||
: [];
|
||||
updateModule({ difficulty: selectedDifficulties });
|
||||
}}
|
||||
value={
|
||||
difficulty
|
||||
? (Array.isArray(difficulty)
|
||||
? difficulty
|
||||
: [difficulty]
|
||||
).map((d) => ({
|
||||
value: d,
|
||||
label: capitalize(d),
|
||||
}))
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{sectionLabels.length != 0 && currentModule !== "level" ? (
|
||||
<div className="flex flex-col gap-3 -xl:w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">
|
||||
{sectionLabels[0].label.split(" ")[0]}
|
||||
</label>
|
||||
<div className="flex flex-row gap-8">
|
||||
{sectionLabels.map(({ id, label }) => (
|
||||
<span
|
||||
key={id}
|
||||
className={clsx(
|
||||
"px-6 py-4 w-48 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",
|
||||
sectionIds.includes(id)
|
||||
? `bg-ielts-${currentModule}/70 border-ielts-${currentModule} text-white`
|
||||
: "bg-white border-mti-gray-platinum"
|
||||
)}
|
||||
onClick={() => toggleSection(id)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3 w-1/3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">
|
||||
Number of Parts
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="Number of Parts"
|
||||
min={1}
|
||||
onChange={(v) => setNumberOfLevelParts(parseInt(v))}
|
||||
value={numberOfLevelParts}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row gap-3 w-64">
|
||||
<Select
|
||||
label="Access Type"
|
||||
options={ACCESSTYPE.map((item) => ({
|
||||
value: item,
|
||||
label: capitalize(item),
|
||||
}))}
|
||||
onChange={(value) => {
|
||||
if (value?.value) {
|
||||
updateModule({ access: value.value! as AccessType });
|
||||
}
|
||||
}}
|
||||
value={{ value: access, label: capitalize(access) }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row gap-3 w-full">
|
||||
<div className="flex flex-col gap-3 flex-grow">
|
||||
<label className="font-normal text-base text-mti-gray-dim">
|
||||
Exam Label *
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Exam Label"
|
||||
name="label"
|
||||
onChange={(text) => updateModule({ examLabel: text })}
|
||||
roundness="xl"
|
||||
value={examLabel}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{currentModule === "listening" && <ListeningInstructions />}
|
||||
<Button
|
||||
onClick={() => setIsResetModuleOpen(true)}
|
||||
customColor={`bg-ielts-${currentModule}/70 hover:bg-ielts-${currentModule} border-ielts-${currentModule}`}
|
||||
className={`text-white self-end`}
|
||||
>
|
||||
Reset Module
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-row gap-8 -2xl:flex-col">
|
||||
<Settings />
|
||||
<div className="flex-grow max-w-[66%] -2xl:max-w-full">
|
||||
<SectionRenderer />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExamEditor;
|
||||
|
||||
@@ -149,10 +149,16 @@ export default function Table<T>({
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{isLoading && (
|
||||
{isLoading ? (
|
||||
<div className="min-h-screen flex justify-center items-start">
|
||||
<span className="loading loading-infinity w-32" />
|
||||
</div>
|
||||
) : (
|
||||
rows.length === 0 && (
|
||||
<div className="w-full flex justify-center items-start">
|
||||
<span className="text-xl text-gray-500">No data found...</span>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,7 +2,7 @@ import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
|
||||
import axios from "axios";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
export default function useApprovalWorkflows() {
|
||||
export default function useApprovalWorkflows(entitiesString?: string) {
|
||||
const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isError, setIsError] = useState(false);
|
||||
@@ -10,7 +10,7 @@ export default function useApprovalWorkflows() {
|
||||
const getData = useCallback(() => {
|
||||
setIsLoading(true);
|
||||
axios
|
||||
.get<ApprovalWorkflow[]>(`/api/approval-workflows`)
|
||||
.get<ApprovalWorkflow[]>(`/api/approval-workflows`, {params: { entityIds: entitiesString }})
|
||||
.then((response) => setWorkflows(response.data))
|
||||
.catch((error) => {
|
||||
setIsError(true);
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import {Exam} from "@/interfaces/exam";
|
||||
import { Exam } from "@/interfaces/exam";
|
||||
import axios from "axios";
|
||||
import {useEffect, useState} from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function useExams() {
|
||||
const [exams, setExams] = useState<Exam[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isError, setIsError] = useState(false);
|
||||
const [exams, setExams] = useState<Exam[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isError, setIsError] = useState(false);
|
||||
|
||||
const getData = () => {
|
||||
setIsLoading(true);
|
||||
axios
|
||||
.get<Exam[]>("/api/exam")
|
||||
.then((response) => setExams(response.data))
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
const getData = () => {
|
||||
setIsLoading(true);
|
||||
axios
|
||||
.get<Exam[]>(`/api/exam`)
|
||||
.then((response) => setExams(response.data))
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
useEffect(getData, []);
|
||||
useEffect(getData, []);
|
||||
|
||||
return {exams, isLoading, isError, reload: getData};
|
||||
return { exams, isLoading, isError, reload: getData };
|
||||
}
|
||||
|
||||
@@ -1,60 +1,141 @@
|
||||
import Button from "@/components/Low/Button";
|
||||
import {useMemo, useState} from "react";
|
||||
import {BiChevronLeft} from "react-icons/bi";
|
||||
import {BsChevronDoubleLeft, BsChevronDoubleRight, BsChevronLeft, BsChevronRight} from "react-icons/bs";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
BsChevronDoubleLeft,
|
||||
BsChevronDoubleRight,
|
||||
BsChevronLeft,
|
||||
BsChevronRight,
|
||||
} from "react-icons/bs";
|
||||
import Select from "../components/Low/Select";
|
||||
|
||||
export default function usePagination<T>(list: T[], size = 25) {
|
||||
const [page, setPage] = useState(0);
|
||||
const [page, setPage] = useState(0);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(size);
|
||||
|
||||
const items = useMemo(() => list.slice(page * size, (page + 1) * size), [page, size, list]);
|
||||
const items = useMemo(
|
||||
() => list.slice(page * itemsPerPage, (page + 1) * itemsPerPage),
|
||||
[list, page, itemsPerPage]
|
||||
);
|
||||
useEffect(() => {
|
||||
if (page * itemsPerPage >= list.length) setPage(0);
|
||||
}, [items, itemsPerPage, list.length, page]);
|
||||
|
||||
const render = () => (
|
||||
<div className="w-full flex gap-2 justify-between items-center">
|
||||
<div className="flex items-center gap-4 w-fit">
|
||||
<Button className="w-[200px] h-fit" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
|
||||
Previous Page
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 w-fit">
|
||||
<span className="opacity-80">
|
||||
{page * size + 1} - {(page + 1) * size > list.length ? list.length : (page + 1) * size} / {list.length}
|
||||
</span>
|
||||
<Button className="w-[200px]" disabled={(page + 1) * size >= list.length} onClick={() => setPage((prev) => prev + 1)}>
|
||||
Next Page
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const itemsPerPageOptions = [25, 50, 100, 200];
|
||||
|
||||
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>
|
||||
);
|
||||
const render = () => (
|
||||
<div className="w-full flex gap-2 justify-between items-center">
|
||||
<div className="flex items-center gap-4 w-fit">
|
||||
<Button
|
||||
className="w-[200px] h-fit"
|
||||
disabled={page === 0}
|
||||
onClick={() => setPage((prev) => prev - 1)}
|
||||
>
|
||||
Previous Page
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 w-fit">
|
||||
<div className="flex flex-row items-center gap-1 w-56">
|
||||
<Select
|
||||
value={{
|
||||
value: itemsPerPage.toString(),
|
||||
label: (itemsPerPage * page > items.length
|
||||
? items.length
|
||||
: itemsPerPage * page
|
||||
).toString(),
|
||||
}}
|
||||
onChange={(value) =>
|
||||
setItemsPerPage(parseInt(value!.value ?? "25"))
|
||||
}
|
||||
options={itemsPerPageOptions.map((size) => ({
|
||||
label: size.toString(),
|
||||
value: size.toString(),
|
||||
}))}
|
||||
isClearable={false}
|
||||
styles={{
|
||||
control: (styles) => ({ ...styles, width: "100px" }),
|
||||
container: (styles) => ({ ...styles, width: "100px" }),
|
||||
}}
|
||||
/>
|
||||
<span className="opacity-80 w-32 text-center">
|
||||
{page * itemsPerPage + 1} -{" "}
|
||||
{itemsPerPage * (page + 1) > list.length
|
||||
? list.length
|
||||
: itemsPerPage * (page + 1)}
|
||||
{list.length}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
className="w-[200px]"
|
||||
disabled={(page + 1) * itemsPerPage >= list.length}
|
||||
onClick={() => setPage((prev) => prev + 1)}
|
||||
>
|
||||
Next Page
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return {page, items, setPage, render, renderMinimal};
|
||||
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>
|
||||
<div className="flex flex-row items-center gap-1 w-56">
|
||||
<Select
|
||||
value={{
|
||||
value: itemsPerPage.toString(),
|
||||
label: itemsPerPage.toString(),
|
||||
}}
|
||||
onChange={(value) => setItemsPerPage(parseInt(value!.value ?? "25"))}
|
||||
options={itemsPerPageOptions.map((size) => ({
|
||||
label: size.toString(),
|
||||
value: size.toString(),
|
||||
}))}
|
||||
isClearable={false}
|
||||
styles={{
|
||||
control: (styles) => ({ ...styles, width: "100px" }),
|
||||
container: (styles) => ({ ...styles, width: "100px" }),
|
||||
}}
|
||||
/>
|
||||
<span className="opacity-80 w-32 text-center">
|
||||
{page * itemsPerPage + 1} -{" "}
|
||||
{itemsPerPage * (page + 1) > list.length
|
||||
? list.length
|
||||
: itemsPerPage * (page + 1)}
|
||||
/ {list.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<button
|
||||
disabled={(page + 1) * itemsPerPage >= list.length}
|
||||
onClick={() => setPage((prev) => prev + 1)}
|
||||
className="disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
>
|
||||
<BsChevronRight />
|
||||
</button>
|
||||
<button
|
||||
disabled={(page + 1) * itemsPerPage >= list.length}
|
||||
onClick={() => setPage(Math.floor(list.length / itemsPerPage))}
|
||||
className="disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
>
|
||||
<BsChevronDoubleRight />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return { page, items, setPage, render, renderMinimal };
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import instructions from "@/pages/api/exam/media/instructions";
|
||||
import { Module } from ".";
|
||||
|
||||
export type Exam = ReadingExam | ListeningExam | WritingExam | SpeakingExam | LevelExam;
|
||||
@@ -10,6 +9,9 @@ export type Difficulty = BasicDifficulty | CEFRLevels;
|
||||
// Left easy, medium and hard to support older exam versions
|
||||
export type BasicDifficulty = "easy" | "medium" | "hard";
|
||||
export type CEFRLevels = "A1" | "A2" | "B1" | "B2" | "C1" | "C2";
|
||||
export const ACCESSTYPE = ["public", "private", "confidential"] as const;
|
||||
export type AccessType = typeof ACCESSTYPE[number];
|
||||
|
||||
|
||||
|
||||
export interface ExamBase {
|
||||
@@ -24,8 +26,9 @@ export interface ExamBase {
|
||||
shuffle?: boolean;
|
||||
createdBy?: string; // option as it has been added later
|
||||
createdAt?: string; // option as it has been added later
|
||||
private?: boolean;
|
||||
access: AccessType;
|
||||
label?: string;
|
||||
requiresApproval?: boolean;
|
||||
}
|
||||
export interface ReadingExam extends ExamBase {
|
||||
module: "reading";
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { Module } from "@/interfaces";
|
||||
import { getApprovalWorkflowByFormIntaker, createApprovalWorkflow } from "@/utils/approval.workflows.be";
|
||||
import client from "@/lib/mongodb";
|
||||
|
||||
export async function createApprovalWorkflowsOnExamCreation(examAuthor: string, examEntities: string[], examId: string, examModule: string) {
|
||||
const db = client.db(process.env.MONGODB_DB);
|
||||
|
||||
/* export async function createApprovalWorkflowsOnExamCreation(examAuthor: string, examEntities: string[], examId: string, examModule: string) {
|
||||
const results = await Promise.all(
|
||||
examEntities.map(async (entity) => {
|
||||
const configuredWorkflow = await getApprovalWorkflowByFormIntaker(entity, examAuthor);
|
||||
@@ -27,6 +30,53 @@ export async function createApprovalWorkflowsOnExamCreation(examAuthor: string,
|
||||
const successCount = results.filter((r) => r.created).length;
|
||||
const totalCount = examEntities.length;
|
||||
|
||||
return {
|
||||
successCount,
|
||||
totalCount,
|
||||
};
|
||||
} */
|
||||
|
||||
// TEMPORARY BEHAVIOUR! ONLY THE FIRST CONFIGURED WORKFLOW FOUND IS STARTED
|
||||
export async function createApprovalWorkflowOnExamCreation(examAuthor: string, examEntities: string[], examId: string, examModule: string) {
|
||||
let successCount = 0;
|
||||
let totalCount = 0;
|
||||
|
||||
for (const entity of examEntities) {
|
||||
const configuredWorkflow = await getApprovalWorkflowByFormIntaker(entity, examAuthor);
|
||||
|
||||
if (!configuredWorkflow) {
|
||||
continue;
|
||||
}
|
||||
|
||||
totalCount = 1; // a workflow was found
|
||||
|
||||
configuredWorkflow.modules.push(examModule as Module);
|
||||
configuredWorkflow.name = examId;
|
||||
configuredWorkflow.examId = examId;
|
||||
configuredWorkflow.entityId = entity;
|
||||
configuredWorkflow.startDate = Date.now();
|
||||
configuredWorkflow.steps[0].completed = true;
|
||||
configuredWorkflow.steps[0].completedBy = examAuthor;
|
||||
configuredWorkflow.steps[0].completedDate = Date.now();
|
||||
|
||||
try {
|
||||
await createApprovalWorkflow("active-workflows", configuredWorkflow);
|
||||
successCount = 1;
|
||||
break; // Stop after the first success
|
||||
} catch (error: any) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// prettier-ignore
|
||||
if (totalCount === 0) { // current behaviour: if no workflow was found skip approval process
|
||||
await db.collection(examModule).updateOne(
|
||||
{ id: examId },
|
||||
{ $set: { id: examId, isDiagnostic: false }},
|
||||
{ upsert: true }
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
successCount,
|
||||
totalCount,
|
||||
|
||||
@@ -265,7 +265,7 @@ export default function CorporateGradingSystem({
|
||||
<>
|
||||
<Separator />
|
||||
<label className="font-normal text-base text-mti-gray-dim">
|
||||
Apply this grading system to other entities
|
||||
Copy this grading system to other entities
|
||||
</label>
|
||||
<Select
|
||||
options={entities.map((e) => ({ value: e.id, label: e.label }))}
|
||||
@@ -282,7 +282,7 @@ export default function CorporateGradingSystem({
|
||||
disabled={isLoading || otherEntities.length === 0}
|
||||
variant="outline"
|
||||
>
|
||||
Apply to {otherEntities.length} other entities
|
||||
Copy to {otherEntities.length} other entities
|
||||
</Button>
|
||||
<Separator />
|
||||
</>
|
||||
@@ -326,7 +326,7 @@ export default function CorporateGradingSystem({
|
||||
disabled={isLoading}
|
||||
className="mt-8"
|
||||
>
|
||||
Save Grading System
|
||||
Save Changes to entities
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -15,170 +15,210 @@ import { findBy, mapBy } from "@/utils";
|
||||
import useEntitiesCodes from "@/hooks/useEntitiesCodes";
|
||||
import Table from "@/components/High/Table";
|
||||
|
||||
type TableData = Code & { entity?: EntityWithRoles, creator?: User }
|
||||
type TableData = Code & { entity?: EntityWithRoles; creator?: User };
|
||||
const columnHelper = createColumnHelper<TableData>();
|
||||
|
||||
export default function CodeList({ user, entities, canDeleteCodes }
|
||||
: { user: User, entities: EntityWithRoles[], canDeleteCodes?: boolean }) {
|
||||
const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
|
||||
export default function CodeList({
|
||||
user,
|
||||
entities,
|
||||
canDeleteCodes,
|
||||
}: {
|
||||
user: User;
|
||||
entities: EntityWithRoles[];
|
||||
canDeleteCodes?: boolean;
|
||||
}) {
|
||||
const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
|
||||
|
||||
const entityIDs = useMemo(() => mapBy(entities, 'id'), [entities])
|
||||
const entityIDs = useMemo(() => mapBy(entities, "id"), [entities]);
|
||||
|
||||
const { users } = useUsers();
|
||||
const { codes, reload } = useEntitiesCodes(isAdmin(user) ? undefined : entityIDs)
|
||||
const { users } = useUsers();
|
||||
const { codes, reload, isLoading } = useEntitiesCodes(
|
||||
isAdmin(user) ? undefined : entityIDs
|
||||
);
|
||||
|
||||
const data: TableData[] = useMemo(() => codes.map((code) => ({
|
||||
...code,
|
||||
entity: findBy(entities, 'id', code.entity),
|
||||
creator: findBy(users, 'id', code.creator)
|
||||
})) as TableData[], [codes, entities, users])
|
||||
const data: TableData[] = useMemo(
|
||||
() =>
|
||||
codes.map((code) => ({
|
||||
...code,
|
||||
entity: findBy(entities, "id", code.entity),
|
||||
creator: findBy(users, "id", code.creator),
|
||||
})) as TableData[],
|
||||
[codes, entities, users]
|
||||
);
|
||||
|
||||
const toggleCode = (id: string) => {
|
||||
setSelectedCodes((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
|
||||
};
|
||||
const toggleCode = (id: string) => {
|
||||
setSelectedCodes((prev) =>
|
||||
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
|
||||
);
|
||||
};
|
||||
|
||||
// const toggleAllCodes = (checked: boolean) => {
|
||||
// if (checked) return setSelectedCodes(visibleRows.filter((x) => !x.userId).map((x) => x.code));
|
||||
// const toggleAllCodes = (checked: boolean) => {
|
||||
// if (checked) return setSelectedCodes(visibleRows.filter((x) => !x.userId).map((x) => x.code));
|
||||
|
||||
// return setSelectedCodes([]);
|
||||
// };
|
||||
// return setSelectedCodes([]);
|
||||
// };
|
||||
|
||||
const deleteCodes = async (codes: string[]) => {
|
||||
if (!canDeleteCodes) return
|
||||
if (!confirm(`Are you sure you want to delete these ${codes.length} code(s)?`)) return;
|
||||
const deleteCodes = async (codes: string[]) => {
|
||||
if (!canDeleteCodes) return;
|
||||
if (
|
||||
!confirm(`Are you sure you want to delete these ${codes.length} code(s)?`)
|
||||
)
|
||||
return;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
codes.forEach((code) => params.append("code", code));
|
||||
const params = new URLSearchParams();
|
||||
codes.forEach((code) => params.append("code", code));
|
||||
|
||||
axios
|
||||
.delete(`/api/code?${params.toString()}`)
|
||||
.then(() => {
|
||||
toast.success(`Deleted the codes!`);
|
||||
setSelectedCodes([]);
|
||||
})
|
||||
.catch((reason) => {
|
||||
if (reason.response.status === 404) {
|
||||
toast.error("Code not found!");
|
||||
return;
|
||||
}
|
||||
axios
|
||||
.delete(`/api/code?${params.toString()}`)
|
||||
.then(() => {
|
||||
toast.success(`Deleted the codes!`);
|
||||
setSelectedCodes([]);
|
||||
})
|
||||
.catch((reason) => {
|
||||
if (reason.response.status === 404) {
|
||||
toast.error("Code not found!");
|
||||
return;
|
||||
}
|
||||
|
||||
if (reason.response.status === 403) {
|
||||
toast.error("You do not have permission to delete this code!");
|
||||
return;
|
||||
}
|
||||
if (reason.response.status === 403) {
|
||||
toast.error("You do not have permission to delete this code!");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
|
||||
const deleteCode = async (code: Code) => {
|
||||
if (!canDeleteCodes) return
|
||||
if (!confirm(`Are you sure you want to delete this "${code.code}" code?`)) return;
|
||||
const deleteCode = async (code: Code) => {
|
||||
if (!canDeleteCodes) return;
|
||||
if (!confirm(`Are you sure you want to delete this "${code.code}" code?`))
|
||||
return;
|
||||
|
||||
axios
|
||||
.delete(`/api/code/${code.code}`)
|
||||
.then(() => toast.success(`Deleted the "${code.code}" exam`))
|
||||
.catch((reason) => {
|
||||
if (reason.response.status === 404) {
|
||||
toast.error("Code not found!");
|
||||
return;
|
||||
}
|
||||
axios
|
||||
.delete(`/api/code/${code.code}`)
|
||||
.then(() => toast.success(`Deleted the "${code.code}" exam`))
|
||||
.catch((reason) => {
|
||||
if (reason.response.status === 404) {
|
||||
toast.error("Code not found!");
|
||||
return;
|
||||
}
|
||||
|
||||
if (reason.response.status === 403) {
|
||||
toast.error("You do not have permission to delete this code!");
|
||||
return;
|
||||
}
|
||||
if (reason.response.status === 403) {
|
||||
toast.error("You do not have permission to delete this code!");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
|
||||
const defaultColumns = [
|
||||
columnHelper.accessor("code", {
|
||||
id: "codeCheckbox",
|
||||
enableSorting: false,
|
||||
header: () => (""),
|
||||
cell: (info) =>
|
||||
!info.row.original.userId ? (
|
||||
<Checkbox isChecked={selectedCodes.includes(info.getValue())} onChange={() => toggleCode(info.getValue())}>
|
||||
{""}
|
||||
</Checkbox>
|
||||
) : null,
|
||||
}),
|
||||
columnHelper.accessor("code", {
|
||||
header: "Code",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("creationDate", {
|
||||
header: "Creation Date",
|
||||
cell: (info) => (info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : "N/A"),
|
||||
}),
|
||||
columnHelper.accessor("email", {
|
||||
header: "E-mail",
|
||||
cell: (info) => info.getValue() || "N/A",
|
||||
}),
|
||||
columnHelper.accessor("creator", {
|
||||
header: "Creator",
|
||||
cell: (info) => info.getValue() ? `${info.getValue().name} (${USER_TYPE_LABELS[info.getValue().type]})` : "N/A",
|
||||
}),
|
||||
columnHelper.accessor("entity", {
|
||||
header: "Entity",
|
||||
cell: (info) => info.getValue()?.label || "N/A",
|
||||
}),
|
||||
columnHelper.accessor("userId", {
|
||||
header: "Availability",
|
||||
cell: (info) =>
|
||||
info.getValue() ? (
|
||||
<span className="flex gap-1 items-center text-mti-green">
|
||||
<div className="w-2 h-2 rounded-full bg-mti-green" /> In Use
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex gap-1 items-center text-mti-red">
|
||||
<div className="w-2 h-2 rounded-full bg-mti-red" /> Unused
|
||||
</span>
|
||||
),
|
||||
}),
|
||||
{
|
||||
header: "",
|
||||
id: "actions",
|
||||
cell: ({ row }: { row: { original: Code } }) => {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
{canDeleteCodes && !row.original.userId && (
|
||||
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteCode(row.original)}>
|
||||
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
const defaultColumns = [
|
||||
columnHelper.accessor("code", {
|
||||
id: "codeCheckbox",
|
||||
enableSorting: false,
|
||||
header: () => "",
|
||||
cell: (info) =>
|
||||
!info.row.original.userId ? (
|
||||
<Checkbox
|
||||
isChecked={selectedCodes.includes(info.getValue())}
|
||||
onChange={() => toggleCode(info.getValue())}
|
||||
>
|
||||
{""}
|
||||
</Checkbox>
|
||||
) : null,
|
||||
}),
|
||||
columnHelper.accessor("code", {
|
||||
header: "Code",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("creationDate", {
|
||||
header: "Creation Date",
|
||||
cell: (info) =>
|
||||
info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : "N/A",
|
||||
}),
|
||||
columnHelper.accessor("email", {
|
||||
header: "E-mail",
|
||||
cell: (info) => info.getValue() || "N/A",
|
||||
}),
|
||||
columnHelper.accessor("creator", {
|
||||
header: "Creator",
|
||||
cell: (info) =>
|
||||
info.getValue()
|
||||
? `${info.getValue().name} (${
|
||||
USER_TYPE_LABELS[info.getValue().type]
|
||||
})`
|
||||
: "N/A",
|
||||
}),
|
||||
columnHelper.accessor("entity", {
|
||||
header: "Entity",
|
||||
cell: (info) => info.getValue()?.label || "N/A",
|
||||
}),
|
||||
columnHelper.accessor("userId", {
|
||||
header: "Availability",
|
||||
cell: (info) =>
|
||||
info.getValue() ? (
|
||||
<span className="flex gap-1 items-center text-mti-green">
|
||||
<div className="w-2 h-2 rounded-full bg-mti-green" /> In Use
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex gap-1 items-center text-mti-red">
|
||||
<div className="w-2 h-2 rounded-full bg-mti-red" /> Unused
|
||||
</span>
|
||||
),
|
||||
}),
|
||||
{
|
||||
header: "",
|
||||
id: "actions",
|
||||
cell: ({ row }: { row: { original: Code } }) => {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
{canDeleteCodes && !row.original.userId && (
|
||||
<div
|
||||
data-tip="Delete"
|
||||
className="cursor-pointer tooltip"
|
||||
onClick={() => deleteCode(row.original)}
|
||||
>
|
||||
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between pb-4 pt-1">
|
||||
{canDeleteCodes && (
|
||||
<div className="flex gap-4 items-center w-full justify-end">
|
||||
<span>{selectedCodes.length} code(s) selected</span>
|
||||
<Button
|
||||
disabled={selectedCodes.length === 0}
|
||||
variant="outline"
|
||||
color="red"
|
||||
className="!py-1 px-10"
|
||||
onClick={() => deleteCodes(selectedCodes)}>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Table<TableData>
|
||||
data={data}
|
||||
columns={defaultColumns}
|
||||
searchFields={[["code"], ["email"], ["entity", "label"], ["creator", "name"], ['creator', 'type']]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between pb-4 pt-1">
|
||||
{canDeleteCodes && (
|
||||
<div className="flex gap-4 items-center w-full justify-end">
|
||||
<span>{selectedCodes.length} code(s) selected</span>
|
||||
<Button
|
||||
disabled={selectedCodes.length === 0}
|
||||
variant="outline"
|
||||
color="red"
|
||||
className="!py-1 px-10"
|
||||
onClick={() => deleteCodes(selectedCodes)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Table<TableData>
|
||||
data={data}
|
||||
columns={defaultColumns}
|
||||
isLoading={isLoading}
|
||||
searchFields={[
|
||||
["code"],
|
||||
["email"],
|
||||
["entity", "label"],
|
||||
["creator", "name"],
|
||||
["creator", "type"],
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,287 +1,394 @@
|
||||
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 {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 {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 { capitalize } from "lodash";
|
||||
import { useRouter } from "next/router";
|
||||
import { BsCheck, 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 useGroups from "@/hooks/useGroups";
|
||||
import { checkAccess, findAllowedEntities } from "@/utils/permissions";
|
||||
import Button from "@/components/Low/Button";
|
||||
import {EntityWithRoles} from "@/interfaces/entity";
|
||||
import {BiEdit} from "react-icons/bi";
|
||||
import {findBy, mapBy} from "@/utils";
|
||||
import {getUserName} from "@/utils/users";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { BiEdit } from "react-icons/bi";
|
||||
import { findBy, mapBy } from "@/utils";
|
||||
|
||||
const searchFields = [["module"], ["id"], ["createdBy"]];
|
||||
|
||||
const CLASSES: {[key in Module]: string} = {
|
||||
reading: "text-ielts-reading",
|
||||
listening: "text-ielts-listening",
|
||||
speaking: "text-ielts-speaking",
|
||||
writing: "text-ielts-writing",
|
||||
level: "text-ielts-level",
|
||||
const CLASSES: { [key in Module]: string } = {
|
||||
reading: "text-ielts-reading",
|
||||
listening: "text-ielts-listening",
|
||||
speaking: "text-ielts-speaking",
|
||||
writing: "text-ielts-writing",
|
||||
level: "text-ielts-level",
|
||||
};
|
||||
|
||||
const columnHelper = createColumnHelper<Exam>();
|
||||
|
||||
export default function ExamList({user, entities}: {user: User; entities: EntityWithRoles[]}) {
|
||||
const [selectedExam, setSelectedExam] = useState<Exam>();
|
||||
export default function ExamList({
|
||||
user,
|
||||
entities,
|
||||
}: {
|
||||
user: User;
|
||||
entities: EntityWithRoles[];
|
||||
}) {
|
||||
const [selectedExam, setSelectedExam] = useState<Exam>();
|
||||
|
||||
const {exams, reload} = useExams();
|
||||
const {users} = useUsers();
|
||||
const canViewConfidentialEntities = useMemo(
|
||||
() =>
|
||||
mapBy(
|
||||
findAllowedEntities(user, entities, "view_confidential_exams"),
|
||||
"id"
|
||||
),
|
||||
[user, entities]
|
||||
);
|
||||
|
||||
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 { exams, reload, isLoading } = useExams();
|
||||
const { users } = useUsers();
|
||||
// Pass this permission filter to the backend later
|
||||
const filteredExams = useMemo(
|
||||
() =>
|
||||
["admin", "developer"].includes(user?.type)
|
||||
? exams
|
||||
: exams.filter((item) => {
|
||||
if (
|
||||
item.access === "confidential" &&
|
||||
!canViewConfidentialEntities.find((x) =>
|
||||
(item.entities ?? []).includes(x)
|
||||
)
|
||||
)
|
||||
return false;
|
||||
return true;
|
||||
}),
|
||||
[canViewConfidentialEntities, exams, user?.type]
|
||||
);
|
||||
|
||||
const parsedExams = useMemo(() => {
|
||||
return filteredExams.map((exam) => {
|
||||
if (exam.createdBy) {
|
||||
const user = users.find((u) => u.id === exam.createdBy);
|
||||
if (!user) return exam;
|
||||
const parsedExams = useMemo(() => {
|
||||
return filteredExams.map((exam) => {
|
||||
if (exam.createdBy) {
|
||||
const user = users.find((u) => u.id === exam.createdBy);
|
||||
if (!user) return exam;
|
||||
|
||||
return {
|
||||
...exam,
|
||||
createdBy: user.type === "developer" ? "system" : user.name,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...exam,
|
||||
createdBy: user.type === "developer" ? "system" : user.name,
|
||||
};
|
||||
}
|
||||
|
||||
return exam;
|
||||
});
|
||||
}, [filteredExams, users]);
|
||||
return exam;
|
||||
});
|
||||
}, [filteredExams, users]);
|
||||
|
||||
const {rows: filteredRows, renderSearch} = useListSearch<Exam>(searchFields, parsedExams);
|
||||
const { rows: filteredRows, renderSearch } = useListSearch<Exam>(
|
||||
searchFields,
|
||||
parsedExams
|
||||
);
|
||||
|
||||
const dispatch = useExamStore((state) => state.dispatch);
|
||||
const dispatch = useExamStore((state) => state.dispatch);
|
||||
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
const loadExam = async (module: Module, examId: string) => {
|
||||
const exam = await getExamById(module, examId.trim());
|
||||
if (!exam) {
|
||||
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
|
||||
toastId: "invalid-exam-id",
|
||||
});
|
||||
const loadExam = async (module: Module, examId: string) => {
|
||||
const exam = await getExamById(module, examId.trim());
|
||||
if (!exam) {
|
||||
toast.error(
|
||||
"Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
|
||||
{
|
||||
toastId: "invalid-exam-id",
|
||||
}
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
dispatch({type: "INIT_EXAM", payload: {exams: [exam], modules: [module]}});
|
||||
return;
|
||||
}
|
||||
dispatch({
|
||||
type: "INIT_EXAM",
|
||||
payload: { exams: [exam], modules: [module] },
|
||||
});
|
||||
|
||||
router.push("/exam");
|
||||
};
|
||||
router.push("/exam");
|
||||
};
|
||||
|
||||
const privatizeExam = async (exam: Exam) => {
|
||||
if (!confirm(`Are you sure you want to make this ${capitalize(exam.module)} exam ${exam.private ? "public" : "private"}?`)) return;
|
||||
/*
|
||||
const privatizeExam = async (exam: Exam) => {
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure you want to make this ${capitalize(exam.module)} exam ${
|
||||
exam.access
|
||||
}?`
|
||||
)
|
||||
)
|
||||
return;
|
||||
|
||||
axios
|
||||
.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) {
|
||||
toast.error("Exam not found!");
|
||||
return;
|
||||
}
|
||||
axios
|
||||
.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) {
|
||||
toast.error("Exam not found!");
|
||||
return;
|
||||
}
|
||||
|
||||
if (reason.response.status === 403) {
|
||||
toast.error("You do not have permission to update this exam!");
|
||||
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);
|
||||
};
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
*/
|
||||
|
||||
const deleteExam = async (exam: Exam) => {
|
||||
if (!confirm(`Are you sure you want to delete this ${capitalize(exam.module)} exam?`)) return;
|
||||
const deleteExam = async (exam: Exam) => {
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure you want to delete this ${capitalize(exam.module)} exam?`
|
||||
)
|
||||
)
|
||||
return;
|
||||
|
||||
axios
|
||||
.delete(`/api/exam/${exam.module}/${exam.id}`)
|
||||
.then(() => toast.success(`Deleted the "${exam.id}" exam`))
|
||||
.catch((reason) => {
|
||||
if (reason.response.status === 404) {
|
||||
toast.error("Exam not found!");
|
||||
return;
|
||||
}
|
||||
axios
|
||||
.delete(`/api/exam/${exam.module}/${exam.id}`)
|
||||
.then(() => toast.success(`Deleted 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 delete this exam!");
|
||||
return;
|
||||
}
|
||||
if (reason.response.status === 403) {
|
||||
toast.error("You do not have permission to delete this exam!");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
toast.error("Something went wrong, please try again later.");
|
||||
})
|
||||
.finally(reload);
|
||||
};
|
||||
|
||||
const getTotalExercises = (exam: Exam) => {
|
||||
if (exam.module === "reading" || exam.module === "listening" || exam.module === "level") {
|
||||
return countExercises(exam.parts.flatMap((x) => x.exercises));
|
||||
}
|
||||
const getTotalExercises = (exam: Exam) => {
|
||||
if (
|
||||
exam.module === "reading" ||
|
||||
exam.module === "listening" ||
|
||||
exam.module === "level"
|
||||
) {
|
||||
return countExercises((exam.parts ?? []).flatMap((x) => x.exercises));
|
||||
}
|
||||
|
||||
return countExercises(exam.exercises);
|
||||
};
|
||||
return countExercises(exam.exercises);
|
||||
};
|
||||
|
||||
const defaultColumns = [
|
||||
columnHelper.accessor("id", {
|
||||
header: "ID",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("module", {
|
||||
header: "Module",
|
||||
cell: (info) => <span className={CLASSES[info.getValue()]}>{capitalize(info.getValue())}</span>,
|
||||
}),
|
||||
columnHelper.accessor((x) => getTotalExercises(x), {
|
||||
header: "Exercises",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("minTimer", {
|
||||
header: "Timer",
|
||||
cell: (info) => <>{info.getValue()} minute(s)</>,
|
||||
}),
|
||||
columnHelper.accessor("private", {
|
||||
header: "Private",
|
||||
cell: (info) => <span className="w-full flex items-center justify-center">{!info.getValue() ? <BsX /> : <BsCheck />}</span>,
|
||||
}),
|
||||
columnHelper.accessor("createdAt", {
|
||||
header: "Created At",
|
||||
cell: (info) => {
|
||||
const value = info.getValue();
|
||||
if (value) {
|
||||
return new Date(value).toLocaleDateString();
|
||||
}
|
||||
const defaultColumns = [
|
||||
columnHelper.accessor("id", {
|
||||
header: "ID",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("module", {
|
||||
header: "Module",
|
||||
cell: (info) => (
|
||||
<span className={CLASSES[info.getValue()]}>
|
||||
{capitalize(info.getValue())}
|
||||
</span>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor((x) => getTotalExercises(x), {
|
||||
header: "Exercises",
|
||||
cell: (info) => info.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("minTimer", {
|
||||
header: "Timer",
|
||||
cell: (info) => <>{info.getValue()} minute(s)</>,
|
||||
}),
|
||||
columnHelper.accessor("access", {
|
||||
header: "Access",
|
||||
cell: (info) => <span>{capitalize(info.getValue())}</span>,
|
||||
}),
|
||||
columnHelper.accessor("createdAt", {
|
||||
header: "Created At",
|
||||
cell: (info) => {
|
||||
const value = info.getValue();
|
||||
if (value) {
|
||||
return new Date(value).toLocaleDateString();
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("createdBy", {
|
||||
header: "Created By",
|
||||
cell: (info) => (!info.getValue() ? "System" : findBy(users, "id", info.getValue())?.name || "N/A"),
|
||||
}),
|
||||
{
|
||||
header: "",
|
||||
id: "actions",
|
||||
cell: ({row}: {row: {original: Exam}}) => {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
{(row.original.owners?.includes(user.id) || checkAccess(user, ["admin", "developer"])) && (
|
||||
<>
|
||||
<button
|
||||
data-tip={row.original.private ? "Set as public" : "Set as private"}
|
||||
onClick={async () => await privatizeExam(row.original)}
|
||||
className="cursor-pointer tooltip">
|
||||
{row.original.private ? <BsCircle /> : <BsBan />}
|
||||
</button>
|
||||
{checkAccess(user, ["admin", "developer", "mastercorporate"]) && (
|
||||
<button data-tip="Edit exam" onClick={() => setSelectedExam(row.original)} className="cursor-pointer tooltip">
|
||||
<BsPencil />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
data-tip="Load exam"
|
||||
className="cursor-pointer tooltip"
|
||||
onClick={async () => await loadExam(row.original.module, row.original.id)}>
|
||||
<BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</button>
|
||||
{PERMISSIONS.examManagement.delete.includes(user.type) && (
|
||||
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteExam(row.original)}>
|
||||
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
return null;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("createdBy", {
|
||||
header: "Created By",
|
||||
cell: (info) =>
|
||||
!info.getValue()
|
||||
? "System"
|
||||
: findBy(users, "id", info.getValue())?.name || "N/A",
|
||||
}),
|
||||
{
|
||||
header: "",
|
||||
id: "actions",
|
||||
cell: ({ row }: { row: { original: Exam } }) => {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
{(row.original.owners?.includes(user.id) ||
|
||||
checkAccess(user, ["admin", "developer"])) && (
|
||||
<>
|
||||
{checkAccess(user, [
|
||||
"admin",
|
||||
"developer",
|
||||
"mastercorporate",
|
||||
]) && (
|
||||
<button
|
||||
data-tip="Edit exam"
|
||||
onClick={() => setSelectedExam(row.original)}
|
||||
className="cursor-pointer tooltip"
|
||||
>
|
||||
<BsPencil />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
data-tip="Load exam"
|
||||
className="cursor-pointer tooltip"
|
||||
onClick={async () =>
|
||||
await loadExam(row.original.module, row.original.id)
|
||||
}
|
||||
>
|
||||
<BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</button>
|
||||
{PERMISSIONS.examManagement.delete.includes(user.type) && (
|
||||
<div
|
||||
data-tip="Delete"
|
||||
className="cursor-pointer tooltip"
|
||||
onClick={() => deleteExam(row.original)}
|
||||
>
|
||||
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const table = useReactTable({
|
||||
data: filteredRows,
|
||||
columns: defaultColumns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
const table = useReactTable({
|
||||
data: filteredRows,
|
||||
columns: defaultColumns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
|
||||
const handleExamEdit = () => {
|
||||
router.push(`/generation?id=${selectedExam!.id}&module=${selectedExam!.module}`);
|
||||
};
|
||||
const handleExamEdit = () => {
|
||||
router.push(
|
||||
`/generation?id=${selectedExam!.id}&module=${selectedExam!.module}`
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 w-full h-full">
|
||||
{renderSearch()}
|
||||
<Modal isOpen={!!selectedExam} onClose={() => setSelectedExam(undefined)} maxWidth="max-w-xl">
|
||||
{!!selectedExam ? (
|
||||
<>
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<BiEdit className="w-5 h-5 text-gray-600" />
|
||||
<span className="text-gray-600 font-medium">Ready to Edit</span>
|
||||
</div>
|
||||
return (
|
||||
<div className="flex flex-col gap-4 w-full h-full">
|
||||
{renderSearch()}
|
||||
<Modal
|
||||
isOpen={!!selectedExam}
|
||||
onClose={() => setSelectedExam(undefined)}
|
||||
maxWidth="max-w-xl"
|
||||
>
|
||||
{!!selectedExam ? (
|
||||
<>
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<BiEdit className="w-5 h-5 text-gray-600" />
|
||||
<span className="text-gray-600 font-medium">
|
||||
Ready to Edit
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-3">
|
||||
<p className="font-medium mb-1">Exam ID: {selectedExam.id}</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-3">
|
||||
<p className="font-medium mb-1">Exam ID: {selectedExam.id}</p>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-500 text-sm">Click 'Next' to proceed to the exam editor.</p>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm">
|
||||
Click 'Next' 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">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button color="purple" onClick={handleExamEdit} className="w-32 text-white flex items-center justify-center gap-2">
|
||||
Proceed
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/*<ExamOwnerSelector options={filteredCorporates} exam={selectedExam} onSave={(owners) => updateExam(selectedExam, { owners })} />*/}
|
||||
</>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</Modal>
|
||||
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th className="p-4 text-left" key={header.id}>
|
||||
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="px-2">
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td className="px-4 py-2" key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
<div className="flex justify-between gap-4 mt-8">
|
||||
<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"
|
||||
>
|
||||
Proceed
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/*<ExamOwnerSelector options={filteredCorporates} exam={selectedExam} onSave={(owners) => updateExam(selectedExam, { owners })} />*/}
|
||||
</>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</Modal>
|
||||
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th className="p-4 text-left" key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="px-2">
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<tr
|
||||
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
|
||||
key={row.id}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td className="px-4 py-2" key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{isLoading ? (
|
||||
<div className="min-h-screen flex justify-center items-start">
|
||||
<span className="loading loading-infinity w-32" />
|
||||
</div>
|
||||
) : (
|
||||
filteredRows.length === 0 && (
|
||||
<div className="w-full flex justify-center items-start">
|
||||
<span className="text-xl text-gray-500">No data found...</span>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -22,8 +22,6 @@ import useFilterStore from "@/stores/listFilterStore";
|
||||
import { useRouter } from "next/router";
|
||||
import { mapBy } from "@/utils";
|
||||
import { exportListToExcel } from "@/utils/users";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import useUserBalance from "@/hooks/useUserBalance";
|
||||
import useEntitiesUsers from "@/hooks/useEntitiesUsers";
|
||||
import { WithLabeledEntities } from "@/interfaces/entity";
|
||||
import Table from "@/components/High/Table";
|
||||
@@ -494,21 +492,19 @@ export default function UserList({
|
||||
},
|
||||
];
|
||||
|
||||
const downloadExcel = (rows: WithLabeledEntities<User>[]) => {
|
||||
const downloadExcel = async (rows: WithLabeledEntities<User>[]) => {
|
||||
if (entitiesDownloadUsers.length === 0)
|
||||
return toast.error("You are not allowed to download the user list.");
|
||||
|
||||
const allowedRows = rows.filter((r) =>
|
||||
mapBy(r.entities, "id").some((e) =>
|
||||
mapBy(entitiesDownloadUsers, "id").includes(e)
|
||||
)
|
||||
);
|
||||
const csv = exportListToExcel(allowedRows);
|
||||
const allowedRows = rows;
|
||||
const csv = await exportListToExcel(allowedRows);
|
||||
|
||||
const element = document.createElement("a");
|
||||
const file = new Blob([csv], { type: "text/csv" });
|
||||
const file = new Blob([csv], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
});
|
||||
element.href = URL.createObjectURL(file);
|
||||
element.download = "users.csv";
|
||||
element.download = "users.xlsx";
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
|
||||
@@ -4,7 +4,6 @@ import clsx from "clsx";
|
||||
import CodeList from "./CodeList";
|
||||
import DiscountList from "./DiscountList";
|
||||
import ExamList from "./ExamList";
|
||||
import GroupList from "./GroupList";
|
||||
import PackageList from "./PackageList";
|
||||
import UserList from "./UserList";
|
||||
import { checkAccess } from "@/utils/permissions";
|
||||
|
||||
@@ -1,273 +1,272 @@
|
||||
import Button from "@/components/Low/Button";
|
||||
import Checkbox from "@/components/Low/Checkbox";
|
||||
import { PERMISSIONS } from "@/constants/userPermissions";
|
||||
import { CorporateUser, TeacherUser, Type, User } from "@/interfaces/user";
|
||||
import { USER_TYPE_LABELS } from "@/resources/user";
|
||||
import {PERMISSIONS} from "@/constants/userPermissions";
|
||||
import {CorporateUser, TeacherUser, Type, User} from "@/interfaces/user";
|
||||
import {USER_TYPE_LABELS} from "@/resources/user";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import { capitalize, uniqBy } from "lodash";
|
||||
import {capitalize, uniqBy} from "lodash";
|
||||
import moment from "moment";
|
||||
import { useEffect, useState } from "react";
|
||||
import {useEffect, useState} from "react";
|
||||
import ReactDatePicker from "react-datepicker";
|
||||
import { toast } from "react-toastify";
|
||||
import {toast} from "react-toastify";
|
||||
import ShortUniqueId from "short-unique-id";
|
||||
import { checkAccess, getTypesOfUser } from "@/utils/permissions";
|
||||
import { PermissionType } from "@/interfaces/permissions";
|
||||
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
|
||||
import {PermissionType} from "@/interfaces/permissions";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import Input from "@/components/Low/Input";
|
||||
import CountrySelect from "@/components/Low/CountrySelect";
|
||||
import useGroups from "@/hooks/useGroups";
|
||||
import useUsers from "@/hooks/useUsers";
|
||||
import { getUserName } from "@/utils/users";
|
||||
import {getUserName} from "@/utils/users";
|
||||
import Select from "@/components/Low/Select";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import {EntityWithRoles} from "@/interfaces/entity";
|
||||
import useEntitiesGroups from "@/hooks/useEntitiesGroups";
|
||||
import {mapBy} from "@/utils";
|
||||
|
||||
const USER_TYPE_PERMISSIONS: {
|
||||
[key in Type]: { perm: PermissionType | undefined; list: Type[] };
|
||||
[key in Type]: {perm: PermissionType | undefined; list: Type[]};
|
||||
} = {
|
||||
student: {
|
||||
perm: "createCodeStudent",
|
||||
list: [],
|
||||
},
|
||||
teacher: {
|
||||
perm: "createCodeTeacher",
|
||||
list: [],
|
||||
},
|
||||
agent: {
|
||||
perm: "createCodeCountryManager",
|
||||
list: ["student", "teacher", "corporate", "mastercorporate"],
|
||||
},
|
||||
corporate: {
|
||||
perm: "createCodeCorporate",
|
||||
list: ["student", "teacher"],
|
||||
},
|
||||
mastercorporate: {
|
||||
perm: undefined,
|
||||
list: ["student", "teacher", "corporate"],
|
||||
},
|
||||
admin: {
|
||||
perm: "createCodeAdmin",
|
||||
list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
|
||||
},
|
||||
developer: {
|
||||
perm: undefined,
|
||||
list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
|
||||
},
|
||||
student: {
|
||||
perm: "createCodeStudent",
|
||||
list: [],
|
||||
},
|
||||
teacher: {
|
||||
perm: "createCodeTeacher",
|
||||
list: [],
|
||||
},
|
||||
agent: {
|
||||
perm: "createCodeCountryManager",
|
||||
list: ["student", "teacher", "corporate", "mastercorporate"],
|
||||
},
|
||||
corporate: {
|
||||
perm: "createCodeCorporate",
|
||||
list: ["student", "teacher"],
|
||||
},
|
||||
mastercorporate: {
|
||||
perm: undefined,
|
||||
list: ["student", "teacher", "corporate"],
|
||||
},
|
||||
admin: {
|
||||
perm: "createCodeAdmin",
|
||||
list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
|
||||
},
|
||||
developer: {
|
||||
perm: undefined,
|
||||
list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
|
||||
},
|
||||
};
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
users: User[];
|
||||
entities: EntityWithRoles[]
|
||||
permissions: PermissionType[];
|
||||
onFinish: () => void;
|
||||
user: User;
|
||||
users: User[];
|
||||
entities: EntityWithRoles[];
|
||||
permissions: PermissionType[];
|
||||
onFinish: () => void;
|
||||
}
|
||||
|
||||
export default function UserCreator({ user, users, entities = [], permissions, onFinish }: Props) {
|
||||
const [name, setName] = useState<string>();
|
||||
const [email, setEmail] = useState<string>();
|
||||
const [phone, setPhone] = useState<string>();
|
||||
const [passportID, setPassportID] = useState<string>();
|
||||
const [studentID, setStudentID] = useState<string>();
|
||||
const [country, setCountry] = useState(user?.demographicInformation?.country);
|
||||
const [group, setGroup] = useState<string | null>();
|
||||
const [password, setPassword] = useState<string>();
|
||||
const [confirmPassword, setConfirmPassword] = useState<string>();
|
||||
const [expiryDate, setExpiryDate] = useState<Date | null>(
|
||||
user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null,
|
||||
);
|
||||
const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [type, setType] = useState<Type>("student");
|
||||
const [position, setPosition] = useState<string>();
|
||||
const [entity, setEntity] = useState((entities || [])[0]?.id || undefined)
|
||||
export default function UserCreator({user, users, entities = [], permissions, onFinish}: Props) {
|
||||
const [name, setName] = useState<string>();
|
||||
const [email, setEmail] = useState<string>();
|
||||
const [phone, setPhone] = useState<string>();
|
||||
const [passportID, setPassportID] = useState<string>();
|
||||
const [studentID, setStudentID] = useState<string>();
|
||||
const [country, setCountry] = useState(user?.demographicInformation?.country);
|
||||
const [group, setGroup] = useState<string | null>();
|
||||
const [password, setPassword] = useState<string>();
|
||||
const [confirmPassword, setConfirmPassword] = useState<string>();
|
||||
const [expiryDate, setExpiryDate] = useState<Date | null>(
|
||||
user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null,
|
||||
);
|
||||
const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [type, setType] = useState<Type>("student");
|
||||
const [position, setPosition] = useState<string>();
|
||||
const [entity, setEntity] = useState((entities || [])[0]?.id || undefined);
|
||||
|
||||
const { groups } = useEntitiesGroups();
|
||||
const {groups} = useEntitiesGroups();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isExpiryDateEnabled) setExpiryDate(null);
|
||||
}, [isExpiryDateEnabled]);
|
||||
useEffect(() => {
|
||||
if (!isExpiryDateEnabled) setExpiryDate(null);
|
||||
}, [isExpiryDateEnabled]);
|
||||
|
||||
const createUser = () => {
|
||||
if (!name || name.trim().length === 0) return toast.error("Please enter a valid name!");
|
||||
if (!email || email.trim().length === 0) return toast.error("Please enter a valid e-mail address!");
|
||||
if (users.map((x) => x.email).includes(email.trim())) return toast.error("That e-mail is already in use!");
|
||||
if (!password || password.trim().length < 6) return toast.error("Please enter a valid password!");
|
||||
if (password !== confirmPassword) return toast.error("The passwords do not match!");
|
||||
const createUser = () => {
|
||||
if (!name || name.trim().length === 0) return toast.error("Please enter a valid name!");
|
||||
if (!email || email.trim().length === 0) return toast.error("Please enter a valid e-mail address!");
|
||||
if (users.map((x) => x.email).includes(email.trim())) return toast.error("That e-mail is already in use!");
|
||||
if (!password || password.trim().length < 6) return toast.error("Please enter a valid password!");
|
||||
if (password !== confirmPassword) return toast.error("The passwords do not match!");
|
||||
|
||||
setIsLoading(true);
|
||||
setIsLoading(true);
|
||||
|
||||
const body = {
|
||||
name,
|
||||
email,
|
||||
password,
|
||||
groupID: group,
|
||||
entity,
|
||||
type,
|
||||
studentID: type === "student" ? studentID : undefined,
|
||||
expiryDate,
|
||||
demographicInformation: {
|
||||
passport_id: type === "student" ? passportID : undefined,
|
||||
phone,
|
||||
country,
|
||||
position,
|
||||
},
|
||||
};
|
||||
const body = {
|
||||
name,
|
||||
email,
|
||||
password,
|
||||
groupID: group,
|
||||
entity,
|
||||
type,
|
||||
studentID: type === "student" ? studentID : undefined,
|
||||
expiryDate,
|
||||
demographicInformation: {
|
||||
passport_id: type === "student" ? passportID : undefined,
|
||||
phone,
|
||||
country,
|
||||
position,
|
||||
},
|
||||
};
|
||||
|
||||
axios
|
||||
.post("/api/make_user", body)
|
||||
.then(() => {
|
||||
toast.success("That user has been created!");
|
||||
onFinish();
|
||||
axios
|
||||
.post("/api/make_user", body)
|
||||
.then(() => {
|
||||
toast.success("That user has been created!");
|
||||
onFinish();
|
||||
|
||||
setName("");
|
||||
setEmail("");
|
||||
setPhone("");
|
||||
setPassportID("");
|
||||
setStudentID("");
|
||||
setCountry(user?.demographicInformation?.country);
|
||||
setGroup(null);
|
||||
setEntity((entities || [])[0]?.id || undefined)
|
||||
setExpiryDate(user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null);
|
||||
setIsExpiryDateEnabled(true);
|
||||
setType("student");
|
||||
setPosition(undefined);
|
||||
})
|
||||
.catch((error) => {
|
||||
const data = error?.response?.data;
|
||||
if (!!data?.message) return toast.error(data.message);
|
||||
toast.error("Something went wrong! Please try again later!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
setName("");
|
||||
setEmail("");
|
||||
setPhone("");
|
||||
setPassportID("");
|
||||
setStudentID("");
|
||||
setCountry(user?.demographicInformation?.country);
|
||||
setGroup(null);
|
||||
setEntity((entities || [])[0]?.id || undefined);
|
||||
setExpiryDate(user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null);
|
||||
setIsExpiryDateEnabled(true);
|
||||
setType("student");
|
||||
setPosition(undefined);
|
||||
})
|
||||
.catch((error) => {
|
||||
const data = error?.response?.data;
|
||||
if (!!data?.message) return toast.error(data.message);
|
||||
toast.error("Something went wrong! Please try again later!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input required label="Name" value={name} onChange={setName} type="text" name="name" placeholder="Name" />
|
||||
<Input label="E-mail" required value={email} onChange={setEmail} type="email" name="email" placeholder="E-mail" />
|
||||
return (
|
||||
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input required label="Name" value={name} onChange={setName} type="text" name="name" placeholder="Name" />
|
||||
<Input label="E-mail" required value={email} onChange={setEmail} type="email" name="email" placeholder="E-mail" />
|
||||
|
||||
<Input type="password" name="password" label="Password" value={password} onChange={setPassword} placeholder="Password" required />
|
||||
<Input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
label="Confirm Password"
|
||||
value={confirmPassword}
|
||||
onChange={setConfirmPassword}
|
||||
placeholder="ConfirmPassword"
|
||||
required
|
||||
/>
|
||||
<Input type="password" name="password" label="Password" value={password} onChange={setPassword} placeholder="Password" required />
|
||||
<Input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
label="Confirm Password"
|
||||
value={confirmPassword}
|
||||
onChange={setConfirmPassword}
|
||||
placeholder="ConfirmPassword"
|
||||
required
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Country *</label>
|
||||
<CountrySelect value={country} onChange={setCountry} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Country *</label>
|
||||
<CountrySelect value={country} onChange={setCountry} />
|
||||
</div>
|
||||
|
||||
<Input type="tel" name="phone" label="Phone number" value={phone} onChange={setPhone} placeholder="Phone number" required />
|
||||
<Input type="tel" name="phone" label="Phone number" value={phone} onChange={setPhone} placeholder="Phone number" required />
|
||||
|
||||
{type === "student" && (
|
||||
<>
|
||||
<Input
|
||||
type="text"
|
||||
name="passport_id"
|
||||
label="Passport/National ID"
|
||||
onChange={setPassportID}
|
||||
value={passportID}
|
||||
placeholder="National ID or Passport number"
|
||||
required
|
||||
/>
|
||||
<Input type="text" name="studentID" label="Student ID" onChange={setStudentID} value={studentID} placeholder="Student ID" />
|
||||
</>
|
||||
)}
|
||||
{type === "student" && (
|
||||
<>
|
||||
<Input
|
||||
type="text"
|
||||
name="passport_id"
|
||||
label="Passport/National ID"
|
||||
onChange={setPassportID}
|
||||
value={passportID}
|
||||
placeholder="National ID or Passport number"
|
||||
required
|
||||
/>
|
||||
<Input type="text" name="studentID" label="Student ID" onChange={setStudentID} value={studentID} placeholder="Student ID" />
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className={clsx("flex flex-col gap-4")}>
|
||||
<label className="font-normal text-base text-mti-gray-dim">Entity</label>
|
||||
<Select
|
||||
defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
|
||||
options={entities.map((e) => ({ value: e.id, label: e.label }))}
|
||||
onChange={(e) => setEntity(e?.value || undefined)}
|
||||
isClearable={checkAccess(user, ["admin", "developer"])}
|
||||
/>
|
||||
</div>
|
||||
<div className={clsx("flex flex-col gap-4")}>
|
||||
<label className="font-normal text-base text-mti-gray-dim">Entity</label>
|
||||
<Select
|
||||
defaultValue={{value: (entities || [])[0]?.id, label: (entities || [])[0]?.label}}
|
||||
options={entities.map((e) => ({value: e.id, label: e.label}))}
|
||||
onChange={(e) => setEntity(e?.value || undefined)}
|
||||
isClearable={checkAccess(user, ["admin", "developer"])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{["corporate", "mastercorporate"].includes(type) && (
|
||||
<Input type="text" name="department" label="Department" onChange={setPosition} value={position} placeholder="Department" />
|
||||
)}
|
||||
{["corporate", "mastercorporate"].includes(type) && (
|
||||
<Input type="text" name="department" label="Department" onChange={setPosition} value={position} placeholder="Department" />
|
||||
)}
|
||||
|
||||
<div className={clsx("flex flex-col gap-4")}>
|
||||
<label className="font-normal text-base text-mti-gray-dim">Classroom</label>
|
||||
<Select
|
||||
options={groups
|
||||
.filter((x) => x.entity?.id === entity)
|
||||
.map((g) => ({ value: g.id, label: g.name }))}
|
||||
onChange={(e) => setGroup(e?.value || undefined)}
|
||||
isClearable
|
||||
/>
|
||||
</div>
|
||||
<div className={clsx("flex flex-col gap-4")}>
|
||||
<label className="font-normal text-base text-mti-gray-dim">Classroom</label>
|
||||
<Select
|
||||
options={groups.filter((x) => x.entity?.id === entity).map((g) => ({value: g.id, label: g.name}))}
|
||||
onChange={(e) => setGroup(e?.value || undefined)}
|
||||
isClearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-col gap-4",
|
||||
!checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && "col-span-2",
|
||||
)}>
|
||||
<label className="font-normal text-base text-mti-gray-dim">Type</label>
|
||||
{user && (
|
||||
<select
|
||||
defaultValue="student"
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value as 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)
|
||||
.filter((x) => {
|
||||
const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
|
||||
return checkAccess(user, getTypesOfUser(list), permissions, perm);
|
||||
})
|
||||
.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-col gap-4",
|
||||
!checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && "col-span-2",
|
||||
)}>
|
||||
<label className="font-normal text-base text-mti-gray-dim">Type</label>
|
||||
{user && (
|
||||
<select
|
||||
defaultValue="student"
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value as 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)
|
||||
.filter((x) => {
|
||||
const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
|
||||
return checkAccess(user, getTypesOfUser(list), permissions, perm);
|
||||
})
|
||||
.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
|
||||
<>
|
||||
<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
|
||||
<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
|
||||
<Checkbox
|
||||
isChecked={isExpiryDateEnabled}
|
||||
onChange={setIsExpiryDateEnabled}
|
||||
disabled={!!user?.subscriptionExpirationDate}>
|
||||
Enabled
|
||||
</Checkbox>
|
||||
</div>
|
||||
{isExpiryDateEnabled && (
|
||||
<ReactDatePicker
|
||||
className={clsx(
|
||||
"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
|
||||
"hover:border-mti-purple tooltip",
|
||||
"transition duration-300 ease-in-out",
|
||||
)}
|
||||
filterDate={(date) =>
|
||||
moment(date).isAfter(new Date()) &&
|
||||
(user?.subscriptionExpirationDate ? moment(date).isBefore(user?.subscriptionExpirationDate) : true)
|
||||
}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
selected={expiryDate}
|
||||
onChange={(date) => setExpiryDate(date)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
|
||||
<>
|
||||
<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
|
||||
<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
|
||||
<Checkbox
|
||||
isChecked={isExpiryDateEnabled}
|
||||
onChange={setIsExpiryDateEnabled}
|
||||
disabled={!!user?.subscriptionExpirationDate}>
|
||||
Enabled
|
||||
</Checkbox>
|
||||
</div>
|
||||
{isExpiryDateEnabled && (
|
||||
<ReactDatePicker
|
||||
className={clsx(
|
||||
"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
|
||||
"hover:border-mti-purple tooltip",
|
||||
"transition duration-300 ease-in-out",
|
||||
)}
|
||||
filterDate={(date) =>
|
||||
moment(date).isAfter(new Date()) &&
|
||||
(user?.subscriptionExpirationDate ? moment(date).isBefore(user?.subscriptionExpirationDate) : true)
|
||||
}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
selected={expiryDate}
|
||||
onChange={(date) => setExpiryDate(date)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button onClick={createUser} isLoading={isLoading} disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}>
|
||||
Create User
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
<Button onClick={createUser} isLoading={isLoading} disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}>
|
||||
Create User
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -19,5 +19,9 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
|
||||
return res.status(403).json({ ok: false });
|
||||
}
|
||||
|
||||
return res.status(200).json(await getApprovalWorkflows("active-workflows"));
|
||||
}
|
||||
const entityIdsString = req.query.entityIds as string;
|
||||
|
||||
const entityIdsArray = entityIdsString.split(",");
|
||||
|
||||
return res.status(200).json(await getApprovalWorkflows("active-workflows", entityIdsArray));
|
||||
}
|
||||
|
||||
@@ -3,16 +3,8 @@ import type { NextApiRequest, NextApiResponse } from "next";
|
||||
import client from "@/lib/mongodb";
|
||||
import { withIronSessionApiRoute } from "iron-session/next";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { Code, Group, Type } from "@/interfaces/user";
|
||||
import { PERMISSIONS } from "@/constants/userPermissions";
|
||||
import { prepareMailer, prepareMailOptions } from "@/email";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import { Code, } from "@/interfaces/user";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import { doesEntityAllow } from "@/utils/permissions";
|
||||
import { getEntity, getEntityWithRoles } from "@/utils/entities.be";
|
||||
import { findBy } from "@/utils";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
|
||||
const db = client.db(process.env.MONGODB_DB);
|
||||
|
||||
export default withIronSessionApiRoute(handler, sessionOptions);
|
||||
@@ -30,7 +22,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
|
||||
|
||||
const { entities } = req.query as { entities?: string[] };
|
||||
if (entities)
|
||||
return res.status(200).json(await db.collection("codes").find<Code>({ entity: { $in: entities } }).toArray());
|
||||
return res.status(200).json(await db.collection("codes").find<Code>({ entity: { $in: Array.isArray(entities) ? entities : [entities] } }).toArray());
|
||||
|
||||
return res.status(200).json(await db.collection("codes").find<Code>({}).toArray());
|
||||
}
|
||||
|
||||
@@ -32,6 +32,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
|
||||
}
|
||||
|
||||
const { entity } = req.query as { entity?: string };
|
||||
|
||||
const snapshot = await db.collection("codes").find(entity ? { entity } : {}).toArray();
|
||||
|
||||
res.status(200).json(snapshot);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import { Module } from "@/interfaces";
|
||||
import { Exam, ExamBase, InstructorGender, Variant } from "@/interfaces/exam";
|
||||
import { createApprovalWorkflowsOnExamCreation } from "@/lib/createWorkflowsOnExamCreation";
|
||||
import { createApprovalWorkflowOnExamCreation } from "@/lib/createWorkflowsOnExamCreation";
|
||||
import client from "@/lib/mongodb";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { mapBy } from "@/utils";
|
||||
@@ -10,6 +10,7 @@ import { getApprovalWorkflowsByExamId, updateApprovalWorkflows } from "@/utils/a
|
||||
import { generateExamDifferences } from "@/utils/exam.differences";
|
||||
import { getExams } from "@/utils/exams.be";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import { access } from "fs";
|
||||
import { withIronSessionApiRoute } from "iron-session/next";
|
||||
import type { NextApiRequest, NextApiResponse } from "next";
|
||||
|
||||
@@ -48,10 +49,11 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
|
||||
const { module } = req.query as { module: string };
|
||||
|
||||
const session = client.startSession();
|
||||
const entities = isAdmin(user) ? [] : mapBy(user.entities, "id"); // might need to change this with new approval workflows logic.. if an admin creates an exam no workflow is started because workflows must have entities configured.
|
||||
const entities = isAdmin(user) ? [] : mapBy(user.entities, "id");
|
||||
|
||||
try {
|
||||
const exam = {
|
||||
access: "public", // default access is public
|
||||
...req.body,
|
||||
module: module,
|
||||
entities,
|
||||
@@ -76,6 +78,10 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
|
||||
throw new Error("Name already exists");
|
||||
}
|
||||
|
||||
if (exam.requiresApproval === true) {
|
||||
exam.access = "confidential";
|
||||
}
|
||||
|
||||
await db.collection(module).updateOne(
|
||||
{ id: req.body.id },
|
||||
{ $set: { id: req.body.id, ...exam } },
|
||||
@@ -88,37 +94,45 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
|
||||
// if it doesn't enter the next if condition it means the exam was updated and not created, so we can send this response.
|
||||
responseStatus = 200;
|
||||
responseMessage = `Successfully updated exam with ID: "${exam.id}"`;
|
||||
// TODO maybe find a way to start missing approval workflows in case they were only configured after exam creation.
|
||||
|
||||
// create workflow only if exam is being created for the first time
|
||||
if (docSnap === null) {
|
||||
try {
|
||||
const { successCount, totalCount } = await createApprovalWorkflowsOnExamCreation(exam.createdBy, exam.entities, exam.id, module);
|
||||
|
||||
if (successCount === totalCount) {
|
||||
if (exam.requiresApproval === false) {
|
||||
responseStatus = 200;
|
||||
responseMessage = `Successfully created exam "${exam.id}" and started its Approval Workflow(s)`;
|
||||
} else if (successCount > 0) {
|
||||
responseStatus = 207;
|
||||
responseMessage = `Successfully created exam with ID: "${exam.id}" but was not able to start/find an Approval Workflow for all the author's entities`;
|
||||
responseMessage = `Successfully created exam "${exam.id}" and skipped Approval Workflow due to user request.`;
|
||||
} else if (isAdmin(user)) {
|
||||
responseStatus = 200;
|
||||
responseMessage = `Successfully created exam "${exam.id}" and skipped Approval Workflow due to admin rights.`;
|
||||
} else {
|
||||
responseStatus = 207;
|
||||
responseMessage = `Successfully created exam with ID: "${exam.id}" but was not able to find any configured Approval Workflow for the author.`;
|
||||
const { successCount, totalCount } = await createApprovalWorkflowOnExamCreation(exam.createdBy, exam.entities, exam.id, module);
|
||||
|
||||
if (successCount === totalCount) {
|
||||
responseStatus = 200;
|
||||
responseMessage = `Successfully created exam "${exam.id}" and started its Approval Workflow.`;
|
||||
} else if (successCount > 0) {
|
||||
responseStatus = 207;
|
||||
responseMessage = `Successfully created exam with ID: "${exam.id}" but was not able to start/find an Approval Workflow for all the author's entities.`;
|
||||
} else {
|
||||
responseStatus = 207;
|
||||
responseMessage = `Successfully created exam with ID: "${exam.id}" but skipping approval process because no approval workflow was found configured for the exam author.`;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Workflow creation error:", error);
|
||||
responseStatus = 207;
|
||||
responseMessage = `Successfully created exam with ID: "${exam.id}" but something went wrong while creating the Approval Workflow(s).`;
|
||||
}
|
||||
} else { // if exam was updated, log the updates
|
||||
} else {
|
||||
// if exam was updated, log the updates
|
||||
const approvalWorkflows = await getApprovalWorkflowsByExamId(exam.id);
|
||||
|
||||
|
||||
if (approvalWorkflows) {
|
||||
const differences = generateExamDifferences(docSnap as Exam, exam as Exam);
|
||||
if (differences) {
|
||||
approvalWorkflows.forEach((workflow) => {
|
||||
const currentStepIndex = workflow.steps.findIndex(step => !step.completed || step.rejected);
|
||||
|
||||
const currentStepIndex = workflow.steps.findIndex((step) => !step.completed || step.rejected);
|
||||
|
||||
if (workflow.steps[currentStepIndex].examChanges === undefined) {
|
||||
workflow.steps[currentStepIndex].examChanges = [...differences];
|
||||
} else {
|
||||
@@ -129,7 +143,7 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
res.status(responseStatus).json({
|
||||
message: responseMessage,
|
||||
});
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import type {NextApiRequest, NextApiResponse} from "next";
|
||||
import type { NextApiRequest, NextApiResponse } from "next";
|
||||
import client from "@/lib/mongodb";
|
||||
import {withIronSessionApiRoute} from "iron-session/next";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import {flatten} from "lodash";
|
||||
import {Exam} from "@/interfaces/exam";
|
||||
import {MODULE_ARRAY} from "@/utils/moduleUtils";
|
||||
import { withIronSessionApiRoute } from "iron-session/next";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { flatten, map } from "lodash";
|
||||
import { AccessType, Exam } from "@/interfaces/exam";
|
||||
import { MODULE_ARRAY } from "@/utils/moduleUtils";
|
||||
import { requestUser } from "../../../utils/api";
|
||||
import { mapBy } from "../../../utils";
|
||||
|
||||
const db = client.db(process.env.MONGODB_DB);
|
||||
|
||||
@@ -14,17 +16,37 @@ export default withIronSessionApiRoute(handler, sessionOptions);
|
||||
async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
if (req.method === "GET") return await GET(req, res);
|
||||
|
||||
res.status(404).json({ok: false});
|
||||
res.status(404).json({ ok: false });
|
||||
}
|
||||
|
||||
async function GET(req: NextApiRequest, res: NextApiResponse) {
|
||||
if (!req.session.user) {
|
||||
res.status(401).json({ok: false});
|
||||
res.status(401).json({ ok: false });
|
||||
return;
|
||||
}
|
||||
const user = await requestUser(req, res)
|
||||
if (!user)
|
||||
return res.status(401).json({ ok: false, reason: "You must be logged in!" })
|
||||
const isAdmin = ["admin", "developer"].includes(user.type)
|
||||
const { entities = [] } = req.query as { access?: AccessType, entities?: string[] | string };
|
||||
let entitiesToFetch = Array.isArray(entities) ? entities : entities ? [entities] : []
|
||||
|
||||
if (!isAdmin) {
|
||||
const userEntitiesIDs = mapBy(user.entities || [], 'id')
|
||||
entitiesToFetch = entities ? entitiesToFetch.filter((entity): entity is string => entity ? userEntitiesIDs.includes(entity) : false) : userEntitiesIDs
|
||||
if ((entitiesToFetch.length ?? 0) === 0) {
|
||||
res.status(200).json([])
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const moduleExamsPromises = MODULE_ARRAY.map(async (module) => {
|
||||
const snapshot = await db.collection(module).find<Exam>({ isDiagnostic: false }).toArray();
|
||||
const snapshot = await db.collection(module).find<Exam>({
|
||||
isDiagnostic: false, ...(isAdmin && (entitiesToFetch.length ?? 0) === 0 ? {
|
||||
} : {
|
||||
entity: { $in: entitiesToFetch }
|
||||
})
|
||||
}).toArray();
|
||||
|
||||
return snapshot.map((doc) => ({
|
||||
...doc,
|
||||
|
||||
@@ -58,7 +58,13 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
|
||||
const allAssigneeIds: string[] = [
|
||||
...new Set(
|
||||
workflow.steps
|
||||
.map(step => step.assignees)
|
||||
.map((step) => {
|
||||
const assignees = step.assignees;
|
||||
if (step.completedBy) {
|
||||
assignees.push(step.completedBy);
|
||||
}
|
||||
return assignees;
|
||||
})
|
||||
.flat()
|
||||
)
|
||||
];
|
||||
@@ -144,7 +150,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
|
||||
const handleApproveStep = () => {
|
||||
const isLastStep = (selectedStepIndex + 1 === currentWorkflow.steps.length);
|
||||
if (isLastStep) {
|
||||
if (!confirm(`Are you sure you want to approve the last step? Doing so will approve the exam.`)) return;
|
||||
if (!confirm(`Are you sure you want to approve the last step? Doing so will change the access type of the exam from confidential to private.`)) return;
|
||||
}
|
||||
|
||||
const updatedWorkflow: ApprovalWorkflow = {
|
||||
@@ -186,7 +192,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
|
||||
const examId = currentWorkflow.examId;
|
||||
|
||||
axios
|
||||
.patch(`/api/exam/${examModule}/${examId}`, { isDiagnostic: false })
|
||||
.patch(`/api/exam/${examModule}/${examId}`, { access: "private" })
|
||||
.then(() => toast.success(`The exam was successfuly approved and this workflow has been completed.`))
|
||||
.catch((reason) => {
|
||||
if (reason.response.status === 404) {
|
||||
@@ -551,7 +557,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
|
||||
<div className="p-3 border border-gray-300 rounded-xl bg-white bg-opacity-80 overflow-y-auto max-h-40">
|
||||
{currentWorkflow.steps[selectedStepIndex].examChanges?.length ? (
|
||||
currentWorkflow.steps[selectedStepIndex].examChanges!.map((change, index) => (
|
||||
<p key={index} className="text-sm text-gray-500 mb-2">
|
||||
<p key={index} className="whitespace-pre-wrap text-sm text-gray-500 mb-2">
|
||||
{change}
|
||||
</p>
|
||||
))
|
||||
|
||||
@@ -1,24 +1,22 @@
|
||||
import Tip from "@/components/ApprovalWorkflows/Tip";
|
||||
import Layout from "@/components/High/Layout";
|
||||
import Button from "@/components/Low/Button";
|
||||
import Input from "@/components/Low/Input";
|
||||
import Select from "@/components/Low/Select";
|
||||
import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
|
||||
import { useAllowedEntities, useAllowedEntitiesSomePermissions, useEntityPermission } from "@/hooks/useEntityPermissions";
|
||||
import { Module, ModuleTypeLabels } from "@/interfaces";
|
||||
import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
|
||||
import { Entity, EntityWithRoles } from "@/interfaces/entity";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { User } from "@/interfaces/user";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { mapBy, redirect, serialize } from "@/utils";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
|
||||
import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||
import { doesEntityAllow, findAllowedEntities } from "@/utils/permissions";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import { getSpecificUsers } from "@/utils/users.be";
|
||||
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
|
||||
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, getPaginationRowModel } from "@tanstack/react-table";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
@@ -69,7 +67,11 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
|
||||
if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) return redirect("/");
|
||||
|
||||
const workflows = await getApprovalWorkflows("active-workflows");
|
||||
const entityIDS = mapBy(user.entities, "id");
|
||||
const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
|
||||
const allowedEntities = findAllowedEntities(user, entities, "view_workflows");
|
||||
|
||||
const workflows = await getApprovalWorkflows("active-workflows", allowedEntities.map(entity => entity.id));
|
||||
|
||||
const allAssigneeIds: string[] = [
|
||||
...new Set(
|
||||
@@ -81,10 +83,6 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
)
|
||||
];
|
||||
|
||||
const entityIDS = mapBy(user.entities, "id");
|
||||
const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
|
||||
const allowedEntities = findAllowedEntities(user, entities, "view_workflows");
|
||||
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
@@ -103,7 +101,8 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
|
||||
const { workflows, reload } = useApprovalWorkflows();
|
||||
const entitiesString = userEntitiesWithLabel.map(entity => entity.id).join(",");
|
||||
const { workflows, reload } = useApprovalWorkflows(entitiesString);
|
||||
const currentWorkflows = workflows || initialWorkflows;
|
||||
|
||||
const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
|
||||
@@ -191,7 +190,15 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
|
||||
{info.getValue().map((module: Module, index: number) => (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-indigo-100 border border-indigo-300 text-indigo-900">
|
||||
/* className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-indigo-100 border border-indigo-300 text-indigo-900"> */
|
||||
className={clsx("inline-block rounded-full px-3 py-1 text-sm font-medium text-white",
|
||||
module === "speaking" ? "bg-ielts-speaking" :
|
||||
module === "reading" ? "bg-ielts-reading" :
|
||||
module === "writing" ? "bg-ielts-writing" :
|
||||
module === "listening" ? "bg-ielts-listening" :
|
||||
module === "level" ? "bg-ielts-level" :
|
||||
"bg-slate-700"
|
||||
)}>
|
||||
{ModuleTypeLabels[module]}
|
||||
</span>
|
||||
))}
|
||||
@@ -296,10 +303,20 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
|
||||
}),
|
||||
];
|
||||
|
||||
const [pagination, setPagination] = useState({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
const table = useReactTable({
|
||||
data: filteredWorkflows,
|
||||
columns: columns,
|
||||
state: {
|
||||
pagination,
|
||||
},
|
||||
onPaginationChange: setPagination,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
});
|
||||
|
||||
return (
|
||||
@@ -395,6 +412,43 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="mt-2 flex flex-row gap-2 w-full justify-end items-center">
|
||||
<button
|
||||
onClick={() => table.setPageIndex(0)}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light
|
||||
bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{"<<"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light
|
||||
bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{"<"}
|
||||
</button>
|
||||
<span className="px-4 text-sm font-medium">
|
||||
Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light
|
||||
bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{">"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
|
||||
disabled={!table.getCanNextPage()}
|
||||
className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light
|
||||
bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{">>"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -33,7 +33,6 @@ import moment from "moment";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { generate } from "random-words";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import ReactDatePicker from "react-datepicker";
|
||||
import {
|
||||
|
||||
@@ -159,6 +159,21 @@ export default function Home({ user, group, users, entity }: Props) {
|
||||
prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]
|
||||
);
|
||||
|
||||
const toggleAllUsersInList = () =>
|
||||
setSelectedUsers((prev) =>
|
||||
prev.length === rows.length
|
||||
? []
|
||||
: [
|
||||
...prev,
|
||||
...items.reduce((acc, i) => {
|
||||
if (!prev.find((item) => item === i.id)) {
|
||||
(acc as string[]).push(i.id);
|
||||
}
|
||||
return acc;
|
||||
}, [] as string[]),
|
||||
]
|
||||
);
|
||||
|
||||
const removeParticipants = () => {
|
||||
if (selectedUsers.length === 0) return;
|
||||
if (!canRemoveParticipants) return;
|
||||
@@ -428,6 +443,25 @@ export default function Home({ user, group, users, entity }: Props) {
|
||||
{capitalize(type)}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => {
|
||||
toggleAllUsersInList();
|
||||
}}
|
||||
disabled={rows.length === 0}
|
||||
className={clsx(
|
||||
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
|
||||
"transition duration-300 ease-in-out",
|
||||
"disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
|
||||
(isAdding ? nonParticipantUsers : group.participants)
|
||||
.length === selectedUsers.length &&
|
||||
"!bg-mti-purple-light !text-white"
|
||||
)}
|
||||
>
|
||||
{"De/Select All"}
|
||||
</button>
|
||||
<span className="opacity-80">
|
||||
{selectedUsers.length} selected
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,269 +1,216 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import UserDisplayList from "@/components/UserDisplayList";
|
||||
import IconCard from "@/components/IconCard";
|
||||
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { Stat, StudentUser, Type, User } from "@/interfaces/user";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { filterBy, mapBy, redirect, serialize } from "@/utils";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import { countEntitiesAssignments } from "@/utils/assignments.be";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { countGroupsByEntities } from "@/utils/groups.be";
|
||||
import {
|
||||
checkAccess,
|
||||
groupAllowedEntitiesByPermissions,
|
||||
} from "@/utils/permissions";
|
||||
import { groupByExam } from "@/utils/stats";
|
||||
import { countAllowedUsers, getUsers } from "@/utils/users.be";
|
||||
import { clsx } from "clsx";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import {useAllowedEntities} from "@/hooks/useEntityPermissions";
|
||||
import {EntityWithRoles} from "@/interfaces/entity";
|
||||
import {Stat, StudentUser, Type, User} from "@/interfaces/user";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import {filterBy, mapBy, redirect, serialize} from "@/utils";
|
||||
import {requestUser} from "@/utils/api";
|
||||
import {countEntitiesAssignments} from "@/utils/assignments.be";
|
||||
import {getEntitiesWithRoles} from "@/utils/entities.be";
|
||||
import {countGroupsByEntities} from "@/utils/groups.be";
|
||||
import {checkAccess, groupAllowedEntitiesByPermissions} from "@/utils/permissions";
|
||||
import {groupByExam} from "@/utils/stats";
|
||||
import {countAllowedUsers, getUsers} from "@/utils/users.be";
|
||||
import {clsx} from "clsx";
|
||||
import {withIronSessionSsr} from "iron-session/next";
|
||||
import moment from "moment";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
BsBank,
|
||||
BsClock,
|
||||
BsEnvelopePaper,
|
||||
BsPencilSquare,
|
||||
BsPeople,
|
||||
BsPeopleFill,
|
||||
BsPersonFill,
|
||||
BsPersonFillGear,
|
||||
} from "react-icons/bs";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import {useRouter} from "next/router";
|
||||
import {useMemo} from "react";
|
||||
import {BsBank, BsClock, BsEnvelopePaper, BsPencilSquare, BsPeople, BsPeopleFill, BsPersonFill, BsPersonFillGear} from "react-icons/bs";
|
||||
import {ToastContainer} from "react-toastify";
|
||||
import {isAdmin} from "@/utils/users";
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
students: StudentUser[];
|
||||
latestStudents: User[];
|
||||
latestTeachers: User[];
|
||||
userCounts: { [key in Type]: number };
|
||||
entities: EntityWithRoles[];
|
||||
assignmentsCount: number;
|
||||
stats: Stat[];
|
||||
groupsCount: number;
|
||||
user: User;
|
||||
students: StudentUser[];
|
||||
latestStudents: User[];
|
||||
latestTeachers: User[];
|
||||
userCounts: {[key in Type]: number};
|
||||
entities: EntityWithRoles[];
|
||||
assignmentsCount: number;
|
||||
stats: Stat[];
|
||||
groupsCount: number;
|
||||
}
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res);
|
||||
if (!user || !user.isVerified) return redirect("/login");
|
||||
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
|
||||
const user = await requestUser(req, res);
|
||||
if (!user || !user.isVerified) return redirect("/login");
|
||||
|
||||
if (!checkAccess(user, ["admin", "developer", "mastercorporate"]))
|
||||
return redirect("/");
|
||||
if (!checkAccess(user, ["admin", "developer", "mastercorporate"])) return redirect("/");
|
||||
|
||||
const entityIDS = mapBy(user.entities, "id") || [];
|
||||
const entities = await getEntitiesWithRoles(
|
||||
isAdmin(user) ? undefined : entityIDS
|
||||
);
|
||||
const {
|
||||
["view_students"]: allowedStudentEntities,
|
||||
["view_teachers"]: allowedTeacherEntities,
|
||||
} = groupAllowedEntitiesByPermissions(user, entities, [
|
||||
"view_students",
|
||||
"view_teachers",
|
||||
]);
|
||||
const entityIDS = mapBy(user.entities, "id") || [];
|
||||
const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
|
||||
const {["view_students"]: allowedStudentEntities, ["view_teachers"]: allowedTeacherEntities} = groupAllowedEntitiesByPermissions(user, entities, [
|
||||
"view_students",
|
||||
"view_teachers",
|
||||
]);
|
||||
|
||||
const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
|
||||
const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
|
||||
|
||||
const entitiesIDS = mapBy(entities, "id") || [];
|
||||
const entitiesIDS = mapBy(entities, "id") || [];
|
||||
|
||||
const [
|
||||
students,
|
||||
latestStudents,
|
||||
latestTeachers,
|
||||
userCounts,
|
||||
assignmentsCount,
|
||||
groupsCount,
|
||||
] = await Promise.all([
|
||||
getUsers(
|
||||
{ type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
|
||||
10,
|
||||
{ averageLevel: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
getUsers(
|
||||
{ type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
getUsers(
|
||||
{
|
||||
type: "teacher",
|
||||
"entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
|
||||
},
|
||||
10,
|
||||
{ registrationDate: -1 },
|
||||
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
|
||||
),
|
||||
countAllowedUsers(user, entities),
|
||||
countEntitiesAssignments(entitiesIDS, { archived: { $ne: true } }),
|
||||
countGroupsByEntities(entitiesIDS),
|
||||
]);
|
||||
const [students, latestStudents, latestTeachers, userCounts, assignmentsCount, groupsCount] = await Promise.all([
|
||||
getUsers(
|
||||
{type: "student", "entities.id": {$in: allowedStudentEntitiesIDS}},
|
||||
10,
|
||||
{averageLevel: -1},
|
||||
{_id: 0, id: 1, name: 1, email: 1, profilePicture: 1},
|
||||
),
|
||||
getUsers(
|
||||
{type: "student", "entities.id": {$in: allowedStudentEntitiesIDS}},
|
||||
10,
|
||||
{registrationDate: -1},
|
||||
{_id: 0, id: 1, name: 1, email: 1, profilePicture: 1},
|
||||
),
|
||||
getUsers(
|
||||
{
|
||||
type: "teacher",
|
||||
"entities.id": {$in: mapBy(allowedTeacherEntities, "id")},
|
||||
},
|
||||
10,
|
||||
{registrationDate: -1},
|
||||
{_id: 0, id: 1, name: 1, email: 1, profilePicture: 1},
|
||||
),
|
||||
countAllowedUsers(user, entities),
|
||||
countEntitiesAssignments(entitiesIDS, {archived: {$ne: true}}),
|
||||
countGroupsByEntities(entitiesIDS),
|
||||
]);
|
||||
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
students,
|
||||
latestStudents,
|
||||
latestTeachers,
|
||||
userCounts,
|
||||
entities,
|
||||
assignmentsCount,
|
||||
groupsCount,
|
||||
}),
|
||||
};
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
students,
|
||||
latestStudents,
|
||||
latestTeachers,
|
||||
userCounts,
|
||||
entities,
|
||||
assignmentsCount,
|
||||
groupsCount,
|
||||
}),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
export default function Dashboard({
|
||||
user,
|
||||
students,
|
||||
latestStudents,
|
||||
latestTeachers,
|
||||
userCounts,
|
||||
entities,
|
||||
assignmentsCount,
|
||||
stats = [],
|
||||
groupsCount,
|
||||
user,
|
||||
students,
|
||||
latestStudents,
|
||||
latestTeachers,
|
||||
userCounts,
|
||||
entities,
|
||||
assignmentsCount,
|
||||
stats = [],
|
||||
groupsCount,
|
||||
}: Props) {
|
||||
|
||||
const totalCount = useMemo(
|
||||
() =>
|
||||
userCounts.corporate +
|
||||
userCounts.mastercorporate +
|
||||
userCounts.student +
|
||||
userCounts.teacher,
|
||||
[userCounts]
|
||||
);
|
||||
const totalCount = useMemo(() => userCounts.corporate + userCounts.mastercorporate + userCounts.student + userCounts.teacher, [userCounts]);
|
||||
|
||||
const totalLicenses = useMemo(
|
||||
() =>
|
||||
entities.reduce(
|
||||
(acc, curr) => acc + parseInt(curr.licenses.toString()),
|
||||
0
|
||||
),
|
||||
[entities]
|
||||
);
|
||||
const totalLicenses = useMemo(() => entities.reduce((acc, curr) => acc + parseInt(curr.licenses.toString()), 0), [entities]);
|
||||
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
const allowedEntityStatistics = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"view_entity_statistics"
|
||||
);
|
||||
const allowedStudentPerformance = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"view_student_performance"
|
||||
);
|
||||
const allowedEntityStatistics = useAllowedEntities(user, entities, "view_entity_statistics");
|
||||
const allowedStudentPerformance = useAllowedEntities(user, entities, "view_student_performance");
|
||||
|
||||
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 />
|
||||
<>
|
||||
<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
|
||||
<IconCard
|
||||
onClick={() => router.push("/users?type=student")}
|
||||
Icon={BsPersonFill}
|
||||
label="Students"
|
||||
value={userCounts.student}
|
||||
color="purple"
|
||||
/>
|
||||
<IconCard
|
||||
onClick={() => router.push("/users?type=teacher")}
|
||||
Icon={BsPencilSquare}
|
||||
label="Teachers"
|
||||
value={userCounts.teacher}
|
||||
color="purple"
|
||||
/>
|
||||
<IconCard
|
||||
onClick={() => router.push("/users?type=corporate")}
|
||||
Icon={BsBank}
|
||||
label="Corporate Accounts"
|
||||
value={userCounts.corporate}
|
||||
color="purple"
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsPeople}
|
||||
onClick={() => router.push("/classrooms")}
|
||||
label="Classrooms"
|
||||
value={groupsCount}
|
||||
color="purple"
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsPeopleFill}
|
||||
onClick={() => router.push("/entities")}
|
||||
label="Entities"
|
||||
value={`${entities.length} - ${totalCount}/${totalLicenses}`}
|
||||
color="purple"
|
||||
/>
|
||||
{allowedStudentPerformance.length > 0 && (
|
||||
<IconCard
|
||||
Icon={BsPersonFillGear}
|
||||
onClick={() => router.push("/users/performance")}
|
||||
label="Student Performance"
|
||||
value={userCounts.student}
|
||||
color="purple"
|
||||
/>
|
||||
)}
|
||||
{allowedEntityStatistics.length > 0 && (
|
||||
<IconCard
|
||||
Icon={BsPersonFillGear}
|
||||
onClick={() => router.push("/statistical")}
|
||||
label="Entity Statistics"
|
||||
value={allowedEntityStatistics.length}
|
||||
color="purple"
|
||||
/>
|
||||
)}
|
||||
<IconCard
|
||||
Icon={BsEnvelopePaper}
|
||||
onClick={() => router.push("/assignments")}
|
||||
label="Assignments"
|
||||
value={assignmentsCount}
|
||||
className={clsx(
|
||||
allowedEntityStatistics.length === 0 && "col-span-2"
|
||||
)}
|
||||
color="purple"
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsClock}
|
||||
label="Expiration Date"
|
||||
value={
|
||||
user.subscriptionExpirationDate
|
||||
? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
|
||||
: "Unlimited"
|
||||
}
|
||||
color="rose"
|
||||
/>
|
||||
</section>
|
||||
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 />
|
||||
<>
|
||||
<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
|
||||
<IconCard
|
||||
onClick={() => router.push("/users?type=student")}
|
||||
Icon={BsPersonFill}
|
||||
label="Students"
|
||||
value={userCounts.student}
|
||||
color="purple"
|
||||
/>
|
||||
<IconCard
|
||||
onClick={() => router.push("/users?type=teacher")}
|
||||
Icon={BsPencilSquare}
|
||||
label="Teachers"
|
||||
value={userCounts.teacher}
|
||||
color="purple"
|
||||
/>
|
||||
<IconCard
|
||||
onClick={() => router.push("/users?type=corporate")}
|
||||
Icon={BsBank}
|
||||
label="Corporate Accounts"
|
||||
value={userCounts.corporate}
|
||||
color="purple"
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsBank}
|
||||
onClick={() => router.push("/users?type=mastercorporate")}
|
||||
label="Master Corporates"
|
||||
value={userCounts.mastercorporate}
|
||||
color="purple"
|
||||
/>
|
||||
<IconCard Icon={BsPeople} onClick={() => router.push("/classrooms")} label="Classrooms" value={groupsCount} color="purple" />
|
||||
<IconCard
|
||||
Icon={BsPeopleFill}
|
||||
onClick={() => router.push("/entities")}
|
||||
label="Entities"
|
||||
value={`${entities.length} - ${totalCount}/${totalLicenses}`}
|
||||
color="purple"
|
||||
/>
|
||||
{allowedStudentPerformance.length > 0 && (
|
||||
<IconCard
|
||||
Icon={BsPersonFillGear}
|
||||
onClick={() => router.push("/users/performance")}
|
||||
label="Student Performance"
|
||||
value={userCounts.student}
|
||||
color="purple"
|
||||
/>
|
||||
)}
|
||||
{allowedEntityStatistics.length > 0 && (
|
||||
<IconCard
|
||||
Icon={BsPersonFillGear}
|
||||
onClick={() => router.push("/statistical")}
|
||||
label="Entity Statistics"
|
||||
value={allowedEntityStatistics.length}
|
||||
color="purple"
|
||||
/>
|
||||
)}
|
||||
<IconCard
|
||||
Icon={BsEnvelopePaper}
|
||||
onClick={() => router.push("/assignments")}
|
||||
label="Assignments"
|
||||
value={assignmentsCount}
|
||||
className={clsx(allowedEntityStatistics.length === 0 && "col-span-2")}
|
||||
color="purple"
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsClock}
|
||||
label="Expiration Date"
|
||||
value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
|
||||
color="rose"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
|
||||
<UserDisplayList users={latestStudents} title="Latest Students" />
|
||||
<UserDisplayList users={latestTeachers} title="Latest Teachers" />
|
||||
<UserDisplayList users={students} title="Highest level students" />
|
||||
<UserDisplayList
|
||||
users={students.sort(
|
||||
(a, b) =>
|
||||
Object.keys(groupByExam(filterBy(stats, "user", b))).length -
|
||||
Object.keys(groupByExam(filterBy(stats, "user", a))).length
|
||||
)}
|
||||
title="Highest exam count students"
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
|
||||
<UserDisplayList users={latestStudents} title="Latest Students" />
|
||||
<UserDisplayList users={latestTeachers} title="Latest Teachers" />
|
||||
<UserDisplayList users={students} title="Highest level students" />
|
||||
<UserDisplayList
|
||||
users={students.sort(
|
||||
(a, b) =>
|
||||
Object.keys(groupByExam(filterBy(stats, "user", b))).length -
|
||||
Object.keys(groupByExam(filterBy(stats, "user", a))).length,
|
||||
)}
|
||||
title="Highest exam count students"
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -63,6 +63,9 @@ const EXAM_MANAGEMENT: PermissionLayout[] = [
|
||||
{label: "Generate Level", key: "generate_level"},
|
||||
{label: "Delete Level", key: "delete_level"},
|
||||
{label: "Set as Private/Public", key: "update_exam_privacy"},
|
||||
{label: "View Confidential Exams", key: "view_confidential_exams"},
|
||||
{label: "Create Confidential Exams", key: "create_confidential_exams"},
|
||||
{label: "Create Public Exams", key: "create_public_exams"},
|
||||
{label: "View Statistics", key: "view_statistics"},
|
||||
];
|
||||
|
||||
|
||||
@@ -1,268 +1,201 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import Head from "next/head";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import {withIronSessionSsr} from "iron-session/next";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import {ToastContainer} from "react-toastify";
|
||||
import CodeGenerator from "./(admin)/CodeGenerator";
|
||||
import ExamLoader from "./(admin)/ExamLoader";
|
||||
import Lists from "./(admin)/Lists";
|
||||
import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
|
||||
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||
import {shouldRedirectHome} from "@/utils/navigation.disabled";
|
||||
import BatchCreateUser from "./(admin)/Lists/BatchCreateUser";
|
||||
import { checkAccess, getTypesOfUser } from "@/utils/permissions";
|
||||
import { useState } from "react";
|
||||
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
|
||||
import { useState} from "react";
|
||||
import Modal from "@/components/Modal";
|
||||
import IconCard from "@/components/IconCard";
|
||||
import {
|
||||
BsCode,
|
||||
BsCodeSquare,
|
||||
BsGearFill,
|
||||
BsPeopleFill,
|
||||
BsPersonFill,
|
||||
} from "react-icons/bs";
|
||||
import {BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill} from "react-icons/bs";
|
||||
import UserCreator from "./(admin)/UserCreator";
|
||||
import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
|
||||
import { CEFR_STEPS } from "@/resources/grading";
|
||||
import { User } from "@/interfaces/user";
|
||||
import { getUserPermissions } from "@/utils/permissions.be";
|
||||
import { PermissionType } from "@/interfaces/permissions";
|
||||
import { getUsers } from "@/utils/users.be";
|
||||
import { getEntitiesWithRoles } from "@/utils/entities.be";
|
||||
import { mapBy, serialize, redirect } from "@/utils";
|
||||
import { EntityWithRoles } from "@/interfaces/entity";
|
||||
import { requestUser } from "@/utils/api";
|
||||
import { isAdmin } from "@/utils/users";
|
||||
import {
|
||||
getGradingSystemByEntities,
|
||||
getGradingSystemByEntity,
|
||||
} from "@/utils/grading.be";
|
||||
import { Grading } from "@/interfaces";
|
||||
import { useRouter } from "next/router";
|
||||
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
|
||||
import {CEFR_STEPS} from "@/resources/grading";
|
||||
import {User} from "@/interfaces/user";
|
||||
import {getUserPermissions} from "@/utils/permissions.be";
|
||||
import {PermissionType} from "@/interfaces/permissions";
|
||||
import {getUsers} from "@/utils/users.be";
|
||||
import {getEntitiesWithRoles} from "@/utils/entities.be";
|
||||
import {mapBy, serialize, redirect, filterBy} from "@/utils";
|
||||
import {EntityWithRoles} from "@/interfaces/entity";
|
||||
import {requestUser} from "@/utils/api";
|
||||
import {isAdmin} from "@/utils/users";
|
||||
import {getGradingSystemByEntities, getGradingSystemByEntity} from "@/utils/grading.be";
|
||||
import {Grading} from "@/interfaces";
|
||||
import {useRouter} from "next/router";
|
||||
import {useAllowedEntities} from "@/hooks/useEntityPermissions";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
|
||||
const user = await requestUser(req, res);
|
||||
if (!user) return redirect("/login");
|
||||
|
||||
if (
|
||||
shouldRedirectHome(user) ||
|
||||
!checkAccess(user, [
|
||||
"admin",
|
||||
"developer",
|
||||
"corporate",
|
||||
"teacher",
|
||||
"mastercorporate",
|
||||
])
|
||||
)
|
||||
return redirect("/");
|
||||
const [permissions, entities, allUsers] = await Promise.all([
|
||||
getUserPermissions(user.id),
|
||||
isAdmin(user)
|
||||
? await getEntitiesWithRoles()
|
||||
: await getEntitiesWithRoles(mapBy(user.entities, "id")),
|
||||
getUsers(),
|
||||
]);
|
||||
const gradingSystems = await getGradingSystemByEntities(
|
||||
mapBy(entities, "id")
|
||||
);
|
||||
const entitiesGrading = entities.map(
|
||||
(e) =>
|
||||
gradingSystems.find((g) => g.entity === e.id) || {
|
||||
entity: e.id,
|
||||
steps: CEFR_STEPS,
|
||||
}
|
||||
);
|
||||
if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"])) return redirect("/");
|
||||
const [permissions, entities, allUsers] = await Promise.all([
|
||||
getUserPermissions(user.id),
|
||||
isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, "id")),
|
||||
getUsers(),
|
||||
]);
|
||||
const gradingSystems = await getGradingSystemByEntities(mapBy(entities, "id"));
|
||||
const entitiesGrading = entities.map(
|
||||
(e) =>
|
||||
gradingSystems.find((g) => g.entity === e.id) || {
|
||||
entity: e.id,
|
||||
steps: CEFR_STEPS,
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
permissions,
|
||||
entities,
|
||||
allUsers,
|
||||
entitiesGrading,
|
||||
}),
|
||||
};
|
||||
return {
|
||||
props: serialize({
|
||||
user,
|
||||
permissions,
|
||||
entities,
|
||||
allUsers,
|
||||
entitiesGrading,
|
||||
}),
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
permissions: PermissionType[];
|
||||
entities: EntityWithRoles[];
|
||||
allUsers: User[];
|
||||
entitiesGrading: Grading[];
|
||||
user: User;
|
||||
permissions: PermissionType[];
|
||||
entities: EntityWithRoles[];
|
||||
allUsers: User[];
|
||||
entitiesGrading: Grading[];
|
||||
}
|
||||
|
||||
export default function Admin({
|
||||
user,
|
||||
entities,
|
||||
permissions,
|
||||
allUsers,
|
||||
entitiesGrading,
|
||||
}: Props) {
|
||||
const [modalOpen, setModalOpen] = useState<string>();
|
||||
const router = useRouter();
|
||||
export default function Admin({user, entities, permissions, allUsers, entitiesGrading}: Props) {
|
||||
const [modalOpen, setModalOpen] = useState<string>();
|
||||
const router = useRouter();
|
||||
|
||||
const entitiesAllowCreateUser = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_user"
|
||||
);
|
||||
const entitiesAllowCreateUsers = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_user_batch"
|
||||
);
|
||||
const entitiesAllowCreateCode = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_code"
|
||||
);
|
||||
const entitiesAllowCreateCodes = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"create_code_batch"
|
||||
);
|
||||
const entitiesAllowEditGrading = useAllowedEntities(
|
||||
user,
|
||||
entities,
|
||||
"edit_grading_system"
|
||||
);
|
||||
const entitiesAllowCreateUser = useAllowedEntities(user, entities, "create_user");
|
||||
const entitiesAllowCreateUsers = useAllowedEntities(user, entities, "create_user_batch");
|
||||
const entitiesAllowCreateCode = useAllowedEntities(user, entities, "create_code");
|
||||
const entitiesAllowCreateCodes = useAllowedEntities(user, entities, "create_code_batch");
|
||||
const entitiesAllowEditGrading = useAllowedEntities(user, entities, "edit_grading_system");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<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."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<>
|
||||
<Modal
|
||||
isOpen={modalOpen === "batchCreateUser"}
|
||||
onClose={() => setModalOpen(undefined)}
|
||||
maxWidth="max-w-[85%]"
|
||||
>
|
||||
<BatchCreateUser
|
||||
user={user}
|
||||
entities={entitiesAllowCreateUser}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
isOpen={modalOpen === "batchCreateCode"}
|
||||
onClose={() => setModalOpen(undefined)}
|
||||
>
|
||||
<BatchCodeGenerator
|
||||
entities={entitiesAllowCreateCodes}
|
||||
user={user}
|
||||
users={allUsers}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
isOpen={modalOpen === "createCode"}
|
||||
onClose={() => setModalOpen(undefined)}
|
||||
>
|
||||
<CodeGenerator
|
||||
entities={entitiesAllowCreateCode}
|
||||
user={user}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
isOpen={modalOpen === "createUser"}
|
||||
onClose={() => setModalOpen(undefined)}
|
||||
>
|
||||
<UserCreator
|
||||
user={user}
|
||||
entities={entitiesAllowCreateUsers}
|
||||
users={allUsers}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
isOpen={modalOpen === "gradingSystem"}
|
||||
onClose={() => setModalOpen(undefined)}
|
||||
>
|
||||
<CorporateGradingSystem
|
||||
user={user}
|
||||
entitiesGrading={entitiesGrading}
|
||||
entities={entitiesAllowEditGrading}
|
||||
mutate={() => router.replace(router.asPath)}
|
||||
/>
|
||||
</Modal>
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<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."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<>
|
||||
<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
|
||||
<BatchCreateUser
|
||||
user={user}
|
||||
entities={entitiesAllowCreateUsers.filter(
|
||||
(e) =>
|
||||
e.licenses > 0 &&
|
||||
e.licenses > allUsers.filter((u) => !isAdmin(u) && (u.entities || []).some((ent) => ent.id === e.id)).length,
|
||||
)}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
|
||||
<BatchCodeGenerator
|
||||
entities={entitiesAllowCreateCodes}
|
||||
user={user}
|
||||
users={allUsers}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
|
||||
<CodeGenerator
|
||||
entities={entitiesAllowCreateCode}
|
||||
user={user}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
|
||||
<UserCreator
|
||||
user={user}
|
||||
entities={entitiesAllowCreateUser.filter(
|
||||
(e) =>
|
||||
e.licenses > 0 &&
|
||||
e.licenses > allUsers.filter((u) => !isAdmin(u) && (u.entities || []).some((ent) => ent.id === e.id)).length,
|
||||
)}
|
||||
users={allUsers}
|
||||
permissions={permissions}
|
||||
onFinish={() => setModalOpen(undefined)}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
|
||||
<CorporateGradingSystem
|
||||
user={user}
|
||||
entitiesGrading={entitiesGrading}
|
||||
entities={entitiesAllowEditGrading}
|
||||
mutate={() => router.replace(router.asPath)}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
|
||||
<ExamLoader />
|
||||
{checkAccess(
|
||||
user,
|
||||
getTypesOfUser(["teacher"]),
|
||||
permissions,
|
||||
"viewCodes"
|
||||
) && (
|
||||
<div className="w-full grid grid-cols-2 gap-4">
|
||||
<IconCard
|
||||
Icon={BsCode}
|
||||
label="Generate Single Code"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("createCode")}
|
||||
disabled={entitiesAllowCreateCode.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsCodeSquare}
|
||||
label="Generate Codes in Batch"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("batchCreateCode")}
|
||||
disabled={entitiesAllowCreateCodes.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsPersonFill}
|
||||
label="Create Single User"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("createUser")}
|
||||
disabled={entitiesAllowCreateUser.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsPeopleFill}
|
||||
label="Create Users in Batch"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("batchCreateUser")}
|
||||
disabled={entitiesAllowCreateUsers.length === 0}
|
||||
/>
|
||||
{checkAccess(user, [
|
||||
"admin",
|
||||
"corporate",
|
||||
"developer",
|
||||
"mastercorporate",
|
||||
]) && (
|
||||
<IconCard
|
||||
Icon={BsGearFill}
|
||||
label="Grading System"
|
||||
color="purple"
|
||||
className="w-full h-full col-span-2"
|
||||
onClick={() => setModalOpen("gradingSystem")}
|
||||
disabled={entitiesAllowEditGrading.length === 0}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<section className="w-full">
|
||||
<Lists user={user} entities={entities} permissions={permissions} />
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
|
||||
<ExamLoader />
|
||||
{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
|
||||
<div className="w-full grid grid-cols-2 gap-4">
|
||||
<IconCard
|
||||
Icon={BsCode}
|
||||
label="Generate Single Code"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("createCode")}
|
||||
disabled={entitiesAllowCreateCode.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsCodeSquare}
|
||||
label="Generate Codes in Batch"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("batchCreateCode")}
|
||||
disabled={entitiesAllowCreateCodes.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsPersonFill}
|
||||
label="Create Single User"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("createUser")}
|
||||
disabled={entitiesAllowCreateUser.length === 0}
|
||||
/>
|
||||
<IconCard
|
||||
Icon={BsPeopleFill}
|
||||
label="Create Users in Batch"
|
||||
color="purple"
|
||||
className="w-full h-full"
|
||||
onClick={() => setModalOpen("batchCreateUser")}
|
||||
disabled={entitiesAllowCreateUsers.length === 0}
|
||||
/>
|
||||
{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
|
||||
<IconCard
|
||||
Icon={BsGearFill}
|
||||
label="Grading System"
|
||||
color="purple"
|
||||
className="w-full h-full col-span-2"
|
||||
onClick={() => setModalOpen("gradingSystem")}
|
||||
disabled={entitiesAllowEditGrading.length === 0}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<section className="w-full">
|
||||
<Lists user={user} entities={entities} permissions={permissions} />
|
||||
</section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -71,7 +71,10 @@ export type RolePermission =
|
||||
| "view_workflows"
|
||||
| "configure_workflows"
|
||||
| "edit_workflow"
|
||||
| "delete_workflow";
|
||||
| "delete_workflow"
|
||||
| "view_confidential_exams"
|
||||
| "create_confidential_exams"
|
||||
| "create_public_exams";
|
||||
|
||||
export const DEFAULT_PERMISSIONS: RolePermission[] = [
|
||||
"view_students",
|
||||
@@ -156,4 +159,6 @@ export const ADMIN_PERMISSIONS: RolePermission[] = [
|
||||
"view_workflows",
|
||||
"edit_workflow",
|
||||
"delete_workflow",
|
||||
"create_confidential_exams",
|
||||
"create_public_exams",
|
||||
];
|
||||
|
||||
@@ -158,7 +158,7 @@ const defaultModuleSettings = (module: Module, minTimer: number, reset: boolean
|
||||
examLabel: defaultExamLabel(module),
|
||||
minTimer,
|
||||
difficulty: [sample(["A1", "A2", "B1", "B2", "C1", "C2"] as Difficulty[])!],
|
||||
isPrivate: true,
|
||||
access: "private",
|
||||
sectionLabels: sectionLabels(module),
|
||||
expandedSections: [(reset && (module === "writing" || module === "speaking")) ? 0 : 1],
|
||||
focusedSection: 1,
|
||||
|
||||
@@ -6,6 +6,7 @@ import { SECTION_ACTIONS, SectionActions, sectionReducer } from "./sectionReduce
|
||||
import { Module } from "@/interfaces";
|
||||
import { updateExamWithUserSolutions } from "@/stores/exam/utils";
|
||||
import { defaultExamUserSolutions } from "@/utils/exams";
|
||||
import { access } from "fs";
|
||||
|
||||
type RootActions = { type: 'FULL_RESET' } |
|
||||
{ type: 'INIT_EXAM_EDIT', payload: { exam: Exam; examModule: Module; id: string } } |
|
||||
@@ -121,7 +122,7 @@ export const rootReducer = (
|
||||
...defaultModuleSettings(examModule, exam.minTimer),
|
||||
examLabel: exam.label,
|
||||
difficulty: exam.difficulty,
|
||||
isPrivate: exam.private,
|
||||
access: exam.access,
|
||||
sections: examState,
|
||||
importModule: false,
|
||||
sectionLabels:
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Difficulty, InteractiveSpeakingExercise, LevelPart, ListeningPart, ReadingPart, Script, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
|
||||
import { AccessType, Difficulty, InteractiveSpeakingExercise, LevelPart, ListeningPart, ReadingPart, Script, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
|
||||
import { Module } from "@/interfaces";
|
||||
import Option from "@/interfaces/option";
|
||||
|
||||
@@ -71,7 +71,7 @@ export interface LevelSectionSettings extends SectionSettings {
|
||||
isAudioGenerationOpen: boolean;
|
||||
listeningTopic: string;
|
||||
isListeningTopicOpen: boolean;
|
||||
|
||||
|
||||
// speaking
|
||||
speakingTopic?: string;
|
||||
speakingSecondTopic?: string;
|
||||
@@ -87,7 +87,7 @@ export interface LevelSectionSettings extends SectionSettings {
|
||||
|
||||
export type Context = "passage" | "video" | "audio" | "listeningScript" | "speakingScript" | "writing";
|
||||
export type Generating = Context | "exercises" | string | undefined;
|
||||
export type LevelGenResults = {generating: string, result: Record<string, any>[], module: Module};
|
||||
export type LevelGenResults = { generating: string, result: Record<string, any>[], module: Module };
|
||||
export type Section = LevelPart | ReadingPart | ListeningPart | WritingExercise | SpeakingExercise | InteractiveSpeakingExercise;
|
||||
export type ExamPart = ListeningPart | ReadingPart | LevelPart;
|
||||
|
||||
@@ -97,10 +97,10 @@ export interface SectionState {
|
||||
state: Section;
|
||||
expandedSubSections: number[];
|
||||
generating: Generating;
|
||||
genResult: {generating: string, result: Record<string, any>[], module: Module} | undefined;
|
||||
genResult: { generating: string, result: Record<string, any>[], module: Module } | undefined;
|
||||
levelGenerating: Generating[];
|
||||
levelGenResults: LevelGenResults[];
|
||||
focusedExercise?: {questionId: number; id: string} | undefined;
|
||||
focusedExercise?: { questionId: number; id: string } | undefined;
|
||||
writingSection?: number;
|
||||
speakingSection?: number;
|
||||
readingSection?: number;
|
||||
@@ -111,7 +111,7 @@ export interface SectionState {
|
||||
export interface ListeningInstructionsState {
|
||||
isInstructionsOpen: boolean;
|
||||
chosenOption: Option;
|
||||
|
||||
|
||||
currentInstructions: string;
|
||||
presetInstructions: string;
|
||||
customInstructions: string;
|
||||
@@ -126,8 +126,8 @@ export interface ModuleState {
|
||||
sections: SectionState[];
|
||||
minTimer: number;
|
||||
difficulty: Difficulty[];
|
||||
isPrivate: boolean;
|
||||
sectionLabels: {id: number; label: string;}[];
|
||||
access: AccessType;
|
||||
sectionLabels: { id: number; label: string; }[];
|
||||
expandedSections: number[];
|
||||
focusedSection: number;
|
||||
importModule: boolean;
|
||||
|
||||
@@ -4,11 +4,18 @@ import { ObjectId } from "mongodb";
|
||||
|
||||
const db = client.db(process.env.MONGODB_DB);
|
||||
|
||||
export const getApprovalWorkflows = async (collection: string, ids?: string[]) => {
|
||||
return await db
|
||||
.collection<ApprovalWorkflow>(collection)
|
||||
.find(ids ? { _id: { $in: ids.map((id) => new ObjectId(id)) } } : {})
|
||||
.toArray();
|
||||
export const getApprovalWorkflows = async (collection: string, entityIds?: string[], ids?: string[]) => {
|
||||
const filters: any = {};
|
||||
|
||||
if (ids && ids.length > 0) {
|
||||
filters.id = { $in: ids };
|
||||
}
|
||||
|
||||
if (entityIds && entityIds.length > 0) {
|
||||
filters.entityId = { $in: entityIds };
|
||||
}
|
||||
|
||||
return await db.collection<ApprovalWorkflow>(collection).find(filters).toArray();
|
||||
};
|
||||
|
||||
export const getApprovalWorkflow = async (collection: string, id: string) => {
|
||||
@@ -37,9 +44,9 @@ export const getApprovalWorkflowByFormIntaker = async (entityId: string, formInt
|
||||
export const getApprovalWorkflowsByExamId = async (examId: string) => {
|
||||
return await db
|
||||
.collection<ApprovalWorkflow>("active-workflows")
|
||||
.find({
|
||||
examId,
|
||||
status: { $in: ["pending"] }
|
||||
.find({
|
||||
examId,
|
||||
status: { $in: ["pending"] },
|
||||
})
|
||||
.toArray();
|
||||
};
|
||||
|
||||
@@ -1,7 +1,30 @@
|
||||
import { Exam } from "@/interfaces/exam";
|
||||
import { diff, Diff } from "deep-diff";
|
||||
|
||||
const EXCLUDED_FIELDS = new Set(["_id", "id", "createdAt", "createdBy", "entities", "isDiagnostic", "private"]);
|
||||
const EXCLUDED_KEYS = new Set<string>(["_id", "id", "createdAt", "createdBy", "entities", "isDiagnostic", "private", "requiresApproval", "exerciseID", "questionID"]);
|
||||
|
||||
const PATH_LABELS: Record<string, string> = {
|
||||
access: "Access Type",
|
||||
parts: "Parts",
|
||||
exercises: "Exercises",
|
||||
userSolutions: "User Solutions",
|
||||
words: "Words",
|
||||
options: "Options",
|
||||
prompt: "Prompt",
|
||||
text: "Text",
|
||||
audio: "Audio",
|
||||
script: "Script",
|
||||
difficulty: "Difficulty",
|
||||
shuffle: "Shuffle",
|
||||
solutions: "Solutions",
|
||||
variant: "Variant",
|
||||
prefix: "Prefix",
|
||||
suffix: "Suffix",
|
||||
topic: "Topic",
|
||||
allowRepetition: "Allow Repetition",
|
||||
maxWords: "Max Words",
|
||||
minTimer: "Timer",
|
||||
};
|
||||
|
||||
export function generateExamDifferences(oldExam: Exam, newExam: Exam): string[] {
|
||||
const differences = diff(oldExam, newExam) || [];
|
||||
@@ -9,34 +32,23 @@ export function generateExamDifferences(oldExam: Exam, newExam: Exam): string[]
|
||||
}
|
||||
|
||||
function formatDifference(change: Diff<any, any>): string | undefined {
|
||||
if (!change.path) {
|
||||
if (!change.path) return;
|
||||
|
||||
if (change.path.some((segment) => EXCLUDED_KEYS.has(segment))) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (change.path.some((segment) => EXCLUDED_FIELDS.has(segment))) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert path array to something human-readable
|
||||
const pathString = change.path.join(" \u2192 "); // e.g. "parts → 0 → exercises → 1 → prompt"
|
||||
const pathString = pathToHumanReadable(change.path);
|
||||
|
||||
switch (change.kind) {
|
||||
case "N":
|
||||
// A new property/element was added
|
||||
return `\u{2022} Added \`${pathString}\` with value: ${formatValue(change.rhs)}`;
|
||||
|
||||
case "D":
|
||||
// A property/element was deleted
|
||||
return `\u{2022} Removed \`${pathString}\` which had value: ${formatValue(change.lhs)}`;
|
||||
|
||||
case "E":
|
||||
// A property/element was edited
|
||||
return `\u{2022} Changed \`${pathString}\` from ${formatValue(change.lhs)} to ${formatValue(change.rhs)}`;
|
||||
|
||||
case "A":
|
||||
// An array change; change.item describes what happened at array index change.index
|
||||
case "N": // New property/element
|
||||
return `• Added ${pathString} with value: ${formatValue(change.rhs)}\n`;
|
||||
case "D": // Deleted property/element
|
||||
return `• Removed ${pathString} which had value: ${formatValue(change.lhs)}\n`;
|
||||
case "E": // Edited property/element
|
||||
return `• Changed ${pathString} from ${formatValue(change.lhs)} to ${formatValue(change.rhs)}\n`;
|
||||
case "A": // Array change
|
||||
return formatArrayChange(change);
|
||||
|
||||
default:
|
||||
return;
|
||||
}
|
||||
@@ -44,12 +56,12 @@ function formatDifference(change: Diff<any, any>): string | undefined {
|
||||
|
||||
function formatArrayChange(change: Diff<any, any>): string | undefined {
|
||||
if (!change.path) return;
|
||||
if (change.path.some((segment) => EXCLUDED_FIELDS.has(segment))) {
|
||||
|
||||
if (change.path.some((segment) => EXCLUDED_KEYS.has(segment))) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pathString = change.path.join(" \u2192 ");
|
||||
|
||||
const pathString = pathToHumanReadable(change.path);
|
||||
const arrayChange = (change as any).item;
|
||||
const idx = (change as any).index;
|
||||
|
||||
@@ -57,14 +69,13 @@ function formatArrayChange(change: Diff<any, any>): string | undefined {
|
||||
|
||||
switch (arrayChange.kind) {
|
||||
case "N":
|
||||
return `\u{2022} Added an item at index [${idx}] in \`${pathString}\`: ${formatValue(arrayChange.rhs)}`;
|
||||
return `• Added an item at [#${idx + 1}] in ${pathString}: ${formatValue(arrayChange.rhs)}\n`;
|
||||
case "D":
|
||||
return `\u{2022} Removed an item at index [${idx}] in \`${pathString}\`: ${formatValue(arrayChange.lhs)}`;
|
||||
return `• Removed an item at [#${idx + 1}] in ${pathString}: ${formatValue(arrayChange.lhs)}\n`;
|
||||
case "E":
|
||||
return `\u{2022} Edited an item at index [${idx}] in \`${pathString}\` from ${formatValue(arrayChange.lhs)} to ${formatValue(arrayChange.rhs)}`;
|
||||
return `• Edited an item at [#${idx + 1}] in ${pathString} from ${formatValue(arrayChange.lhs)} to ${formatValue(arrayChange.rhs)}\n`;
|
||||
case "A":
|
||||
// Nested array changes could happen theoretically; handle or ignore similarly
|
||||
return `\u{2022} Complex array change at index [${idx}] in \`${pathString}\`: ${JSON.stringify(arrayChange)}`;
|
||||
return `• Complex array change at [#${idx + 1}] in ${pathString}: ${JSON.stringify(arrayChange)}\n`;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
@@ -73,12 +84,64 @@ function formatArrayChange(change: Diff<any, any>): string | undefined {
|
||||
function formatValue(value: any): string {
|
||||
if (value === null) return "null";
|
||||
if (value === undefined) return "undefined";
|
||||
|
||||
if (typeof value === "object") {
|
||||
try {
|
||||
return JSON.stringify(value);
|
||||
const sanitized = removeExcludedKeysDeep(value, EXCLUDED_KEYS);
|
||||
|
||||
const renamed = renameKeysDeep(sanitized, PATH_LABELS);
|
||||
|
||||
return JSON.stringify(renamed, null, 2);
|
||||
} catch {
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
return JSON.stringify(value);
|
||||
}
|
||||
|
||||
function removeExcludedKeysDeep(obj: any, excludedKeys: Set<string>): any {
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map((item) => removeExcludedKeysDeep(item, excludedKeys));
|
||||
} else if (obj && typeof obj === "object") {
|
||||
const newObj: any = {};
|
||||
for (const key of Object.keys(obj)) {
|
||||
if (excludedKeys.has(key)) {
|
||||
// Skip this key entirely
|
||||
continue;
|
||||
}
|
||||
newObj[key] = removeExcludedKeysDeep(obj[key], excludedKeys);
|
||||
}
|
||||
return newObj;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
function renameKeysDeep(obj: any, renameMap: Record<string, string>): any {
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map((item) => renameKeysDeep(item, renameMap));
|
||||
} else if (obj && typeof obj === "object") {
|
||||
const newObj: any = {};
|
||||
for (const key of Object.keys(obj)) {
|
||||
const newKey = renameMap[key] ?? key; // Use friendly label if available
|
||||
newObj[newKey] = renameKeysDeep(obj[key], renameMap);
|
||||
}
|
||||
return newObj;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert an array of path segments into a user-friendly string.
|
||||
* e.g. ["parts", 0, "exercises", 1, "prompt"]
|
||||
* → "Parts → [#1] → Exercises → [#2] → Prompt"
|
||||
*/
|
||||
function pathToHumanReadable(pathSegments: Array<string | number>): string {
|
||||
return pathSegments
|
||||
.map((seg) => {
|
||||
if (typeof seg === "number") {
|
||||
return `[#${seg + 1}]`;
|
||||
}
|
||||
return PATH_LABELS[seg] ?? seg;
|
||||
})
|
||||
.join(" → ");
|
||||
}
|
||||
|
||||
@@ -64,6 +64,7 @@ export const getExams = async (
|
||||
.collection(module)
|
||||
.find<Exam>({
|
||||
isDiagnostic: false,
|
||||
access: "public",
|
||||
})
|
||||
.toArray();
|
||||
|
||||
@@ -72,7 +73,7 @@ export const getExams = async (
|
||||
...doc,
|
||||
module,
|
||||
})) as Exam[],
|
||||
).filter((x) => !x.private);
|
||||
)
|
||||
|
||||
let exams: Exam[] = await filterByEntities(shuffledPublicExams, userId);
|
||||
exams = filterByVariant(exams, variant);
|
||||
|
||||
@@ -23,7 +23,7 @@ export const sortByModuleName = (a: string, b: string) => {
|
||||
};
|
||||
|
||||
export const countExercises = (exercises: Exercise[]) => {
|
||||
const lengthMap = exercises.map((e) => {
|
||||
const lengthMap = (exercises ?? []).map((e) => {
|
||||
if (e.type === "multipleChoice") return e.questions.length;
|
||||
if (e.type === "interactiveSpeaking") return e.prompts.length;
|
||||
if (e.type === "fillBlanks") return e.solutions.length;
|
||||
@@ -40,37 +40,37 @@ export const countCurrentExercises = (
|
||||
exercises: Exercise[],
|
||||
exerciseIndex: number,
|
||||
questionIndex?: number
|
||||
) => {
|
||||
) => {
|
||||
return exercises.reduce((acc, exercise, index) => {
|
||||
if (index > exerciseIndex) {
|
||||
return acc;
|
||||
}
|
||||
|
||||
let count = 0;
|
||||
|
||||
if (exercise.type === "multipleChoice") {
|
||||
if (index === exerciseIndex && questionIndex !== undefined) {
|
||||
count = questionIndex + 1;
|
||||
} else {
|
||||
count = exercise.questions!.length;
|
||||
if (index > exerciseIndex) {
|
||||
return acc;
|
||||
}
|
||||
} else if (exercise.type === "interactiveSpeaking") {
|
||||
count = exercise.prompts.length;
|
||||
} else if (exercise.type === "fillBlanks") {
|
||||
count = exercise.solutions.length;
|
||||
} else if (exercise.type === "writeBlanks") {
|
||||
count = exercise.solutions.length;
|
||||
} else if (exercise.type === "matchSentences") {
|
||||
count = exercise.sentences.length;
|
||||
} else if (exercise.type === "trueFalse") {
|
||||
count = exercise.questions.length;
|
||||
} else {
|
||||
count = 1;
|
||||
}
|
||||
|
||||
return acc + count;
|
||||
|
||||
let count = 0;
|
||||
|
||||
if (exercise.type === "multipleChoice") {
|
||||
if (index === exerciseIndex && questionIndex !== undefined) {
|
||||
count = questionIndex + 1;
|
||||
} else {
|
||||
count = exercise.questions!.length;
|
||||
}
|
||||
} else if (exercise.type === "interactiveSpeaking") {
|
||||
count = exercise.prompts.length;
|
||||
} else if (exercise.type === "fillBlanks") {
|
||||
count = exercise.solutions.length;
|
||||
} else if (exercise.type === "writeBlanks") {
|
||||
count = exercise.solutions.length;
|
||||
} else if (exercise.type === "matchSentences") {
|
||||
count = exercise.sentences.length;
|
||||
} else if (exercise.type === "trueFalse") {
|
||||
count = exercise.questions.length;
|
||||
} else {
|
||||
count = 1;
|
||||
}
|
||||
|
||||
return acc + count;
|
||||
}, 0);
|
||||
};
|
||||
};
|
||||
|
||||
export const countFullExams = (stats: Stat[]) => {
|
||||
const sessionExams = groupBySession(stats);
|
||||
|
||||
@@ -2,7 +2,6 @@ import { EntityWithRoles, Role } from "@/interfaces/entity";
|
||||
import { PermissionType } from "@/interfaces/permissions";
|
||||
import { User, Type, userTypes } from "@/interfaces/user";
|
||||
import { RolePermission } from "@/resources/entityPermissions";
|
||||
import axios from "axios";
|
||||
import { findBy, mapBy } from ".";
|
||||
import { isAdmin } from "./users";
|
||||
|
||||
@@ -55,11 +54,11 @@ export function groupAllowedEntitiesByPermissions(
|
||||
const userEntity = userEntityMap.get(entity.id);
|
||||
const role = userEntity
|
||||
? roleCache.get(userEntity.role) ??
|
||||
(() => {
|
||||
const foundRole = entity.roles.find(r => r.id === userEntity.role) || null;
|
||||
roleCache.set(userEntity.role, foundRole);
|
||||
return foundRole;
|
||||
})()
|
||||
(() => {
|
||||
const foundRole = entity.roles.find(r => r.id === userEntity.role) || null;
|
||||
roleCache.set(userEntity.role, foundRole);
|
||||
return foundRole;
|
||||
})()
|
||||
: null;
|
||||
|
||||
permissions.forEach(permission => {
|
||||
@@ -76,7 +75,7 @@ export function groupAllowedEntitiesByPermissions(
|
||||
export function findAllowedEntities(user: User, entities: EntityWithRoles[], permission: RolePermission) {
|
||||
if (["admin", "developer"].includes(user?.type)) return entities
|
||||
|
||||
const allowedEntities = entities.filter((e) => doesEntityAllow(user, e, permission))
|
||||
const allowedEntities = (entities ?? []).filter((e) => doesEntityAllow(user, e, permission))
|
||||
return allowedEntities
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import {WithLabeledEntities} from "@/interfaces/entity";
|
||||
import {User} from "@/interfaces/user";
|
||||
import {USER_TYPE_LABELS} from "@/resources/user";
|
||||
import {capitalize} from "lodash";
|
||||
import { WithLabeledEntities } from "@/interfaces/entity";
|
||||
import { User } from "@/interfaces/user";
|
||||
import { USER_TYPE_LABELS } from "@/resources/user";
|
||||
import { capitalize } from "lodash";
|
||||
import moment from "moment";
|
||||
import ExcelJS from "exceljs";
|
||||
|
||||
export interface UserListRow {
|
||||
name: string;
|
||||
@@ -17,6 +18,22 @@ export interface UserListRow {
|
||||
gender: string;
|
||||
}
|
||||
|
||||
const indexToLetter = (index: number): string => {
|
||||
// Base case: if the index is less than 0, return an empty string
|
||||
if (index < 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Calculate the quotient for recursion (number of times the letter sequence repeats)
|
||||
const quotient = Math.floor(index / 26);
|
||||
|
||||
// Calculate the remainder for the current letter
|
||||
const remainder = index % 26;
|
||||
|
||||
// Recursively call indexToLetter for the quotient and append the current letter
|
||||
return indexToLetter(quotient - 1) + String.fromCharCode(65 + remainder);
|
||||
};
|
||||
|
||||
export const exportListToExcel = (rowUsers: WithLabeledEntities<User>[]) => {
|
||||
const rows: UserListRow[] = rowUsers.map((user) => ({
|
||||
name: user.name,
|
||||
@@ -33,10 +50,31 @@ export const exportListToExcel = (rowUsers: WithLabeledEntities<User>[]) => {
|
||||
gender: user.demographicInformation?.gender ? capitalize(user.demographicInformation.gender) : "N/A",
|
||||
verified: user.isVerified?.toString() || "FALSE",
|
||||
}));
|
||||
const header = "Name,Email,Type,Entities,Expiry Date,Country,Phone,Employment/Department,Gender,Verification";
|
||||
const rowsString = rows.map((x) => Object.values(x).join(",")).join("\n");
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet("User Data");
|
||||
const border: Partial<ExcelJS.Borders> = { top: { style: 'thin' as ExcelJS.BorderStyle }, left: { style: 'thin' as ExcelJS.BorderStyle }, bottom: { style: 'thin' as ExcelJS.BorderStyle }, right: { style: 'thin' as ExcelJS.BorderStyle } }
|
||||
const header = ['Name', 'Email', 'Type', 'Entities', 'Expiry Date', 'Country', 'Phone', 'Employment/Department', 'Gender', 'Verification'].forEach((item, index) => {
|
||||
const cell = worksheet.getCell(`${indexToLetter(index)}1`);
|
||||
const column = worksheet.getColumn(index + 1);
|
||||
column.width = item.length * 2;
|
||||
cell.value = item;
|
||||
cell.font = { bold: true, size: 16 };
|
||||
cell.border = border;
|
||||
|
||||
return `${header}\n${rowsString}`;
|
||||
});
|
||||
rows.forEach((x, index) => {
|
||||
(Object.keys(x) as (keyof UserListRow)[]).forEach((key, i) => {
|
||||
const cell = worksheet.getCell(`${indexToLetter(i)}${index + 2}`);
|
||||
cell.value = x[key];
|
||||
if (index === 0) {
|
||||
const column = worksheet.getColumn(i + 1);
|
||||
column.width = Math.max(column.width ?? 0, x[key].toString().length * 2);
|
||||
}
|
||||
cell.border = border;
|
||||
});
|
||||
})
|
||||
|
||||
return workbook.xlsx.writeBuffer();
|
||||
};
|
||||
|
||||
export const getUserName = (user?: User) => {
|
||||
|
||||
Reference in New Issue
Block a user